¿Sabías que más de la mitad de los visitantes de tu sitio podrían estar viéndolo en su teléfono o tableta? Esta guía te llevará por los pasos esenciales para ofrecer una experiencia de usuario fluida en todos los tamaños de pantalla, desde la selección de un tema adaptable hasta el ajuste del contenido.
En esta guía
¿Tienes alguna pregunta?
Pregunta a nuestro AI AssistantElegir un tema optimizado para móviles en un sitio de WordPress es crucial para proporcionar una experiencia de usuario fluida y optimizada en varios dispositivos, mejorar la accesibilidad y tener un impacto positivo en las clasificaciones de los motores de búsqueda.
Todos los temas que se ofrecen en WordPress.com son adaptables a dispositivos móviles, lo que significa que están diseñados para que se vean perfectamente tanto en navegadores de dispositivos móviles como en ordenadores de sobremesa.
Si utilizas un tema de terceros, asegúrate de que se anuncia como optimizado para móviles y que se ve bien cuando lo abres en tus dispositivos móviles. Consulta la documentación del tema para ver las opciones de personalización o los ajustes para controlar la apariencia del tema en los dispositivos móviles.
Después de elegir un tema adaptable a dispositivos móviles, es probable que hagas cambios en el contenido por defecto para personalizarlo. A medida que editas tu sitio en el editor de WordPress, es importante que te asegures de que se vea bien en todos los dispositivos.
WordPress no dispone de un «editor para dispositivos móviles» independiente. Los cambios que hagas en tu sitio se reflejarán tanto en dispositivos móviles como en ordenadores de sobremesa. Siempre que tu sitio tenga un tema optimizado para dispositivos móviles, el contenido se adaptará a todas las pantallas, grandes y pequeñas. Esto se conoce como «adaptabilidad».
Puedes hacer clic en el icono Vista previa, situado en la esquina superior derecha del editor, para ver cómo ven tu sitio los visitantes. Elige Móvil o Tableta para ver una aproximación del contenido en el editor:
Aquí decimos aproximación porque muchos elementos de la vista del editor se basan en el tema del sitio. Los estilos del tema no se muestran en el editor; solo se muestran al previsualizar la página en una nueva pestaña o al ver el sitio en el navegador del dispositivo. Para ver tu contenido con los estilos del tema aplicados, haz clic en la opción «Vista previa en una nueva pestaña».
Después de hacer clic en la opción «Vista previa en una nueva pestaña», puedes ver la versión móvil con la herramienta inspector en tu navegador. Para usar el modo Inspeccionar del navegador para obtener una vista previa del aspecto que tendrá una página o entrada en la vista para dispositivos móviles:
- Haz clic en el icono Vista previa, en la esquina superior derecha del editor de WordPress.
- Elige la opción «Vista previa en una nueva pestaña».
- Haz clic con el botón derecho en la página de vista previa y, a continuación, en «Inspeccionar» (Chrome, Firefox, Edge) o «Inspeccionar elemento» (Safari).
- En el modo Inspeccionar del navegador, haz clic en el icono del móvil para cambiar la vista previa a la vista para dispositivos móviles.
Después de publicar los cambios, puede ser útil abrir el teléfono o la tableta para ver el sitio como lo haría un miembro del público, realizando una última comprobación para asegurarte de que se presenta como querías.
Estos son algunos consejos para maximizar la adaptabilidad del diseño de tu sitio y garantizar que el contenido se presente correctamente en móviles, tabletas y ordenadores.
Si una imagen contiene texto diseñado en la propia imagen, ese texto puede cortarse en las pantallas más pequeñas, por ejemplo:
Esto se debe a que el texto diseñado dentro de una imagen no es adaptable.
Con el editor de WordPress, puedes escribir texto sobre una imagen. Al añadir texto a una imagen de esta manera, el texto es adaptable. En el siguiente vídeo, recrearemos la misma imagen anterior con el bloque de fondo, lo que demuestra su adaptabilidad en pantallas más pequeñas:
Para maximizar la adaptabilidad del tamaño de las fuentes de tu página, utiliza unidades em o rem en lugar de píxeles (px). El uso de píxeles para el tamaño de la fuente básicamente codifica el tamaño de esa fuente específica en la página, lo que significa que la fuente siempre se mostrará en ese tamaño exacto, independientemente del tamaño de la pantalla. Por el contrario, los valores em y rem son unidades de tamaño relativo que aumentan o disminuyen en función del espacio disponible en la pantalla del espectador.
En lugar de utilizar un menú de texto para el diseño para dispositivos móviles, puedes personalizar el bloque Navegación de tu sitio para que muestre el menú para dispositivos móviles, denominado menú superpuesto (también conocido como «menú hamburguesa» o «menú kebab»). Esta función puede hacer que el encabezado sea más compacto y que el menú sea más accesible para su visualización y uso en dispositivos móviles.
Algunos bloques incluyen la opción «Apilar en móvil» para utilizar mejor el espacio en pantallas más pequeñas. Si el contenido se muestra contiguo en una pantalla de ordenador, se moverá hacia abajo en pantallas más pequeñas para que los espectadores de dispositivos móviles puedan leerlo más fácilmente.
El ajuste «Apilar en móvil» está disponible en los siguientes bloques:
Los botones y menús se podrán leer más fácilmente en dispositivos más pequeños, ya que se pueden ajustar a varias líneas.
La opción «Permitir el ajuste a varias líneas» está disponible en los ajustes de diseño de los bloques siguientes:
- Bloque Botones
- Bloque Botones de compartir
- Bloque Navegación
- Bloque Iconos sociales
- Bloque Comentarios
- Bloques Fila y Pila
AMP (Accelerated Mobile Pages) es un marco de código abierto de terceros que permite la creación de webs que se cargan casi al instante en dispositivos móviles para ofrecer a los visitantes del sitio una experiencia de navegación rápida. Para añadir AMP a tu sitio, puedes instalar el plugin AMP. Para los sitios de WordPress.com con plugins activados creados antes del 13 de junio de 2022, el plugin AMP se instaló por defecto.
Ten en cuenta que el uso de AMP elimina gran parte de la funcionalidad de tu sitio (diseño, muchas funciones) para que los visitantes desde dispositivos móviles puedan cargar el sitio rápidamente. Lo mejor es utilizarlo solo si tu tema se ha creado teniendo en cuenta AMP. Todos los temas de WordPress.com ya son compatibles con dispositivos móviles, por lo que no es necesario AMP para ofrecer una experiencia optimizada para móviles.
Si tu sitio tiene problemas de visualización y tienes AMP instalado, te recomendamos desactivar el plugin AMP para ver si mejora el rendimiento del sitio. Si ves la opción «Salir de la versión móvil» en tu web y quieres eliminarla por completo, desactiva también el plugin AMP.
Si tu sitio ha estado usando AMP durante un tiempo, ten en cuenta que Google no actualiza sus resultados inmediatamente y seguirá mostrando páginas AMP durante algún tiempo después de desactivarlo. Quizás te interese configurar las redirecciones de página después de desactivar AMP. Los motores de búsqueda indexarán las URL de la página AMP y tardarán un tiempo en eliminarlas de su lista, lo que significa que algunos visitantes desde dispositivos móviles pueden recibir una página de error 404.
Hay varios plugins de redirección gratuitos y populares entre los que puedes elegir. Configurarás una redirección 301 y es probable que necesites una expresión Regex similar a /(.*)\/amp. Te recomendamos que hagas algunas pruebas para asegurarte de que has configurado la redirección correcta y que consultes las guías de instrucciones del plugin de redirección.
