Caso de estudio: Café Evoke

De Casiopea





Caso de Estudio
NombreCafé Evoke
Período2014-2014
Palabras ClaveResponsive design
Estudiado enGráfica Digital 2014
Estudiado porAlison Saravia
URLhttp://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.

Nuevo.escritorio.jpg


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:

Slide.home.jpg


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.

Grilla.nueva.jpg

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.

Division.colores.jpg


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

Head.er.jpg


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

El.body.jpg


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.

Footer:

Escritorio - tablet - móvil

El.footer.jpg

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.

Shop.evoke.jpg


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.

Imagen.shop.jpg

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.

Grilla.shop.jpg

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.

Division.shop.jpg

En este caso, ningún elemento desaparece. Todos se mantienen y se van ordenando de acuerdo a la plataforma que los contiene.

Header y Footer

Se mantienen de la misma forma que en el Home del sitio

Body

Escritorio - Tablet - Móvil

Body.shop.jpg

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

Catering.evoke.jpg


Comportamiento de las imágenes

Imagen.catering.jpg

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.


Comportamiento.imagen.jpg

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.

Grilla.catering.jpg

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.

Seccion.catering.jpg

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.

Header y Footer

Se mantienen de la misma forma que en el Home del sitio

Body

Escritorio - Tablet - Móvil

Catering.body.jpg

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.

Sackers.gothic.png
Sa.go.jpg


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.

Evoke.tipografia.jpg

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)

Colores.evoke.jpg


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