Casos de Estudio: Belelú y Create Digital Media

De Casiopea





Caso de Estudio
NombreBelelú // Create Digital Media
Período2013-2013
Palabras Claveresponsive design
Estudiado enGráfica Digital 2013
Estudiado porCaterina Da Silva
Descripciónhttp://www.belelu.com/

Belelú es un blog que trata temáticas dirigidas a la mujeres de habla hispana. Tienen gran presencia en Internet debido a su alto énfasis en las redes sociales.


http://createdm.com/

Create Digital Media es un grupo de diseñadores e ingenieros informáticos que se dedican a crear aplicaciones para móvil. En su sitio tienen información básica de su trabajo y de cómo contactarlos.

En este Caso de Estudio, tomaré estos sitios para ver cómo se comporta su diseño responsivo.


Belelú

Introducción

Sabiendo que Belelú es un blog que trata temas de actualidad dirigida al público femenino adulto-joven, me encuentro con un sitio algo caótico en su Inicio, ya que no hay una jerarquía clara en cuanto al orden de las cosas, ni una rotulación clara de las secciones dentro de la misma.

GD-02.5-Belelu-Home.png

Para analizar más a fondo su distribución gráfica, elijo una noticia del sitio que contiene todo lo que el sitio puede ofrecer: una Galería de fotos, Imágenes, un Video y Comentarios, además de los elementos esenciales del sitio (menú y footer).

GD-02.5-Belelu-Noticia.png

Distribución

Puntos de quiebre

Para comenzar a entender mejor el sitio, comencé moviendo libremente el contenedor del browser mientras revisaba distintos artículos; de esta manera, veo que este sitio es líquido y no responsivo, ya que se adaptaba automáticamente a cualquier tamaño al que lo expusiese.

Luego, lo estresé hasta encontrar sus puntos de quiebre, los cuales eran a los 615px, 975pxy 1215px. Supuse lo siguiente: [400px a 614px] Móviles (horizontal y vertical), [615px a 974px] Tablets (horizontal y vertical), [975px a 1214px] Tablets horizontales y Computadores portátiles pequeños y [1215 al ∞] Computadores de escritorio.

GD-02.5-Belelu-QuiebreHome.png

Grilla

La grilla del Home al analizarla, comienza a demostrar porqué es tan caótico el sitio: no hay una congruencia entre ellas.

Tenemos en el primer caso cuatro columnas iguales de 195px y una quinta de 275px que no tiene ninguna relación con las otras. En el caso siguiente, se elimina una de las columnas de 195px, pero la de 275px queda igual, ni siquiera cambia su tamaño.

En el tercer caso, el estilo de las columnas cambia, ya que se les agrega un borde que los encuadra, marcando de esta manera la forma en que se ordenan las noticias. Además, se elimina la columna ancha.

Ya en el último caso, que sería para móviles, se reducen (o amplían) todas las noticias a una sola columna, dejando las noticas populares en un fondo oscuro a dos columnas.

GD-02.5-Belelu-GrillaHome.png

El mayor problema de una grilla desproporcionada, es que el ojo humano es sensible a las imperfecciones, lo que puede resultar en una experiencia poco agradable y menos fluida de un usuario.

Distribución y organización de contenidos

Separé los contenidos de la página de inicio por colores para entender mejor cómo se iban ordenando a medida que cambiaba el tamaño de la pantalla.

Los menúes los analizaré con mayor profundidad más adelante, pero podemos ver que el menú principal su tamaño se mantiene igual en todas las pantallas, a pesar de que en las dos más pequeñas cambia a ser un botón que despliega un menú y el menú secundario se elimina.

Podemos ver también la poca congruencia con respecto a los tamaños de las noticias. La noticia destacada (caja rosado oscuro), en las cuatro primeras pantallas, cambia sólo su ancho hasta que llega al móvil y cambia completamente. Caso similar entre las noticias populares (cajas naranjas) y las noticias recientes (cajas verdes), las cuales son distintas en todas las pantallas sin un hilo conductor que haga sentido entre ellas.

GD-02.5-Belelu-DistribucionHome.png

Comportamiento de Menúes

El menú tiene dos versiones dentro del sitio.

  1. ]∞,975px]: Se muestra en su máxima expresión, mostrando todas las categorías del sitio e incluye un segundo menú que muestra los tags más generales de las noticias. Al costado del logo del sitio, hay un ícono de la red a la que pertenece Belelú, [Betazeta Networks], el cual al hacerle click se despliega para mostrar todos los sitios de la red.
  2. [974px,320px]: El menú se reduce a un sólo botón, que al hacerle click se despliega desde la izquierda de la pantalla mostrando el menú principal y el menú de la network Betazeta.

GD-02.5-Belelu-MenuPrimario.png

Comportamiento de Buscador

Al estar contenido en el menú principal, el buscador también tiene dos estados.

  1. Al estar sobre los 975px, es un ícono que al apretarlo se despliega la caja de texto para tipear la búsqueda, donde los resultados se despliegan hacia abajo, sin redireccionar a otra página.
  2. Bajo los 974px, sólo se muestra al desplegarse el menú, pero sigue funcionando de la misma manera.

GD-02.5-Belelu-Buscador.png

Comportamiento de Footer

El footer se compone de dos divs que abarcan la horizontalidad de la página, que se separan en dos divs a su vez. Éstos se van apretando hasta que no caben los dos divs en el ancho y quedan uno sobre el otro. Ésto le sucede primero al footer de los teléfonos ya que cuenta con mayor contenido que el de Belelú.

GD-02.5-Belelu-Footer.png

Comportamiento de Imágenes y Videos

Las imágenes y videos funcionan de la misma manera, ya que se ajustan al 100% del ancho del div que los contiene.

Imagen GD-02.5-Belelu-Imagenes.png

Video GD-02.5-Belelu-Videos.png

Comportamiento de Galería de Imágenes

Creo que la galería de imágenes es lo menos tratado del sitio, ya que en ninguna resolución funcionaba perfecto. Como podemos ver en los 1440px, las imágenes de la galería se pierden en la derecha de la página, lo cual sigue sucediendo en los 1240px. En los 720px, es quizás donde mejor funciona ya que se pueden ver todas las imágenes de la galería, pero pierden el margen izquierdo y queda mucho al lado derecho. La versión móvil de 400px es la que tiene más problemas, ya que las flechas para cambiar la foto tapan el título de la foto actual, el fondo negro semitransparente no alcanza a cubrir la extensión de la galería en miniatura, quedando algunas de ellas sobre el texto del artículo.

GD-02.5-Belelu-Galeria.png

Análisis tipográfico

Tipografías

En Belelú ocupan dos tipografías: Universe para títulos e hipervínculos, y Adamina para textos largos de sus artículos.

GD-02.5-Belelu-Univers.gif GD-02.5-Belelu-Adamina.png

Comportamiento de Tipografía

La tipografía Adamina mantiene el mismo tamaño en todas sus versiones, su interlineado también. Lo único que cambia es la caja del texto, que depende del ancho del div que lo contiene.

En cambio, la Universe de los títulos, que dependiendo del ancho del div donde está inserta, va variando su tamaño.

GD-02.5-Belelu-Comportamiento Typo.png

Create Digital Media

Introducción

Como primera impresión, este sitio tenía bastante contenido, multicolumna, uso de imágenes, variedad de títulos, íconos e incluso un mapa incrustado. Además de que al comenzar a estresar el browser a variados tamaños y proporciones, éste funcionaba bastante bien y sin problemas a primera vista. La elección no fue por el contenido en sí, pero resulta ser un grupo de diseñadores e informáticos dedicados a la creación de aplicaciones móviles, por lo que no me parece extraño que hayan hecho un sitio responsive, que además sea limpio y agradable a la vista.

Grilla

Para comenzar a analizar este sitio, utilicé la aplicación para Google Chrome, Awesome Screenshot para capturar las pantallas del sitio completamente, y mediante la aplicación resizeMyBrowser estresé el sitio a las resoluciones de pantalla más comunes de visualización para cualquier sitio. Éstas serían 1440px para una pantalla de un iMac de 27 pulgadas, 1280px para un notebook de 15 pulgadas, 960px y 720px para una tablet, 480px y 360px para smartphones.

Archivo:GD-02--Create-Digital-Media-Resoluciones típicas.png


A partir de ello, establezco la grilla que posiblemente usaron, que resulta ser de 3 columnas fijas de 340px para los anchos mayores a 1280 y luego varían su grosor dependiendo de la pantalla en la que se encuentran. Recién para la resolución de 480px se cambia a una gran columna, la cual también varía su ancho dependiendo de la resolución total de la pantalla.

Archivo:GD-02--Create-Digital-Media-Resoluciones típicas grilla.png

Análisis de Comportamiento de Responsividad por página

Decidí analizar el sitio de acuerdo a cada página que existe en él, para ver todos los casos posibles, para luego analizarlo en conjunto en la conclusión.

Home

GD-02--Create-Digital-Media-Screencap---01-Home.png


About

Ver imagen acá


Work

Ver imagen acá


Blog

Ver imagen acá


Jobs

GD-02--Create-Digital-Media-Screencap---05-Jobs.png


Contact

GD-02--Create-Digital-Media-Screencap---06-Contact.png