Problemas y soluciones del diseño responsive

Cada vez más las empresas recurren al diseño Responsive, y creo que es bueno conocer sus limitaciones y cómo trabajar alrededor de estas.

Está claro que el mundo de la web está cambiando, ahora muchos sitios web responden adaptandose a cualquier dispositivo y pantalla. 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.

En mi opinión todas las web se deberían adaptar a los dispositivos móviles al igual que lo hacen a un ordenador. Pero hacer sitios responsive tiene sus desventajas, el valor que el sitio proporciona al usuario es más importante que nunca y la estética queda en un segundo plano mientras el rendimiento es el rey.

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 formas de hacer un boceto de un diseño responsive. Una es la creación de bocetos para una página de inicio típica tamaño escritorio, y a continuación, su adaptación para la medidas de celulares, tablets y más. Otra forma 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 prototipos HTML y CSS seria el principio. 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

Navegación

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

Hoy se ha casi estandarizado las tres barras en la esquina superior de la página para representar el “menú” de navegación y algunos usuarios menos experimentados aún tienen dificultades para navegar.

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.

Las 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úrate que las imágenes no se vean borrosas en dispositivos del tipo “Retina Display”.

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

Mostrando datos en pantallas pequeñas

Mostrar datos en tablas (<table>) en pantallas pequeñas es un problema cuando las tablas son complejas.

Solución: Las tablas Responsive son la mejor apuesta en este momento. 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.

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 tiene 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” (mobile first), los diseñadores deben tener cuidado de mantener sólo los elementos que son absolutamente necesarios para transmitir el mensaje deseado.

Conclusión

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

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