5 problemas del diseño Responsive y sus soluciones

A medida que más empresas recurren al diseño Responsive, es bueno entender las limitaciones que vienen con él y cómo trabajar alrededor de ellas.

Internet está cambiando, muchos sitios web ahora responden adaptándose rápidamente a cualquier tamaño del dispositivo y pantalla para que la experiencia del usuario se lo más dinámica posible. Todo gracias al diseño Responsive o Responsive Design.

Desde corporaciones multinacionales como Sony, Microsoft y Nokia hasta estrellas mundiales de la alta tecnología como Salesforce y gigantes de viajes en línea como Expedia, están recurriendo al diseño web Responsive para llegar a un público aún más amplio de clientes.

Pero hacer sitios web que responsive tiene sus desventajas. El valor que el sitio proporciona al usuario es más importante que nunca, y la estética a menudo quedan en un segundo plano, mientras que el rendimiento es el rey.

Es por eso que hay que adoptar nuevas técnicas para el diseño y la maquetación de los sitios web responsive.

Aquí están 5 problemas con la creación de sitios web responsive, junto con las soluciones posibles.

1. Una etapa visual más problemática

En el pasado, el cliente tenía que aprobar las imágenes estáticas y capturas de pantalla antes de que el desarrollo o maquetación comenzara.

Hoy en día, el diseño puede ser un proceso más caótico, donde la atención se centra en el diseño de los elementos y cómo se reorganizan, en función de las diferentes dimensiones del dispositivo y resoluciones.

Solución: Hay dos enfoques para bosquejar en responsive. Uno de los enfoques es la creación de bocetos para una página de inicio típica tamaño escritorio, y a continuación, su adaptacion para la medidas de celulares y tablets más. Otro enfoque seria utilizar bocetos en papel para mostrarle al cliente cómo se va a comportar el diseño en sus diferentes tamaños de pantalla. Diseñando para el navegador y trabajando con prototipo en HTML y CSS seria el principio; Luego la creación de un sistema de componentes viendo cómo se podrían mostrar en las diferentes configuraciones de pantalla. Esto sustituiría a la clásica creación de wireframes para cada página. El método elegido es generalmente dictado por la complejidad de la página web.

2. Navegación

Antes del diseño Responsive, cada usuario sabía dónde estaba la navegación o menú.

Hoy en día, las clásicas tres barras en la esquina superior de la página por lo general representan el «menú» de navegación y muchos usuarios aún tienen dificultades para navegar, sobre todo cuando se trata de sitios web con una estructura complicada. Actualmente, todo el concepto de navegación tiene que ser reconsiderada.

Solución: Los diseñadores deben pasar más tiempo tratando de hacer una navegación mas intuitiva. El estudio del contenido y la comprensión de cómo los usuarios navegarían por la web, es la única manera de tomar una correcta decisión de navegación. Además, las pruebas de navegación en tantos productos como sea posible puede ayudar a los desarrolladores a hacer las cosas mejor.

3. La aparición de imágenes de fondo y los iconos

Las imágenes son cruciales para la experiencia del usuario en la web. En el diseño Responsive, las imágenes y los iconos deben ser flexibles para permitir a los usuarios disfrutar de los gráficos en los dispositivos de alta densidad de píxeles, que son cada vez más. Asegúreate que las imágenes no se vean borrosas en dispositivos del tipo “Retina Display”.

Solución: La pre-carga de imágenes (Lazy Loading) puede ayudar a aumentar la velocidad con que se muestran al usuario. Hacer iconos escalables (utilizando el formato SVG, lo que mantiene a los iconos visualmente legibles aún alta calidad) también puede ayudar a los usuarios a disfrutar de la web sin pérdida de calidad en cualquier dispositivo.

4. Mostrando datos en las pantallas pequeñas

Mostrando datos en tablas (horarios de los vuelos, por ejemplo) en pantallas pequeñas es un verdadero problema cuando las tablas son complejas.

Solución: Las tablas Responsive son la mejor apuesta en este momento (con Bootstrap las implementas muy fácil). También hay otros métodos: el abandono de la disposición de la rejilla y la creación de una tabla más pequeña que no requiere un desplazamiento horizontal; la construcción de más gráficos circulares compactos fuera de las tablas; reemplazando tablas con versiones más pequeñas mientras que ofrece un enlace a la versión completa; ocultando elementos sin importancia en las pequeñas pantallas con un menú desplegable; tablas de arco iris donde se utilizan colores en lugar de las columnas; e incluso voltear la tabla del lado que sea más conveniente

5. Creación de Experiencias ricas que cargan rápido

Uno de los mayores desafíos es encontrar el equilibrio entre una experiencia de usuario rica y la naturaleza del ritmo rápido que Internet.

Sitios web Responsive a veces pesan demasiado, y ya que atraen el tráfico de equipos de escritorio y dispositivos móviles , la experiencia puede sufrir de tiempos de carga lentos. Esto significa la pérdida de visitantes, ya que la mayoría de los usuarios móviles abandona el sitio luego de cinco segundos de no conseguir lo que ellos esperan.

Solución: La solución es la carga condicional, que permite la carga de sólo lo que necesitan los usuarios, cuando lo necesitan. La regla general es la siguiente: primero la carga del contenido, luego las mejoras, luego las sobras. Se suele utilizar una gran cantidad de imágenes, galerías, documentos, descargas, etc. en un website, pero con el enfoque de “móvil en primer lugar” (móvil first), los diseñadores deben tener cuidado de mantener sólo los elementos que son absolutamente necesarios para transmitir el mensaje deseado. Debido a la proliferación de dispositivos móviles, la carga condicional es el camino a seguir. Y puesto que hay muchas herramientas de automatización de cargas condicionales para escalamiento y almacenamiento en caché de imágenes, hace que los futuros cambios en el sitio sea más fácil y más rápido. Además, suponiendo que la conexión del usuario no es perfecta, la carga condicional es una necesidad para proporcionar un alto rendimiento.

Conclusión

A pesar de que el diseño Responsive es cada vez más popular, todavía hay muchas preguntas sin respuesta y no hay soluciones oficiales a los retos que plantea esta tendencia.

Lo más importante a recordar es que el diseño Responsive debería mejorar las experiencias, y no reducir las oportunidades para los usuarios.

Todos los esfuerzos del diseñador y del desarrollador deben estar destinados a hacer realidad ese objetivo.

PARA IR A FONDO

Si sos como yo, y te interesa el tema de Diseño Responsive, te comento que he creado 2 videotutoriales gratuitos sobre el tema.

Si te interesa aprender la base del diseño reponsive, puedes acceder al videotutorial de Diseño Responsive desde Cero donde verás las “tripas” de este tema basado en CSS3.

Ahora si no te interesa o no tienes tiempo para adentrarte tan afondo en este tema, puede aprender rápidamente a usar el framework mas famoso para creación de sitios web responsive llamado Bootstrap, ingresando al Videotutorial de Bootstrap 3.

Videotutoriales de Responsive Design:

 

Me encantaría que me dejes tus comentarios sobre este tema.

Saludos!
Cristian