Su guía para el diseño web receptivo para WordPress
Publicado: 2022-09-29Lo más probable es que más de la mitad del tráfico de su sitio web provenga de dispositivos móviles. ¿Está utilizando un diseño web receptivo para WordPress?
Uno de los mayores errores que puede cometer al crear un sitio web es diseñar y crear solo para navegadores de escritorio. Lo entendemos. Todos hemos sido culpables de eso antes. La mayoría de nosotros no creamos sitios web en nuestros teléfonos. Los construimos a partir de nuestra configuración preferida, ya sea en una computadora portátil frente al televisor o en una oficina con dos monitores gigantes uno al lado del otro.
Pero construir para computadoras de escritorio y tratar los dispositivos móviles como una ocurrencia tardía aliena a la mayoría de los visitantes de su sitio web. No administraría un restaurante de comida rápida donde la mayoría de sus clientes estuvieran en el autoservicio y pasaría todo el tiempo esperando a las personas en el comedor. Más de la mitad de sus ingresos provendrán del autoservicio, por lo que debe optimizar sus operaciones allí y, al mismo tiempo, atender a los clientes que cenan en el lugar.
Esta publicación muestra cómo y por qué su sitio web debe funcionar para las personas en todos los tamaños de pantalla. También aprenderá las mejores formas de incorporar un diseño web receptivo para sitios web de WordPress.
Por qué el diseño web receptivo es crítico
¿Conoces la frustración de trabajar con objetos diminutos, como tratar de abrir el broche de un collar o ponerle zapatos a una Barbie? Así es para los visitantes móviles cuando su sitio web no responde.
Cuando su sitio web no se adapta al tamaño de la pantalla, es más probable que los visitantes encuentren dificultades. El diseño receptivo es una forma de construir sitios web para que el diseño y el diseño se adapten al tamaño de las pantallas de los usuarios.
Los problemas con los diseños de sitios web que no responden incluyen:
- Los botones y las navegaciones del sitio son demasiado pequeños para hacer clic
- El texto es demasiado pequeño para leer
- Las imágenes, tablas u otro contenido es demasiado ancho para la pantalla y se corta
Los visitantes del sitio web podrían haber pasado por alto estos desafíos en algún momento. Pero ahora la gente espera que su sitio funcione perfectamente en sus teléfonos. Si su sitio no es compatible con dispositivos móviles, los visitantes se irán y encontrarán el sitio de un competidor que funciona en sus teléfonos.
Los clientes no son los únicos que lo penalizarán por falta de optimización móvil. Los motores de búsqueda también revisan regularmente los sitios para verificar su compatibilidad con dispositivos móviles. Penalizarán su sitio con clasificaciones de búsqueda más bajas si no está diseñado para funcionar en pantallas pequeñas.
Cómo verificar la compatibilidad móvil de su sitio
Google se toma tan en serio la compatibilidad con dispositivos móviles que creó una herramienta especial que puede usar para probar su sitio.
A continuación, le indicamos cómo comprobar si su sitio es compatible con dispositivos móviles:
- Vaya a https://search.google.com/test/mobile-friendly
- Ingrese el dominio de su sitio web
- Haga clic en URL de prueba
- Espera tus resultados. Podría tomar un par de minutos.
- Vea su informe. Si la herramienta encuentra errores, enumerará lo que debe corregir para que su sitio sea compatible con dispositivos móviles.
Cómo implementar un diseño web receptivo para WordPress
Utilizar un diseño web receptivo para su sitio web de WordPress es simple. Puede elegir un tema receptivo o modificar su tema o diseño existente para que sea receptivo.
Elegir un tema receptivo
Si está eligiendo un tema moderno que se actualiza regularmente, lo más probable es que sea un tema receptivo. Los desarrolladores de temas no perderán el tiempo creando temas que no responden. Saben que la mayoría de los usuarios de WordPress quieren un tema que funcione en todos los tamaños de pantalla.
Cuando obtenga una vista previa de los temas, no solo los mire en un escritorio. Use su teléfono o un simulador para ver cómo se ve en un dispositivo móvil.
Modificación de su tema o diseño existente
Puede modificar un tema o diseño que no responde ajustando el CSS para el tema. Este tutorial de W3Schools es un excelente lugar para aprender a escribir su propio CSS para implementar un diseño web receptivo.
Si usa CSS personalizado, lea esta publicación sobre cómo conservar el CSS personalizado al actualizar su tema .
Consideraciones del Diseño Responsivo en WordPress
Ya sea que elija un tema receptivo o codifique uno propio, esté atento a las cosas que podrían hacer que su sitio web no sea amigable en los dispositivos móviles.
Verifique sus complementos
Los complementos pueden modificar el diseño o el diseño de su sitio web. Cuando use un nuevo complemento para agregar funciones a su sitio, pruébelo en pantallas pequeñas. No permita que las opciones de su complemento anulen la capacidad de respuesta de su tema.
Tenga cuidado con las ventanas emergentes
Las ventanas emergentes pueden ser un problema en los dispositivos móviles. Cualquiera que busque una receta en línea puede dar fe de los problemas que causan. Mientras se desplaza por una historia incoherente que no está ni remotamente relacionada con la receta, una ventana emergente lo alienta a suscribirse a un boletín informativo o descargar un libro de cocina. El problema es que la ventana emergente es más grande que la pantalla de tu móvil y no puedes ver la opción de cerrar. No seas esa persona. Deshabilite las ventanas emergentes grandes en pantallas más pequeñas para mantener la facilidad de uso móvil.
Tenga cuidado con las longitudes de los menús
Muchos temas son responsivos por defecto, pero eso no significa que todos los diseños de escritorio se traduzcan fácilmente en sitios responsivos móviles. Los menús de navegación pueden crear múltiples problemas. Si su menú es increíblemente largo con múltiples niveles, puede ser engorroso usarlo en un menú desplegable móvil. Considere usar una versión reducida de su navegación para dispositivos móviles.
Cómo afecta la calidad del host a la compatibilidad con dispositivos móviles
Más allá de su diseño web receptivo, la velocidad de su sitio juega un papel importante en lo que los visitantes móviles piensan de su sitio web. Cuando no están conectados a Wi-Fi, los navegadores móviles a menudo se enfrentan a conexiones a Internet mucho más lentas. Un sitio de carga lenta con una conexión a Internet lenta es una receta para el desastre.
No puede hacer mucho para arreglar las conexiones de Internet lentas y la mala cobertura celular, pero puede asegurarse de que su sitio sea lo más rápido posible. La rapidez con la que se carga su sitio depende mucho de la calidad de su proveedor de alojamiento web. En Pressable, nuestros servidores fueron construidos por los mismos genios detrás de WordPress.com, WordPress VIP y WooCommerce. Conocemos WordPress por dentro y por fuera y construimos los mejores y más rápidos servidores para sitios de WordPress .
Regístrese hoy y comience a experimentar la diferencia de Pressable.
