Mobile first Design: ¿Qué es y para qué se utiliza?

El avance de la tecnología, ha hecho que las tendencias en diseño web vaya avanzado, y a su vez, el desarrollo web, por supuesto.

Hasta ahora decíamos que una web que no fuera responsive era anticuada, y no nos faltaba razón. Llevamos años navegando a través de los móviles, y en según que sectores no hay casi público a través de escritorio.

En desarrollo web, hacer versiones para tablet como para móvil sobrecargaban la web, ya que había que sobreescribir reglas para cada versión, entonces llegó para nosotros: Mobile First Design.

Mediante media queries ibamos sobrescribiendo todas las reglas de escritorio para todos los dispositivos que no fueran de escritorio. Para el WPO era pésimo y para nosotros también, el código no era muy limpio que digamos.

¿Qué es Mobile First Design?

Mobile First Design no es más que un forma de diseñar web en el que siempre se empieza a diseñar y desarrollar en el dispositivo más pequeño, en este caso, los móviles.

El diseñador, primero diseña en versión móvil y luego se va a adaptando a las pantallas más grandes. Hay que pensar que cada día tenemos más pantallas, como navegadores del coche, televisores, y ¡¡hasta frigoríficos!!

¿Cómo desarrollar Mobile First?

Como te he dicho antes, lo primero que tendremos que tener en cuenta son todas las reglas para móvil, nos olvidaremos por un momento de tablets (verticales y horizontales), portátiles y escritorio.

Os voy a mostrar un ejemplo de lo que sería una regla sencilla de CSS:

//Versión móvil
body {
    font-size: 18px;
}

//versión tablet

@media(min-width: 900px){
       body {
            font-size: 20px;
       }                  
}

//Versión escritorio

@media(min-width: 1200px){
       body {
            font-size: 24px;
       }                  
}

Lo que haces aquí con la regla min-width es que todos lo que tengan una resolución a partir 900px (en este caso) tengan un tamaño de letra de 20, y las pantallas que tengan a partir de 1200px 24px, son datos inventados para explicar como se hace, no lo hagaís igual que puede que falle, y no me hago responsable xD

¿Y qué pasa con Mobile First en WordPress?

Bueno pues es exactamente igual. Solo que claro, en WordPress tenemos varias cuestiones:

• Si adquieres un tema prediseñado, fíjate que sea Mobile First.
• Si contratas a un desarrollador o desarrolladora, él o ella sabrá lo que hay que hacer y te desarrollará en Mobile First. Pero dile este requerimiento, no todos los desarrolladores lo tienen en cuenta.

¿Y qué dice Google de Mobile First?

En este caso, no me quiero mojar demasiado, porque no soy SEO ni lo pretendo.

Pero lo único que sé es que hace años, Google indexa el contenido móvil. Es decir, lo ideal es tener tu versión en Mobile First desde YA. Si no lo tienes, Google lo cuenta como un factor más para posicionar, así que seguro que merece la pena.

¡¡Esto es todo!! Espero que os haya gustado y si tienes más información no dudes en escribirme en los comentarios.

Imagen destacada: Canva.