5 consejos para hacer un diseño ‘mobile-first’

SoLoMo

A finales de 2016, la consulta de internet desde terminales móviles consiguió sobrepasar a las consultas realizadas desde el escritorio por primera vez en la historia, representando más de la mitad del uso de internet mundial. No hay duda de que las tendencias de consumo han cambiado. Esto no puede ser pasado por alto por los profesionales del diseño web y se ven obligados a evolucionar junto con los hábitos de los consumidores. Su principal objetivo es promover la estrategia mobile-first.

Para ello daremos 5 consejos para mejorar el diseño web de las páginas para adaptar su página una preparada para los móviles de los usuarios.

  1. Busca una idea de partida y simplifícala. Simplifica tus ideas y apuesta por creaciones más limpias y minimalistas. La diferencia principal entre la estrategiamobile first y el fenómeno responsive de adaptar una web de escritorio a las pantallas pequeñas es que se parte directamente de la versión móvil. Convierte la información básica en un diseño optimizado para smartphones y tabletas. Y dirige al usuario hacia el objetivo marcado de antemano, ya sea éste darle a conocer tu catálogo de trabajos, venderle algo, mostrarle horarios de atención al público o destacar el formulario de contacto.
  2. Ponte en la piel de los usuarios. Añade y quita. Optimiza. Elimina lo no intuitivo. Empatiza. No te quedes en la teoría. Asegúrate de que todos los pasos que das en tu diseño van a acabar siendo entendidos por los usuarios, pensando en la experiencia del internauta móvil. Botones pequeños o demasiado juntos, rellenar largos formularios o rellenar datos bancarios no son el pasatiempo favorito de las visitas que vengan a tu web desde el móvil. Diseña pensando en el usuario final y potencia su comodidad. Muestra zonas claras y grandes que inviten a pulsar o utiliza las API’s que ya llevan los sistemas operativos de móvil.

 

  1. Céntrate en la experiencia de navegación. La navegación es uno de los puntos más críticos de cualquier proyecto de diseño web. Busca respuesta a dudas razonables como: ¿qué elementos hay que mostrar para recoger todo el contenido que quieres ofrecer?, ¿va a hacer falta algún subelemento en el menú?, ¿cuántos?, ¿cómo accederán los usuarios a ellos?, ¿tienen sentido incluir múltiples secciones en el móvil? Existe la opción de los menús laterales. La de los menús que ocupan toda la pantalla superponiéndose al contenido o la de los botones que se colocan en la parte inferior.

 

  1. Optimiza todo lo que puedas, cada uno de los recursos que uses. El diseño sobre el papel no es nada. Es tan sólo uno de los procesos que dan forma al proyecto final. No uses imágenes de 4000 pixeles si tus usuarios se van a conectar con pantallas de 320 pixeles y no cuelgues videos de 4 Gb si tienes usuarios que disponen de redes 3G y pueden tardar siglos en ver tu contenido. Utilizar fotografías más pequeñas o recursos que no consuman toda la tarifa de datos son pautas de sentido común. Pero lo cierto es que a veces aquello que parece lo más sensato se pasa por alto. En los diseños mobile-first, opta por miniaturas optimizadas. Escribe con tipografías y entrelineados legibles. Y no cargues archivos de estilos o scripts no requeridos para la página en la que uno está.

 

  1. Aférrate a la técnica deprogressive enhancement. O como diríamos en castellano puro: adopta un enfoque de mejora progresiva. Ten en cuenta que hay personas que querrán entrar en tu página y consultar su contenido, pero que no disponen del dispositivo más moderno o del software más actualizado del mercado. Tu público es diverso, no plano. Cuando diseñes para el móvil no te vayas a lo fácil pero anodino. Y cuando pases a plantear el diseño de escritorio, no te conformes simplemente con añadir columnas a los contenidos, cambiar a imágenes más grandes y dejarlo todo bien centradito. Puedes y debes aprovechar las capacidades de los diferentes dispositivos y sus pantallas para ofrecer una gran experiencia de uso al visitante.

 

Fuente: Silicon