Hace tiempo que Google prioriza la navegación desde móviles. Este enfoque ha generado distintos tipos de diseño: responsive, adaptive y mobile first. Te explicamos las diferencias y ventajas de cada uno.

Allá por 2012, cuando el diseño en la navegación móvil les había generado un beneficio casi nulo con el consiguiente batacazo bursátil, Mark Zuckerberg confesaba que en Facebook no habían estado rápidos a la hora de detectar el cambio de hábitos de navegación de los usuarios, con la migración masiva de PC a móvil, y que habían tardado en lanzar una app sólida que cubriera ese flanco.

Naturalmente, hoy día la implantación masiva de los smartphones se da por supuesto y, por ejemplo, las plantillas de Wordpress, el principal gestor de contenidos, son responsive por defecto. Esta espectacular transición está apuntalada por estadísticas como el estudio de comScore que indica que en EEUU un 25% de los usuarios solo navegan con el móvil. En España disponemos de uno de los parques de smartphones más amplios del mundo, con un 95% de penetración y un 43% del tiempo de navegación por Internet con estos dispositivos.

Esta realidad se ha traducido de forma tangible en la priorización de resultados en buscadores, sobre todo en Google. Si hace unos años la existencia de una web mobile friendly (responsive, por ejemplo) hacía ganar puntos, en 2016 Google dio el salto definitivo con el lanzamiento de su Mobile First Index. ¿Qué significa eso? Pues que los resultados se ofrecen con respecto a la experiencia de navegación desde el móvil. Si tu web se ve a la perfección en un ordenador de sobremesa, pero es completamente inoperante desde un smartphone, tu posición en las búsquedas caerá en picado. Puedes hacerte una idea de si cumples los requisitos utilizando la herramienta Google Mobile Friendly Test.

En vista de todo esto, el diseño de sitios web ha adoptado diversas estrategias: responsive, adaptive y mobile first. Vamos a aclarar un poco las características de cada uno de ellos en primer lugar.

Ventajas del diseño mobile first

Diseño responsive

Tal como se ha apuntado, esta es una de las vías más habituales para afrontar la creciente disparidad de ecosistemas de navegación, no ya solo móviles con diversos tamaños de pantalla, sino también tablets, además de los consabidos PCs. Un verdadero diseño responsive reagrupa los elementos de la web en función de la pantalla del dispositivo. Da igual que sea un iMac de 27 pulgadas o un móvil de 5,5 pulgadas: la experiencia de navegación será la misma. Es decir, se trata de un diseño web agnóstico.

Diseño adaptive

Esta categoría suele confundirse con el diseño responsive y, aunque ofrece una funcionalidad similar, sigue un camino bastante distinto. En el enfoque anterior, todos los elementos se adaptan progresivamente con independencia del tamaño. En la modalidad adaptive se fijan una serie de configuraciones. Por ejemplo, una versión para móviles de 5 pulgadas, otra para tablets de 11 y otra para ordenadores de sobremesa de 19 o 21 pulgadas en adelante. Cuando el tamaño de la pantalla crece, el diseño reacciona dando “saltos” hacia la siguiente configuración. Para el usuario se trata de algo transparente y muchas veces ni siquiera será consciente si tu web es adaptive, responsive o mobile first.

Diseño mobile first

Este enfoque dista mucho de ser novedoso. De hecho, las primeras propuestas datan del año 2009, cuando Luke Wroblewski anticipó las necesidades que imponía lo que él denominó “explosión móvil”. Había llegado el momento de ir más allá de una adaptación de las webs existentes y empezar desde cero, pensando en un diseño exclusivamente orientado a teléfonos móviles y tablets para luego adaptarlo a los navegadores de ordenadores de sobremesa.

El diseño mobile first, también llamado de mejora progresiva (progressive enhancement) es, en resumen, plantear una web con una filosofía de abajo a arriba. No se trata tanto de crear un sitio web al que le vamos restando funcionalidades cuanto más pequeño es el dispositivo de navegación, sino de partir de un diseño básico al que iremos añadiendo características a medida que el entorno de navegación se va ampliando.

De acuerdo, esos son los rudimentos del mobile first. ¿Pero qué sentido tiene aplicar esta filosofía, si al fin y al cabo los móviles aún están lejos de ser el único dispositivo de navegación?

Ventajas del diseño mobile first

En aquel artículo primigenio, Wroblewski apuntaba hacia una serie de claves:

  1. Diseñar para móvil obliga a eliminar toda la información superflua. Hay que pensar en pantallas pequeñas en las que solo tiene cabida lo esencial y en las que es fácil generar ruido indeseado. Si partimos de una filosofía que prioriza el móvil, luego podremos introducir funcionalidades específicas para los navegadores de sobremesa.
  2. Los móviles aportan funcionalidades específicas como el posicionamiento por GPS y acelerómetros, brújula integrada, detección de amigos en la zona, navegación multi-touch más ágil, etc. Todas ellas configuran una experiencia de uso radicalmente distinta.

Cabe argumentar que, si partimos de un diseño concebido para móviles, el resultado no solo beneficiará a los dispositivos más pequeños, sino que esta forma de pensar que prioriza lo esencial también será beneficiosa cuando llegue el momento de navegar en los hermanos mayores de sobremesa. Al fin y al cabo, uno de los principales problemas de las páginas web convencionales es que suelen pecar de un exceso de información y ruido. Mobile first es, en definitiva, la puerta de acceso al minimalismo.

¿Me conviene un diseño mobile first?

Se trata de una pregunta compleja y, aunque en principio es la dirección hacia la que avanza el diseño web, no siempre es un requisito irrenunciable. ¿Tienes una web de e-commerce o bien se trata solo de un escaparate corporativo? ¿Dependes de funcionalidades de localización? Por ejemplo, si tienes una cadena de restaurantes. ¿Cuál es el perfil de tus usuarios? Si son adolescentes de la generación Z, es muy probable que vivan pegados a las pantallas de su smartphone, pero si ofreces planes de pensiones es posible que tu target tenga otros hábitos de navegación.

Al final, elijas el diseño que elijas, solo hay un requisito fundamental: que tus usuarios puedan encontrar la información de manera rápida, intuitiva y eficaz. Y en ese aspecto también conviene tener en cuenta otros factores como la interfaz gráfica (UI) y la usabilidad (UX).

Si te interesa el marketing digital, así como el marketing de contenidos y las posibilidades que ofrece, suscríbete a nuestra newsletter y te iremos contando.