La tendencia de diseño mobile first es exactamente lo que dice su nombre: pensar en móviles primero. Pero, ¿por qué?
Móviles primero
1.200 millones de usuarios a nivel global entran a la web usando un dispositivo móvil. Por ejemplo, en Estados Unidos un 25% de los usuarios web móviles sólo visitan la web desde su móvil, es decir, nada de dispositivos de escritorio. Y esta tendencia apunta a seguir aumentando. Si accedes a las métricas de tu sitio web verás que el tráfico móvil es una parte muy importante del tráfico total, si es que todavía no es la más importante.
Teniendo esto en cuenta comienza a sonar mejor lo de darle más importancia a los móviles. Pero ¿primero que nada?
Diferentes enfoques
El enfoque mobile first es un principio del enfoque de mejora progresiva (progressive enhancement, en inglés). Bajo este enfoque, el diseño para móviles se debe atacar primero por ser el más complejo. Una vez que se han resuelto los problemas para móviles, diseñar para el resto de dispositivos será más fácil. Al hacerlo de esta manera, pensarás primero en lo esencial de tu aplicación y el diseño incluirá las características clave. Luego, ya pensando en otros dispositivos, se podrán ir agregando más funcionalidades.
El enfoque opuesto sería el de graceful degradation (algo así como degradación gentil), que incorpora todas las complejidades del sistema desde el inicio, y las va quitando dependiendo de las limitaciones del dispositivo. Con esta filosofía se corre el riesgo de que la experiencia en móviles sea planificada más como un añadido y se queden fuera funcionalidades clave.
Consideraciones típicas del diseño mobile first
Al diseñar con móviles en mente, primero que nada, estas son algunas consideraciones típicas con las que nos encontramos:
- Jerarquía visual. En la pantalla de un ordenador podemos usar varias columnas para presentar el contenido a nuestros usuarios, pero en móviles tenemos que pensar de verdad qué es lo más importante, porque el usuario lo verá en formato vertical.
- Funciones touch. Un pequeño detalle que es diferente entre un ordenador y un móvil: el puntero. En ordenadores hacemos clic con una flechita muy puntiaguda. En móviles usamos nuestros dedos. Así que hay que tener en cuenta esto al pensar en el tamaño de los botones y elementos clicables.
- Grandes gráficos. El típico slider inmenso que ocupa toda la pantalla del ordenador se ve muy bien en el ordenador, pero en una pantalla de unos pocos centímetros de ancho puede que no se distinga su contenido.
- Efectos hover. Pasas el mouse sobre un botón o una imagen y ésta cambia de color y hace un efecto muy chulo. No cuentes con esto en móviles.
En resumen, el enfoque mobile first no quiere decir que dejemos de lado a los dispositivos de escritorio, que siguen siendo los más usados en muchos casos para acceder nuestros sitios web o aplicaciones, sino que al pensar en las limitaciones de los dispositivos móviles podemos concentrarnos en las funcionalidades clave de nuestra aplicación y asegurarnos de que será universalmente funcional, sin importar qué tipo de dispositivos se usen.
