Caso de estudio: The Do Lectures

De Casiopea





Caso de Estudio
NombreCaso de estudio: The Do Lectures
Período2014-2014
Palabras Claveresponsive design
Estudiado enGráfica Digital 2014
Estudiado porIngrid Céspedes
URLhttp://www.thedolectures.com/


The Do Lectures

Introducción

En este curso de Gráfica Digital abordaremos el tema del Responsive Design, hoy muy de moda por el aumento de la compra y utilización de smartphone y tablets.

De acuerdo con el estudio realizado por Comscore, las ventas de smartphone superarán a las de computadoras de escritorio durante este año y la adopción de tablets en Estados Unidos se prevee que experimente un crecimiento del 40% en los próximos 4 años, alcanzando los 75.8 millones en 2016.[1]

Pero la complejidad que tiene este sistema que consiste en la adaptación y optimización de un sitio web para que sea visible en variados formatos de pantalla, es un diseño flexible que pone a prueba a las nuevas generaciones de diseñadores web.

A diferencia de años atrás, ya no es necesario crear una website para cada formato, ahora solo se necesita una que fluya entre los formatos de escritorio, smartphone, tablet, smart tv. La gran ventaja del Responsive Design es que se pueden tomar decisiones gráficas como editar el contenido (disminuir el texto que se presenta), disminuir, agrandar o quitar imágenes (dependiendo de los requerimientos del sitio).

De qué trata el The Do Lectures

The Do Lectures, es un sitio que nace como un grupo de personas que realizan una especia de festival de conferencias, realizadas una vez al año, y con una duración de tres días. Festival que los ha llevado a recorrer el mundo por varios años. Entonces el sitio contiene las charlas destacadas, eventos, los lugares que han visitado...

Partes del inicio

Header

  • Talks
  • Yearbook (anuario)
  • Events (eventos)
  • Workshops (talleres)
  • Locations (ubicación)
  • Blog
  • Shop (tienda)
  • Friends(amigos)
  • About (acerca de)
  • Teams (talleres)
  • Newsletters
  • Contact (contacto)

Body

  • Featured Talks
  • Do Book Co
  • Do Shop
  • Giving Chairs
  • Blog
  • Workshops
  • Twitter
  • Instagram

Footer

  • The Talks
  • Events
  • The Do Blog
  • The Do Book Co
  • The Giving Chairs
  • Newsletter
  • Contacto

Primera vista del home

Desde un notebook (1280px)

Escritoriopaantala.jpg

A primera vista con lo que nos podemos encontrar al ver el sitio web, es ver una serie de imágenes como slider que van rotando, en un computador notebook de una resolución de 1280px la imágen no se ve por completo. Lo que indica que hay contenido bajo el slider(lo que puede ser una buena práctica para señalar al visitante que debe hacer scroll). En el header, donde se ubica el menú, se aprecia un aplio espacio en el que este se encuentra. También se aprecian amplios márgenes laterales.

Desde una tablet (780px)

Tabletimagespantallahome.jpg

En una pantalla de tablet de 768px vertical, el home presenta el menú más amplio que en la versión de la pantalla de 1280px. Los amplios margenes disminuyen y se puede persibir el primer error del sitio responsivo, y es que el margen de la derecha es más amplio que el de la izquierda lo que genera un pequeño scroll. Y el tamaño del slider se ajusta al tamaño del ancho de la pantalla y se ve por completo, además de que el contenido del resto del home aparece en pequeños ecuadros de imágenes.

Desde un celular (320px)

Celupantallahome.jpg

Se puede ver que en la pantalla del celular de 320px que el menú se ha ajustado a un menú desplegable, el logo de DO se centra en la pantalla y el espacio del menú se agranda. EL logo del sitio pasa a formar parte importante del sitio ya que aparece con gran importancia. El slider se mantiene y se ajusta al ancho de la pantalla y las imágenes se vn pequeñas.





Grilla

EL comportmiento de el sitio es la tendencia a alargarse a medida que se modifica el tamaño de la pantalla. Aumentando el tamaño del largo de ciertas áreas como el menú y footer. También se muestran cambios en el aumentando del tamaño de alguna de las imágenes cuando el tamaño del formato es más pequeño.


La grilla no presenta gran modificación en sus diferentes variables de tamaño, parte siendo una grilla de 4 columnas que estructuran el contenido del home y luego pasa a ser una grilla de dos columnas. Lo que presenta más cambios es el espacio entre las columnas que se van ajustando al tamaño de la grilla, se disminuye el espacio entre ellas.

Grillamovimientomorado.jpg

Grillarojatodoformatomorado.jpg


Grilla con tañamos de las secciones

Movimientos de los elementos

Home

Detalle comparativo de cada formato con su esquema de los movimientos del contenido de la home. En estos esquemas se puede apreciar con claridad como las cajas que contienen los elementos se van ajustando y comprimiendo. No hay muchas variaciones en cuanto a elementos que queden ocultos al llegar al formato más pequeño de 240px, a excepción del menú que se vuelve desplegable. Se puede ver que las imágenes se van acomodando una sobre la otra.


  • Naranjo: Menú
  • Amarillo:Títulos
  • Celeste:Textos
  • Azul:Logo
  • Violeta: Slider
  • Fucsia: Imágenes de galerías
  • Rosado: Imágenes de post
  • Verde: Footer


Grillarojatodoformatocolor.jpg

Página interior

En las siguientes imágenes se puede ver la página interior Featured Talks (Charlas Destacadas) y el esquema de movimiento de los elementos. Se puede distinguir que en el formato de escritorio el vídeo(color café) utiliza 2/4 de la página y que a su lado se posiciona el título(color amarillo)de dicho vídeo. Lo mismo sucede en el formato tablet, pero al pasar a un formato de móvil se produce un quiebre en el cual el vídeo queda posicionado en la parte superior de la página y el título pasa a estar bajo el vídeo.

Además se incorpora un elemento nuevo en los elementos de la página, las redes sociales(rojo claro), que está al final de el texto del vídeo. Esto está formado por pequeños cuadros que se posicionan uno al lado del otro y que al estar en el formato móvil, se produce un quiebre que hace que uno de los cuadros de redes sociales baje (320px). Así bajan dos cuadros al seguir cambiando el formato(240px).


  • Naranjo: Menú
  • Amarillo:Títulos
  • Celeste:Textos
  • Azul: Logo
  • Café: Vídeo
  • Rojo claro: Redes Sociales
  • Verde: Footer


Pagina interior Feature Talks
Esquema de movimiento



Comportamiento de elementos

Menú

El header de este sitio contiene:

  • logo que identifica a la organización
  • El menú del contenido

Es un menú poco común ya que se presenta como tres listas en el header que al cambiar de formato a pantalla pequeña se transforma en una sola lista que se caracteriza porque la tipografía crece en este (sobre la tipografía se especificará más abajo)



publicidad

Slider

Las imágenes que presentan en el sitio, son una importante forma de presentar el trabajo que realizan. En la pantalla de 1280px el slider es de 1000x456px. Como ya vimos anteriormente es lo que se mantiene siempre presente en todos los formatos.

En un tablet de 768px el slider mide 768x341px lo que hasta este punto parece ser un buen tamaño para mostrar las imágenes para que sean visibles. Pero al pasar a el formato de celular de 320px se reduce el tamaño del slider a 280x165px. Lo que se podría considerar como un recurso inútil ya que las imágenes se ven muy pequeñas,se vuelve dificultoso cambiar de una imagen a otra ya que este slider posee botones de cambio de imágen. Además de que algunas de esas imágenes tienen un pequeño texto descriptivo que se vuelve ilegible.

Las posibilidades a este problema podrían ser:

  • Eliminar el slider con imágenes
  • No permitir que el slider se redusca junto con el tamaño de la pantalla y dejar las imágenes al ancho total y cortadas
Slider del sitio

Galería

La galería con imágenes de los expositores de las charlas, al modificar su tamaño por el ancho de pantalla sus margenes cambian notablemente. El la pantalla de 1280px, su galería está en un ancho de 1000px, los márgenes son anchos, de 140px por lado.Las imágenes se encuentran una a la otra sin un margen entre ellas(lo que se mantiene en todos los formatos)disminuyendo su tamaño proporcionalmente en los siguientes formatos. La pantalla de 768px de un tablet,su galería está en un ancho de 748px, los márgenes son de 10px por lado pero queda con un ancho mayor en el lado dechero por lo que genera un pequeño scroll.

Galería

Otros post

Esta sección está compuesta por una grilla de 4 que se va apretando cuando con el cambio de pantalla, pero lo que sucede es que sisminuye el tamaño de la columna, pero la no los márgenes entre columnas. SE generan cambios en el ancho de las cajas de los títulos de cada post, pasando de tener una margen entre caja de 30px a no tener.


Galería



Comportamiento del footer

El footer no presenta cambios o quiebres leves, pasa de estar formado por 5 columnas a solo 1 columna.


Galería

Tipografía

El sitio web está formado por tres tipografías, con variables entre 100 y 500.

  • Botanika Mono Webfont-family:Botanika-mono-web, Arial, san-serif
  • Proxima-novafont-family:Proxima-nova, Helvetica neue,Arial, san-serif
  • Rooney-webfont-family:Rooney-web,serif

A pesar de tener tres tipos de tipografías, las variaciones de tamaño para los diferentes dispositivos no es grande. Un buen sitio web responsive, requiere de la utilización correcta de la tipografía, ya que es lo que principalmente pueden mostrar los sitios en pequeñas pantallas, la tipografía transmite tu mensaje, información e identidad.


Tipografía del menú

Pantalla de 1280px

  • Font-family:"botanika-mono-web"
  • Font-size:14px
  • Font-weight:400
  • Letter-spacing:1px
  • Line-height:26px

Pantalla de 768px

  • Font-family:"botanika-mono-web"
  • Font-size:14px
  • Font-weight:400
  • Letter-spacing:1px
  • Line-height:20px

Pantalla de 320px

  • Font-family:"botanika-mono-web"
  • Font-size:17px
  • Font-weight:400
  • Letter-spacing:1px
  • Line-height:2,5em

Pantalla de 240px

  • Font-family:"botanika-mono-web"
  • Font-size:17px
  • Font-weight:400
  • Letter-spacing:1px
  • Line-height:2,5em


Tipografía de los título

Pantalla de 1280px, 768px

  • Font-family:"botanika-mono-web, arial, san-serif"
  • Font-size:14px
  • Font-weight:100
  • Letter-spacing:1px
  • Line-height:'20px
  • Text-transform:uppercase

Pantalla de 320px, 240px

  • Font-family:"botanika-mono-web, arial, san-serif"
  • Font-size:14px
  • Font-weight:100
  • Letter-spacing:1px
  • Line-height:25px
  • Text-transform:uppercase


Subtítulos-post

Pantallas de 1280px, 768px, 320px, 240px

  • Font-family:"proxima-nova,helvetica neue, arial, san-serif"
  • Font-size:12px
  • Font-weight:400
  • Letter-spacing:1px
  • Line-height:28px
  • Text-transform:uppercase

Cuerpo de texto

Pantallas de 1280px, 768px, 320px, 240px

  • Font-family:"rooney-web,serif"
  • Font-size:14px
  • Font-weight:300
  • Letter-spacing:1px
  • Line-height:21px

Texto de post y descripción de imágenes

Pantallas de1280px

  • Font-family:"proxima-nova, helvetica, arial, sans-derif"
  • Font-size:14px
  • Font-weight:500
  • Letter-spacing:1px
  • Line-height:1.2em

Pantallas de 768px

  • Font-family:"proxima-nova, helvetica, arial, sans-derif"
  • Font-size:14px
  • Font-weight:300
  • Letter-spacing:1px
  • Line-height:1.2em

Pantallas de 320px, 240px

  • Font-family:"proxima-nova, helvetica, arial, sans-derif"
  • Font-size:14px
  • Font-weight:400
  • Letter-spacing:1px
  • Line-height:1.2em

Desktop First o Mobile First

Hoy en día ya no vasta con que un sitio sea responsive, es decir, que no sólo es necesario que el contenido fluya y las imágenes se adapten al ancho del tamaño de la pantalla, sino que también es necesario que en todos los formatos debe optimizarse el espacio, imágenes y textos.

Por esto se piensa que Mobile First, que se refiere a prioriza el diseño en los dispositivos móviles, es la mejor opción para comenzar un diseño y combinarlo con Responsive Design, que complementa optimización, lo práctico y donde el contenido se reestructura y organiza para formatos mayores,

Pero el problema de Mobiles Firts es tomar la decisión de que contenido se debe mostrar que se oculta, si cada vez el acceso a los sitios web por dispositivos móviles es mayor.

(...)más de la mitad de los accesos a Internet se realizan a través de los móviles (In India, 40% of search and 67% of e-commerce is mobile). En España aún estamos lejos de esas cifras, aunque ya nos vamos acercando (España es el país de la Unión Europea con mayor porcentaje de smartphones, con un 55,2% y el 77% de los usuarios de smartphones acceden a Internet desde el propio dispositivo).[2]

En el sitio The Do Lectures

Después de haber visto el comportamiento del sitio he podido llegar a ver la decisión constructiva que han tomado los diseñadores del sitio, de partir la construcción de este desde el formato de escritorio primero o Desktop firts. Pero no es optimizado el espacio ni las imágenes que se muestran.

Galería



Errores de la grilla responsive

Al comenzar a revisar en los diferentes formatos de pantalla encontré dos errores que hacen desagradable la navegación del sitio.

Vista desde un teléfono LGp350 de 240x360px
  • Ingresando desde un celular de formato pequeño como el LGp350 de resolución de pantalla de 240x360px. Me he encontrado con un scroll lateral que deja el cuerpo del sitio casi a la mitad de la pantalla, con varios px de movimiento lateral. Este comportamiento hace sentir que no hay un control cuando se toca la pantalla con el dedo, ya que parece que el contenido flotara de un lado hacia el otro mientras se baja por el sitio.
Vista desde un tablet de 768px
  • En un tablet de 768px (que es uno de los formatos más utilizados) también hay un scroll lateral pero en este caso parece ser que un solo lado tiene un margen más ancho.









Conclusión

En un principio al ver el sitio pensé que estaba bien estructurado porque tenía una grilla fluida y clara, pero posteriormente me fui dando cuenta de que tenía errores de usabilidad como en el slider donde podemos ver que es funcional hasta un formato de tablet pero al pasar a la pantalla del celular no es fácil poder cambiar de imagen porque el botón para pasar a la siguiente se vuelve muy pequeño(al disminuir proporcionalmente con la pantalla). Además, no es legible en texto que estas imágenes tienen.

Algo curioso que sucede con esta página es que tiene cambios de tamaño tipográficos, solo en el menú, lo que podría ser considerado como una mala práctica. Al revisar con el inspector de elementos de Firefox, no encontré cambios en ningún elemento. Los texto y títulos del sitio siempre varia entre 10px, 14px y 16px en las tipografías Rooney-wen y Botanika-mono-web. Un sitio web responsive debe procurar además de la tipografía a utilizar, también, es el tamaño. Ya que como sabemos el aumento de visitas a sitios web desde smartphone y tablet cada vez es mayor; la preocupación por mostrar un texto agradable y fluido para pequeñas pantallas.


Al analizar el sitio es posible darse cuenta de que el sitio a sido llevado o adaptado desde una pantalla de escritorio a un teléfono móvil. Esta práctica es este caso no es efectiva. Mobile Firts es una posible opción para mejorar las condiciones del sitio. En TheDoLectures, las imágenes son muy importantes ta que son el acceso a las páginas interiores,pero no son tratadas con la finesa que requieren. En la pantalla de 1280px si nos podemos dar cuenta de las buenas imágenes que posee el sitio, pero no se aprovecha el potencial que estás tienen.


Análisis de Divs

  • Divs marcados

https://dl.dropboxusercontent.com/u/71076673/the%20do%20lecture/divs%20marcados/The%20DO%20Lectures.htm


  • Carpeta sitio orignal y análisis de divs

https://www.dropbox.com/home/Public/the%20do%20lecture

Referencias