fbpx

Qué es Mobile First Design, cómo se implementa y en qué se diferencia del Responsive design

En este post te cuento todo lo que debes saber sobre Mobile First Design, como implementarlo y muchos detalles más. Sin más comienzo 🙂

Índice de contenido:

  1. Qué es Mobile First Design
  2. Qué es Responsive Design
  3. Diferencia entre Mobile First Design y Responsive Design
  4. Cómo implementar Mobile First Design
  5. Ventaja en el tiempo de carga para tráfico móvil
  6. Mobile First Indexing
  7. Cómo saber si una web está implementada en Mobile First Design

Qué es Mobile First Design

Mobile First Design no es más que diseñar primero para móvil pero dicho en inglés. Cómo verás, o ya habrás comprobado, en muchas ocasiones en el mundo online se usa mucha terminología en inglés, pero no es más que solo eso, terminología en inglés.

CONSEJO: Nunca te dejes impresionar por ningún profesional que te hable con muchos términos en inglés, si es necesario pregúntale que significa cada cosa, verás como a la tercera pregunta ya te lo cuenta todo en castellano.

Volviendo al tema, Mobile First Design no es más que primero diseñar para móvil e ir adaptando ese diseño para pantallas más grandes de menor a mayor tamaño: tablet vertical, tablet horizontal y ordenador.

Vale, ya sabes lo que significa, ahora te cuento qué es el Responsive Design y en que se diferencian ambas implementaciones.

Qué es Responsive Design

Al igual que en el caso anterior, Responsive Design es diseño adaptable pero dicho en inglés. Este concepto se creó hace varios años con el objetivo de adaptar las páginas web a las pantallas más pequeñas (tablet, móvil, etc) sin necesidad de tener que invertir en aplicaciones nativas.

En aquellos años con todas las webs diseñadas, y con esos diseños implementados, para ordenador, este concepto fue una adaptación rápida y fácil de solucionar el problema de navegabilidad para aquel tráfico móvil.

Las ventajas de esta implementación en tu web tenía los siguientes puntos positivos:

  1. Te evitaba tener dos versiones de tu web, una para móvil y otra para escritorio. Con ello, te ahorrabas tiempo en su mantenimiento, ya que tenías todas las versiones sobre el mismo HTML, y coste en el desarrollo e implementación de esa segunda versión para móvil.
  2. Sin necesidad de tener aplicaciones nativas para iOs, Android… le dabas una buena experiencia al usuario que navegaba por tu web con un dispositivo móvil.
  3. Te ahorrabas el dinero de tener que crear aplicaciones móviles nativas.

Estas tres ventajas las tiene el Mobile First Design también. Sabido esto, una vez que conoces el significado de los dos conceptos, te cuento cuál es la diferencia entre Responsive Design y Mobile First Design.

Qué diferencia hay entre Mobile First Design y Responsive Design

Según las definiciones que te he contado arriba, la principal diferencia es que con Mobile First Design una web se diseña primero en móvil, y luego se van realizando los diseños para pantallas más grandes a partir de este diseño inicial, y que en Responsive Design se hace al contrario, primero se diseña para PC y luego se va adaptando los diseños para pantallas más pequeñas.

Vaya chapa me has soltado, Antonio, lo se, pero te ha quedado clara la principal diferencia, ¿a qué sí?. Pues bien, una vez que has entendido esto, debes saber que hay una de estas dos implementaciones que a Google le gusta más que la otra.

Ahora te contaré qué implementación favorece el SEO, le gusta más a Google. Pero antes, tengo que decirte que el tráfico móvil lleva varios años superando al del resto de dispositivos, puedes consultarlo aquí.

Por lo anterior, debes elegir la implementación que favorezca más la navegación de los usuarios móvil. Por esto, también te voy a contar cuál es la mejor implementación para el tráfico móvil (ya te lo imaginarás) y el porqué es mejor. ¡Vamos a ello!

Cómo implementar Mobile First Design

Para implementar Mobile First Desgin en tu web, primero debes saber qué es CSS y cómo lo interpreta un navegador (hablamos a nivel teórico, pero si estás interesado en saber más házmelo saber mediante mi formulario de contacto, estaré encantado de ayudarte).

Qué es CSS

CSS es la manera en la que le indicas a tu navegador los estilos que tendrá cada elemento de tu página web. Por ejemplo, si quieres que un título sea más grande, o que un enlace tenga un color en concreto, etc.

Si vas un paso más allá, puedes dar estas indicaciones condicionales dependiendo del ancho de la pantalla que está visualizando el usuario en tu web. Por lo general, estas indicaciones no las haces de forma excluyente, sino que das unas generales para un tamaño de pantalla concreto y para el resto de tamaños das instrucciones añadidas que modifican esas anteriores.

Implementación Mobile First Design en CSS

En el caso de Mobile First Design, las indicaciones generales que das en CSS son para móvil y para el resto de tamaños de pantalla das instrucciones adicionales que modifican a estas.

Antes de ver un ejemplo de implementación básica de Mobile First Design, debes añadir el siguiente código a la cabecera head de tu página web. Con este código conseguirás que las instrucciones condicionales de CSS funcionen en todos los dispositivos:

<meta name="viewport" content="width=device-width" />

Mira el siguiente ejemplo, en él le dices al navegador que el color de los enlaces será rojo:

a {
    color: red;
}

Para este ejemplo, imagínate que quieres que el color de los enlaces sea rojo en móvil pero que para un tablet horizontal sea verde y para un ordenador sea azul. Pues deberías usar la instrucción condicional CSS @media indicándole el tamaño desde dónde debe cambiar. Antes debes añadir dentro de la etiqueta head de tu web el siguiente código:

// Desde tablet horizontal
@media (min-width: 992px) {
    color: green;
}
// Desde PC
@media (min-width: 1200px) {
    color: blue;
}

Con @media (min-width: 992px) le indicas al navegador que desde 992px de ancho de la pantalla hacia arriba los enlaces sean verde. Por último, con @media (min-width: 1200px) le indicas que desde 1200px hacia arriba el color de los enlaces sea azul.

Como en CSS las instrucciones de más abajo tienen más prioridad, estás sobrescribiendo solo desde el tamaño indicado con @media hacia tamaños más grandes. Con esto consigues hacer rangos de anchos de pantalla en los que las propiedades CSS afecten solo a dispositivos con esos anchos.

En el siguiente vídeo, tienes un vídeo tutorial de la implementación del Mobile First Design paso a paso sobre el título (elemento h1) de una web.

Una vez que sabes esto, te voy a explicar a continuación la ventaja que supone para los dispositivos móvil una web con la implementación Mobile First Design.

Ventaja en el tiempo de carga de tu web en móvil gracias a Mobile First Design

Como habrás supuesto, la implementación de Mobile First Design es la mejor para nuestros usuarios de tráfico móvil, su nombre da muchas pistas. Pero, ¿por qué es así?

Según como te he explicado antes, el CSS en Mobile First Design es el que tiene las primeras reglas (generales) y no las sobrescribes nunca con @media, ya que nunca se cumplen las condiciones de anchos de pantallas más grandes.

Al no cumplir estas condiciones, el navegador omite esas reglas para el móvil, por lo que tu web cargará como si esas reglas no existieran, es decir al procesar menos reglas la carga es más rápida.

Por el contrario, tanto tablet y ordenador sí tendrán que procesarlas por lo que su tiempo de carga será más lento. Vale Antonio, pero la mayoría del tráfico de mi web es navegación con ordenador, yo prefiero que la carga sea más rápida para ordenador.

La respuesta que te esperas ante esto será  pues usa Responsive Design para tu web, para conseguir una carga más rápida en ordenador, pero no, existe un factor muy importante para elegir la implementación Mobile First Design para tu web a pesar de que la mayoría de tu tráfico sea de ordenador, Google y el SEO.

Mobile First Indexing: el SEO se decanta por Mobile First Design

Lo anunció Google a mediados de 2016 y en el verano de 2018 ha empezado, ya está indexando el contenido móvil, no el desktop. Realmente están haciendo el cambio progresivamente, pero a la mayoría de Webmasters ya nos ha llegado el aviso.

Qué quiere decir esto, que deberías tener implementado el Mobile First Design en tu web, porque para el SEO ya pasa a ser un factor de posicionamiento más.

Notificación de Google del comienzo del Mobile First indexing
Notificación de Google del comienzo del Mobile First indexing

Qué es el Mobile First Indexing

El Mobile First Indexing es que Google tendrá en cuenta el contenido de la versión móvil de tu web para mostrar en sus búsquedas. Hasta ahora siempre había tenido en cuenta la versión de ordenador, pero desde el verano de 2018 el juego ha cambiado. Incluso para las búsquedas que realices desde el ordenador en Google, los resultados mostrados serán extraídos de las versiones móviles de cada web.

Cómo preparar una web para el Mobile First Indexing

Preparar tu web para el Mobile First Indexing es tan sencillo como implementar Mobile First Design en ella. Con ello ganarás en velocidad de carga para los visitantes móviles y Google te verás con buenos ojos.

Cómo saber si una web está implementanda en Mobile first Design

Antes te he enseñado a implementar el Mobile First Design, por lo tanto ya sabes el 80% de como descubrir si una web lo tiene implementado. Pero la misma instrucción CSS se puede usar para implementar el Responsive Design. Entonces, ¿cuál es la diferencia?

Es muy sencillo de distinguir, el Responsive Design usa las instrucciones de la forma @media (max-width: TAMAÑO MÁXIMO) y Mobile First Design las utiliza de la forma @media (min-width: TAMAÑO MÍNIMO).

Por lo tanto, si pudieras ver los archivos CSS (hojas de estilos) de una web, podrías saber si está implementada con Mobile First Design o no. Simplemente, tienes que buscar si (max-width: se encuentra en esos archivos o no.

Para encontrar los archivos CSS y buscar la instrucción sigue los siguientes pasos:

Ver código fuente desde Google Chrome
Ver código fuente desde Google Chrome
Buscar archivos CSS desde el código fuente en Google Chrome
Buscar archivos CSS desde el código fuente en Google Chrome
Buscar instrucción CSS para Responsive Design en el código fuente de una web con Google Chrome
Buscar instrucción CSS para Responsive Design en el código fuente de una web con Google Chrome

Muy sencillo, si como en la última imagen encuentras instrucciones de Responsive Design, busca también las de Mobile First Design. En el caso de que encuentres muchas de Mobile First Design y una o dos de Responsive Design, puede que sí esté implementada en el primero de los casos. Sino es que no está implementada en Mobile First Design.

Si no consigues saberlo o no está seguro para alguna web, ponte en contacto conmigo mediante este formulario de contacto.

Si quieres mejorar el SEO de tu web gracias al aumento de retención del usuario, mira este tutorial de cómo insertar una índice de contenido en WordPress.