Los dispositivos móviles se han situado en el eje central de la estrategia de comunicación digital de las empresas, apoyados por la elevada penetración de teléfonos avanzados (smartphones) y de las tabletas. El móvil ya no se concibe como un aparato para enviar mensajes y realizar llamadas, si no que se ha transformado en una herramienta de acceso a internet para realizar compras, consultar noticias, leer artículos, buscar empresas o interactuar con otros usuarios a través de las redes sociales que disponen de aplicaciones propias para estos dispositivos.
La forma en la que realizamos las búsquedas ha evolucionado y es diferente si la hacemos desde un dispositivo móvil o desde un ordenador, ya que el primer caso suelen asociarse a búsquedas locales para satisfacer unas necesidades del momento. Sin embargo, actualmente utilizamos el móvil para buscar todo tipo de cosas y temáticas. Google es consciente de este cambio y, por ello, da preferencia en los resultados de Google a las webs adaptadas a este tipo de dispositivos.
El hecho de no tener nuestra web adaptada a dispositivos móviles nos perjudica en el ranking de Google y por tanto, nos dificulta la visibilidad para aquellos usuarios (cada vez más numerosos) que prefieren acceder desde su smartphone.
Resumen de contenido del post
Corregir errores de usabilidad móvil en WordPress
Si utilizas WordPress es posible que ya tengas optimizada la web o blog para dispositivos móviles, ya que las últimas actualizaciones tanto de versión de WordPress como de los diferentes temas, ya vienen con esta opción para facilitarnos la vida. Por tanto, lo primero que debes hacer es comprobar que tienes la última versión de ambos, es decir, del WordPress y del tema.
Pero si no es así, es posible que recibas un mensaje desde Google Webmaster Tools, tipo este:
Si no sois expertos en programación, ¡qué no cunda el pánico! al ver este mensaje se nos estremece el cuerpo, pero no os preocupéis, es más fácil de lo que parece. En este post, quiero ayudaros a solucionar algunos de los problemas más comunes.
Lo primero que debe hacerse es ir a la herramienta Webmaster Tools, apartado de usabilidad móvil y ver cuáles son los problemas actuales que tiene tu web para mostrarse en este tipo de dispositivos:
Algunos errores comunes
1. Ventana gráfica no configurada:
La ventana gráfica controla cómo se muestra una página web en un dispositivo móvil. Sin una ventana gráfica, los dispositivos móviles mostrarán la página tal como se mostraría en un ordenador; con el mismo ancho de pantalla, pero con las proporciones ajustadas a la pantalla del dispositivo, provocando así que los usuarios tengan una mala experiencia.
La configuración correcta de este elemento permite controlar el ancho y las proporciones de la página en los diferentes dispositivos y así, conseguir una buena adaptación a móvil.
¿Cómo solucionarlo?
Inserta la etiqueta “viewport” en tu web, concretamente dentro de la etiqueta <head></head> de tu web, de esta forma:
<meta name=”viewport” content=”width=device-width, initial-scale=1″>
De esta forma, estás configurando elementos como el ancho, alto, tamaño y escala de la ventana gráfica, de forma que se adapte a los diferentes tamaños de los dispositivos móviles. Para entenderlo:
– Con Width configuras el ancho del viewport. Poniendo en la etiqueta “device-width”, estamos permitiendo un ajuste dinámico al tamaño de cada dispositivo, que es equivalente al 100% del ancho de la pantalla del dispositivo.
– initial-scale: Define la escana incial. Con el valor 1 asignado se mostrará correctamente a una escala de 1:1 y no se aplicará ningún zoom.
Para ver más tipos de configuraciones de estos elementos de la etiqueta “viewport”, te recomiendo este artículo.
Aquí lo mejor es hacerlo desde el tema, ya que si lo añades directamente desde el editor, cada vez que vuestro tema se actualice, se borrará y tendréis que volver a insertarlo.
Para más información sobre este tema, podéis acudir a la ayuda de Google.
2. Elementos táctiles demasiado próximos entre sí:
Es posible que Google te avise a través de Webmaster Tools de este problema. y se refiere a que los elementos de tu web son demasiado pequeños y están muy juntos, por ejemplo, los botones de tu menú principal. Os dejo esta ayuda de Google para solucionarlo.
Plugin para adaptar tu web WordPress a móvil
Otra opción muy sencilla es instalar un plugin en tu WordPress, en este punto os recomiendo sin duda el WPtouch Mobile Plugin.
Te crea de forma automática una versión independiente de tu web optimizada para móviles, respetando y dejando intacta tu versión de ordenador (es decir, el tema de tu WordPress).
Para los usuarios móviles, el sitio mostrará un tema distinto y adaptado a este dispositivo. Hay varios temas disponibles para elegir (si utilizas la versión pro), pero la que te deja con la gratuita está muy bien y te permite configurar opciones básicas como el menú que va a encontrarse el usuario:
También hay este otro plugin, Wp mobile detector que se parece bastante al anterior.
Una vez hecho todo esto, puedes comprobar con esta herramienta de Google si tu web cumple todas las condiciones de optimización móvil.
13 Comentarios
Me ha mandado el aviso google y he creado la ventana gráfica tal cual la definís vosotros.
pero ahora me dice que es demasiado ancha en móviles y que no vale. he hecho algo mal pero no se que es. ¿Podéis ayudarme? Gracias.
Hola jose Luis,
Es posible que los elementos de tu web no puedan ajustarse de forma automática. Cuando accedes a Webmaster Tools te muestra el detalle de las páginas que no tienen correctamente configurada la ventana gráfica. Hay algunas variantes del código que os he añadido en el artículo, te dejo un enlace de ayuda que creo que te ayudará: https://developers.google.com/web/fundamentals/layouts/rwd-fundamentals/set-the-viewport?hl=en#ensure-an-accessible-viewport y este: https://developers.google.com/webmasters/mobile-sites/website-software/?hl=es, espero haberte ayudado!
Saludos
Buenos días,
He activado el pluggin wptouch. Se ve bien en todos lso dispositivos y google me indica que está bien optimizado, pero en los Xperia me aparece en la página principal variso códigos post_type: page……y cc:slidesshow:……No logro configurarlo para que no aparezca. ¿Conocéis el motivo?
Hola Ana,
En principio si Google te da su visto bueno a la optimización móvil de tu web, no entiendo lo que te aparece. Es posible que esté relacionado con la actualización del Xperia? he leído que han surgido varios problemas de incompatibilidad con esta última versión.
Hola Cristina
Instalé WP Touch pero al usar la herramienta “Buscar” ésta no funciona, cómo lo podría solucionar? (no soy una experta)
Hola Meliss!
Sobre lo que comentas, debería funcionar (se me ocurre que igual no lo has configurado correctamente), te dejo un artículo que lo explica muy bien y tienes un vídeo que te visualiza muy bien los aspectos importantes a la hora de configurar este plugin: http://www.bluemarkets.es/wptouch-plugin-de-wordpress/
Saludos!
Me gusta saborear y visitar blogs, aprecio mucho el contenido, el trabajo y el tiempo que ponéis en vuestros post. Buscando en Yahoo he encontrado tu web. Ya he disfrutado de varios post, pero este es muy adictivo, es unos de mis temas predilectos, y por su calidad he disfrutado mucho. He puesto tu web en mis favoritos pues creo que todos tus posts son interesantes y seguro que voy a pasar muy buenos momentos leyendolos.
Muchas gracias por tu comentario 🙂
Hola. Muy interesante e instructivo este artículo y todo el blog. Yo he puesto el pluggin WPtouch, y en la Prueba de optimización para móviles se ve ok, pero al ver las alertas de Search console siguen apareciendo los problemas “Elementos táctiles muy próximos”, “Ventana gráfica no configurada” y otros. Sabes por qué sigue apareciendo y cómo solucionarlo sin tocar el código? Mil gracias desde ya!!!
Hola Gimena! Antes de nada, muchas gracias por tu comentario 🙂 Sobre lo de Search Console es posible que siga apareciendo porque tarda un poco en actualizarse.. al igual que ocurre con el apartado de mejoras Html.. pero si está todo correcto suelen desaparecer solas con el tiempo (aunque si con la herramienta de optimización para móviles te sale correcto, no debes preocuparte). De todas formas, puedes probar esta herramienta: https://developers.google.com/speed/pagespeed/, que también te indica mejoras para la visualización y optimización de la versión móvil de tu web (para asegurarte). Saludos!!
Hola en google search console me aparece lo siguiente :No mobile usability errors detected
Doy por echo que todo marcha bien o es recomendable aun optimizar / uso wordpress
Gracias…
Hola! En principio es que todo está bien, además ahora las plantillas y diseños de WordPress ya están diseñados (la mayoría) para respetar el aspecto responsive de la web. De todas formas, puedes asegurarte con la Prueba de optimización para móviles: https://www.google.com/webmasters/tools/mobile-friendly/?hl=es, saludos y gracias por dedicar un tiempo a mi artículo 🙂
Interesante articulo
Deja un comentario