Cómo hacer que su sitio de WordPress sea compatible con dispositivos móviles

No es ningún secreto que los sitios de WordPress optimizados para dispositivos móviles son la nueva norma, pero a pesar de lo comunes que pueden parecer, aún puede llevar un poco de trabajo crear un sitio hermoso y receptivo. Esta guía lo ayudará a comprender por qué es importante tener un sitio optimizado para dispositivos móviles, cómo crear uno en WordPress y le presentará las mejores herramientas para crear un sitio receptivo.

Para hacer que su sitio de WordPress sea compatible con dispositivos móviles, debe:

1. Comprender por qué el diseño web receptivo es importante
2. Realice la prueba de compatibilidad con dispositivos móviles de Google
3. Usa un tema responsivo de WordPress (o crea uno propio)
4. Considere complementos de WordPress compatibles con dispositivos móviles
5. Use opt-ins optimizados para dispositivos móviles
6. Piense en términos de medios receptivos
7. Priorizar el rendimiento del sitio

¿Listo? ¡Vamos a sumergirnos!

1. ¿Por qué son importantes los sitios optimizados para dispositivos móviles?

En el cuarto trimestre de 2019, el 61% de las búsquedas de Google se realizaron en un dispositivo móvil. Eso significa que más de la mitad de la población está recurriendo a teléfonos y tabletas en lugar de dispositivos de escritorio tradicionales, por lo que para mantenerse al día con ellos, su sitio web debe estar listo para mostrarse en cualquier tamaño de pantalla. Un diseño optimizado para dispositivos móviles brinda una experiencia de usuario positiva y ayudará a sus usuarios a encontrar lo que buscan mientras se desplazan.

Además de UX, hay otra razón importante por la que su sitio debe ser compatible con dispositivos móviles: Google. A partir de 2015 (el año de "Mobilegeddon"), Google implementó una revisión importante de su algoritmo de búsqueda para recompensar los sitios que se consideran "compatibles con dispositivos móviles". El cambio se redujo a un punto de datos crucial: si su sitio web responde o no.

Esto significa que si su sitio se lee bien en dispositivos móviles, tendrá un mejor rendimiento en los resultados de búsqueda que los sitios que no lo hacen. Esa es una gran ventaja si ha hecho el trabajo de crear un sitio optimizado para dispositivos móviles. Pero también puede dañar el tráfico de su sitio si no está a la altura de la tarea de mostrarse en pantallas más pequeñas.

Afortunadamente, si su sitio de WordPress aún no es compatible con dispositivos móviles, existen muchas herramientas para ayudarlo a ponerse al día y crear un sitio receptivo y completamente funcional. ¿El primer paso? Compare su diseño actual.

2. Realice la prueba de compatibilidad con dispositivos móviles

Su sitio web puede verse muy bien en un dispositivo móvil (como su propio teléfono celular personal), pero realmente necesita probarlo en una amplia gama de tamaños de pantalla para saber si realmente responde. Incluso si tiene un montón de teléfonos viejos por ahí, probarlo en cada pantalla puede llevar mucho tiempo.

Para simplificar las cosas, Google nos ha regalado a todos una herramienta de prueba gratuita para dispositivos móviles que le dirá si su sitio califica como "compatible con dispositivos móviles" o no. Simplemente ingrese la URL de su sitio para una evaluación rápida del diseño móvil de su sitio. Si su sitio web está completamente optimizado para dispositivos móviles, recibirá un pequeño mensaje de éxito entusiasta que se ve así:

Si ves rojo, tienes un poco de trabajo por hacer. (¡Llegaremos a eso en un segundo!)

Pequeña herramienta bastante ordenada, ¿verdad? Bueno, se pone aún mejor.

Para todos los desarrolladores, Google también lanzó una API de prueba compatible con dispositivos móviles que les permite probar las URL con herramientas automatizadas. El beneficio de esto es que puede probar rápidamente más páginas, pero también puede monitorear las páginas más importantes de su sitio sin tener que recurrir manualmente a la herramienta del navegador todo el tiempo. ¡Puntaje!

Una vez que haya utilizado la herramienta compatible con dispositivos móviles de Google para comparar su sitio, es hora de comenzar a realizar mejoras. Empecemos con tu tema de WordPress.

3. Use (o cree) un tema de WordPress receptivo

Si recientemente instaló un nuevo tema de WordPress, existe una buena posibilidad de que esté bien en este departamento. Sin embargo, si su tema ha existido por un tiempo, podría ser el momento de una pequeña actualización.

Lo primero es lo primero: verifique dos veces su versión de WordPress y la versión actual del tema. Si hay actualizaciones pendientes, comience con esas. No puedo hablar por todos los temas que existen, pero algunas actualizaciones contendrán elementos compatibles con dispositivos móviles y pueden ser suficientes para solucionar sus problemas. WordPress 4.4, por ejemplo, agregó una funcionalidad realmente interesante para imágenes receptivas (puedes leer todo sobre eso aquí).

Si las actualizaciones no funcionan, probablemente sea hora de buscar un nuevo tema o considerar crear uno propio. Exploremos ambas opciones.

Los mejores temas de WordPress para dispositivos móviles

Siendo realistas, muchos temas de WordPress en estos días son receptivos; probablemente sea más raro que un tema no sea compatible con dispositivos móviles. Dicho esto, antes de comprar un tema, verifique que se muestre bien en cualquier tamaño de pantalla. Pruebe el sitio de demostración, escale la ventana de su navegador y lea las reseñas que pueda encontrar para buscar la experiencia de usuarios reales.

Si estás contento con lo que ves, ¡adelante! Pero si algo no se ve bien, aléjate. Incluso si pensó que era la combinación perfecta, hay tantos temas de WordPress para elegir que le garantizo que encontrará otro que funcione para su sitio.

Si está buscando temas gratuitos, asegúrese de ver cómo se ve con su propio contenido en su lugar; como estoy seguro de que sabe, las cosas no siempre se ven iguales, así que asegúrese de que muestre su contenido de la misma manera. manera que te gustaría en el móvil.

¿No estás seguro por dónde empezar? Cuando aloja su sitio de WordPress en WP Engine, obtendrá acceso a los temas de StudioPress (¡incluido Genesis Framework!) Gratis con su plan. Estos temas son totalmente receptivos, por lo que se verán geniales en cualquier dispositivo, además, puedes cambiar fácilmente entre ellos (en lugar de sentirte atascado con el tema premium "el único" que decidiste comprar).

Cómo crear su propio tema de WordPress receptivo

Si prefiere seguir la ruta de bricolaje para crear un sitio optimizado para dispositivos móviles, asegúrese de comenzar desde cero o en un entorno de prueba; nunca debe realizar cambios tan drásticos como ese en su sitio en vivo.

Recomendaría usar Local para activar un sitio local de WordPress directamente en su máquina. Esta aplicación gratuita le permitirá experimentar al contenido de su corazón sin nunca romper su sitio actual (lo cual es esencial cuando se está rediseñando). Incluso puede importar su sitio existente a Local, por lo que solo necesita comenzar desde cero si lo desea.

También hay una función llamada Live Links, que genera una URL para compartir en el sitio local. Esto le permite enviarlo a un cliente o descargarlo en su teléfono, para que pueda probar fácilmente cómo se ve el sitio en un dispositivo móvil.

Si crea un tema secundario basado en un tema principal receptivo, estará en muy buena forma. Si está comenzando desde una pizarra totalmente en blanco y está creando su propio tema, solo asegúrese de usar consultas de medios para establecer límites para el diseño y pensar en los elementos de uno en uno.

Pregúntese cómo deben escalar las imágenes, cómo debe verse la navegación y si parte del contenido se ocultará en un dispositivo móvil. Aquí hay algunos tutoriales que pueden ayudarte:

• Cómo crear un menú de navegación receptivo en WordPress
• 7 consejos de mejores prácticas para el diseño web receptivo
• Trabajando con imágenes receptivas en WordPress

4. Use complementos receptivos

Los complementos agregan funcionalidad a su sitio de WordPress, por lo que no siempre agregan nada visualmente al front-end. Pero en el caso de que agreguen un elemento físico a su sitio (como un widget o un botón CTA), asegúrese de que se adapte bien a todos los tamaños de pantalla, o al menos le dé la opción de deshabilitarlo en tamaños de pantalla más pequeños.

Por ejemplo, un widget de barra lateral es una excelente adición a un sitio de escritorio, pero si domina el diseño móvil o no se reduce, no será una gran experiencia para el usuario.

Al igual que los temas, solo preste atención a las características de un complemento e intente leer reseñas o encontrar una demostración antes de comprar uno. Y cada vez que active un nuevo complemento, recuerde realizar una verificación rápida de la calidad de su sitio para asegurarse de que se escala correctamente en todos los tamaños de pantalla.

Siempre que tenga un tema receptivo y complementos que se comporten bien en dispositivos móviles, su sitio estará en muy buena forma para mostrarse en pantallas más pequeñas.

5. Evite agregar ventanas emergentes en dispositivos móviles

Si está tratando de crear una lista de correo electrónico con su sitio de WordPress, supongo que tiene una variedad de suscripciones en su sitio. La mayoría de los formularios de suscripción por correo electrónico funcionan bien en dispositivos móviles (suponiendo que sean escalables y fáciles de usar).

Las ventanas emergentes, sin embargo, son una bestia diferente. Google ha comenzado a penalizar los sitios con intersticiales intrusivos, también conocidos como opt-ins que cubren el contenido de un sitio. Esto incluye ventanas emergentes (ya sea que se muestren inmediatamente o después de que un usuario haya estado en el sitio durante algún tiempo) y cualquier otro tipo de opción que un usuario deba descartar antes de acceder al contenido de la página. Puede leer todo sobre la postura de Google al respecto aquí.

Para mantener su sitio de WordPress compatible con dispositivos móviles y siguiendo las mejores prácticas, evite las ventanas emergentes en su diseño móvil. La forma en que lo haga dependerá del servicio que active sus suscripciones, pero la mayoría de los proveedores deberían tener una opción para deshabilitar las ventanas emergentes intrusivas en los dispositivos móviles.

6. Elaborar estrategias para medios receptivos

Ya sea que esté trabajando con un sitio de cartera, un blog diario o un sitio de comercio electrónico, una pieza importante del rompecabezas receptivo es considerar los medios en su sitio. Esa gran imagen de fondo en su página de inicio puede verse muy bien en una máquina de escritorio, pero si no se escala correctamente, podría perder todo el contexto y provocar una experiencia de visualización difícil en un teléfono. Entonces, ¿regla número uno para los medios receptivos? Piensa en cómo escalan las cosas.

Si escalar no es realmente la mejor solución para su sitio, también podría considerar ocultar ciertos elementos cuando su sitio se carga en un dispositivo móvil. Esto ayudaría a simplificar la experiencia y llevar a los usuarios al contenido más importante más rápido.

Finalmente, también debe tener en cuenta el tamaño del archivo de los medios que está incluyendo en su sitio. ¡Esto no solo mejorará la experiencia móvil, sino también el tiempo de carga del escritorio! Los archivos multimedia suelen ser algunos de los más grandes de un sitio web, lo que los convierte en la causa de las barras de carga y los largos tiempos de espera. Para ayudar a optimizar su sitio y aumentar el rendimiento móvil, intente optimizar sus imágenes utilizando el tamaño de archivo más pequeño que pueda y manteniendo la calidad que necesita. (Por ejemplo, ¡tal vez su sitio móvil cargue una versión más pequeña de una imagen que el escritorio!)

7. Priorizar el rendimiento del sitio

La velocidad de la página ha sido importante durante mucho tiempo en términos de cómo se clasifica su sitio en las búsquedas de escritorio de Google, pero a partir de julio de 2018, ese también es el caso de las clasificaciones móviles. Combine eso con la estadística anterior de que más del 60 % de las búsquedas en Internet se realizan mediante dispositivos móviles, y el rendimiento de su sitio (en todos los dispositivos) ahora es más importante que nunca.

Las imágenes son una gran parte de la ecuación de rendimiento, pero su código y el host de WordPress también juegan un papel importante.

Cuando se trata de su código, considere acciones como la minificación (especialmente si trabaja con un tema personalizado). Haga un inventario de todos los complementos instalados en su sitio y desactive y desinstale los que ya no sean necesarios. Básicamente, cuanto más organizados mantengas los elementos que impulsan tu sitio, mejor estarás.

En cuanto a su host de WordPress, asegúrese de estar utilizando un socio de calidad que incluya servicios como tecnología de almacenamiento en caché, CDN e infraestructura impulsada por proveedores confiables como Google Cloud Platform. Si está alojando su sitio en WP Engine, está configurado en todas estas áreas.

A medida que más y más personas usan sus teléfonos inteligentes o tabletas para acceder a Internet, los diseñadores de sitios deben adaptarse para abordar esos patrones de uso. Entonces, ¿su sitio está listo para sus visitantes móviles? ¿Qué aspectos de su sitio ha tenido que cambiar? ¿Qué herramientas usaste para crear un diseño responsivo? ¡Comparte tu experiencia en los comentarios!

Obtenga acceso a más de 30 temas premium (¡y compatibles con dispositivos móviles!)

Ahorre algo de tiempo (¡y dinero!) con el alojamiento de WordPress de WP Engine y obtenga acceso a los temas de StudioPress y Genesis Framework. Los temas son totalmente receptivos y fáciles de personalizar, lo que le ahorra tiempo al intentar crear un sitio optimizado para dispositivos móviles. Además, la poderosa plataforma de WP Engine mantendrá el rendimiento de su sitio optimizado, lo que ayudará a que las velocidades de la página se mantengan rápidas y su sitio se clasifique bien.