Caso de estudio: Café Evoke
| Caso de Estudio | |
| Nombre | Café Evoke |
|---|---|
| Período | 2014-2014 |
| Palabras Clave | Responsive design |
| Estudiado en | Gráfica Digital 2014 |
| Estudiado por | Alison Saravia |
| URL | http://cafeevoke.com/ |
Responsive Design
Que un sitio sea "responsive" implica que podrá adaptarse a las 3 plataformas digitales más comunes que existen hoy en día (Tablet, móvil y escritorio), permitiendo así un fácil acceso para el usuario.
A continuación se presenta un análisis sobre los elementos que componen el sitio web de Café Evoke y se mostrará cuáles son los cambios más relevantes cuando se pasa de una plataforma a otra; también las ventajas y desventajas de las decisiones que se tomaron respecto a su adaptabilidad, y una conclusión final que permita entender la importancia de la creación de sitios responsivos en la actualidad.
Introducción
El sitio responsivo seleccionado para ser analizado es el de "Café Evoke", un café boutique ubicado en Oklahoma (USA) que además ofrece servicio de cervecería y venta de vinos entre otras cosas. Café Evoke
Público objetivo
El sitio se encuentra fundamentalmente dirigdo a quienes deseen encontrar un café boutique que además de presentarse en el sitio web, entregue información sobre el "menú" que ofrecen y los servicios que realizan aparte de funcionar como una cafetería común.
Café Evoke
Home
tamaños
Primero que todo una vista general a las dimensiones de escritorio, tablet y móvil del home del sitio.
Comparación entre tamaños.
En cuanto al cambio de las dimensiones entre las 3 plataformas, se puede inferir a simple vista que a medida que el tamaño disminuye, la estructura va cambiando, y en el caso del dispositivo móvil, se van eliminando algunos contenidos.
Comportamiento de las imágenes del slide
En el home del sitio existe un slide con imágenes que pretende mostrar al usuario los servicios que ofrecen y el modo en el que lo ofrecen para distinguirse de otros "Café Boutique". Las imágenes son las siguientes:
El tamaño de éstas imágenes en el dispositivo web es de 1000px X 400px y en el dispositivo tablet se reducen a 700px X 400px; es decir, solo el ancho de la imagen disminuye.
En el dispositivo móvil el slide desaparece; no hay imagen.
- Cabe destacar que la reducción de las imágenes en tablet, genera que éstas se "corten", por lo tanto se deduce que lo que cambia de tamaño es el cuadro que las contiene. No la imagen en sí.
Grilla
El sitio web resulta ser bastante sencillo al menos en el home, ya que se observa una grilla de 2 columnas simétricas en el dispositivo web y tablet (la única diferencia será el tamaño de los anchos entre las columnas Web y Tablet, pero no su disposición) mientras que en el dispositivo móvil se reduce a solamente 1 columna. Los cambios no son tan significativos en el home.
Secciones
Representación en colores de cómo se encuentran dispuestos los elementos y contenidos del home del sitio y cómo van desapareciendo algunos cuando se pasa del dispositivo web al dispositivo móvil.
Es evidente el cambio que sufre el sitio en el dispositivo móvil.
Éste solo mantiene el contenido del body correspondiente al contacto y los horarios del café.
De cierto modo tiene lógica que sea así viéndolo del punto de vista de que se está entregando la información más básica de modo que el usuario no tenga más remedio que dirigirse al local de una vez. (Esto pensándolo claramente para quienes viven en Oklahoma).
Para tener un enfoque más central se realiza una comparación a fondo entre las secciones en las que se divide un sitio (Header, Body y Footer).
Header:
Escritorio - tablet - móvil
Elementos del Header:
- Redes sociales
- Nombre/ Logo
- Slogan del café
- Barra de menú (The shop, about, menu, contact, blog, catering)
En el header del sitio existen los siguientes elementos comunes entre la plataforma web, tablet y móvil:
- Redes sociales:
En el caso de las redes sociales, en la plataforma web y tablet aparecen expresadas de forma escrita "Follow on twitter" y "Like on facebook"; en cambio en dispositivos móviles se elimina el texto escrito y se emplean los isotipos de twitter y facebook.
- Logo del sitio:
En la plataforma web y tablet el logo se encuentra incorporado dentro de la tipografía utilizada para el nombre del café (Evoke). Y en los dispositivos móviles se elimina el nombre del café y se mantiene únicamente el logo.
- Barra de menú horizontal:
En la plataforma Web la barra de menú se encuentra dividida por sectores. Una zona ubicada en el lado izquierdo y otra ubicada en el lado derecho, ambos sectores divididos por el nombre/logo del sitio. En el dispositivo tablet 2 de los elementos de la barra de menú (menú - contact) toman posición justo debajo del nombre y logo del café. En el dispositivo móvil en vez de existir una sola barra de menú, se generan dos a partir de la original. Cada una de ellas con 3 elementos.
Elementos diferentes entre las 3 plataformas:
En la plataforma web y tablet aparece escrito el slogan del café bajo su nombre:
"sip slowly,sip often"(bebe lento, bebe con frecuencia)'
En cambio en los dispositivos móviles no aparece el slogan, pero si aparece una frase que pretende expresar una invitación para los clientes:
A lovely spot for drinks, eats and conversation. come sip with us. (un encantador lugar para tragos, comidas y conversaciones. ven y bebe con nosotros) .
Body:
Escritorio - tablet - móvil
Elementos del Body:
- 1.Slideshow de imágenes
- 2.Reseña para cada imagen
- 3.Cuadro de texto que invita al cliente
- 4.Latest from the blog
- 5.Contacto y horarios
- 6.Newsletter
El body correspondiente a la plataforma web y tablet presenta una subdivisión de 6 secciones: un slideshow de imágenes, una pequeña reseña sobre cada imagen del slideshow, otra donde se presenta una frase que invita a los clientes a visitar el café boutique, blog, contacto y horarios, y finalmente un formulario para recibir el Newsletter del café.
La única diferencia existente entre web y tablet será el tamaño de los recuadros que contienen a los elementos.
Por ejemplo el recuadro donde se ubica la información de contacto y horarios (número 5)cambia su disposición. (En web tiene una disposición horizontal, en tablet vertical).
En el body para dispositivos móviles solo se presenta la sección de contacto y horario de atención.
Escritorio - tablet - móvil
Elementos del Footer:
- Logo
- Barra de menú inferior (The shop, about, menu, retail, contact, catering, blog).
- Derechos del sitio
El footer del sitio se mantiene igual en Web y Tablet; no desaparecen elementos, solo cambian los tamaños. En dispositivos móviles el footer pierde el logotipo del sitio y solo conserva la barra de menú inferior y los derechos reservados del local.
- Cabe destacar que dentro de la barra de menú del footer aparece la sección Retail, que en la barra de menú del header no aparece.
The Shop
tamaños
Vista general a las dimensiones de escritorio, tablet y móvil de la subpágina "The shop".
Comparación entre tamaños.
comportamiento de las imágenes
En este caso, la imagen de esta sección del sitio web no pertenece a un slide, por ende se encuentra presente en los 3 dispositivos. A diferencia del Home, cuando se pasa de un dispositivo a otro, se reduce el tamaño de la imagen original pero no se corta.
Grilla
La grilla de esta sección es bastante peculiar. No es simétrica y no responde a ningún tipo de acuerdo "mutuo" en el sitio. En la plataforma web se distinguen 2 columnas, pero no comparten el mismo ancho. En el caso de Tablet y móvil la columna es solo una.
Secciones
Representación en colores de cómo se encuentran dispuestos los elementos y contenidos de la sección "The shop" del sitio y cómo va cambiando su estructura cuando se pasa de un dispositivo a otro.
En este caso, ningún elemento desaparece. Todos se mantienen y se van ordenando de acuerdo a la plataforma que los contiene.
Se mantienen de la misma forma que en el Home del sitio
Body
Escritorio - Tablet - Móvil
Elementos del Body:
- 1.Imagen
- 2.Notificación sobre apertura del local
- 3.Horario
- 4."Currently on the bar"
- 5."Today's Specials"
- 6."Here's where we're located" (Mapa)
- 7."Upcoming events"
En las 3 plataformas el body se encuentra dividido en 7 secciones distintas. Solo cambia la estructura en la que se presentan. Y en el caso del Mapa que aparece en Web y tablet, en dispositivos móviles desaparece y es reemplazado por la dirección de forma escrita.
Catering
Tamaños
Vista general de los 3 tamaños de la sección "Catering" del sitio de Evoke.
Comparación entre tamaños
Comportamiento de las imágenes
La imagen de esta sección es de un tamaño un poco menor a la imagen de la sección "The Shop". Y pasa lo mismo con el recorte de la fotografía que pasa con las imágenes del slide del home.
Otra situación en cuanto al comportamiento de la imagen en esta sección, es cuando con el mouse se pasa por encima de una de las dos especialidades del Café (speciality coffee bar - hand brew bar) hay un cambio de imagen.
En versión web y tablet el cambio es el mismo; en versión móvil aparece una imagen nueva y cabe destacar que existe un fallo en la adaptabilidad del texto hand brew bar.
Grilla
Nuevamente notamos que en este sitio el tema de la "grilla" no es consistente; es decir, no se basa en ninguna regla o parámetro común del sitio. En este caso, en la plataforma web existen 2 columnas del mismo ancho, pero cuando se pasa al dispositivo tablet, éstas dos columnas se vuelven completamente asimétricas. En dispositivos móviles solo existe una columna.
Secciones
Representación en colores de cómo se encuentran dispuestos los elementos y contenidos de la sección "Catering" del sitio y cómo va cambiando su estructura cuando se pasa de un dispositivo a otro.
La única gran diferencia es la eliminación de una frase que aparece en web y tablet (color azul). Para versión móvil pareciera no tener importancia que aparezca.
Se mantienen de la misma forma que en el Home del sitio
Body
Escritorio - Tablet - Móvil
Elementos del Body:
- 1.Imagen (Speciality coffee bar / Hand brew bar)
- 2.Frase publicitaria
- 3."Mobile Coffee catering service options"
- 4."Custom quote"
- 5."Get an estimate"
- 6."Looking for start your own specialty coffee catering company?"
El único cambio significativo en la variación del body entre las 3 plataformas, es la eliminación de la frase publicitaria para el dispositivo móvil. (número 2)
Tipografía del sitio Evoke
El sitio web del Café boutique Evoke hace uso de la tipografía Sackers Gothic Medium en sus distintas variables.
Vista de la tipografía en distintos sectores del sitio.
En el sitio, la tipografía sufre cambios tanto de colores, como de tamaños y estilos. Lo más frecuente es encontrarla en su versión "Heavy", que vendría a ser un Bold común. La tipografía es la encargada principal de entregarle identidad al café en conjunto con los colores que son utilizados.
Colores utilizados en tipografía y sitio web en general
Los siguientes colores son los que conforman la identidad del sitio y de la tipografía del sitio. Son los mayormente utilizados y en conjunto generan una armonía y estética propia del sitio web. (También se incluye el blanco)
Conclusiones
Tomando en cuenta que a la hora de crear un sitio web la parte estética tiende a tener cierta relevancia debido a su manera de captar la atención del usuario, creo que este café boutique cumple con esa parte; El sitio es armonioso desde el primer momento. Su identidad podrá ser reconocida por cualquiera más que nada por los códigos gráficos que utiliza correspondientes tanto a colores, como también a tipografía y logotipo.
Por otro lado, en cuanto a la dimensión más "estructural" del sitio, se puede decir que las decisiones que se tomaron respecto a la grilla son un tanto confusas. No hay una grilla específica o general. No se basa en nada concreto; pero lo más probable es que esto se deba a que los contenidos que se muestran en el sitio no son lo suficientemente extensos como para generar una grilla de más de dos columnas.
En general, la "responsividad" del sitio funciona bien. Existen unos pequeños detalles que no se encuentran bien ajustados; como por ejemplo el desequilibrio de títulos cuando se pasa del dispositivo web al móvil.
No tomaría este sitio como ejemplo, ni me basaría en él para la realización de un sitio responsivo únicamente por el tema de la grilla. A la hora de tomar como ejemplo un sitio responsivo creo que la grilla tiene un peso e importancia ya que en base a ésta el orden estructural del sitio podrá ir siendo adaptado para las 3 plataformas principales.
Ventajas del sitio
- La estética del sitio
- Capacidad de decantar el contenido
- Sencillez estructural (no entorpece los elementos)
- Buen funcionamiento de los botones
- Calidad de los textos
- Utilización de tamaños de texto legibles
Desventajas del sitio
- Grilla confusa
- Recorte de las imágenes cuando se pasa de un dispositivo a otro
- En ciertas partes la gran cantidad de texto en una sola columna provoca letanía.
- Pocos elementos visuales como imágenes
