Diseño Web Responsive y Accesible con Temas WordPress

WordPress es en sí mismo un gestor de contenidos muy versatil: tiene una buena curva de aprendizaje para el usuario final, es escalable y posee una gran comunidad detrás. Además de esto, tiene un sistema muy completo de gestión de diseño y presentación de contenidos a través de los llamados temas WordPress que permiten integrar lo último en diseño web: flat design, responsive, accesibilidad…Hoy toca sumergirse en el fantástico mundo de las plantillas para WordPress, y cómo implementar correctamente un diseño web responsive.

Nota: este artículo nace de la charla que dí junto con Verónica Valenzuela en el WordPress Day Madrid que llevaba por título “Diseño Web Responsive y Accesible con Temas WordPress”. Se incluyen a continuación el video de la misma y la presentación.

WordPress y Diseño Web Responsive

WordPress posibilita que cualquier persona, sin necesidad de conocer los entresijos de código o maquetación web, pueda publicar contenido de una forma sencilla y amigable, como si utilizase un procesador de texto.

Una vez recogido y publicado el contenido, es tarea de nuestro diseño presentar esos textos, imágenes o vídeos al usuario que visita la web. Es aquí es donde se abren un abanico muy amplio de posibilidades y decisiones que el tema o plantilla deberá hacerse cargo, y ya te adelanto que muchas de estas decisiones que parecen insignificantes, pueden inclinar la balanza hacia el éxito o el fracaso.

La única verdad en este conglomerado de detalles y decisiones referentes al diseño y la presentación está en el usuario y en la forma de interactuar con dicho contenido. Por tanto, ese siempre deberá ser el foco del diseño de toda plantilla WordPress: la experiencia de usuario.

Toda decisión basada en mejorar la experiencia de usuario podrá ser más o menos estética, más o menos ornamental, pero sí ten por seguro que estará aportando un valor real a la navegación y a la forma en la que transmitimos los contenidos. Y eso sí es importante.

Por tanto, hablemos de algunas buenas prácticas que toda plantilla o tema WordPress que se preste debe tener. No significa que un diseño que no contemple alguna de estas cuestiones no sirva o esté obsoleto, (en realidad, un poco sí), pero son perfectamente usables todavía! Estos son sencillamente recursos para gestionar de forma más eficiente (y correcta) nuestros contenidos subidos a WordPress (textos, imágenes, vídeos…), y mejorar por tanto la experiencia de nuestro querido usuario.

Mobile First para construir Temas WordPress

Mobile first es una metodología para trabajar con diseño web responsive que se incluye en el proceso de trabajo desde el principio, es decir, desde la fase de prototipado del diseño o plantilla para WordPress.

mobile first en temas wordpress

A nivel de CSS, sirve para trabajar con mediaqueries min-width, es decir, introducir reglas condicionales a partir de resoluciones que denominamos como mínimas, por lo que nuestro CSS sin dichas mediaqueries es en realidad una presentación para una resolución pequeñas.

A nivel conceptual, significa trabajar desde el diseño para la resolución más pequeña hasta la mayor, pasando por las resoluciones intermedias que contemplemos como viables y que requieran una modificación a nivel CSS.

Es una metodología muy útil para definir realmente qué es lo importante en nuestro diseño web, pero sobre todo, para preparar nuestro tema y por tanto todo nuestro contenido de WordPress para futuras resoluciones o dispositivos. Aunque mobile first lo podemos traducir como “móvil primero”, se adapta más a una definición de “mínimos primero” o incluso “contenido primero”

Ver contenido extra Mobile First

Tipografías en unidades relativas

El pixel ha muerto. Por si no te has dado cuenta, la mayoría de grids y frameworks que trabajan en responsive han cambiado el pixel por unidades relativas (como %) para definir los bloques y el layout del diseño. La mayoría de plantillas WordPress que trabajan con Bootstrap o Fundation usan % para definir sus rejillas y adaptarse a cada dispositivo y resolución.

tipografías unidades relativas

Las tipografías no iban a ser menos. En esta revolución de web fonts en las que vivimos, no solo cambian los estilos, sino también el tamaño con el que mostramos dichos elementos. Piensa que no todos usamos la web de igual forma. Algunos tenemos problemas en la vista. Otros tienen la pantalla muy cerca. Otros leen más alejados. Cada usuario es un mundo.

Por todo ello, es el momento de que las plantillas WordPress empiezan a trabajar los tamaños de fuentes con unidades relativas. Que cada usuario y dispositivo pueda decidir cómo se leen mejor nuestros textos. Mejorarás la experiencia de usuario.

Pasemos del pixel a unidades relativas como el em o el rem. En la presentación tienes algunos ejemplos de cómo trabajar con ellas. En breve escribiremos algo más detallado sobre esto 😉

Imágenes Fluidas para todas las resoluciones

Qué sería de una web sin imágenes. Ilustran el contenido, retienen al visitante y se comparten muy bien en redes sociales. Pero de nada sirve pasar horas buscando buenas imágenes en bancos si la plantilla de WordPress no hace un uso correcto de las mismas en responsive.

imagenes web responsive adapatadas

Básicamente, en diseño web responsive trabajamos con imágenes fluidas, que se ajustan al contenido. Así evitamos tener que hacer scroll horizontal o ampliar y disminuir el zoom en dispositivos como smartphone o tablets.

Tratar las imágenes de forma fluida es algo que ha de decidir el tema o diseño seleccionado por medio de CSS. En este artículo te dejo los snippets, extractos y plugins para WordPress que recomendamos en la ponencia. Espero que te sirvan!

Ver contenido extra Imágenes Responsive

Vídeos en Diseño Web Responsive

El vídeo no podría ser menos. Si hablamos bien de las imágenes dentro del contenido, que te voy contar acerca del vídeo integrado o incrustado dentro de un artículo o una página de tu WordPress: muestran en imágenes y audio lo que quieres contar, se comparten muy bien en redes sociales, y sobre todo aumenta el tiempo de estancia en tu página sin necesidad de que tu servidor consuma recursos. Fantástico.

Video en diseño web responsive

Pero al igual que sucede con las imágenes, no sirve de nada tener vídeos de YouTube o Vimeo integrados en tu WordPress si tu plantilla no es capaz de mostrarlo y ajustarlo correctamente a todas las resoluciones.

Al igual que en el caso de las imágenes, podemos integrar una correcta gestión responsive de videos a través del CSS. Sin embargo, aquí la opción más sencilla es la utilización de una librería externa js : fitvids.js que podemos encolar dentro del tema o plantilla en nuestro functions.php

En breve extendemos las opciones para trabajar con vídeo en responsive así como los extractos de la presentación.

Conclusiones: Temas WordPress centrados en el Usuario

Tenlo claro desde el principio. Tanto si eres diseñador, maquetador o simplemente estás buscando un tema WordPress, ten el foco siempre puesto en el usuario final y como va a interactuar con tu contenido y desde donde.

cita WP Day Madrid

Haz la vida más fácil a tu visitante y él te la hará a ti. Piensa primero en eso. Diseña con ese objetivo. Que todo sea flexible y adaptable, y deja las decisiones ornamentales o simplemente estéticas en un segundo plano. Como dijo Edward Tufte : “Clutter and confusion are failures of design, not attributes of information”

Espero que os sirvan de ayuda los materiales. Feliz trabajo Responsive!

Escrito por 

Hola! Mi nombre es Ricardo Prieto y trabajo (y escribo) sobre diseño web, maquetación y experiencia de usuario en SiloCreativo, desde donde ayudamos a personas a desarrollar sus proyectos con tutoriales, consejos y recursos.

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *