Que un sitio web sea compatible con dispositivos móviles, mobile friendly o responsive significa que no solo se puede ver y navegar correctamente en un ordenador sino también en todo tipo de dispositivos como, por ejemplo, tablets, pda’s, móviles… etc.
Hoy en día este punto es más importante que nunca pues gran parte del tráfico web y público proviene de dispositivos móviles.
Beneficios de diseño responsive y compatibilidad web móvil
Los beneficios de una web compatible con móviles o responsive son las siguientes:
- A nivel de mejoras SEO hay que tener en cuenta que Google penaliza los sitios que no son compatibles con dispositivos móviles o presentan algún problema al respecto. Por lo tanto, si lo que queremos es mejorar el posicionamiento web, nos conviene que nuestra web sea mobile friendly.
- La experiencia de usuario es mucho mejor si la web es compatible con móviles.
Pensemos un momento sobre este punto… ¿Qué ocurre cuando un usuario visita una web que no es compatible con el móvil?
Básicamente el usuario se encontrará con una serie de dificultades a la hora de leer y navegar entre la información y, a no ser que la información que esté buscando sea muy específica y no se encuentre en otro lugar, abandonará la página en muy poco tiempo en busca de una alternativa mejor.
Ello significa que, una web compatible con móviles incrementará el tiempo que los usuarios pasan en dicha web, mejorando, de nuevo, el SEO de la misma. - Más y mejor tráfico. Este punto se deriva de los dos anteriores. Por una parte, si Google no nos penaliza estaremos en una mejor posición en los resultados de búsqueda lo que da lugar a más tráfico y, por otra parte, si la experiencia de usuario es mejor éste se quedará más tiempo en nuestra web dando lugar a que el tráfico que tenemos sea de mayor calidad.
Test de compatibilidad web móvil manual
Una de las formas de comprobar si tu web es compatible con móviles es de manera manual, piensa como si fueras un usuario y pregúntate… ¿Se puede ver correctamente?, ¿es fácil navegar por el menú?, ¿las letras y enlaces son lo suficientemente grandes?, ¿qué partes mejoraría?… etc.
Ten en cuenta que esta técnica es bastante superficial y deberías complementarlo con una revisión automática de la compatibilidad móvil. No obstante, este es el primer paso a realizar. No deberías realizar una comprobación automática hasta que soluciones los errores o mejoras encontrados en esta fase.
Existen, básicamente, dos formas de comprobar la compatibilidad móvil de una web de manera manual:
- Utilizar un dispositivo móvil específico, es decir, visitar la web en cuestión con nuestro móvil o tablet.
- Simular la vista móvil a través de nuestro navegador sin necesidad de utilizar otros dispositivos. Esta última opción permite comprobar una gama más amplia de resoluciones, dispositivos y opciones que, de otra manera, no podríamos conseguir.
Compatibilidad web móvil con Firefox
Para acceder a la vista móvil desde Firefox haremos clic con el botón derecho del ratón sobre la web y seleccionaremos la opción “Inspeccionar elemento”. Una alternativa es pulsar “Ctrl+Shift+K”.
Tras ello, deberás buscar el icono de un móvil/tablet que tiene la etiqueta de “Vista de diseño adaptable”. Una alternativa es pulsar “Ctrl+Shift+M”.
Aparecerá la web en un pequeño recuadro. Podremos configurar múltiples opciones tales como la resolución, orientación de la pantalla y conexión utilizada por el dispositivo móvil:
Además, a través del botón del engranaje, podremos configurar más opciones como alinear el viewport a la izquierda o mostrar y editar el agente utilizado por el usuario.
Mobile friendly con Chrome
Para acceder a la vista móvil desde Chrome los pasos son muy similares a Firefox. Haremos clic con el botón derecho del ratón sobre la página y pulsaremos sobre “Inspeccionar”. Una alternativa es pulsar “Ctrl+Shift+I”.
Después, en la parte inferior o derecha buscaremos el icono de móvil/tablet que tiene la etiqueta “Toggle device Toolbar”.
Aparecerá la web minimizada. También podremos configurar múltiples opciones como la resolución de pantalla, el dispositivo o el tanto por ciento de zoom.
Además, a través de los tres puntos en la parte superior derecha, podremos configurar otras opciones como mostrar u ocultar media queries, mostrar las reglas o hacer una captura de pantalla.
Test mobile friendly con herramientas automáticas
Tras haber comprobado de manera manual si una web es responsive o no, pasaremos a comprobar de manera automática si una web es compatible con dispositivos móviles. Esta forma es mucho más completa ya que la realiza una máquina y no un ser humano y, por lo tanto, puede detectar errores que a nosotros se nos hayan escapado. No obstante, lo contrario también se puede dar, es decir, que la página analizada pase los test automáticos pero a nivel de usabilidad móvil sea mejorable.
Como ya hemos comentado, solo deberías realizar este paso una vez hayas solucionado los errores y mejoras derivados de la inspección manual de la web.
Mobile friendly con Google Search Console
A día de hoy la herramienta de mobile friendly de Google Search Console está retirada y, por lo tanto, no es una alternativa viable puesto que no se puede utilizar.
Básicamente consistía en una serie de informes y recomendaciones orientados a la optimización móvil de una web, no obstante, mantenemos este apartado en el artículo por si hay algún despistado que aún cree que sigue existiendo.
Optimización web móvil con Google PageSpeed Insight
La alternativa a mobile friendly de Search Console es Google PageSpeed Insights. Como ya hemos visto anteriormente, es una herramienta muy útil a la hora de mejorar la velocidad web tanto en dispositivos móviles como en ordenador. Se compone de cuatro secciones con errores, mejoras y advertencias acerca del rendimiento y desempeño de una web en todo tipo de dispositivos:
- Rendimiento, puntos relacionados con los tiempos relativos a las distintas métricas.
- Accesibilidad, es decir, todo aquello que tiene que ver con que nuestra web sea fácilmente accesible para todo tipo de público como, por ejemplo, personas con dificultades cognitivas.
- Recomendaciones SEO, como su propio nombre indica, listado de errores y advertencias que pueden afectar a nuestro posicionamiento SEO. Es en esta sección donde encontraremos los errores mobile friendly ya que son los que pueden acarrearnos alguna penalización SEO.
- Prácticas recomendadas, básicamente es un conjunto de advertencias y errores que no están categorizadas en los apartados anteriores.
Algunos errores de compatibilidad móvil de PageSpeed Insights, que encontraremos dentro de la sección de SEO, son:
- No tiene una etiqueta <meta name=»viewport»> con width o initial-scale. Dicha etiqueta optimiza una web para los tamaños de pantalla en dispositivos móviles.
- El documento no usa tamaños de fuente legibles. No se puede leer correctamente el texto en dispositivos móviles porque no existen etiquetas meta viewport.
- El tamaño de los elementos táctiles no es el adecuado. Por el mismo motivo que el anterior, al no existir etiquetas meta viewport optimizadas para dispositivos móviles, los elementos táctiles como botones son difíciles de utilizar en dichos dispositivos.
Test mobile friendly en Bing
Otra herramienta gratuita para hacer un test mobile friendly es la que pertenece a Bing. Bastará con introducir la url de la página a analizar y pulsar sobre Analizar.
Si bien es una herramienta bastante menos potente que la anterior, sí que es capaz de verificar unos cuantos puntos como podéis observar a continuación:
Algunos errores mobile friendly que encontramos en Bing son:
- Ventana no configurada correctamente. Al igual que antes, faltan etiquetas meta viewport.
- El contenido de la página no cabe en el ancho del dispositivo. Esto es porque no se puede hacer cómodamente scroll horizontal.
- El texto de la página es demasiado pequeño, al igual que antes, es necesario utilizar algún sistema que permita adecuar el texto a pantallas pequeñas.
- Los vínculos y objetos para pulsar son muy pequeños o están muy cerca. De nuevo, al igual que antes, al no tener etiquetas meta viewport los elementos táctiles como enlaces o botones son difíciles de utilizar.
Cómo hacer una web responsive para móviles
No entraremos en muchos detalles sobre cómo conseguir una web compatible con dispositivos móviles dado que es un tema complejo y requiere de conocimientos técnicos, sobre todo de frontend, sin embargo, vamos a ver unas cuantas recomendaciones.
Si utilizas un gestor de contenidos o te planteas qué CMS es mejor para tu web, aquí tienes un punto importante, el CMS debe proporcionar algún medio y/o plantilla compatible con dispositivos móviles. Por ejemplo, uno de los criterios para elegir una plantilla en WordPress es que sea compatible con móviles.
Si por el contrario no utilizas un gestor de contenidos, sino que tienes una web hecha a medida o una página web estática, puedes utilizar algún framework de diseño compatible con móviles como, por ejemplo, Bootstrap.
Recuerda que no debes quedarte solo en la parte más superficial y visual. Como ya comentamos, para estos dispositivos, dado que son menos potentes que un ordenador, es necesario analizar y mejorar la velocidad de carga de la web para lo cual puedes, por ejemplo, reducir el peso de las imágenes, optimizar los elementos multimedia como los videos utilizando los snippets de código que proporcionan las plataformas como Youtube o trabajar en el backend reduciendo los tiempos de carga.
Como conclusión, si lo que buscas es mejorar tu posicionamiento SEO, comprueba que tu web sea compatible y esté optimizada para dispositivos móviles.
