"Mobile First" es en realidad un concepto bastante simple: diseñar pensando en los móviles primero. Así se resume este artículo que viene a explicar los motivos por los que debemos comenzar siempre centrándonos en los dispositivos con pantallas más pequeñas y generalmente con menor ancho de banda disponible para la navegación.

Cuando diseñas un sitio web responsivo debes tener en la cabeza una enorme cantidad de contextos donde tu contenido va a ser consumido. Para no perderse y para al final conseguir una solución optimizada para todo el mundo debemos aplicar la filosofía Mobile First.

A lo largo de todo el Manual de Responsive Web Design vamos dando pinceladas que nos orientan hacia la idea del mobile first. Desde la elección del contenido, quedándose con la información más esencial y rechazando lo superfluo, hasta las etapas de la ejecución de un diseño, se hacen con esta filosofía en la cabeza.

Contenido

En un móvil no te cabe toda la información del mundo y no tiene sentido que un usuario deba hacer un scroll casi infinito hasta encontrar aquello que resulta de importancia. En el artículo de los tres pilares fundamentales del diseño responsive ya hablamos bastante acerca de esto y explicamos muchos motivos por los que no debemos concentrar en una página mucha cantidad de información.

Ahora, bajo la filosofía de Mobile First agregaremos la tarea de realizar una "especificación del contenido" de una página, que contiene simplemente un listado (en palabras) de todos los contenidos que queremos englobar dentro de una página, ya sea la home o una de las páginas interiores del sitio. Esa relación de contenido tenemos que pensarla con el móvil en la cabeza y su pantalla de dimensiones reducidas, que no es capaz de albergar una cantidad enorme de información.

Por supuesto, esa definición de elementos la debemos hacer con el cliente y seguramente saldrán muchas cosas y quizás algunas sean prescindibles. En la cabecera en un móvil igual no cabe el logotipo + navegador + formulario de login + buscador. Entonces debemos intentar reducir todo aquello que es superfluo o prescindible, eliminándolo del listado. Quizás lo podemos sustituir por un icono de "opciones" y, una vez pulsado que se vean aquellas cosas que no entran en la página para móviles.

Diseño

La etapa creativa, cuando se diseña la interfaz, ya sea en papel durante el prototipado o en HTML + CSS en la ejecución, también se hace comenzando por aquello que veríamos cuando la web se consulta desde un móvil.

Resulta mucho más sencillo diseñar una web para un móvil, que tiene muy pocos elementos, que para un ordenador de escritorio donde tenemos espacio para colocar muchas otras cosas. Por ello es una buena idea que, cuando diseñemos, nos pongamos delante de un espacio reducido y veamos qué cosas son las que entran en el diseño y qué cosas pueden ser prescindibles.

Si estás ejecutando el diseño en HTML + CSS comenzarás reduciendo la ventana del navegador a las dimensiones de anchura que pueda tener un móvil, quizás unos 320 píxeles de ancho (ahora no vamos a discutir sobre dimensiones), para acomodar los elementos de tu inventario de contenido. Quizás te des cuenta que necesitas prescindir de nuevos elementos que son difíciles de acomodar y que no eran tan esenciales después de todo.

Una vez tengas el diseño que se vea bien en una ventana con anchura reducida, entonces irás estirando la ventana hasta que te des cuenta que tu diseño comienza a verse feo. Entonces es el momento de poner un "breakpoint" (punto de ruptura) y definir media queries para pantallas que tengan dimensiones mayores que esa anchura.

Nota: Hablaremos más adelante sobre los breakpoints y las media queries. De momento nos quedamos más en la parte de conceptos y flujos de trabajo y en poco tiempo podremos ver cómo se implementan en código.

Mobile First es una cuestión de comodidad, pues tu diseño irá de menos a más y por tanto gradualmente irás acomodando las cosas y adaptando el layout a las necesidades de cada anchura de pantalla. Pero no solo eso, también es sentido común, pues es mucho más fácil comenzar por una pantalla pequeña donde aparecen pocos elementos y pocos detalles e ir agregando cosas a medida que van cabiendo en el layout. Es decir, resulta más sencillo tener pocos elementos e ir agregando más cosas a medida que van cabiendo, que empezar por el diseño para pantallas grandes y luego ir quitando cosas cuando no te caben.

Es más fácil diseñar en pequeñito al principio. Cuando tienes más espacio verás que tus cosas siguen cabiendo. Si diseñas en grande, cuando tengas menos espacio las cosas no te entrarán y seguramente tendrás que hacer muchos más esfuerzos para acomodarlas. En este punto todos los diseñadores están de acuerdo, así que no lo pienses mucho, comienza diseñando para móviles.