¿Qué es Mobile First?

Cada vez se visitan más páginas web desde un di­s­po­si­ti­vo móvil. Para responder a esta tendencia, el mundo del diseño web aplica el enfoque mobile first, que consiste en co­n­fi­gu­rar y programar las páginas web primero para móviles y basar la versión de es­cri­to­rio en esa es­tru­c­tu­ra.

¿Qué significa Mobile First?

Mobile First es un concepto de diseño web op­ti­mi­za­do para móviles, donde ini­cia­l­me­n­te se crea una página web para tablets y sma­r­t­pho­nes, para adaptarla luego a las ne­ce­si­da­des de un navegador de es­cri­to­rio. 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 di­se­ña­do­res y los pro­gra­ma­do­res se hicieran cargo de la ejecución de páginas web pensadas úni­ca­me­n­te para ser vi­sua­li­za­das en or­de­na­do­res. En principio, estas eran diseñadas con una gran variedad de ca­ra­c­te­rí­s­ti­cas, adaptando sus gráficos y es­tru­c­tu­ra para ser vi­sua­li­za­dos en grandes pantallas, usando co­ne­xio­nes de datos de gran velocidad. Así, se relegaba a un segundo plano la pla­ni­fi­ca­ción de una web móvil, que hasta entonces era co­n­si­de­ra­da una especie de apéndice. Con Mobile First, el flujo de trabajo se invierte y se es­ta­ble­cen otras prio­ri­da­des, im­pa­c­ta­n­do a la vez todo el de­sa­rro­llo e in­frae­s­tru­c­tu­ra técnica detrás de una página web.

¿Qué medidas incluye el enfoque Mobile First?

Para la co­n­ce­p­ción de una es­tra­te­gia Mobile First, se deben definir aspectos fu­n­da­me­n­ta­les 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 ca­ra­c­te­rí­s­ti­cas y módulos que deberán ser in­te­gra­dos para su correcto fu­n­cio­na­mie­n­to. El principio Mobile First tiene en cuenta las si­guie­n­tes medidas para el diseño web:

• Se concentra en lo esencial
• No invierte mayor esfuerzo en la pro­gra­ma­ción de lo necesario
• Pensado para un máximo re­n­di­mie­n­to en todos los di­s­po­si­ti­vos
• Su in­fo­r­ma­ción es de rápido acceso: contenido es­tru­c­tu­ra­do
• Cuenta con diseños pe­r­so­na­li­za­dos y pensados para sma­r­t­pho­nes
• Evita el uso de imágenes de gran tamaño y ca­ra­c­te­rí­s­ti­cas in­ne­ce­sa­rias
• Incluye re­du­c­cio­nes en el código fuente
• La web es pro­gra­ma­da di­re­c­ta­me­n­te en HTML5, re­nu­n­cia­n­do así a Ja­va­S­cri­pt

En principio, el propósito del diseño Mobile First es de­sa­rro­llar una solución web óptima para di­s­po­si­ti­vos móviles; y solo después, basándose en la es­tra­te­gia de mejora pro­gre­si­va (en inglés Pro­gre­s­si­ve En­ha­n­ce­me­nt), dichas páginas web son op­ti­mi­za­das para todo tipo de pantallas de or­de­na­do­res y po­r­tá­ti­les. Todo proceso de op­ti­mi­za­ción de páginas web basado en la es­tra­te­gia Mobile First se guía por los pri­n­ci­pios del diseño web re­s­po­n­si­vo 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 pri­n­ci­pa­l­me­n­te 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á­pi­da­me­n­te: gracias a su sencilla es­tru­c­tu­ra, limitada a lo esencial, es posible mejorarla y añadirle nuevas ca­ra­c­te­rí­s­ti­cas una vez haya sido terminada. Dado que las páginas web solo muestran los elementos ese­n­cia­les debido al tamaño limitado de la pantalla, las páginas web móviles suelen ofrecer una mejor ex­pe­rie­n­cia de usuario y una mayor facilidad de uso.

Además, se facilita el trabajo de los di­se­ña­do­res, ya que se les permitirá el uso de pre­pro­ce­sa­do­res CSS para modificar, de manera fácil y sin co­m­pli­ca­cio­nes, pa­rá­me­tros tales como colores o fuentes sin tener que usar obli­ga­to­ria­me­n­te 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
• De­sa­rro­llo rápido y eficiente
• Presencia web flexible y fácil de modificar

¿Qué in­co­n­ve­nie­n­tes tiene Mobile First?

En el diseño web móvil puede haber errores que en última instancia socavan la usa­bi­li­dad de una página web op­ti­mi­za­da. Incluso sin errores, el enfoque Mobile First puede tener sus in­co­n­ve­nie­n­tes.

Si tu página web está op­ti­mi­za­da para or­de­na­do­res de es­cri­to­rio, la migración a di­s­po­si­ti­vos móviles puede ser co­m­pli­ca­da y requerir un concepto de diseño to­ta­l­me­n­te nuevo o re­la­n­zar­la de nuevo. En el caso de las gráficas y las imágenes, el contenido op­ti­mi­za­do para diseño móvil puede verse peor en la versión de es­cri­to­rio, ya que la re­so­lu­ción de las pantallas móviles y de los or­de­na­do­res es to­ta­l­me­n­te 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 apli­ca­ción web compleja a di­s­po­si­ción de di­s­po­si­ti­vos móviles, es posible que no baste con una web op­ti­mi­za­da para móviles o que ni siquiera sea in­co­m­pa­ti­ble. En esos casos conviene tener una app propia, aunque eso conlleve un gran esfuerzo de pro­gra­ma­ción.

Resumen de in­co­n­ve­nie­n­tes de Mobile First

• La migración desde di­s­po­si­ti­vos de es­cri­to­rio exi­s­te­n­tes es difícil
• Las gráficas e imágenes requieren de otra re­so­lu­ción
• Es posible que las páginas web complejas no puedan vi­sua­li­zar­se por completo en los di­s­po­si­ti­vos 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á­pi­da­me­n­te
• El contenido es adaptable e in­me­dia­ta­me­n­te legible
• La página web se carga rá­pi­da­me­n­te
• Los enlaces son fáciles de leer y de pulsar

Si se ha co­n­si­de­ra­do el principio Mobile First para diseñar una página, esta debe cumplir con los puntos arriba me­n­cio­na­dos. Para comprobar si una página web es co­n­si­de­ra­da como friendly, es decir, para saber si tiene un diseño op­ti­mi­za­do para móviles, basta con in­tro­du­cir la URL en la página Chrome Li­gh­thou­se. Esta he­rra­mie­n­ta es un elemento fu­n­da­me­n­tal de Chrome DevTools y puede comprobar que tu web reúne estas co­n­di­cio­nes.

Además de la he­rra­mie­n­ta que ofrece Google, existen otras para comprobar si una página web está op­ti­mi­za­da co­rre­c­ta­me­n­te para di­s­po­si­ti­vos móviles. La he­rra­mie­n­ta de Análisis Web evalúa aspectos desde una pe­r­s­pe­c­ti­va relevante para de­te­r­mi­nar la facilidad de búsqueda de dicha web en Internet.

Co­n­clu­sió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 di­s­po­si­ti­vos móviles, tiene sentido prestarle atención y ase­gu­rar­se de que tu página web rinde sin problemas en sma­r­t­pho­nes y tablets. La versión de es­cri­to­rio de la página puede luego basarse en la versión móvil, cosa que ahorra algo de trabajo. No obstante, es igua­l­me­n­te im­po­r­ta­n­te co­n­si­de­rar que Mobile First no es idóneo para todos los casos. Las páginas web complejas o incluso apli­ca­cio­nes web deben co­n­fi­gu­rar­se siguiendo otros pri­n­ci­pios de diseño.