¡Hola persona que programa!
Parece que han pasado 84 años desde el último Tip de Flor, pero no se preocupen, estoy de vuelta y con un tema espectacular.
Hoy vamos a hablar de Mobile first 📱.
01 . ¿Qué es mobile first?
En pocas palabras, mobile first, es una estrategia de diseño y desarrollo que se basa en crear las pantallas de una web/app, primero en formato mobile (o para celulares); y luego, adaptar ese diseño a los demás dispositivos disponibles (tablets, notebooks, PCs).
02 . ¿Por qué es importante?
Porque se estima que hoy en día el 60% de la personas del mundo tiene acceso a un celular; y se espera que para el 2025, la cantidad de personas que accedan a internet sólo a través de sus celulares equivalga al 72,5% de los usuarios a nivel mundial.
Algo es seguro, la cantidad de tráfico que proviene del uso de celulares es tremenda, y esta tendencia no va a cambiar. Los teléfonos celulares permitieron que muchísimas personas accedan a internet, y que su uso pueda realizarse prácticamente en cualquier momento y lugar.
03 . ¿Por qué se transformó en una buena práctica?
Aparte de lo que mencioné en el apartado anterior, esta técnica logró una gran relevancia, porque:
👉 Nos garantiza que todos los usuarios tendrán una buena experiencia, sin importar el dispositivo que utilicen para interactuar con nuestra web/app.
👉 Se centra en el principio de incremento progresivo o, progressive enhancement, en inglés. Empezamos por la versión más optimizada de la experiencia de uso (la versión mobile), y luego le sumamos complejidad a medida que la dimensión de la pantalla que utiliza el usuario lo permita.
👉 Nos fuerza a empezar por lo más importante. Al resolver primero el diseño para la pantalla con mayores limitaciones, esta técnica nos obliga a enfocarnos en el núcleo de la experiencia que estamos tratando de construir. Nos motiva a pensar qué funcionalidades y contenidos necesitamos desarrollar sí o sí para todos los dispositivos.
👉 Nos obliga a pensar muy bien los contenidos y sus jerarquías. El contenido de nuestra web/app debe ser el justo y necesario para guíar al usuario hacia su objetivo. Elegir el contenido para un celular no es una tarea fácil. Pero priorizando la información más relevante y planteando una buena jerarquía, podemos concentrar al máximo el mensaje que queremos transmitir.
👉 El algoritmo de Google privilegia a las páginas optimizadas para móviles. Considerando la cantidad de tráfico online que proviene de estos dispositivos no resulta nada extraño que se les de prioridad en las búsquedas a aquellos sitios que estén optimizados para la navegación en smartphones.
04 . Consejos para aplicar mobile first en tus proyectos
🧠 Escribí el CSS de tu proyecto primero en versión mobile, y aplica las media-queries que necesites para adaptar los estilos a los demás dispositivos. Empezar por la versión móvil permite que el código se replique menos, los estilos queden más ordenados, y si usas grids, es mucho más fácil plantear el diseño responsive empezando desde el celular. Les dejo esta guía completa que contiene muchísima información sobre este tema.
🧠 Hacé un mini inventario de los contenidos de tu página antes de armar los wireframes. Como ya mencionamos, tener identificada la información más relevante y mostrarla de forma concreta amplifica la experiencia en un teléfono celular. Armar una tabla de excel o un documento de word con todos los textos e imágenes que vayas a utilizar, te ayudará a plantear mejores wireframes, y en definitiva, te dará mejores layouts para tu web/app.
🧠 Recordá que el hover de los botones NO aplica en las pantallas táctiles. Esto se suele solucionar con un ripple effect, o efecto de ola, que es una de las maneras más comunes de indicarle al usuario que efectivamente presionó un botón. En el artículo que les dejo linkeado, encuentran una explicación paso a paso para generar este efecto usando CSS y JS. Además, recuerden que Material Design y otras librerías de sistemas de diseño open source suelen contar con componentes que tienen este efecto.
🧠 Visualizá tus diseños directo en el teléfono. Si planteás tu diseño en Figma con un tamaño de frame ajustado a un celular, podrás previsualizarlo en cualquier dispositivo móvil usando la opción de prototipos. Esto es muy importante para verificar cómo se verá finalmente el sitio en un smartphone. También te permitirá chequear que las tipografías tengan el tamaño correcto y que todas las imágenes sean visibles/entendibles en estas dimensiones.
🧠 Respetá los tamaños mínimos para cada componente de la interfaz. Tanto en la versión desktop como en la versión para celular, el tamaño de tipografía mínimo sugerido suele ser 12px. El tamaño más adecuado para los textos en general es de 16px. Un botón es de 44 a 48px de alto mínimo, según las sugerencias de usabilidad de IOS y Google respectivamente.
05 . ¿Te quedaron dudas sobre este tema?
Espero que les sirva esta guía, y ya saben, cualquier duda que tengan me encuentran en el canal #ux-ui-general de la mejor comunidad de esta y otras galaxias.
¡Nos vemos!
Flor