Diseño web adaptable en WordPress

A estas alturas todos entendemos el concepto de diseño adaptable o responsive. Seguro que tienes más de un dispositivo electrónico y te gusta que las páginas que visitas se vean igual de bien en todos ellos. Hoy voy un paso más allá en este artículo. Diseño web adaptable en WordPress.

En el pasado los únicos dispositivos que se conectaban a Internet eran los ordenadores, ahora bien, cada ordenador tenía una resolución diferente, unas dimensiones diferentes. Los desarrolladores, como me pasaba a mí cuando empecé, nos las veíamos y nos las deseábamos para que nuestros diseños se vieran de manera decente en todas las pantallas. Ajustabas la web en la pantalla de tu ordenador y cuando te quedabas a gusto con el resultado observabas el diseño en la pantalla del compañero y contemplabas el desastre. En toda la clase no había dos monitores iguales. Si tienes algunos añitos es posible que recuerdes al pie de las webs una leyenda que rezaba “Optimizado para 700px” o lo que fuera. Todos teníamos asumido, después de muchos quebraderos de cabeza y de tragarnos nuestro orgullo, que no podíamos diseñar para todo el mundo.

Los tiempos han cambiado y es inaceptable limitar el desarrollo a una sola resolución.  Es más, ahora no sólo tenemos distintas resoluciones de pantalla sino que existen distintos dispositivos. Tú puedes estar leyéndome desde el televisor o desde tu móvil y mi misión es hacer que me leas igual de bien en todos ellos. En eso consiste el diseño adaptable.

Cómo conseguir un diseño adaptable en WordPress

Pero no podemos conformarnos con estirar y encoger nuestra web como si fuera de chicle. Para conseguir un diseño responsive tendremos que hacer varias cosas según sea el caso.

Los elementos que forman la estructura de nuestra web tendrán que recolocarse para ajustarse a las dimensiones del dispositivo. De esa forma lo que vemos de forma apilada en nuestro móvil pasará a desplegarse en horizontal aprovechando el ancho de la pantalla cuando estemos en el ordenador.

Algunos elementos tendrán que redimensionarse para adaptarse al ancho de la pantalla, como pasa con las imágenes.

Pasaremos de utilizar unidades absolutas a utilizar unidades relativas. Piensa que 400px para un monitor de 1920 x 1080 es un tamaño muy pequeño, pero es enorme para un móvil.

Algunos elementos cambiarán de aspecto dependiendo de si los vemos en la pantalla del ordenador o en el móvil, como el menú principal que cambia a menú hamburguesa en el móvil.

Todo esto sabe hacerlo WordPress a las mil maravillas, no creo que hoy en día existan temas en WordPress que no sean responsive.

Un paso más allá con CSS

Como te comentaba más arriba, los componentes se redimensionan atendiendo al ancho. Es posible que, aunque encajen de ancho, algunos elementos tras la redimensión sean muy altos para la pantalla del móvil.

Esto te va a pasar seguro con algunas imágenes o algunos widgets por lo que debes ser capaz de mostrar u ocultar determinados elementos según se trate de la versión de escritorio o de la versión móvil.

Por suerte esto es algo muy fácil de hacer con CSS. Sigue estos pasos:

1. Tendrás primero que crear una clase para ese elemento que quieras mostrar u ocultar dependiendo del dispositivo. Esto puedes hacerlo en el artículo o la página en la que estés trabajando.
2. Haz clic en el elemento en cuestión.
3. En las herramientas de la derecha del editor en el apartado “Avanzado” introduce el nombre de la clase que quieras por ejemplo “grande” (sin las comillas).
4. En el personalizador en el apartado “CSS adicional” pon lo siguiente:

@media screen and (max-width:467px){
   .grande{
       display: none;
   }
}

Este script hará que este elemento no se muestre en dispositivos pequeños.

Este truco tan sencillo no sólo servirá para que tu web se vea bien en todo tipo de dispositivos si no que hará que tu página se cargue mejor en el móvil. Repasa el diseño de tu web y decide qué elementos quieres mantener para todos los dispositivos y de cuáles puedes prescindir en la versión móvil y mejorar así la experiencia de usuario. Recuerda cuando tratas con dimensiones reducidas, menos es más.

Bueno, pues hasta aquí el artículo de hoy. Espero haberte ayudado. ¿Has adaptado ya tu web? Déjamelo en los comentarios.