abr20

Contenido para todos los dispositivos: responsive design

User experience

Según varios informes, el número de los dispositivos móviles en general ha aumentado mucho en los últimos 3 años y la cantidad de cosas que hacemos con ellos. Los smartphones suponen la mitad de todos los teléfonos móviles vendidos. Los internautas visitan ya más websites desde sus dispositivos móviles que desde los ordenadores sobremesa, que no hacen más que caer en ventas.

¿Cómo hacer contenido para todos los dispositivos?
Diseñando para múltiples pantallas, realizando lo que se denomina diseño responsive. Y esto ¿qué es? es una técnica de diseño y maquetación web por la cual, el contenido de un website se adapta a multitud de dispositivos, ya sean smartphones, tabletas, portátiles, ordenadores sobremesa o incluso la TV. El contenido siempre se optimiza al tamaño de la pantalla donde se está viendo.

Claves del cambio
Uno de los primeros puntos conflictivos es el ancho de las pantallas de los dispositivos que hacen que el contenido se tenga que re-colocar. Los diferentes tamaños son barreras o diques a las que el contenido tiene que ajustarse y hacen que el contenido tenga que estar diseñado para que pueda fluir y reajustarse según el dispositivo. Digamos que puede ser un smartphone con pantalla pequeña, un smartphone con pantalla grande, para una tableta, para un portátil o para un ordenador sobremesa. También ha de tenerse en cuenta el tamaño del código CSS, puesto que al ser responsive, es más complejo para que el contenido pueda enfrentarse a los diferentes dispositivos. La optimización del tamaño de las imágenes también puede afectar mucho a los tiempos de descarga.

¿Qué dejamos fuera?
Uno de los puntos controvertidos surge cuando uno se enfrenta a cómo meter todo el contenido de la versión para PC en la versión para pantallas más pequeñas. Es algo a tener en cuenta desde el principio, desde el diseño de los prototipos. No es lógico mostrar todo el contenido que entra en la versión PC en la versión para móvil. En este sentido seguiría las recomendaciones de Luke Wroblewski, que propuso la idea de Mobile First, que se preguntaba lo siguiente: ¿cual es la mínima cantidad de contenido y navegación necesarias, para conseguir que nuestro diseño sea de utilidad? Su principio fundamental es que es más fácil añadir a un diseño que quitar. Muy importante a la hora de aplicar a los diseños responsive.

Es vital saber para quién estamos diseñando. La realización de una investigación y análisis previo al diseño del website es fundamental, para identificar bien las necesidades de tus usuarios y así poder diseñar para ellos. Por lo tanto si lo que queremos es ser coherentes y pretendemos que la imagen de una marca, ya sea personal o corporativa, sea percibida igual en todas partes tenemos que diseñar para retículas adaptables.

Organiza la información con interacción
Es fácil componer tablas complejas con imágenes y menús desplegables cuando tienes espacio suficiente para mostrarlo. Sin embargo en pantallas pequeñas, esas tablas con mucha información pierden todo el sentido cuando la única manera de poder visualizar bien los datos es realizando muchas ampliaciones sobre ella.

Para poder mostrar información con interacción es necesaria una estrategia para crear esos diseños que lo permitan. Los usuarios pueden acceder a la información utilizando interfaces interactivas que te permitan utilizar filtros, mostrar o esconder datos de una tabla… Incluso para los diferentes apartados del menú ahora se tienden a esconder completo en la denominada “hamburguesa”, las 3 líneas horizontales junto al logotipo en la cabecera.

Y con las imágenes…
Cualquier website tiene numerosas imágenes. La mayoría de las veces se les da una gran importancia, razón de más para llevar a cabo un buen estudio para definir cómo trabajar con ellas en pantallas más pequeñas. Hay veces que sería de gran ayuda escalarlas, incluso recortarlas, o habilitar la función de ampliar al tocar para que la experiencia que tienen los usuarios, independientemente del dispositivo sea la esperada.

Conclusiones
Somos de la opinión de que todos los diseños de nuevos sitios web deberían dar la bienvenida al diseño responsive.

Si diseñas tratando de enfocarte en los tamaños clave, los más vendidos, habrá un gran número de usuarios que no tendrá la experiencia deseada. Por lo tanto necesitamos usar un sistema de rejilla que solucione esa falta de dimensiones fijas, ya que la idea es llegar al mayor número de personas. Esto implica revisar el estilo editorial, la manera en que te enfrentas al diseño visual y de interacción, a cómo piensas en tus usuarios y lo que quieren conseguir. Si estás preparado con una estrategia, la transición a diseño responsive será mejor y más eficaz.

La experiencia del usuario ha de ser homogénea en la percepción de la marca en los diferentes dispositivos. Por lo tanto, con que sólo haya una persona que acceda desde un smartphone, justifica que le mostremos la información de la misma manera que al resto.

Deja un comentario

Dinos lo que piensas!

nombre *

email *

mensaje *

Síguenos en Twitter