Mobile First, por favor


Share on FacebookTweet about this on TwitterShare on LinkedInEmail this to someoneShare on Google+

Podríamos definir Mobile First como una filosofía en la que encaramos el trabajo de nuestros desarrollos web pensando inicialmente en los dispositivos con pantallas más pequeñas, y terminamos en las de mayor tamaño. De este modo, se nos facilita la implantación de un diseño responsive.

Con esta forma de trabajar, debemos tener más claro que nunca el contenido que vamos a mostrar, el diseño y la disposición de elementos, rechazando todo aquello que nos resulte superfluo, como veremos en este artículo.

Contenido

Con la filosofía Mobile First podremos agregar la tarea de realizar una especificación del contenido. Es decir, un listado (en palabras) de todos los argumentos que queremos incluir dentro de una página web, ya sea la principal o una de las interiores. Y todo esto teniendo en mente que deberá estar en un dispositivo móvil, con sus dimensiones reducidas y que no será capaz de albergar una gran cantidad de información.

Aunque dispongamos de un móvil con una gran resolución y una gran pantalla, meter información en exceso no tendría ningún sentido si el usuario no accede a ella, por lo que tendremos que tener en cuenta tres reglas fundamentales:

  1.  Funcionamiento en todos los navegadores y sistemas. Aunque hubo un tiempo en el que los usuarios mayoritariamente usaban Windows, a día de hoy Mac OSX, Linux, Android e iOS se han hecho muy populares, a lo que hay que unir que mucha gente ya sólo navega desde teléfonos móviles o tabletas.
  2.  Todas las dimensiones y resoluciones. O lo que es lo mismo, adaptar nuestro proyecto Web a cualquier resolución de pantalla.
  3.  Todas las velocidades de conexión. Cuando navegamos desde un móvil la velocidad se limita a un ancho de banda, y aunque esta tendencia está evolucionando, es algo que aún hay que tener muy en cuenta.

Diseño

Cuando diseñamos la interfaz, también hay que pensar primero en la versión para móvil, porque a diferencia de hacerlo para la de escritorio, ésta cuenta con un espacio más reducido… Y no sólo por resolución (que en algunos modelos puede ser hasta superior), sino porque se tiene que facilitar la interacción con elementos como botones, textos, etc.

Una vez que tenemos realizado el diseño, será momento de poner un breakpoint ( los puntos o medidas de anchura donde se pueden crear saltos en el diseño responsive) y definir media queries (las primeras construcciones del lenguaje CSS que nos permiten definir estilos condicionales, aplicables únicamente en determinadas situ) para pantallas que tengan dimensiones mayores a la anchura que veamos, que al estirar la ventana, comienza a verse poco estético.

En conclusión, Mobile First es una cuestión de facilidad en el desarrollo, donde tu diseño irá de menos a más, y dependiendo de las necesidades de anchura de pantalla, podrás adaptar el layout de forma más cómoda.


Share on FacebookTweet about this on TwitterShare on LinkedInEmail this to someoneShare on Google+