CSS3 media queries sobre WordPress

En este último tiempo se ha empezado a hablar del diseño web responsive. Se trata de aquel que reconoce el formato del dispositivo mediante el cual el usuario está ingresando al sitio web y muestra, en consecuencia, un diseño que se adapte a la resolución de pantalla.

Siempre tuvimos la posibilidad de definir una hoja de estilo para dispositivos de mano.

En media podíamos poner screen, para la pantalla del monitor, print para documentos impresos o handheld, para dispositivos de mano. Esta técnica funcionaba, pero definía una única variante para estos últimos que cada vez son más distintos entre sí y presentan resoluciones de pantalla diferentes.

Con la llegada de CSS3, aparecen los media queries que permiten tener un diseño distinto de la web para cada rango de valores de ancho de pantalla. En una hoja de estilo, podemos definir:

Por ejemplo, si entramos a la página web con un dispositivo con una resolución de pantalla de 500px de ancho, veremos la web según la tercer regla. También, si usamos una PC podemos redimensionar la ventana y observar que el diseño cambia según el valor adoptado.

Pero no todo es tan lindo. Hay algunas consideraciones a tener en cuenta.

En principio, siempre estaremos dándole estilo a un mismo HTML, lo cual significa que no podremos nunca modificarlo sino que deberemos arreglarnos desde el CSS para poder adaptar los diseños. Si hicimos algo un poco complicado de maquetar en alguna de las vistas, tal vez habrá que deshacerlo u ocultar ese elemento.

Por otro lado, hay dos posibilidades a la hora de utilizar media queries: definir un documento básico y luego pisar las reglas según los rangos o definir por completo en cada rango el diseño de la web. La segunda parece muy repetitiva porque seguramente algunos elementos compartirán ciertos atributos en todos los rangos y estaría bueno aprovechar eso para escribir menos código.

Pero si optamos por la primera, hay que tener en cuenta que no estaremos definiendo los estilos sino redefiniendolos. Por lo tanto, habrá que considerar que aquellos atributos que no queremos que tengan valores, no deberán ser ignorados sino que habrá que intruducirlos para quitar el valor definido en el documento principal. Veamoslo en un ejemplo.

Como ven, en el último rango necesito que el ancho no esté definido, sin embargo, el documento principal ya lo definió en 200px. Entonces se puede utilizar inherit para quitarlo y que tome el ancho del elemento padre.

Otro problema a tener en cuenta es con el uso de sprites. Habrá que tener un sprite por cada rango de diseño si es que la página debe mostrarse igual en todas los rangos.

Media Queries y WordPress

Si buscamos temas responsive para WordPress vamos a encontrar muchos, muy estéticos y que hacen creer que todo es muy sencillo. Pero, los que trabajamos con este CMS  sabemos qué es lo que lo hace rico: la innumerable cantidad de plugins disponibles. Ahí es cuando los diseños responsive empiezan a hacer agua o a complicar las cosas.

Muchos plugins de WordPress no solo no dan facilidad para diseñar, sino que ni siquiera validan el HTML y el CSS. Con el objetivo de dar mayor compatibilidad (incluso hacia atrás), sacrifican estándares y provocan un caos a la hora de diseñar.

¿Qué se puede hacer al respecto? En principio, elegir cuidadosamente los plugins a utilizar. Muchos no podrán ir con nuestra web responsive. Si creen que pueden alterar los estilos de los plugins como los del documento principal, les recuerdo que muchos de los estilos de los agregados en WordPress se cargan cuando hacemos <?php wp_head()  ?> y esa línea va antes del cierre de la etiqueta </head> Todo lo que pongamos luego no funcionará, así que algunos estilos no pueden editarse.

Si pensamos en editar los estilos directamente en el directorio del plugin, hay que tener en cuenta que ya estamos excediendo el diseño de un tema. Si el plugin se actualiza en algún momento habrá que prestar atención que no lo haga su hoja de estilo, si no, todos los cambios que habramos hecho estarán perdidos.

Conclusiones

El diseño web responsive ha cambiado la forma de diseñar webs. Antes se dibujaban las principales en algún programa de diseño (yo lo hago en Inkscape pero prefiero pasarle el trabajo a un diseñador) como por ejemplo el home, el single, la página de contacto y luego se maquetaba.

Hoy hay que pensar por tres o por cuatro y hacer todo multiplicado porque hay que dar soporte a los dispositivos móviles. Antes podíamos elegir discriminar a los usuarios de estos aparatos porque no eran más del 1%. Esa cifra ahora aumentó y seguirá haciéndolo. Hoy debemos elegir entre trabajar algo más para poner a punto una web o perder el 8%, 10% ó 15% del tráfico. Creo que está claro que en realidad no hay opción.

Soy programador web y me desempeño como Líder Técnico en Polar Bear Development. Trabajo con tecnologías como PHP, Javascript, MySQL y HTML5 para el desarrollo de sitios y sistemas web. Me especializo en Zend Framework 2 y otros frameworks MVC, como también en WordPress y otros CMS. Lidero equipos de desarrolladores trabajando con Scrum. Vivo en Buenos Aires, Argentina.
 

Deja un comentario

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


*