Digital

Las 10 reglas de oro del responsive design que son el "padrenuestro" de todo diseñador

aleluya 300Con el crecimiento y cada vez mayor tendencia a la utilización de un gran número de dispositivos por parte de los usuarios las marcas apuestan cada vez más por el responsive design y no solo porque Google "premie" esta iniciativa en el posicionamiento de su motor de búsqueda.

En un panorama saturado y competitivo como el actual es importante estar presente en el mayor número de puntos posibles de interacción con los consumidores y por ello, aquellas webs que se adapten a cualquier formato y dispositivo tendrán más opciones de proporcionar a sus clientes una mejor experiencia de usuario.

Pero todo esto conlleva un gran esfuerzo tanto por parte de los desarrolladores como de los diseñadores. Para llegar con éxito al objetivo y no perderse por el camino le ofrecemos 10 consejos para planificar de la mejor manera su diseño responsive:

1. Planifique pequeño (y grande)
El auge de los dispositivos móviles ha hecho que muchas veces se piense en el responsive design como una adaptación a las pantallas más pequeñas. Sin embargo, no nos podemos olvidar de otras más grandes como las Smart TV, cada vez con mayor penetración. Lo cierto es que son los móviles los aparatos que concentran la mayor parte del tráfico web y es necesario adoptar una mentalidad "mobile first" pero sin olvidar nunca que todavía hay muchos usuarios que acceden desde sus ordenadores.

2. No olvide el contexto
Es importante a la hora de elaborar un diseño adaptativo no solo hacer que el contenido del site encaje en la pantalla sea el tamaño que sea sino también el contexto y las necesidades de cada dispositivo. Y es que, no necesitará las mismas herramientas en el mismo orden alguien que consulta la página desde su casa que alguien que utilice el móvil pues sus objetivos son distintos.

3. Lo bueno, si breve, dos veces bueno
Los usuarios móvil demandan inmediatez y relevancia y esto es lo que debe ofrecer también el diseño que debe ser de utilidad. Incluir solamente lo realmente necesario sin añadidos secundarios ofrecerá una mejor experiencia de usuario, así que recuerde, ante la duda de incluir un elemento, elimínelo.

4. Priorice el contenido de manera adecuada
Mientras que en pantallas grandes se caracterizan por un diseño de varias columnas, en el móvil se reduce a una y es que el contenido requiere ser mostrado de manera diferente en ambas pantallas. Busque la mejor manera de presentar la información para lograr una mayor eficacia.

5. Escalabilidad en la navegación
La navegación es uno de los aspectos más difíciles con los que los diseñadores deben lidiar sobre todo cuando se trata con menús amplios y de gran profundidad. Lo que funciona perfectamente en una pantalla puede no hacerlo en absoluto en otras. Y es que, cuando se trata de navegación, la consistencia es secundaria, la prioridad se halla en ofrecer una navegación clara y user friendly en cada paso.

6. Calidad de imagen vs. Rapidez de descarga
Este es el eterno debate y se agrava por la tendencia a la utilización de imágenes cada vez más grandes, full screen con el consecuente aumento de la calidad y del tamaño de archivo. Para los diseñadores la calidad de las imágenes es de gran importancia sobre todo cuando el atractivo de la página recae en los elementos visuales.

Sin embargo, es necesario buscar el equilibrio buscando la mejor calidad posible pero sin ralentizar demasiado la navegación y descarga de páginas. Esto se puede conseguir eliminando aquellos elementos que no sean realmente necesarios así como las animaciones o los carruseles.

7. Los iconos, solo donde sean necesarios
Los iconos, si se usan adecuadamente, pueden mejorar de muchas un diseño adaptativo. Un buen diseño de iconos puede sustituir un texto, especialmente importante en las pantallas pequeñas. El formato SVG es una manera perfecta para diseñarlos multipantalla así como el CSS será de utilidad para añadir efectos sin entorpecer la performance de la web.

8. Ojo con los tamaños de fuente
La tipografía es una parte esencial de los diseños web pero puede ser un arma de doble filo cuando se trata del adaptativo pues, algunas tipografías que funcionan para pantallas grandes carecen de claridad cuando son utilizadas en otras más pequeñas . En todo caso, la tipografía escogida debe asegurar la claridad de lectura en cualquier pantalla con un tamaño medio de 16 pt para el texto y los títulos unas 1,6 veces más grandes que el resto del contenido.

9. Tenga en cuenta las diferentes maneras de navegación
Mientras en el ordenador un teclado y un ratón facilitarán sin problemas la navegación del usuario, en el móvil el tamaño de la pantalla puede ser un obstáculo y es que si los botones son demasiado pequeños puede que se tengan problemas para clicar o que por error se clique otro elemento no deseado.

Por lo tanto, sea generoso con el tamaño de las áreas clicables. Para smartphones se recomienda el diseño de botones de 44 puntos cuadrados pero siempre es mejor asegurar la eficacia pidiendo a varios usuarios que lo prueben.

10. Compruebe su diseño en los dispositivos
Una buena planificación y diseño no sirve de nada si solo se hace sobre el papel. Es importante comprobar cómo funciona en los diferentes dispositivos y pantallas, probando la navegación para así detectar posibles errores y mejorarlos.

Te recomendamos

Coronavirus

LiveMD

Outbrain

Podcast

FOA

Compartir