¿Cómo no pensar en diseño adaptable?

Hoy en día diseñar con criterios de diseño adpatable (responsive design en inglés) ya no es opción, sino nuestra responsabilidad. Estamos en una etapa en la que lo móvil saturó nuestra vida y como diseñadores debemos pensar así.  ¿Darle la opción al cliente?, ¿para qué? Como profesionales sabemos qué es lo mejor para ellos, y dentro del proyecto ya tiene que estar implícito que el sitio web será adaptable para que pueda verse en cualquier dispositivo.

Ahora bien, ¿cómo diseñar únicamente desde una perspectiva adaptable? ¿Cómo adoptar este enfoque? Es simple, solamente debemos tener todo el tiempo presente que nuestros bloques de información se reacomodarán dependiendo dónde se vayan a mostrar. Entonces cuando estemos frente a nuestro lienzo en blanco acomodaremos los elementos y la información en bloques que se puedan ajustar fácilmente y no alteren el orden ni la estética en tableta o en el móvil. Suena fácil, ¡y lo es! Ya estamos tan acostumbrados a navegar sitios de esta manera que nuestra mente comienza a ajustarse por sí sola a este tipo de diseño.

Pero comencemos por el principio. Si aún no sabes qué es una página adaptable, debo decirte que me refiero a una página que se ajusta atomáticamente al tamaño de pantalla del usuario sin alterar la legibilidad del contenido y manteniendo un mismo orden y estética. Es decir que, la misma página html/css se ve diferente en tu pantalla de 21 pulgadas y en tu móvil, y, en base a unas reglas pre-definidas, se adapta para mostrarse de la mejor forma posible en cada formato, tamaño y proporción de pantalla, sea vertical o apaisada.

Algunos consejos:

1. Antes que nada, habla con tu cliente y coméntale lo importante que es que su sitio sea adaptable, y del alcance que tendrá en cuanto a visitas y rebotes. Tómate el tiempo para explicarle las bondades de estar presente en los dispositivos que hoy lo usuarios manejan a diario y cuidar el contenido en todos los formatos.

2. Define los puntos principales que tendrá el proyecto para evaluar lo que se requerirá en el armado y cómo acomodarás la información tanto en la página de inicio como en el resto de las secciones.

3. Establece la prioridad de los contenidos según el contexto de lectura. Recuerda que estamos diseñando no solo para que el sitio se adapte a los formatos pequeños de pantalla sino también para dar al usuario la información que necesita en cada contexto. De todos modos deja siempre abierta la posiblidad de ampliar la información.

4. Establece prioridades en el diseño:

   • Ajusta a tu lienzo guías que te ayuden a organizar elementos y contenido en forma de bloques. Resulta de ayuda organizar columnas y distribuir imágenes y texto en bloques sabiendo que luego podrán mostrarse unos debajo de otros en los diferentes formatos y proporciones de pantalla.

   • Utiliza elementos simples. Hay elementos que el usuario ya conoce sobre los modos de navegación en la Web (flechas, signos de más y menos, subrayados para los hipervínculos). Recuerda que estás diseñando un sitio que debe ser completamente navegable. Utilizar elementos intuitivos y ya aprendidos por el usuario es lo más eficiente.

   • Ten en cuenta que los elementos puedan ser «clickeables» también con los dedos también. Recuerda que dependiendo donde se vea el sitio, es como utilizará. El tamaño de los iconos y accesos debe ser suficiente, y debe haber buen espaciado entre ellos, para que en el móvil el usuario no necesite hacer malabares para poder tocar el que desee.

   • Optimiza siempre, siempre. Esto vale para cualquier tipo de diseño, sea o no adaptable. Al usuario no le gusta esperar, así que optimiza siempre tus imágenes para que no demoren en descargar. Eso ayudará a que no se vayan de tu sitio antes de tiempo.

   • Al terminar tu diseño debes prever cómo se acomodará cada página a los diferentes tamaños de pantalla, para verificar que todo se vea perfecto.

5. Finaliza tu diseño con todos los elementos a tener en cuenta y enviálo a desarrollo para que puedan comenzar y optimizar los estilos también a dispositivos móviles.

Pruébalo en cuanto dispositivo tengas a la mano y quedará listo para que tus usuarios lo naveguen. No olvides incluir el código de Google Analitycs y revisarlo cada tanto, para ver qué páginas son las más visitadas, si hay rebote y conocer las preferencias y el comportamiento de tus usuarios.

Si aún no lo has hecho, adopta el diseño adaptable (responsive design) hoy mismo, y te acompañará para siempre, porque tu diseño debe verse perfecto en todos lados.

¿Qué te pareció? ¡Comparte tu opinión ahora!

Este video podría interesarte👇👇👇

¿El diseño del logo siempre debe ser parte de un “paquete mas grande”? Paula Scher (Parte 5)