Cómo optimizar sus diseños de WordPress para el tráfico móvil
Publicado: 2020-12-16El número de dispositivos móviles y de personas que los utilizan aumenta constantemente. No es de extrañar que más de la mitad de todo el tráfico de Internet sea móvil y que la mayoría de las consultas a los motores de búsqueda se realicen en dispositivos móviles. Además, Google penaliza los sitios web que no están optimizados para dispositivos móviles.
Para optimizar sus diseños de WordPress para el tráfico móvil, tiene que hacer mucho más que instalar un tema. Debe invertir en la versión móvil de su sitio web, no solo desde el punto de vista de UX, sino también desde el punto de vista de SEO, CRO, publicidad y rendimiento.
Por lo tanto, en este artículo, explicaremos lo que deberá abordar en su sitio de WordPress para que funcione para el tráfico móvil y para garantizar que los usuarios obtengan la mejor experiencia posible al visitar el sitio web en un dispositivo móvil.
Por qué es importante el tráfico móvil
En 2016, por primera vez, el tráfico de Internet móvil superó las computadoras de escritorio. Para mantenerse al día con esto, debe preparar su sitio de WordPress para el tráfico entrante de cualquier tipo de dispositivo.
La optimización no solo significa verse bien en los teléfonos inteligentes, también significa tener un sitio web funcional. Tener un sitio web listo para dispositivos móviles mejorará la UX y mejorará su tasa de conversión, y es crucial para los sitios web que basan sus ingresos en la publicidad.
Además de una UX mejorada, un diseño optimizado para dispositivos móviles también influye positivamente en su SEO. Desde la actualización de Google en 2015 en adelante, ha habido una revisión significativa en los algoritmos de los motores de búsqueda. Ahora, la compatibilidad con dispositivos móviles es uno de los factores importantes para un mejor ranking de búsqueda y un mayor tráfico web.

El tráfico web móvil aumenta continuamente, como lo muestra este gráfico de Statista.
Por lo tanto, si su sitio web tiene un rendimiento excelente en dispositivos móviles, tendrá una mejor clasificación en las SERP y generará más ventas a través del dispositivo móvil. Incluso los grandes minoristas como Walmart Canadá se han beneficiado aún más de las optimizaciones del diseño web móvil, ¡con un aumento del 98% en las ventas móviles!
Cuando la empresa descubrió que casi el 50% de sus clientes objetivo son mamás que usan tabletas, se dieron cuenta de que debían hacer algo con respecto a su experiencia móvil. Para abordar con éxito los problemas con sus diseños móviles, han implementado las siguientes soluciones:
- Establecimiento de un plan Mobile-First: el equipo tomó la decisión de que debían adoptar un enfoque centrado en el tacto para el diseño y lo hizo lucir muy bien en tabletas y teléfonos inteligentes.
- Implementación de la optimización del diseño móvil: el enfoque de diseño receptivo hizo que su sitio se presentara de manera excelente en todos los tamaños de pantalla. Además, también han optimizado las páginas de sus productos para el tráfico web móvil.
El resultado: un aumento del 20% en su tasa de conversión general y un aumento del 98% en las ventas móviles, como se mencionó anteriormente.
¿Cómo evalúa Google los diseños de sitios web móviles?
Al evaluar la capacidad del sitio para recibir tráfico de una búsqueda móvil, Google considera los siguientes factores:
- Diseño de página: Google examina si su página se muestra correctamente en una pantalla móvil.
- Accesibilidad: verificar si los botones, los medios y el texto son lo suficientemente grandes para ser fácilmente accesibles sin hacer que los usuarios se acerquen.
- Rendimiento: la velocidad de la página es vital para las experiencias web móviles y de escritorio, y Google prioriza el rendimiento de la página móvil sobre el escritorio en las SERP.
- Colocación de anuncios: una página llena de anuncios es intrusiva para muchos y también un problema para Google. Es por eso que, al usar anuncios, debe asegurarse de no violar las pautas de ubicación de anuncios.
Comience con algunas pruebas
Lo primero que debe hacer es examinar si su sitio actual responde adecuadamente al tráfico web móvil o no. Para ello, puede utilizar la herramienta de prueba de compatibilidad con dispositivos móviles de Google.

Prueba de compatibilidad con dispositivos móviles de Google como una de las mejores herramientas para examinar los diseños de respuesta móvil de su sitio.
Simplemente ingrese la URL del sitio y seleccione Probar URL . El análisis no tardará más de unos segundos. Si su sitio web funciona en dispositivos móviles, la herramienta le informará con una captura de pantalla de cómo se ve el sitio en un teléfono inteligente. O, si su sitio no es compatible con dispositivos móviles, la herramienta le indicará lo que necesita ajustar.
Hay un puñado de otras herramientas útiles que puede utilizar para probar la compatibilidad con dispositivos móviles, como:
- Varvy SEO móvil
- Validador móvil W3C
- Comprobador de diseño receptivo
Las herramientas son geniales, pero nada supera la experiencia de primera mano. Siempre sugerimos recorrer su sitio, realizar acciones que considere prioritarias para sus usuarios (como agregar un producto a un carrito, enviar un formulario, navegar a una página, compartir una publicación). Esté atento a posibles problemas durante todo el proceso. Esta es la forma más simple de prueba de UX.
Prueba el rendimiento
La velocidad es más relevante que nunca. Google considera la velocidad como uno de los factores de clasificación más importantes, y hasta el 85% de los usuarios esperan que los sitios móviles se carguen mucho más rápido que las versiones de escritorio.
A continuación, se muestran algunas herramientas que puede utilizar para probar la velocidad de su sitio web:
- PageSpeed Insights
- GTMetrix
- Pingdom
Si desea acelerar el contenido en dispositivos móviles, una CDN puede ayudarlo a servir contenido más rápido mediante el almacenamiento en caché y la distribución desde numerosas ubicaciones.
Por ejemplo, digamos que su servidor de alojamiento está en San Francisco, CA, y su visitante web móvil es de París. Es una distancia que puede ralentizar el contenido transversal. Un CDN puede almacenar una versión de su sitio en un servidor francés cerca de París y, como resultado, ofrecer su contenido mucho más rápido.
Además, debe seleccionar un proveedor de alojamiento administrado poderoso para su sitio web de WordPress. Un host compartido ejecuta cientos de sitios web a la vez, y si uno de los sitios experimenta un pico de tráfico más alto de lo normal, disminuirá la velocidad de los otros sitios.
Una actualización a un alojamiento de WordPress como Pagely puede generar importantes mejoras de rendimiento. Pagely utiliza una infraestructura de servidor que acelerará inmediatamente su sitio web. También hacen uso de la última versión de PHP 7 e incluyen un CDN que puede disparar los activos de su sitio.
Mantenga la simplicidad
Dado que los teléfonos inteligentes tienen una pantalla mucho más pequeña que los diseños de escritorio, la cantidad de elementos que puede mostrar a los usuarios es menor. Por lo tanto, si desea mostrar una gran cantidad de contenido, solo obstaculizará la experiencia del usuario.
Por ejemplo, echemos un vistazo al sitio web de la sucursal brasileña de Toyota. Se ve realmente sólido en una computadora portátil.

Un sitio web de escritorio atractivo no significa que el diseño móvil seguirá su ejemplo. Fuente de la imagen: Toyota Brasil
Pero, ¿qué pasa si desea navegar por sus vehículos en su teléfono inteligente?

Un diseño web móvil desordenado genera menos tráfico y una tasa de conversión reducida. Fuente de la imagen: Toyota Brasil
No es tan malo, pero nuevamente, esa barra superior y el menú principal son demasiado, lo que hace que toda la experiencia esté desactualizada y desordenada.
Mantener las cosas simples con su diseño mejora la interfaz de usuario móvil y los usuarios pueden navegar por sus páginas de manera más eficiente. Además, los diseños simples mejoran el puntaje de velocidad de la página móvil porque cuantos menos elementos tenga que cargar un navegador, más rápida será la página.

Un diseño simple de WordPress para dispositivos móviles de Swell
Cuando diseñas un diseño móvil, es mejor enfocarte en un diseño de página de una columna para promover más desplazamiento en la página. Piense en: ¿por qué Facebook e Instagram tienen tanto éxito como plataformas móviles?

Los usuarios, naturalmente, deslizan el dedo verticalmente. Fuente de la imagen: Giphy
Además, debe considerar otras características aceptables para el diseño web móvil simple, como el "menú de hamburguesas".

Un botón de menú de hamburguesas en la parte superior izquierda. Fuente de imagen: AMC
Ahora es un componente estándar en el diseño web móvil, y cuando los usuarios quieren navegar por otra página, buscan en la parte superior del diseño de página. No utilice extensos menús desplegables. Son un desafío navegar en teléfonos inteligentes y, a veces, incluso impiden la usabilidad de los sitios web de escritorio.

Excluir contenido innecesario
Además de agilizar la transición de la página a dispositivos móviles al eliminar elementos innecesarios, también puede eliminar el contenido adicional. Por supuesto, nunca debe eliminar contenido que mejore su tasa de conversión. Sin embargo, simplemente hay contenido que no es necesario para la versión móvil de su sitio.
Al revisar qué contenido debería aparecer en la página, pregúntese lo siguiente:
- ¿Qué tan relevante es este contenido para la página?
- ¿Es el contenido crucial para el recorrido del usuario?
- Si necesitamos incluir este contenido, ¿cómo podemos simplificarlo para dispositivos móviles?
- Si podemos eliminarlo en el móvil, ¿sigue siendo necesario en el escritorio?
La eliminación del contenido innecesario mejorará la experiencia del usuario y las tasas de conversión. Guarde solo el contenido más importante para sus visitantes de la web móvil. Simplifique su contenido donde pueda, pero no elimine ningún contenido clave que pueda convencer a los usuarios de optar por su producto.

Una interfaz de usuario simple del sitio web móvil BuildFire.
Limitar las áreas en las que se puede hacer clic
Cuando las personas visitan sitios web en dispositivos móviles, no quieren demasiadas opciones en las que hacer clic. Eso puede ser abrumador y no podrá ofrecer una UX móvil operativa. En su lugar, debe resaltar las llamadas a la acción más importantes y las áreas en las que se puede hacer clic en sus páginas.

Todoist solo tiene el llamado a la acción y algunos gráficos hermosos.
Tenga en cuenta que navegar por un sitio web en un teléfono inteligente consiste en mirar y hacer clic en una pantalla táctil con los dedos en lugar de señalar con flechas. Por lo tanto, incluir un número limitado de enlaces y espaciarlos correctamente garantizará que tenga una página accesible en la que los usuarios de dispositivos móviles puedan navegar.

El sitio web móvil Quicksprout tiene grandes áreas en las que se puede hacer clic.
Esto es crucial porque si las áreas en las que se puede hacer clic están cerca en una pantalla móvil, las personas pueden hacer clic en el enlace incorrecto. Además, Google puede marcar su sitio como no amigable para los usuarios de dispositivos móviles, y se perderá una gran cantidad de tráfico potencial de búsqueda orgánica.
Aproveche el diseño receptivo
Si desea mostrar correctamente su sitio web en computadoras de escritorio y dispositivos móviles, debe hacerlo receptivo. Un sitio web receptivo utiliza los mismos elementos de página para las versiones de escritorio y móviles. Según el dispositivo, el diseño cambia de forma para adaptarse a la pantalla.
Además de la UX mejorada para sus visitantes web en dispositivos móviles, el diseño receptivo también brinda a su sitio los siguientes beneficios:
- Flexibilidad: con un diseño receptivo, no es necesario que piense en cambiar el diseño en dos sitios web. Solo tiene que corregir o agregar elementos una vez, y lo hace tanto para la versión móvil como para la de escritorio.
- Rentabilidad: ejecutar un sitio de escritorio y móvil puede ser costoso. Al utilizar un diseño receptivo, elimina esos costos innecesarios.
- Beneficios de SEO: El diseño receptivo es beneficioso para su clasificación de búsqueda porque Google, como se discutió al principio del artículo, prioriza los sitios optimizados para dispositivos móviles en las SERP.
Sin embargo, debes tener cuidado. La mayoría de los sitios web receptivos solo convierten tres columnas de contenido de escritorio en una columna.
Un sitio receptivo es aquel que se adapta a todas las pantallas. Carga los mismos datos desde el escritorio a la versión móvil. Por ejemplo, si desea mostrar una foto de escritorio de 1200 píxeles en una pantalla móvil de 300 píxeles, se cargarán los 1200 píxeles completos, solo que se reducirán.

Fuente de la imagen: Giphy
En cuanto a las imágenes, WordPress ya ha avanzado significativamente hacia una mejor experiencia. Desde la versión 4.4, el CMS escala automáticamente incluso las imágenes más grandes a través del atributo HTML srcset .
PNG y JPEG son los formatos de archivo de imagen más comunes. Pero, con los últimos avances tecnológicos y de imagen digital, los formatos WebP y SVG están cada vez más presentes.
Un SVG es una imagen vectorial y se puede escalar para adaptarse a cualquier tamaño de pantalla. Por lo general, los SVG son mucho más pequeños que los PNG, por lo que ahorra un tiempo valioso durante la carga.
Sin embargo, debes tener cuidado. Los elementos visuales, como videos, fotos y gráficos, pueden ser uno de los principales factores que consumen el rendimiento de los sitios web. Aunque no existen reglas estrictamente definidas para el tamaño de los archivos multimedia, los archivos más pequeños dan como resultado mejores tiempos de carga.
Tenga en cuenta que es posible que los mismos elementos visuales de la versión de escritorio de su sitio de WordPress no siempre funcionen en el diseño móvil. Es por eso que eliminar las imágenes de fondo grandes e intercambiarlas con una imagen que no obstaculice la UX en el móvil es una opción mucho mejor.
Tomemos la página de inicio de HubSpot como ejemplo. Los gráficos en la sección de héroes representan perfectamente cómo el CRM hace que las cosas se muevan. Imagine una imagen realista de un edificio de oficinas con tanta gente en cada ventana. No funcionaría tan bien como esto.

Fuente: HubSpot
Optimizar formularios
Completar formularios en un teléfono inteligente puede ser un desafío, especialmente si los usuarios tienen que enviar demasiados datos y navegar por demasiados campos. Es por eso que debe asegurarse de simplificar sus formularios móviles y recopilar solo la información más importante.

Mantenga los formularios para sus páginas móviles lo más simples posible. Fuente: Copyblogger
En WordPress, puede instalar un complemento como WPForms y crear formularios receptivos de forma rápida y sencilla que pueden ayudarlo a convertir visitantes web móviles.
Desde la perspectiva del desarrollador, utilizamos el Formulario de contacto 7, ya que proporciona la mayor flexibilidad. Aunque debe tenerse en cuenta que su interfaz de usuario no es fácil de usar para usuarios no técnicos que desean un diseño personalizado para sus formularios.

Contact Form 7 es la mejor herramienta de optimización de formularios desde el punto de vista del desarrollador.
Terminando
Tener un diseño de WordPress compatible con dispositivos móviles es crucial hoy en día. Es un requisito necesario para que los usuarios de destino y los motores de búsqueda acepten su sitio.
Un sitio web de WordPress compatible con dispositivos móviles tiene el poder de atraer más tráfico orgánico, atraer nuevos clientes potenciales y clientes.
Ahora que comprende mejor qué probar, cómo buscar problemas de IU móvil e identificar problemas adicionales. Puede seguir los consejos descritos anteriormente para asegurarse de que la UX móvil de su sitio de WordPress esté siempre a punto.
Las personas detrás del mejor CMS también están haciendo un gran progreso hacia una UX móvil nativa mejorada. Desde escalar imágenes en navegadores móviles hasta un backend mejorado, puede estar seguro de que está por delante de los propietarios de sitios web que utilizan otro CMS.
Si tiene más preguntas o necesita ayuda con problemas de UX móvil y para crear una experiencia web moderna en dispositivos, no dude en ponerse en contacto.