Si tu sitio de WordPress sigue siendo sólo para ordenadores de sobremesa, estás perdiendo visitantes. Más de la mitad de la gente navega desde el móvil, y si tu sitio no es apto para móviles, se irán rápido.
Lo aprendí por las malas cuando uno de mis sitios más antiguos se veía bien en el escritorio, pero se rompió por completo en el móvil. El texto era diminuto, el menú no funcionaba y mi tasa de rebote se disparó. Después de arreglarlo, mi tráfico y mis inscripciones mejoraron casi de la noche a la mañana.
En esta guía, te mostraré exactamente cómo hacer que un sitio web WordPress de escritorio sea compatible con dispositivos móviles. Son pasos sencillos que cualquiera puede seguir, incluso si nunca has tocado código.
- 1. Compruebe si su sitio ya es compatible con dispositivos móviles
- 2. Elija un tema de WordPress adaptable a dispositivos móviles
- 3. Simplifique su menú de navegación
- 4. Asegúrese de que la información importante sea fácil de encontrar
- 5. Utilice tamaños de letra grandes y legibles
- 6. Los formularios de contacto y de suscripción deben ser breves
- 7. Haga que sus páginas de destino sean adaptables a dispositivos móviles
- 8. Cambiar el tamaño y la ubicación del botón CTA
- 9. Eliminar o simplificar las ventanas emergentes para móviles
- 10. Utiliza plugins de WordPress compatibles con dispositivos móviles
- 11. Priorizar la velocidad del sitio web
- Preguntas frecuentes sobre la compatibilidad de un sitio web con dispositivos móviles
1. Compruebe si su sitio ya es compatible con dispositivos móviles
Antes de cambiar nada, comprueba si tu sitio ya es compatible con dispositivos móviles. Muchos de los temas más recientes de WordPress son adaptativos por defecto, así que es posible que hayas recorrido la mitad del camino sin darte cuenta.
La forma más rápida de comprobarlo es con la prueba gratuita de Google Mobile-Friendly Test. Pega tu URL, pulsa Intro y obtendrás los resultados en segundos.
El informe te muestra si tu sitio aprueba, además de una captura de pantalla de cómo se ve en un teléfono. También sugiere soluciones si algo no funciona.
Cuando realicé esta prueba en uno de mis sitios más antiguos, los resultados fueron reveladores. Las fuentes eran demasiado pequeñas, los botones se superponían y los menús no se abrían. Esa prueba me dio una clara lista de tareas pendientes para solucionar los problemas.
Si su sitio no aprueba, haga de esto su máxima prioridad. Incluso si la supera, siga leyendo. Aún encontrará formas de mejorar aún más la experiencia móvil.
2. Elija un tema de WordPress adaptable a dispositivos móviles
Si tu tema actual no es apto para móviles, la solución más rápida es cambiar a un tema de WordPress adaptable. Un tema responsive se ajusta automáticamente a cualquier tamaño de pantalla, para que los visitantes no tengan que hacer zoom o desplazarse lateralmente.
Puede encontrar opciones gratuitas dentro de WordPress. Ve a Apariencia " Temas " Añadir nuevo y busca "Responsive". Verás una serie de temas listos para móviles que puedes instalar con un solo clic.
Cuando probé esto por primera vez en uno de mis sitios más antiguos, cambiar a un tema responsivo resolvió al instante la mitad de mis problemas de diseño. Fue la mejora más sencilla que podría haber hecho.
Si prefieres crear algo único, te recomiendo SeedProd. Es un constructor de temas de arrastrar y soltar que te permite diseñar tu propio tema de WordPress responsivo sin tocar código.
Puedes empezar con una plantilla prefabricada o crear cada sección paso a paso. En cualquier caso, verás tus cambios en directo en el editor visual y todo lo que crees será totalmente adaptable a dispositivos móviles.
Esto significa que su sitio web tendrá un aspecto excelente y funcionará sin problemas en teléfonos, tabletas y ordenadores de sobremesa, sin necesidad de ajustes adicionales.
3. Simplifique su menú de navegación
Las pantallas de los móviles son mucho más pequeñas que las de los ordenadores de sobremesa, por lo que los menús largos y complicados no funcionan bien. Si los visitantes tienen que hacer zoom o desplazarse lateralmente para encontrar un enlace, lo más probable es que desistan.
Lo mejor es simplificar la navegación. Limite su menú a unos pocos elementos clave que quepan en una pantalla. De este modo, los usuarios llegarán más rápidamente a su destino.
Cuando simplifiqué uno de mis menús reduciéndolo a tres enlaces principales, la diferencia fue enorme. Los usuarios pasaban más tiempo en el sitio porque realmente podían encontrar lo que necesitaban.
Si no está seguro de cómo hacer que su menú sea adaptable, consulte esta guía paso a paso para crear un menú de WordPress adaptado a dispositivos móviles.
4. Asegúrese de que la información importante sea fácil de encontrar
Cuando la gente visita su web desde un teléfono, normalmente está buscando algo concreto. Puede ser una respuesta rápida, sus datos de contacto o incluso cómo llegar a su negocio.
Si esa información está enterrada, se irán. En el móvil, cada pulsación adicional resulta lenta y frustrante.
Piense en los detalles que más necesitan sus visitantes y asegúrese de que aparecen en primer plano. Algunas formas sencillas de hacerlo son:
- Añadir una pequeña sección de preguntas frecuentes con respuestas rápidas
- Insertar un breve vídeo explicativo
- Destaque sus principales características o servicios
Cuando coloqué la información de contacto y las preguntas frecuentes más arriba en un sitio en el que estaba trabajando, la tasa de rebote bajó enseguida. La gente no tenía que buscar las respuestas, las veía al instante.
No es necesario que lo atiborre todo en su página de inicio, pero asegúrese de que lo esencial es obvio y fácil de alcanzar en el móvil.
5. Utilice tamaños de letra grandes y legibles
El texto diminuto en un teléfono es casi imposible de leer. Si los visitantes tienen que pellizcar y hacer zoom para ver el contenido, no se quedarán.
Una buena regla general es que el cuerpo del texto tenga al menos 14-16px. Los titulares y los botones deben ser aún más grandes para que sean fáciles de escanear y pulsar.
Utiliza fuentes limpias y estándar que se carguen rápidamente. Las fuentes personalizadas pueden ser bonitas en el escritorio, pero en el móvil pueden ralentizar el sitio y dificultar la lectura.
Cuando aumenté el tamaño de las fuentes en uno de mis blogs, la diferencia fue inmediata: los índices de rebote disminuyeron y los lectores permanecieron más tiempo en las páginas porque podían leer cómodamente en sus teléfonos.
Para más detalles, consulte nuestra guía sobre tipografía en el diseño web.
6. Los formularios de contacto y de suscripción deben ser breves
Los formularios largos son uno de los factores que más desaniman en los móviles. Escribir muchos datos en una pantalla pequeña es frustrante, y la mayoría de la gente no lo termina.
Examine sus formularios y pregúntese si todos los campos son realmente necesarios. Por ejemplo, si estás creando una lista de correo electrónico, normalmente solo necesitas un nombre y una dirección de correo electrónico.
Si su objetivo son las ventas, mantenga los formularios de pago lo más breves posible: sólo la información de facturación y envío. Pedir detalles adicionales añade fricción y aumenta el abandono del carrito.
Una vez reduje el formulario de registro de un cliente de seis campos a dos, y las conversiones casi se duplicaron. En el móvil, lo más corto siempre gana.
7. Haga que sus páginas de destino sean adaptables a dispositivos móviles
Las páginas de destino son donde se producen la mayoría de las conversiones, pero si no funcionan bien en el móvil, estás dejando dinero sobre la mesa. He visto páginas que parecían perfectas en un ordenador de sobremesa fallar por completo en un teléfono: botones cortados, texto superpuesto y formularios imposibles de rellenar.
La solución más sencilla es utilizar un constructor de páginas de WordPress con controles móviles integrados. De esta forma, puedes diseñar una vez y saber que se verá bien en todas las pantallas.
SeedProd lo hace sencillo. Incluye una biblioteca de plantillas de páginas de destino responsivas que puedes importar con un solo clic. A partir de ahí, puede personalizar todo en el editor de arrastrar y soltar, sin necesidad de código.
Lo que más me gusta es que SeedProd le permite alternar entre las vistas de escritorio y móvil al instante. Puedes ajustar el espaciado, el tamaño de las fuentes y la ubicación de los botones específicamente para pantallas más pequeñas, todo desde la misma página.
Antes de publicar, puede previsualizar la versión móvil en directo y realizar ajustes sobre la marcha. De este modo, podrá publicar con la confianza de saber que su página se convertirá tanto en la versión de escritorio como en la móvil.
8. Cambiar el tamaño y la ubicación del botón CTA
Los botones de llamada a la acción (CTA ) son la parte más importante de su página, pero en los móviles a menudo se pierden. Si los visitantes no pueden verlos o pulsarlos fácilmente, perderás conversiones.
Los botones deben ser lo suficientemente grandes como para que se puedan tocar con el pulgar y deben colocarse donde los usuarios se desplacen de forma natural, normalmente cerca de la parte central o inferior de la pantalla. Evita apilar demasiadas CTA en una página, ya que crea confusión.
Un estudio reveló que en más de la mitad de los sitios web, los botones CTA tardan más de 3 segundos en localizarse. Si el tuyo salta a la vista enseguida, ya tienes ventaja.
Una vez coloqué un botón de registro más arriba en una página de destino y doblé las conversiones en móviles. A veces un simple cambio de ubicación marca la diferencia.
9. Eliminar o simplificar las ventanas emergentes para móviles
Las ventanas emergentes pueden funcionar bien en los ordenadores de sobremesa, pero en los móviles suelen ser más perjudiciales que beneficiosas. Las pantallas pequeñas dificultan su cierre, y si un usuario pulsa en el lugar equivocado, puede ser enviado a otra página por error.
La mejor solución es utilizar ventanas emergentes ligeras y discretas. En lugar de una ventana emergente a pantalla completa, prueba con una barra de bienvenida flotante o una pequeña ventana deslizante que no bloquee toda la vista.
En un sitio con el que trabajé, sustituir una gran ventana emergente de entrada por una pequeña barra inferior redujo las quejas y, de hecho, mejoró las conversiones. Los usuarios podían seguir navegando sin sentirse interrumpidos.
Si quieres más ideas, aquí tienes una guía de OptinMonster sobre las mejores prácticas de ventanas emergentes para móviles, que incluye estrategias que funcionan sin frustrar a los visitantes móviles.
10. Utiliza plugins de WordPress compatibles con dispositivos móviles
No todos los plugins de WordPress están pensados para móviles. Elegir los adecuados puede marcar una gran diferencia en la fluidez de su sitio web en un teléfono.
Busque plugins ligeros, con capacidad de respuesta y probados en pantallas pequeñas. Algunas buenas opciones son:
- Plugins de formularios adaptados a dispositivos móviles
- Plugins responsivos para regalos o concursos
- Plugins de feeds de redes sociales que redimensionan para móviles
- Plugins de caché de WordPress para una carga más rápida
- Plugins de menú adaptable
En uno de mis sitios web, el cambio a un plugin de formularios más ligero redujo el tiempo de carga para móviles a la mitad. La experiencia fue más fluida y las conversiones aumentaron de inmediato.
Puedes ver más recomendaciones en este completo resumen de los mejores plugins móviles para WordPress.
11. Priorizar la velocidad del sitio web
Un sitio lento es un factor decisivo en los móviles. Los estudios demuestran que incluso un retraso de 3 segundos puede hacer que más de la mitad de los visitantes abandonen el sitio. En pantallas pequeñas, donde la gente espera resultados inmediatos, la velocidad es aún más importante.
La forma más sencilla de que tu web sea rápida es utilizar un diseño limpio y evitar el desorden innecesario. Cada script, imagen o plugin adicional añade tiempo de carga.
Algunas formas probadas de aumentar la velocidad de su sitio son:
- Redimensionar y comprimir imágenes grandes
- Utilizar una red de distribución de contenidos (CDN)
- Activar la carga lenta de imágenes y vídeos
- Mantener WordPress, temas y plugins actualizados
- Reducción de archivos CSS y JavaScript
- Reducir los procesos pesados en segundo plano
Cuando optimicé las imágenes y añadí una CDN en uno de mis sitios, los tiempos de carga en móviles se redujeron a la mitad. La tasa de rebote cayó de inmediato y los usuarios pasaron más tiempo en cada página.
Para obtener consejos más detallados, consulte esta guía definitiva sobre la velocidad y el rendimiento de WordPress.
Preguntas frecuentes sobre la compatibilidad de un sitio web con dispositivos móviles
Espero que este post te haya ayudado a aprender cómo hacer que un sitio web exclusivo para ordenadores de sobremesa sea compatible con dispositivos móviles. Puede que también te guste este artículo sobre los mejores plugins SEO para WordPress.
Mientras estés aquí, no olvides seguirnos en Facebook, Twitter y YouTube para obtener más consejos y tutoriales útiles.
