Mobile first: errores a evitar

¿Qué es esto del ‘mobile first’?

¿Pero que es esto del ‘mobile first’? Si yo ya sé hacer webs responsive… De pequeño cuando no quería hacer algo, preguntaba por qué tenía que hacerlo. Y era muuuy pesado. Así que en algún momento a mi madre se le acababa la paciencia y decía: “¡Porque lo digo yo!”. Punto final, se acabó la discusión, ahí sabía que la vía del diálogo se había terminado. Así que en este caso, ¿Por qué has de diseñar ‘mobile first’? ¿Porque lo digo yo? Noooo, no tienes que hacerme caso, seguro casi ni me conoces apenas. Lo tienes que hacer… Porque lo dice Google (a ver si le llevas la contraria a este :P).

Mobile first: errores comunes

Usted primero, por favor…

¿Por qué hacer webs ‘mobile first’?

Perdona, pero he estado buscando y no veo donde dice Google que… espera que te lo explico. Google recomienda que las webs sean responsive, ¿verdad? En eso estamos de acuerdo. Mejor  una sola web que se adapte a diferentes tamaños de pantalla que un montón de versiones para dispositivos diferentes, más caras y lentas de mantener… El problema es que Google ahora nos aprieta las tuercas con la optimización web: Si quieres posicionar arriba, no vale una web que carga a la velocidad de la luz apagada… Y ahí estamos todos como locos, optimizando imágenes, optimizando código, comprobando que la compresión Gzip funciona… ¿Donde seguimos fallando? En el móvil. Google analytics nos permite comprobar con facilidad la velocidad de carga en escritorio y en móvil. Casi siempre, con el móvil es igual de lento que en escritorio o más. Porque nuestra web es responsive y las imágenes se adaptan a la pantalla, pero estás cargando la misma imagen en el móvil que en la web. Cantidad de píxeles desperdiciados, igual que el limitado ancho de banda del móvil de tu usuario.

Diseño responsive y mobile forst

Diferencias entre diseño responsive y mobile first (imagen de metamonks.com)

Cómo diseñar ‘mobile first’

Así que lo que podemos hacer es diseñar de forma diferente. Nada de pensar en el escritorio primero y luego a ver qué quitamos. Es lo cómodo para el diseñador, es como lleva diseñando toda la vida… Pero hoy en día ya no vale.

Ahora, debes ser capaz de diseñar primero para la pantalla más pequeña: la del teléfono móvil. Si consigues que tu web o aplicación entre ahí, los tamaños más grandes serán coser y cantar, ¿verdad? Además, al cargar por defecto los estilos para móviles, lo primero que descargará será la versión pequeña de las imágenes (si has hecho los deberes y has subido las imágenes en varios tamaños para los diferentes dispositivos), así que tu usuario de móvil no descargará una imagen enorme que luego se reducirá para entrar en pantalla. Ea, ya hemos ahorrado un montón de ancho de banda con esto.

Lo ideal al abordar un diseño de este tipo por primera vez, es utilizar un framework ya preparado para ‘mobile first’. Foundation, Bootstrap, Gridless, entre otros, vienen listos en sus últimas versiones para este tipo de aproximación. Yo he utilizado Bootstrap y estoy encantado :)

El cambio de mentalidad para diseñar ‘mobile first’ no es pequeño. El tamaño por defecto es el móvil, así que trabajar con nuestro navegador desplegado a todo ancho no nos hace ningún favor, al contrario, se nos van a escapar detalles por ahí… Es bastante incómodo probar cosas en el inspector cuando tenemos el navegador al ancho mínimo, pero siempre podemos sacar el inspector en una pantalla aparte (muy recomendado).

Errores comunes al aplicar ‘mobile First’

O al menos, los errores que yo he cometido…

Cuando el tamaño por defecto es el más pequeño, debes escribir las media querys de menor a mayor tamaño. Normalmente las escribimos desde el tamaño de pantalla más grande al más pequeño, así que toca invertir el orden. Este fue mi primer fallo al abordar por primera vez un ‘mobile first’, así que ya estás avisado ;).

Imágenes: Ya hemos hablado de esto así que no abundaré mucho más, sólo añadir que puede ser buena idea utilizar fuentes de iconos todo lo posible. Con las pantallas de alta densidad de píxeles, tu icono de 32X32px puede verse como un churro, y con las fuentes de iconos siempre tendrás una nitidez perfecta, a cualquier tamaño. Si no lo conoces, te recomiendo que le eches un ojo a Font Awesome, es muy fácil de implementar y tiene 369 iconos de todo tipo, empezando por los más utilizados. Cada tanto añaden iconos nuevos, por lo que cada vez va a más. Para comprimir aún más las imágenes para móviles, puedes jugar con desenfoques (ayudan a que la imagen pese menos) o a reducir colores (a veces una imagen en duotono aporta la misma información y pesa mucho menos).

Testea en móviles: Pero es que no tengo todos los modelos de móvil, ¿en cuáles tengo que testear? En todos los posibles. También tablets. Siempre hay sorpresas e inconsistencias inesperadas, así que pídele a todo el que tenga un dispositivo portátil y esté a tu alcance que cargue la aplicación o la web, para que compruebes que todo está en orden. Hay cosas de las que no te das cuenta en escritorio, como que un botón queda demasiado pequeño, que un enlace no se ve, que el texto del menú debe ir un poco más pequeño, etc. Hace poco, testeando una aplicación web, vimos que las imágenes de fondo (con un background-size:cover en el css), se quedaban cortas en Ipad. Viendo el error puedes resolverlo de varias formas, pero si no testeas no lo vas a ver. Esto es problemático si tienes tu proyecto en un servidor de preproducción de acceso cerrado. Tienes que poder abrirlo en determinados momentos para testear con cualquier dispositivo (no vamos a esperar a estar en producción para encontrarlos, ¿no?

Estos son los principales errores que he cometido al diseñar con esta filosofía, pero seguro que hay muchos más errores recurrentes. ¿Cuáles fueron los tuyos? ¿Has creado ya algún proyecto de este modo? Cuáles son tus experiencias? No seas tímid@ y cuéntamelo…

Para saber más:
Enlace en español 25 imprescindibles de diseño web para móviles: Seduce y convierte – Dispersium
Enlace en español Mobile first, el diseño web para el futuro – Silo Creativo
Enlace en español El concepto de mobile first – Samuel Diosdado
Enlace en inglés Mobile First – Luke Wroblewski (primer artículo sobre el tema, de 2009)
Enlace en inglés Mobile first – Luke Wroblewski (libro)
Enlace en inglés Mobile first versus responsive – metamonks.com
Enlace en inglés Where are the mobile first web designs? – cloudfour.com
Ayuda a Pymes

2 Comentarios

  1. Francisco Jofre

    Muchas gracias estimado, es un tema que necesito investigar en profundidad.

  2. Alan

    En el punto, es mas facil adaptar elementos que caben en una pantalla pequeña hacia una grande, que re-acomodar elementos grandes para que se vuelvan pequeños y quepan forzosamente en un movil.

Trackbacks/Pingbacks

  1. 25 imprescindibles de diseño web para móviles: Seduce y convierte - Dispersium 2015 - […] la cantidad de datos a descargar, y el número de paquetes. Hay técnicas, como el diseño “mobile first” y…
  2. El móvil ha muerto (Matías Duarte) - Dispersium - […] lo tanto, una aproximación “mobile first” tiene cada vez más sentido para cualquier desarrollo que pueda verse en más…
  3. ¿MOBILE FIRST? | IMASTE - […] para la versión más pequeña se basan, resumiendo, en que “es más fácil poner que quitar”, como podemos leer…
curso Divi actualizado y en español