¿Qué es Mobile First?

Cada vez se visitan más páginas web desde un dispositivo móvil. Para responder a esta tendencia, el mundo del diseño web aplica el enfoque mobile first, que consiste en configurar y programar las páginas web primero para móviles y basar la versión de escritorio en esa estructura.

¿Qué significa Mobile First?

Mobile First es un concepto de diseño web optimizado para móviles, donde inicialmente se crea una página web para tablets y smartphones, para adaptarla luego a las necesidades de un navegador de escritorio. Mobile First es por tanto una tendencia de diseño que ha surgido como parte de la evolución de motores de búsqueda como Google en sectores móviles.

Hasta hace unos años, era común que los diseñadores y los programadores se hicieran cargo de la ejecución de páginas web pensadas únicamente para ser visualizadas en ordenadores. En principio, estas eran diseñadas con una gran variedad de características, adaptando sus gráficos y estructura para ser visualizados en grandes pantallas, usando conexiones de datos de gran velocidad. Así, se relegaba a un segundo plano la planificación de una web móvil, que hasta entonces era considerada una especie de apéndice. Con Mobile First, el flujo de trabajo se invierte y se establecen otras prioridades, impactando a la vez todo el desarrollo e infraestructura técnica detrás de una página web.

¿Qué medidas incluye el enfoque Mobile First?

Para la concepción de una estrategia Mobile First, se deben definir aspectos fundamentales de la web, así como también aquellos productos y servicios ofrecidos. Es un proceso donde no se trata solamente del contenido y las imágenes, sino también de aquellas características y módulos que deberán ser integrados para su correcto funcionamiento. El principio Mobile First tiene en cuenta las siguientes medidas para el diseño web:

• Se concentra en lo esencial
• No invierte mayor esfuerzo en la programación de lo necesario
• Pensado para un máximo rendimiento en todos los dispositivos
• Su información es de rápido acceso: contenido estructurado
• Cuenta con diseños personalizados y pensados para smartphones
• Evita el uso de imágenes de gran tamaño y características innecesarias
• Incluye reducciones en el código fuente
• La web es programada directamente en HTML5, renunciando así a JavaScript

En principio, el propósito del diseño Mobile First es desarrollar una solución web óptima para dispositivos móviles; y solo después, basándose en la estrategia de mejora progresiva (en inglés Progressive Enhancement), dichas páginas web son optimizadas para todo tipo de pantallas de ordenadores y portátiles. Todo proceso de optimización de páginas web basado en la estrategia Mobile First se guía por los principios del diseño web responsivo y suele recurrir a los CSS Grids para que la página pueda ser escalable.

¿Qué ventajas ofrece Mobile First?

El diseño web se está centrando principalmente en las páginas móviles porque son estas las que llegan a un público más amplio.

Además, Mobile First se adapta muy rápidamente: gracias a su sencilla estructura, limitada a lo esencial, es posible mejorarla y añadirle nuevas características una vez haya sido terminada. Dado que las páginas web solo muestran los elementos esenciales debido al tamaño limitado de la pantalla, las páginas web móviles suelen ofrecer una mejor experiencia de usuario y una mayor facilidad de uso.

Además, se facilita el trabajo de los diseñadores, ya que se les permitirá el uso de preprocesadores CSS para modificar, de manera fácil y sin complicaciones, parámetros tales como colores o fuentes sin tener que usar obligatoriamente código CSS.

Resumen de las ventajas de Mobile First

• Llega a un público más amplio
• Páginas web claras y fáciles de usar
• Desarrollo rápido y eficiente
• Presencia web flexible y fácil de modificar

¿Qué inconvenientes tiene Mobile First?

En el diseño web móvil puede haber errores que en última instancia socavan la usabilidad de una página web optimizada. Incluso sin errores, el enfoque Mobile First puede tener sus inconvenientes.

Si tu página web está optimizada para ordenadores de escritorio, la migración a dispositivos móviles puede ser complicada y requerir un concepto de diseño totalmente nuevo o relanzarla de nuevo. En el caso de las gráficas y las imágenes, el contenido optimizado para diseño móvil puede verse peor en la versión de escritorio, ya que la resolución de las pantallas móviles y de los ordenadores es totalmente distinta.

Además, hay que tener en cuenta que Mobile First no es la solución idónea para todos los casos de uso. Si por ejemplo quieres poner una aplicación web compleja a disposición de dispositivos móviles, es posible que no baste con una web optimizada para móviles o que ni siquiera sea incompatible. En esos casos conviene tener una app propia, aunque eso conlleve un gran esfuerzo de programación.

Resumen de inconvenientes de Mobile First

• La migración desde dispositivos de escritorio existentes es difícil
• Las gráficas e imágenes requieren de otra resolución
• Es posible que las páginas web complejas no puedan visualizarse por completo en los dispositivos móviles
• No sirve para todos los casos

¿Qué es mobile friendly?

De la mano del concepto Mobile First viene la pregunta de cuándo se considera que una página es mobile friendly. Esto ocurre cuando:

• El contenido se entiende rápidamente
• El contenido es adaptable e inmediatamente legible
• La página web se carga rápidamente
• Los enlaces son fáciles de leer y de pulsar

Si se ha considerado el principio Mobile First para diseñar una página, esta debe cumplir con los puntos arriba mencionados. Para comprobar si una página web es considerada como friendly, es decir, para saber si tiene un diseño optimizado para móviles, basta con introducir la URL en la página Chrome Lighthouse. Esta herramienta es un elemento fundamental de Chrome DevTools y puede comprobar que tu web reúne estas condiciones.

Además de la herramienta que ofrece Google, existen otras para comprobar si una página web está optimizada correctamente para dispositivos móviles. La herramienta de Análisis Web evalúa aspectos desde una perspectiva relevante para determinar la facilidad de búsqueda de dicha web en Internet.

Conclusión de Mobile First

A la hora de crear una página web hay que tener en cuenta el enfoque Mobile First. Dado que la mayoría de los usuarios acceden a las páginas web desde los dispositivos móviles, tiene sentido prestarle atención y asegurarse de que tu página web rinde sin problemas en smartphones y tablets. La versión de escritorio de la página puede luego basarse en la versión móvil, cosa que ahorra algo de trabajo. No obstante, es igualmente importante considerar que Mobile First no es idóneo para todos los casos. Las páginas web complejas o incluso aplicaciones web deben configurarse siguiendo otros principios de diseño.