7 consejos de WordPress para un sitio web compatible con dispositivos móviles

Hola leyente ! Aquí Nicolas con un nuevo artículo para ustedes !
Espero que les sirva y nos vemos en la próxima

No hay nada peor que tener un sitio web de escritorio atractivo y un sitio móvil que no funciona correctamente.

La mayoría de las correcciones de diseño son sencillas pero requieren atención si desea que los visitantes permanezcan en su sitio mientras navegan en un dispositivo móvil.

Este artículo destacará siete problemas de sitios web optimizados para dispositivos móviles y sus soluciones.

  • Los cambios realizados no se muestran en el móvil
  • Navegación hostil
  • El diseño receptivo deja de funcionar de repente
  • Las imágenes tardan demasiado en cargarse
  • El contenido más importante no es obvio
  • Demasiada información
  • Datos para pantallas pequeñas

Actualizaciones de sitios web optimizados para dispositivos móviles que no aparecen

Acaba de pasar mucho tiempo realizando actualizaciones en su sitio web. Se ven muy bien en su escritorio, pero no aparecen en su dispositivo móvil.

Una de las razones más comunes es el almacenamiento en caché. Su navegador móvil podría estar mostrando una versión anterior de su sitio que descargó anteriormente. Otra razón puede ser que su sitio web se aferre a la versión anterior de su página y no muestre sus cambios.

Si este es el problema, deberá borrar el caché para descargar la versión revisada. Un complemento de almacenamiento en caché como WP Super Caché, Caché total de W3o Caché más rápido de WP puede ayudar a resolver este problema.

A continuación se muestran cuatro pasos para ayudarlo a vaciar la memoria caché de su sitio web y el navegador para permitir que la nueva versión se muestre en su sitio optimizado para dispositivos móviles.

  1. Actualice su navegador varias veces en su escritorio y dispositivo móvil.
  2. Pruebe su sitio web en diferentes dispositivos móviles.
  3. Limpia tu sitio con un complemento de almacenamiento en caché.
  4. Consulte con su empresa de alojamiento para ver si hay otro sistema de almacenamiento en caché en su servidor que deba borrarse.

Navegación hostil

Puede resultar complicado crear un menú de navegación que funcione bien en dispositivos móviles. Si la navegación de su sitio web tiene muchos elementos y submenús, es aún más complicado exprimir todo en una pantalla más pequeña.

Por ejemplo, si solo tiene tres o cuatro elementos en la navegación de su sitio web, debería verse bien en el dispositivo móvil. Sin embargo, si tiene más elementos y submenús, se apilarán uno encima del otro y se verán abarrotados.

A continuación, se muestran algunas formas de solucionar este problema para un sitio web optimizado para dispositivos móviles:

  • Convierta su navegación en un menú desplegable para dispositivos móviles.
  • Muestra tu menú de navegación como elementos de bloque, para que aparezcan verticalmente.
  • Utilice un icono de menú que se pueda alternar para ocupar menos espacio.
  • Crea un menú de navegación móvil usando jQuery.
  • Utilice el menú Hamburguesa (muchos temas incluyen esto como una opción o puede usar un complemento.)

El diseño receptivo deja de funcionar de repente

Si su sitio optimizado para dispositivos móviles deja de funcionar repentinamente, podría deberse a un complemento en su sitio.

La instalación de un nuevo complemento o una actualización de un complemento existente podría estar causando un conflicto con otros que afecte su diseño receptivo.

Comience desactivando cada complemento uno a la vez para ver si es la causa. No los desactive todos a la vez o no sabrá qué complemento podría ser el culpable.

Los cambios de código son otra posible causa. Si ha modificado algún código accidental o intencionalmente, restaure la base de código original y vea si su sitio web receptivo comienza a funcionar nuevamente.

Al verificar la capacidad de respuesta móvil de su sitio, siempre debe probarlo en un dispositivo móvil.

A veces parece funcionar cuando se cambia el tamaño de la ventana del navegador en su escritorio, pero no se muestra correctamente en el móvil.

Si falta una línea de código en un archivo de encabezado HTML, puede romper el diseño receptivo. Esta sola línea de código faltante hará que su dispositivo móvil asuma que el sitio que está viendo es un sitio web de tamaño completo.

El sitio renderizado tendrá el tamaño de la ventana gráfica (el tamaño del área de la página web que es visible para el usuario).

Para arreglar su sitio optimizado para dispositivos móviles, agregue la siguiente línea de código a la sección del encabezado:

A veces, cuando se actualiza un tema, este código puede desaparecer.

Las imágenes tardan demasiado en cargarse

La optimización de imágenes y la reducción del tamaño del archivo de imagen tiene sentido. Las imágenes grandes que no están optimizadas pueden ralentizar la velocidad de carga de sus páginas web. Esto puede resultar frustrante para los usuarios de dispositivos móviles.

WordPress versión 4.4 y superior ofrece automáticamente la versión más pequeña de una imagen en su servidor.

Si ya está ejecutando la última versión de WordPress, pero su sitio aún no se carga lo suficientemente rápido, puede:

El contenido más importante no es obvio

Algunos sitios web están cargados con una gran cantidad de contenido innecesario para llenar el espacio vacío cuando se abren en un escritorio.

Los sitios web desarrollados sin ser conscientes de los usuarios de dispositivos móviles generalmente se incluyen en esta categoría. Estos sitios requieren más tiempo y ancho de banda para cargarse.

Si las páginas no están diseñadas adecuadamente para dispositivos móviles, es posible que parte del contenido no aparezca en el dispositivo móvil sin un gran desplazamiento.

La mayoría de las veces, un elemento de su página web se verá de una forma en una computadora y completamente diferente en un dispositivo móvil.

Por ejemplo, una página de precios con tres columnas las mostrará una al lado de la otra en una computadora.

Sin embargo, en un dispositivo móvil, las columnas se apilan una encima de la otra porque el tamaño de la pantalla es más pequeño. Este comportamiento es de esperar.

Asegúrese de que su tabla de precios esté en una posición superior en su página web para que aparezca primero cuando se vea en un dispositivo móvil. Si tiene mucho texto sobre su tabla, los usuarios de dispositivos móviles tendrán que desplazarse hacia abajo para verlo y es posible que no.

Para obtener la experiencia de usuario móvil más óptima, coloque las piezas de contenido más importantes en la parte superior de la página. Si un usuario necesita desplazarse mucho antes de poder ver su contenido, probablemente no lo hará.

Demasiada información

Los sitios con elementos de interfaz de usuario complicados, como tablas, formularios de varios pasos y funciones de búsqueda avanzada, pueden producir una mala experiencia de usuario móvil.

Estos elementos contienen demasiada información que puede abarrotar la pantalla del móvil e interferir con que el usuario encuentre la información que desea.

Un enfoque consiste en eliminar u ocultar parte del contenido de los usuarios de dispositivos móviles. Sin embargo, esta no es una solución ideal para los visitantes que desean tener acceso a estos elementos.

Para evitar este problema, optimice su sitio optimizado para dispositivos móviles tanto como sea posible. Además, elimine cualquier elemento innecesario mientras se concentra en la estructura central de su sitio web.

Datos para pantallas pequeñas

Las tablas complejas con muchas filas y columnas pueden ser un problema cuando se ven en pequeñas pantallas de dispositivos móviles. La mejor solución es utilizar tablas receptivas.

Un complemento como Tabla receptiva de WP puede hacer que esto sea fácil de lograr.

Al igual que con la tabla de precios anterior, cuando se ve en un dispositivo móvil, las columnas se apilarán para ajustarse a la pantalla más pequeña.

Otras formas de mostrar datos en dispositivos móviles incluyen:

  • Crear una tabla más pequeña sin el diseño de cuadrícula para evitar la necesidad de desplazamiento horizontal.
  • Voltear una mesa de lado para que quepa mejor en una pantalla más pequeña.
  • Reemplazo de tablas más grandes por otras más pequeñas que se vinculan a la versión completa.
  • Conversión de tablas en gráficos circulares.

Dado que el uso de dispositivos móviles crece exponencialmente, es imperativo que los sitios web comerciales estén optimizados con versiones compatibles con dispositivos móviles. Mejore la experiencia del usuario sin sacrificar la funcionalidad siguiendo los pasos anteriores.

También debe supervisar siempre el rendimiento de su sitio y realizar ajustes cuando sea necesario para mejorar el rendimiento y la experiencia del usuario.

Deja un comentario