622 043 983 | jaime@gbcomunicacion.es
diseño web mobile first

Diseño web: ¿Mobile-First o Responsive?

Seguramente desde hace 5 años, cualquier persona que se ha interesado por el diseño web, bien para contratar una empresa para crear su web o por ser profesional del sector, ha escuchado el término “responsive”, o adaptativo en español.

Este término hace referencia a la capacidad que tiene el diseño de una página web para adaptar sus elementos a las diferentes resoluciones y proporciones de la gran variedad de dispositivos en los que podemos consultar una página web.

Desde verano de 2018 Google ha cambiado radicalmente su algoritmo y su forma de indexar contenido, y ha lanzado la premisa Mobile First, por la cual indexará primero las versiones móviles de una página web antes que las versiones de escritorio como venía haciendo hasta ahora. Google hace esto porque ha detectado que más del 60% de las búsquedas y adquisiciones de sitios web se están realizando actualmente desde dispositivos móviles, teléfonos, y tablets.

¿Qué es el Diseño web responsive?

El diseño adaptativo o “responsive”, como lo referiremos en el resto de este artículo, es el que un diseñador web inicia desde una concepción inicial del sitio en una pantalla grande o de escritorio y va adaptando la disposición y tamaño de los elementos y bloques de la página para que se vean correctamente en un teléfono o tablet.

Se basa en la premisa de que existen tres tipos de dispositivos: 

resoluciones de diseño responsive

  • Pantallas grandes y escritorio, que incluyen ordenadores de sobremesa, portátiles, televisiones y dispositivos, en general, por encima de los 1024 pixels de ancho de resolución. En este rango también entran las tablets grandes como iPad Pro o Surface.
  • Tablet, que engloba resoluciones  desde los 500 hasta los 900 pixels.
  • Móviles, hasta los 700 pixels de resolución aproximadamente en visión horizontal.

En líneas generales estos los  tamaños y resoluciones que tenemos que tener en cuenta a la hora de adaptar un diseño de una página si queremos que sea responsive.

La ventaja del diseño responsive radica en la no duplicidad de contenido, en definitiva en trabajar una sola vez el contenido. Hasta 2013 cuando en el diseño de sitios web para móviles se usaba una versión alternativa al diseño de escritorio, ya que las capacidades responsive de las plantillas y los propios navegadores aun estaban dando sus primeros pasos en adaptabilidad, esto obligaba en la mayoría de los casos a tener que realizar una segunda página con el mismo contenido pero con un tema o maquetación específica para los teléfonos móviles, poniendo el sitio para móviles en un subdominio del tipo m.midominio.com .

colocación de elementos responsive

 

Hoy diseñamos un solo sitio web y un solo contenido para todos los dispositivos y los temas o “builders” que generalmente utilizamos para desarrollar un sitio web en WordPress como son Avada, Divi o Yootheme, por nombrar algunos de los más conocidos y con los que trabajamos en el estudio, ya están preparados para adaptar el contenido a dispositivos móviles con mínimos cambios o duplicidad de contenido, mas allá de la adaptación de ciertos elementos como veremos más adelante.

Mobile First. La nueva forma de Google de indexar sitios web.

¿Qué es el índice Mobile First de Google?

Es un nuevo método desarrollado por Google para indexar tu página web y mostrarla en los resultados de búsqueda. Google a partir de ahora (junio de 2018) rastrea primero la versión móvil de una página web e indexa primero el contenido de esa página.

¿Cómo afecta esto a mi página web o a mi forma de trabajar?

Google explica muy bien en este artículo cómo va a afectar este cambio al resultado de búsqueda de tu página web ya creada. En resumen, los sitios web diseñados con responsive o únicamente con una versión de escritorio no se van a ver afectados en cuanto al contenido a indexar, ya que éste será el mismo en móviles y escritorio si bien es cierto que la filosofía Mobile-First incentiva a adaptar tu web a móviles o al menos ofrecer una versión para móviles porque va a penalizar tu sitio en los resultados de búsqueda. Google quiere que tu sitio web se vea bien en un móvil.

En cuanto a la forma de trabajar el diseño y el contenido de una página web, si ya vienes trabajando con constructores y temas responsive no va a afectar demasiado, simplemente hay que cambiar el chip a la hora de maquetar y de plantear el contenido y pensar primero en el móvil.

Por ejemplo, si estamos diseñando una landing para una campaña de AdWords, tenemos que plantear que todos los elementos fundamentales deben estar arriba del todo, títulos H1, llamadas a la acción, texto principal, para que el visitante reciba el primer impacto nada más abrir la página, y luego ver como queda en escritorio. En definitiva trabajar al revés de como hemos venido haciendo.

diferencia entre responsive y mobile first

¿Está mi página preparada para Mobile First?

Existen varias herramientas gratuitas para poder llegar a la conclusión de que tu página web cumple con los requisitos básicos que a Google le importa para determinar que tu sitio es amigable con los móviles.

En Search Console hay una herramienta llamada USABILIDAD MÓVIL que te indicará si alguna de las páginas de tu sitio web tiene algún fallo de carga o visualización en móviles.

Otra herramienta de gran utilidad es PageSpeed Insights, también de Google, que te dirá la velocidad de carga de una URL otorgándole una puntuación de 0 al 100. Cuanto más alto sea el valor más rápido carga tu sitio web, un elemento muy importante en el posicionamiento.

Por lo general, todo lo que esté por debajo de 50 debería ser revisado, aunque también decir que esta herramienta de medición es muy estricta y en muchos casos la valoración no se corresponde con la experiencia real de carga, muchas veces pasas una URL que da una puntuación muy baja y en una prueba real en un móvil 4G ésta carga rápido, por eso hay que tomar los resultados de esta herramienta con cautela.

Page speed gb comunicacion

Recomendaciones de diseño web Mobile First

  1. Piensa en vertical. Si trabajas con herramientas de maquetación dinámica cambia constantemente las vistas entre Desktop y Mobile para comprobar que la ordenación de elementos y contenido es coherente en el móvil. Da prioridad a cómo queda en el móvil antes que en el escritorio.
  2. Crea versiones móviles de objetos. Generalmente y hasta que los desarrolladores de temas se pongan en serio con la adaptación dinámica de sliders, tabs y otros objetos, hay que buscar una alternativa que sea 100% usable en el móvil como por ejemplo accordions en lugar de tabs o versiones adaptadas del slider en cuanto a tamaños de texto, navegación entre diapositivas, etc.
  3. Comprueba que en el móvil sigue estando todo. En algunos temas los elementos de la “toolbar” quedan ocultos ya que ésta no se muestra en móviles. trata de situar esa misma información en un cuadro sólo visible en éstos. Ojo también al contenido en “sidebars”, si prefieres que se muestre primero o después que el contenido principal, tendrás que ajustar las vistas en móviles de los plugins.
  4. No te fíes del emulador de tu navegador. Tenemos multitud de herramientas para emular los dispositivos móviles aparte de las que proporciona WordPress o temas como Divi, pero no te fíes, trabaja con tu móvil al lado y ve comprobando como quedan las cosas. Especial atención al tamaño de la letra.
  5. Mide los tiempos de carga. Retomando la recomendación del punto 2, en los móviles vamos a prescindir de alardes de dinamismo y vamos a tratar de ser prácticos. Vamos a cargar todos los elementos sin animaciones de entrada, vamos a tratar de insertar imágenes de muy poco peso, si eres diseñador no deberías tener problemas para generar imágenes de buena calidad optimizando su peso, y vamos procurar que las imágenes se vayan cargando a medida que las presentamos en pantalla con algún sistema o plugin de carga perezosa (Lazy Load).
  6. ¡Comprime! Usa las herramientas de compresión de CSS y Js que seguro trae tu tema o usa plugins de aceleración.
  7. Comprueba la velocidad tu sitio web. Usa PageSpeed Insights, Pingdom, SemRush o cualquier otro que sea tu favorito para comprobar que el trabajo de los puntos 5 y 6 han servido para algo.

Conclusiones

Titulábamos el artículo marcando la diferencia entre Mobile First o Responsive pero, ¿realmente hay diferencia?

En el plano técnico está claro que no, tenemos que trabajar con herramientas dinámicas que permitan adaptar un mismo contenido a diferentes resoluciones. La diferencia entre responsive y Mobile First está en la forma de pensar y de planificar el diseño y el contenido. Hasta ahora hemos considerado que el sitio de escritorio es el que importa y al que hay que dar protagonismo y ahora las tornas han cambiado, tenemos que adaptar el diseño web para móviles a los dispositivos de escritorio.

Diseño web, Mobile First, Responsive, Wordpress


Jaime González Barcenilla

Soy diseñador de páginas web con 20 años de experiencia en diseño web y diseño gráfico y director del estudio GB Comunicación. Soy experto en marketing online y en e-commerce.

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

CONTACTAR

Teléfono: 622 043 983
e-mail: jaime@gbcomunicacion.es

También puedes contactar con nosotros en nuestra sección de contacto y en redes sociales.


Copyright © 2019. Jaime González Barcenilla. Diseñador de páginas web en Valladolid.  Todos los derechos reservados.