5 consejos para hacer tu web de WordPress RESPONSIVE

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.

tipografia

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.

movil

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.

imagenes

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.

menu

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.

scroll

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;
}
htlm

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.

Te puede interesar...

Cómo Vincular un Enlace a una Imagen en WordPress

Bien es sabido que las imágenes hablan por sí solas. Pero en ocasiones desearás que tus imágenes en WordPress tengan cierto respaldo informativo. ¿Cómo lo haces? Pues incrustando un enlace en la imagen deseada, que dirija al lector a otra página que esté relacionada con la misma: Ya sea interna

Leer más »

Cómo usar el plugin RANK MATH (Plugin SEO para WordPress)

En este artículo, te explicaremos como usar la versión gratuita de RankMath, un plugin de SEO bastante completo, que puedes instalar y usar fácilmente en WordPress. Se trata de un plugin con versión gratis y versión paga, especializado en la optimización para SEO en WordPress. A continuación, vamos a ver

Leer más »

Cómo eliminar el Scroll Horizontal en WordPress

En el artículo de hoy aprenderás a cómo eliminar algunos problemas que puede llegar a tener WordPress, especialmente en los móviles: el Scroll Horizontal o Scroll Lateral. En la versión del móvil lo que sucede es que a veces, por ciertos carácteres introducidos, imágenes demasiado grandes, u otros; el contenido

Leer más »