Diseño web sensible (RWD). Una plantilla para Blogger

Realmente no sé si esto de "sensible" será una traducción correcta o no, pero con esa palabra me refiero al diseño web que los angloparlantes adjetivan como responsive y que utilizan para catalogar los sitios que reaccionan a ciertas cosas. En concreto principalmente a una, al tamaño de la ventana desde la que se está visualizando.


Por ejemplo, el término Responsive Web Design (RWD) se utiliza para sitios que están diseñados con columnas de medidas variables (porcentuales) y que se encogen o estiran según la ventana. Las de este tipo han existido desde casi siempre, son sencillas de contruir e incluso Blogger las ha incluído habitualmente entre sus diseños prefabricados.

Pero lo que pretende este tipo de diseño es que los usuarios puedan acceder sin problemas a todo el contenido, con una única fuente, desde aparatos con resoluciones tan dispares como una pantalla panorámica de un ordenador de sobremesa, un notebook, un iPad o un smartphone y sobre todo, que en todos ellos se vea bien. Por cierto ¿por qué les llaman teléfonos inteligentes si no son capaces de hacer más que un ordenador convencional? Marketing, supongo; bueno, seguro.


Además de columnas porcentuales existen otros medios para poder conseguir que una web se adapte a los distintos contenedores en los que se puede encontrar. Pensad que con el texto el tema es relativamente sencillo, pues siempre se adapta a su capa contenedora, pero que con las imágenes, lo fácil es lo contrario y que con el cambio de medidas lo normal es que estas se desborden o se queden demasiado canijas si hemos sido excesivamente prudentes.

A modo sólo de breve enumeración, además de las propiedades max-width y min-width, para las imágenes se pueden usar sistemas como esconder y revelar parte de ellas, imágenes compuestas que se deslizan o fondos escalables.

Claro está que con CSS3, todo esto y alguna cosa adicional resultan más fáciles. Existen las llamadas media queries (consultas multimedia) con las que se pueden detectar dónde se quiere mostrar la información (pantalla, impresora, etc.) y en función también de la resolución, aplicar unas propiedades CSS u otras e incluso escoger una hoja de estilo completa distinta.

Pero lo que mejor resultado dará es sin duda la combinación un poco de todo, de manera que una misma web pueda pasar de tres columnas a una, la cabecera cambie de sitio y el tamaño de la fuente se haga mayor o menor, dependiendo de la resolución del dispositivo.


Sobre esto hay mucha tela que cortar y escaso conocimiento por mi parte -excepto el que me permitió hacer lo justito en este mismo sitio- así que no voy a abundar más en el tema y simplemente os voy a pasar un enlace en el que podréis descargar una plantilla para Blogger que se adapta perfectamente a cualquier entorno.

Es la que corresponde a las capturas anteriores dónde podéis ver cómo la fotografía, la disposición del menú principal, la descripción del blog y las columnas, han cambiado de tamaño o sitio. En el siguiente botón y cambiando el tamaño de la ventana de vuestro navegador, la podéis ver en acción.

Demo

La plantilla es obra de 54Blogger y en el enlace anterior tenéis el enlace para descarga e información (en inglés) sobre cómo configurar algunos elementos. Indican que la subida de la plantilla se debe hacer desde el viejo editor, pero yo he probado desde el nuevo y no he tenido problemas.

Hay algunas pegas con el acceso a la configuración de entradas desde la sección Diseño del Escritorio, pero si no vais a trastear mucho en esa parte, no debería ser un inconveniente mayor.

También se explica qué clases usar y qué ajustes hacer, para que las imágenes "respondan" como deben.


Para experimentar y ver cómo funcionan las tripas, supongo que usareis un blog de pruebas, pero si vuestra intención es utilizarla como plantilla definitiva, creo que sería conveniente asimismo probarla primero en un blog auxiliar.

Ah...Y la web de 54Blogger también es sensible. Bastante, por cierto. Sólo probad y observar la parte superior del blog.

¿Vemos otro post al azar por si le encuentras utilidad o quizás prefieres ser más metódico y suscribirte a nuestras entradas por correo? También puedes imprimir este artículo y por supuesto compartirlo en redes sociales si fue de tu agrado.

Compartir

Twitter

Pinterest

Facebook

Linkedin

Copy URL

Compartir

Twitter

Pinterest

Facebook

Linkedin

Y muchos más artículos interesantes si nos sigues en...

• Google
• Facebook
• Twitter