Caso de estudio: The Boston Globe
| Título | Caso de estudio: The Boston Globe |
|---|---|
| Tipo de Proyecto | Proyecto de Taller |
| Período | 2013-2013 |
| Asignatura | Gráfica Digital 2013, |
| Del Curso | Gráfica Digital 2013, |
| Carreras | Diseño Gráfico"Diseño Gráfico" is not in the list (Arquitectura, Diseño, Magíster, Otra) of allowed values for the "Carreras Relacionadas" property. |
| Alumno(s) | Juan Antonio Godoy |
| Profesor | Katherine Exss |
| URL | http://www.bostonglobe.com/ |
The Boston Globe: Sitio responsivo
Presentación
The Boston Globe se ha erigido en los últimos meses como un referente del Responsive Web Design al presentar la nueva estructura de su web, adaptable según la resolución de diversos dispositivos. Se trata de un esfuerzo por situarse como referente en el mundo multipantalla en el que estamos sumergidos. Es conveniente que las marcas se adapten al nuevo entorno digital con unos soportes muy variados: ordenadores de sobremesa, portátiles, smartphones, tablets, e-readers, etc.
Un buen trabajo de Responsive Web Design permite lograr tener las webs de la empresa perfectamente adaptada a los diversos tamaños de pantalla. La especificidad en el caso del The Boston Globe es el carácter pionero del proyecto. Desde un punto de vista técnico, ha recibido la admiración del sector porque ha mostrado las capacidades que ofrece el código HTML 5. Otros muchos grandes medios internacionales como BBC, Time o The Guardian han seguido sus pasos.
Aquí puede observarse a grandes rasgos la interacción responsiva del sitio:
Análisis de sitio
Visualización
Wireframe e interfaz del sitio:
Estado 1
Estado 1
Diferentes estados de diagramación
Existen múltiples estados de diagramación en la grilla del sitio a medida que la ventana de navegación se hace más estrecha. Sin embargo, los estados más visibles de su ruptura son 5:
Estado 1
Estado 2
Estado 3
Estado 4
Estado 5
División de columnas
Se realiza un estudio cuantitativo de columnas que rigen la diagramación en cada uno de los estados. A cada columna se le otorga una medida en Píxeles. Las columnas llevan distinto color para identificar secciones diferentes.
Estado 1
- Error al crear miniatura: Archivo más grande que 25 MP
Estado 2
- Error al crear miniatura: Archivo más grande que 25 MP
Estado 3
- Error al crear miniatura: Archivo más grande que 25 MP
Estado 4
- La home el sitio abarca de una a tres columnas.
- A medida que se hace más estrecho el ancho de la ventana del navegador, se van achicando las imágenes y las columnas, sin embargo, los textos mantienen su tamaño. En el caso de los "botones", su grandor aumenta. Esta logística otorga sentido para la interacción con los dedos de la mano y la visión, por ejemplo, cuando se navega en un teléfono móvil.
Elementos visuales
Los elementos visuales se entienden como parte de la estructura básica que yergue la estructura de un sitio web; a saber: "Header" y "Footer". En esta sección se puede observar el activo "Responsive" en los diferentes estados de diagramación.
- El "Header" muestra cambios importantes en la barra de navegación del sitio, reduciendo su amplia gama de rótulos desde el primer estado hasta el quinto estado. Las diferentes fases consideran cuantitativamente dicha reducción:
- Primer estado: 11 rótulos.
- Segundo y tercer estado: 3 rótulos.
- Cuarto y quinto estado: 2 rótulos.
- Por otro lado, la ventana del "buscador" sólo está presente en los tres primeros estados. Luego, ésta pasa a ser un botón que al hacer "click" despliega la ventana anterior.
- Cabe destacar también el leve movimiento del logo en el sitio, pues éste se va adaptando también al estrecharse la ventana. En el "estado 4" es clara dicha adpatación, dejando de ocupar la zona del centro y ubicándose al lado izquierdo del header para no tener que obstruir la barra de navegación, ahora diseñada en dos rótulos.
- El Footer da cuenta visiblemente de un cambio en el número de columnas de los rótulos "My account", "Contact", "Social" y "More":
- Primer y segundo estado: 4 columnas.
- Tercer y cuarto estado: 2 columnas.
- Quinto estado: 1 columna.
- El traspaso del "cuarto" al "quinto" estado evidencia un cambio rotundo, puesto que los enlaces bajo los rótulos pasan a ser botones de longitud considerable.
- No deja de ser notable también la transformación del ancho y el largo de la sección, aumentando la longitud del "Scroll".
Observación de Estilos
Se procede a identificar los estilos escogidos para el diseño del sitio, con el objetivo de evidenciar comparativamente, en ciertos casos, el cambio de estructura que ejerce el Diseño responsivo.
Estilos tipográficos
Los estilos tipográficos denotan la existencia de cuatro diferentes tipografías; a saber: "Benton Sans", "Miller Headline", "Georgia" y "Helvética". Los colores de tipografía varían en dos: "negro #000" y "gris #464646". Es importante destacar que dependiendo del dispositivo que se esté usando, se le asigna una medida en pixeles al font-size. Esta medida se multiplica por la medida "em" y otorga una medida aproximada en pixeles de lo que se verá en la pantalla. En este caso, los "em" son observados desde la pantalla del ordenador.
Tamaño de imágenes
Se presentan 7 tamaños diferentes de imágenes. 5 pertenecen a un formato más cuadrado y 2 a un formato rectangular.
Elementos variables de interacción
El estudio de los elementos de interacción variable considera los elementos que pueden ser activados por un "click"; a saber: Barras de navegación y botones. Se procede a identificar cada uno de estos elementos en los estados diferentes según el Diseño responsivo. Los elementos de interacción identificados son 5:
- Barra de navegación principal.
- Botón del "tiempo".
- Buscador.
- Barra de información inferior.
- Menú desplegable.
Se pueden extraer varias observaciones de acuerdo a lo estudiado:
- La barra de navegación, como ya se vio anteriormente, pasa de ofrecer 11 rótulos a 2 rótulos, adhiriendose un tercero que vendría a ser el botón del buscador.
- El botón del "tiempo" resalta por su imagen ilustrativa sobre la hora del día y el estado del clima. Esta imagen va variando de ubicación y tamaño, así también el Logo del sitio. Por último, puede verse cómo el número de grados de temperatura sólo está considerablemente visible en el "estado 1, 2 y 3". Luego adquiere un tamaño menor.
- El buscador, a medida que los estados estrechan la pantalla, va adquiriendo tamaño en su grosor, con fin predecible de ser más accesible a la "mano".
- La barra de información inferior, por el contrario, va haciéndose más estrecha a lo ancho, pero adquiere tamaño en su grosor vertical. Puede denotarse también cómo el Logo del sitio sólo está presente en el "estado 1", luego la tipografía se adapta en dos líneas de lectura.
- El menú desplegable es un ejemplo que se ha dividido en dos momentos para observar cómo el botón de rótulo se va ubicando en diferentes posiciones dependiendo del estado. Así también puede visualizarse los desfases del menú desplegable:
- Sólo en el "estado 1" se presenta toda la gama de rótulos en la barra de navegación. En este estado, al realizarse el despliegue del menú, pueden contarse 4 columnas.
- En el "estado 2 y 3" los rótulos se han vuelto 3. Y es necesario hacer un "click" para encontrarnos con el enlace "News" que se observaba anteriormente. Las columnas del menú desplegable se reducen a 2.
- En el "estado 4" el rótulo de "sections" a cambiado de lugar, pasando a la centro-derecha del Header. Sin embargo, el número de columnas en el menú desplegable se mantienen.
- En el "estado 5" los rótulos de "sections", "My saved" y el "buscador" adoptan todo el ancho de la pantalla, reduciendo el diseño a uno más simple y sin ruido. Ya no existe variedad de columnas en el menú desplegable. Todos los enlaces se atienen al grosor de una columna.
Elementos Fijos de interacción
Los elementos fijos de interacción son aquellos elementos que no varían en el diseño del sitio.
Conclusiones de análisis de sitio
- The Boston Globe es un sitio de fácil interacción. Ocurre que, a primera vista, parece ser complejo por la cantidad de información que ofrece. Sin embargo, esto es comprensible para un medio de noticias internacional y, a medida que se avanza en la lectura, se denota que la densidad no es un obstáculo. Además, su carácter responsivo es un logro no menor para dicha densidad, que debe ser medida y diagramada para todos sus elementos.
- La diagramación es bastante eficiente en todos sus estados de ruptura. Las columnas se remiten a 3 como máximo, lo que se agradece "visiblemente".
- Los elementos de interacción están pensados en su tamaño múltiple y necesario para una navegación sin contrapuntos. El sitio no requiere de una profundidad mayor para poder hallar lo que se está buscando, ya que su longitud de "ventana" permite el desplante de casi toda la información que el medio pretende ofrecer.
- Los elementos fijos de interacción son muy acotados en número y a caso insignificantes para acceder a el contenido primordial.
- Los estilos de todo tipo también son muy recatados. En un sitio de tanto contenido se piensa en la sutilidad del diseño para atraer al usuario.
