Te mostraré 5 consejos o cosas a tener en cuenta para hacer tu web de WordPress Responsive.
Esto es algo muy importante, tanto para experiencia de usuario como para el posicionamiento en buscadores.
Tipografía adaptada a cada dispositivo
Primero que nada, tenemos el tamaño de la tipografía.
De normal, cada tema permite configurar tipo, tamaño, etc.. De tipografía para cada zona de la web.
Además, también permite modificarlo para cada tipo de dispositivo principal (PC – Tablet – Mobile)
Es importante que lo adaptes, sobre todo el tamaño de la tipografía, a cada tipo de dispositivo.
Cambios de tipografía con CSS
Algunos temas no te permiten cambiar el tamaño según el dispositivo, o al menos no en cualquier item. Para ello, puedes aplicar el comando @media de CSS personalizado.
Con ello, podrás aplicar cierta configuración de tipografía, para cierto item, con X límite y X mínimo de ancho de pantalla del dispositivo.
Si no sabes nada de código, te será un poco complicado el tema CSS, pero si lees un poco, verás que es fácil.
Por suerte, la mayoría de los temas, por poco bueno que sea, en tipografía, te darán la opción de incluir una tipografía personalizada en ordenador, tablet y móvil. Al menos para las partes principales de la web.
Imágenes responsive
Al mismo tiempo, también es importante considerar que no sean fijas las imágenes. Esto quiere decir que las imágenes se puedan adaptar a todo tipo de dispositivo.
Cuando subes una imagen a WordPress, se redimensionan automáticamente para adaptarse al ancho de pantalla en cuestión, según necesidades. Por lo que no tendrás que preocuparte en ese aspecto 🙂
Sin embargo, es importante tener en cuenta que no sean ni muy horizontales, ni muy verticales las imágenes.
Si son muy verticales, en el ordenador ocuparían mucha parte de la pantalla. En efecto, se vería muy bien en un móvil, pero no sería el mismo caso en el ordenador.
Lo ideal es seleccionar imágenes dirigidas más hacia el cuadrado, o ligeramente horizontales.
Si es extremadamente horizontal, sería muy complejo para leer el texto en móvil de lo pequeño que va a quedar. Sobre todo, en caso de que la imagen tenga mucho texto o mucha información para detallar.
Menú Responsive
La mayoría de los temas te diferencian un menú en móvil y otro en ordenador. Basado en ancho de pantalla.
Normalmente, los anchos menores a unos 800px (como móvil) tienen un desplegable tipo «acordeón».
Mientras que anchos mayores a unos 800px (como el de ordenador) tienen la lista de menú normal, con los diferentes items del menú visibles.
Además, varios temas permiten configurar de forma específica el diseño menú de móvil.
Pero, si el menú responsive que genera tu tema no te termina de gustar, hay plugins específicos que pueden servirte:
WP Mobile Menu
Por ejemplo, hay uno que he probado que se llama WP-Mobile Menú, el cual te deja poner un menú en WordPress en móvil específico, y personalizarlo bastante. Más aún si tienes la versión premium.
Es importante que, si lo activas, te asegures de ocultar el menú de móvil generado por el propio wordpress (bien sea por CSS o por Configuración). De lo contrario, habrá 2 menús a la vez, y quedará mal.
Evitar scroll horizontal
Otro consejo importante, que puede ayudar a que tu web sea Responsive, es eliminar el scroll horizontal.
Algunas veces, al introducir ciertos códigos, ciertas imágenes, texto, etc… se genera un scroll horizontal en pantallas estrechas, que hace que a una persona, al bajar o subir en una entrada, se le mueva la pantalla hacia los lados.
Esto puede llegar a ser muy incómodo para las personas. No tiene mucho sentido el scroll horizontal; por lo que, para evitarlo, es necesario poner un código en el CSS que obliga a evitar el scroll horizontal, el cual es el siguiente:
html, body {
width: 100%!important;
overflow-x: hidden!important;
}
Si quieres ver cómo ponerlo, mira este vídeo:
Editores visuales
Muchas veces se usan editores visuales para añdir botones, carruseles, etc…
Algunos famosos son: Elementor, Divi, Oxygen…
Cada editor visual tiene la opción de mostrar cómo quedaría en tablet, en ordenador y en móvil, cada ítem que coloques en la página.
Además, permite adaptar el tamaño de cada item a cada tipo de dispositivo.
Es importante que lo revises, ya que si solo lo modificas en versión PC, suele quedar mal.
Vídeo tutorial con 5 consejos para hacer que una web WordPress sea responsive
Es importante considerar, de manera adicional, que Google también te ofrece sus propias herramientas para ayudarte a que tu web sea Responsive, como el Mobile Friendly Test, donde al pegar la ULR de tu web, podrás probar y verificar que correctamente es Responsive según el robot.
Si todo esto te es útil, y aun así quieres saber un poco más, te dejamos un vídeo tutorial donde ver el tutorial puesto en práctica en modo vídeo.
Leer Más
Leer Más
Leer Más
Leer Más
Leer Más
Leer Más
Leer Más
Leer Más
Leer Más
Leer Más
Leer Más
Leer Más