Últimas noticias de SeedProd

Tutoriales, consejos y recursos de WordPress para hacer crecer tu negocio

Cómo hacer que un sitio web sólo para ordenadores de sobremesa sea compatible con dispositivos móviles (pasos sencillos)

Cómo hacer que un sitio web sólo para ordenadores de sobremesa sea compatible con dispositivos móviles (pasos sencillos) 

Escrito por: avatar de autor Stacey Corrin
avatar de autor Stacey Corrin
Stacey lleva más de 10 años escribiendo sobre WordPress y marketing digital, y mucho más tiempo sobre otros temas. Además, le fascinan el diseño web, la experiencia de usuario y el SEO.
     Revisado por: avatar del revisor Turner John
avatar del revisor Turner John
John Turner es el cofundador de SeedProd. Cuenta con más de 20 años de experiencia empresarial y de desarrollo y sus plugins se han descargado más de 25 millones de veces.

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

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.

Prueba de compatibilidad con móviles de Google

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.

Temas de WordPress con capacidad de respuesta

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.

Plantillas de temas de inicio de WordPress en SeedProd

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.

Personalizar un tema de WordPress en SeedProd

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.

Menú de navegación para móviles WordPress

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
Ejemplo de información fácil de encontrar en el móvil

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.

sugerencias de tamaño y altura de letra para diseño web

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.

Ejemplo de formulario de suscripción corto de un solo campo

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.

Vista previa de una página de destino en el editor móvil de SeedProd

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.

Ejemplo de botón CTA móvil

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.

Ejemplo de ventana emergente adaptada a móviles

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:

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

¿Cómo sé si mi sitio web es apto para móviles?
Puedes probar tu sitio con la prueba gratuita de Google para móviles. Solo tienes que introducir tu URL y se mostrará si tu sitio funciona bien en teléfonos, junto con las mejoras sugeridas.
¿Puedo hacer que mi sitio de escritorio sea apto para móviles sin tener que reconstruirlo?
Sí. En WordPress, cambiar a un tema responsive o utilizar un constructor de páginas como SeedProd puede hacer que tu sitio se adapte instantáneamente a pantallas más pequeñas. También puedes simplificar los menús, ajustar el tamaño de las fuentes y optimizar los formularios sin empezar de cero.
¿Cuál es la forma más fácil de hacer que un sitio web sea apto para móviles?
La solución más rápida es utilizar un tema o plugin de WordPress adaptable. Estos cambian automáticamente el tamaño de los diseños, las fuentes y las imágenes para dispositivos móviles, por lo que no tienes que editar manualmente el código.
¿Por qué mi sitio no es apto para móviles?
Las razones más comunes son el uso de un tema obsoleto, diseños de ancho fijo, fuentes diminutas o elementos que se solapan en pantallas pequeñas. Los plugins o ventanas emergentes que no son responsive también pueden romper la experiencia móvil.

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.

avatar de autor
Stacey Corrin Escritor
Stacey lleva más de 10 años escribiendo sobre WordPress y marketing digital, y mucho más tiempo sobre otros temas. Además, le fascinan el diseño web, la experiencia de usuario y el SEO.

Divulgación: Nuestro contenido está apoyado por los lectores. Esto significa que si hace clic en algunos de nuestros enlaces, es posible que ganemos una comisión. Sólo recomendamos productos que creemos que aportarán valor a nuestros lectores.