El diseño web Mobile First no es otra cosa que diseñar primero en pantallas pequeñas (formato móvil) para después adaptarlo a formato escritorio. Lo normal, es crear un diseño web en pantallas grandes y luego ajustar el contenido a móvil y a tablet. Pero el diseño Mobile First es una de las mejores técnicas para crear páginas web con diseño responsive (adaptativo).
¿Por qué es importante el diseño web Mobile First?
Ni que decir tiene, que hoy en día más del 80% de los usuarios visitan las páginas webs a través de dispositivos móviles, por lo que es importantísimo crear un diseño muy adaptado a móvil, y la mejor opción para ello es crear dicho diseño con la técnica Mobile First.
El diseño Mobile First es un principio de mejora progresiva. La idea es que el diseño móvil, como el más difícil de desarrollar, debe hacerse primero. Una vez que respondamos las preguntas sobre el diseño de dispositivos móviles, será mucho más fácil diseñar para otros dispositivos (tablet o escritorio). Todo se reduce a que, el más pequeño de los diseños tendrá solo las características esenciales, por lo que de inmediato ha diseñado el corazón de su UX.
Otro aspecto muy importante, es que al diseñar en pantallas pequeñas, el contenido se tiene que reducir también por lo que hay que centrarse en lo esencial, esto obliga a priorizar el contenido.
El enfoque del diseño web Mobile First se traduce orgánicamente a un diseño que se centra más en el contenido y, por lo tanto, en el usuario.
Sin embargo, hay que tener algo muy claro y es que, usuarios de dispositivos móviles a veces requieren contenido diferente al de los usuarios de escritorio. El contenido específico del dispositivo se puede medir teniendo en cuenta el contexto: lo que, en una situación y un entorno determinados, apreciará más su usuario. La mejor manera de planificarlos con anticipación es crear escenarios de usuario.
Otra ventaja del Mobile First es que los puntos de interrupción de la pantalla pequeña pueden ajustarse mejor al contenido. Es peor tener que exprimir un diseño grande y extenso en un marco pequeño. Pero con el Mobile First, los puntos de interrupción se desarrollan de forma natural en torno al contenido, por lo que no necesita modificaciones complejas.
Pasos para crear tu diseño web Mobile First
Inventario de contenido
Se trata de crear una hoja de Excel o documento similar que contiene todos los elementos que debe incluir la página web.
Jerarquía visual
Prioriza los elementos en el inventario de contenido (punto anterior) y determina cómo mostrar los elementos más importantes de manera destacada.
Diseña con los puntos de interrupción más pequeños y luego aumenta la escala
Primero crea la estructura del boceto/prototipo móvil y luego úsala como modelo para puntos de interrupción más grandes.
Ampliar los elementos táctiles (botones, enlaces, banners)
los dedos son mucho más anchos que los cursores y, por lo tanto, necesitan elementos más grandes para tocar. En el caso de Apple recomienda 44 píxeles cuadrados para objetivos táctiles. Deja bastante espacio entre los enlaces, agranda ligeramente los botones y asegúrate de que haya suficiente espacio alrededor de todos los elementos que sean interactivos.
No uses efectos de hovers (desplazamientos)
Si estás pensando en una optimización para dispositivos móviles, no uses estos efectos. Todavía no hay control de desplazamiento para las yemas de los dedos. ????
Piensa como en una “aplicación”
Los usuarios de dispositivos móviles están acostumbrados al movimiento y tienen un mínimo de control en su experiencia. Piensa en la navegación fuera del lienzo, los widgets expandibles u otros elementos en la pantalla con los que los usuarios pueden interactuar sin actualizar la página.
Evita los gráficos grandes
Las fotos de paisajes y los gráficos complejos no se muestran bien cuando la pantalla tiene unas pocas pulgadas de ancho.
Pruébalo en un dispositivo real
No hay nada mejor que descubrir por ti mismo cómo de usable es (o no) una página web. Pregúntate esto: ¿se navega fácil? ¿es rápida de cargar? ¿Los textos y los gráficos son fáciles de leer?
Cuando hablamos del diseño web Mobile First no significa eliminar información. Significa clasificar la información en contenido primario, secundario y terciario.
☝ Y por último, no debes confundir el diseño Mobile First con el Diseño Web Responsive (adaptativo), mientras que el primero se centra en el diseño en dispositivos pequeños (móviles) para luego ir ajustando el contenido a pantallas grandes, el diseño responsive, es el común, diseño de pantallas grandes que se adaptan a pantallas pequeñas (tablets y móviles).
Puedes echarle un vistazo a la página web de Material Design como herramienta de ayuda a la hora de diseñar tu página web con la técnica del diseño Mobile First.
