Caso de estudio: The Do Lectures
| Caso de Estudio | |
| Nombre | Caso de estudio: The Do Lectures |
|---|---|
| Período | 2014-2014 |
| Palabras Clave | responsive design |
| Estudiado en | Gráfica Digital 2014 |
| Estudiado por | Ingrid Céspedes |
| URL | http://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
- The Talks
- Events
- The Do Blog
- The Do Book Co
- The Giving Chairs
- Newsletter
- Contacto
Primera vista del home
Desde un notebook (1280px)
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)
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)
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.
Grilla con tañamos de las secciones
Principales medidas del formato de escritorio(1280px)
Principales medidas del formato tablet (768px)
Principales medidas del formato celular (320px)
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
- Comparaciónescritoriocolorbien.jpg
Elementos destacados del home a 1280px
- Comparacióntabletcolorbien.jpg
Elementos destacados del a 768px
- Comparaciónmovilcolorbien.jpg
Elementos destacados del a 320px
- Comparacióncelu240colorbien.jpg
Elementos destacados del a 240px
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
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)
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
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.
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.
El footer no presenta cambios o quiebres leves, pasa de estar formado por 5 columnas a solo 1 columna.
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.
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.
- 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.
- 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
- Carpeta sitio orignal y análisis de divs
https://www.dropbox.com/home/Public/the%20do%20lecture
