Caso de Estudio
Nombre	Food Sense
Período	2013-2013
Estudiado en	Gráfica Digital 2013
Estudiado por	Bernardo Silva

Introducción

Con el aumento exponencial de dispositivos móviles, hoy en día es impensable no tomar en cuenta la cantidad personas que visitan sitios web a través de celulares o tablet.

Controlar como se verá el sitio en distintos dispositivos es posible gracias al Responsive Design, este permite crear un solo diseño que es capaz de ajustarse a las cualidades de distintos dispositivos.

Con la cascada de estilos se define un rango de parámetros, los cuales irán cambiando dependiendo donde se visualice el sitio, ajustándose en la relación de tamaño en la pantalla

Presentación del Sitio

Food Sense http://foodsense.is/ es un sitio para ofrece recetas de comida vegetariana, ya sea para cocineros novatos o avanzados. El sitio permite que las personas contribuyan con sus recetas y experiencias.

Estructura

Grilla

A continuación se muestra como de diagrama la grilla.

Solo se midió como reacciona la home

1440 x 900
1024 x 768 Horizontal
1024 x 768 Vertical
960 x 640 Horizontal
640 x 960 Vertical
480 x 320 Horizontal
320 x 480 Vertical

1440 x 900
Simula el tamaño de un ordenador o un notebook de gran tamaño
presenta 5 columnas, 4 mas anchas que una.

1024 x 768 Horizontal y Vertical
Resolución que tiene un Ipad.
Cuando esta en horizontal, conserva las 5 columnas, al ver el sitio de manera vertical, este se reduce a 2 columnas.

960 x 640 Horizontal y Vertical
Resolución de un Iphone4
Se reduce a 4 columnas cuando esta de manera horizontal, verticalmente quedan 2 de estas.

480 x 320 Horizontal y Vertical
Tamaño de un Iphone y Smartphones
Visualizado horizontalmente queda en 2 columnas, una en modo vertical.

Elementos

Como el sitio se adapta a distintos tamaños, la organización estructural cambia.

1440 x 900
1024 x 768 Horizontal
1024 x 768 Vertical
480 x 320 Horizontal
480 x 320 Vertical
640 x 960 Vertical
960 x 640 Horizontal

El menú lateral (amarillo) es el que mas sufre cambios, al punto de quedar poco visible. Por el contrario, la barra de búsqueda y suscripción (verde) pasa por varios estados pero sigue teniendo el mismo tamaño en la tipografía. Las redes sociales fueron descaradas de inmediato.

Tipografía

En la siguiente imagen se busca ver cual es el cambio en el tamaño de la tipografía.

Del estudio se puede concluir que:

La tipografía no cambia mucho, es el tamaño, la cagas de texto son las que se modifican y cambian de lugar, es decir, se trabajan las grillas y la disposición de los elementos (ver la sección "grilla" y "elementos")