El Blog de Manu

Responsive, la palabra de moda

Diseño responsive

Los que me sigáis desde hace tiempo, ya seréis conscientes de que soy muy inquieto con el diseño del blog. Lo he cambiado varias veces desde que lo empecé hace más de siete años, con el doble objetivo de aprender nuevas técnicas, y también para hacerlo más agradable de leer… o al menos eso he intentado 😉

En esta nueva iteración, me he interesado por la nueva moda del “diseño responsive“, que trata de adaptarse al navegador que se esté utilizando para ofrecer una experiencia adaptada y optimizada para cada caso. Con una buena base en HTML5, y usando media queries de CSS3 se puede ir ampliando y cambiando la posición y tamaño de los distintos elementos para aprovechar mejor el espacio disponible. Esta es mi primera experiencia, y por tanto todavía quedan algunos aspectos por pulir. Por ejemplo, en algunos navegadores móviles no se escala bien el tema, pero espero solucionarlo en los próximos días.

Por otro lado, he aprovechado para implementar un par de cambios que quería hacer desde hace tiempo. Por un lado, está el tema de las imágenes. Desde que Flickr incorporó el ancho de 640 píxeles a las fotografías, quería hacer uso del mismo para el blog, pero la “vieja” columna de 560 píxeles me lo impedía… así que he ampliado el área de lectura. El otro cambio es el de los sliders que había a la derecha. La experiencia me dice que no son efectivos, distraen, y además consumen bastantes recursos, así que decidido poner en pequeño unos cuantos destacados, y también unos enlaces a Paraíso Friki, RetroEscena, y Nueva Partida en la parte de abajo, ya que los JavaScripts que consumía de Tumblr a veces bloqueaban la carga de la página.

De paso, he quitado la publicidad de Adsense -total, para los cuatro duros que generaba no merece la pena-, he simplificado las categorías, he hecho limpieza de enlaces, y he quitado el buscador de la página, que no usaba casi nadie. Siempre se puede usar Google, y de hecho lo he integrado en la página de error, y en el archivo.

Si a esto le sumamos el hecho de que he quitado las imágenes en la portada y en la navegación de categorías, he conseguido reducir bastante los tiempos de carga, e incluso con una conexión 3G la página se muestra bastante rápido. Dejando de lado los aspectos técnicos, espero que esta versión simplificada de la página os guste y que sea agradable de leer. A mí por lo menos me han entrado ganas de escribir 😉

Comentarios

Kote

me gusta el rediseño, pero te quedó algo Facebook el colorido

saludos crack

Manu

También es verdad… aunque yo usaba el azul en la cabecera antes de que Facebook lo pusiese de moda 😉

¡Gracias por comentar!

n0ta

Es un buen trabajo, Manu. Enhorabuena.

Si quieres ir un poco más lejos, hay algunas cosas que podrías hacer para que volase aún más (sobre todo en móviles):
– Las CSS que usas están bien modularizadas, pero en producción podrías combinarlas y minimizarlas en un sólo fichero para reducir de 4 a 2 peticiones HTTP.
– Valora el uso que estás haciendo de fontawesome. Si es para poco, igual consigues lo mismo con unos sprites CSS.
– Lo mismo para la Open Sans: puedes ponerle un condicional para que la cargue sólo con una media query para escritorio.
– Combina también los ficheros JS propios (plugins, main). Mdernizr déjalo suelto en la cabecera mejor para que sea más efectivo.
– Cuando esté como quieres, métele una caché de PHP/MySQL al WP, estilo wp super cache. Se nota y mucho.
– Si tienes posibilidad, métele mano a los expire headers de los ficheros de plantilla.

Muchas de estas cosas las puedes hacer en un momento con Smushit, YUI CSS Compressor etc desde el mismo YSlow de Firebug!

Un saludo!

Manu

A esto lo llamo yo una crítica constructiva, sí señor 😀

Tomo nota de tus consejos, y los intentaré llevar a cabo en breve. ¡Muchas gracias!

Tiex

¿Cuanto por algo similar para DDuJ? 😉 Te ha quedado genial. Claro y conciso, sin cosas que distraigan de lo que realmente importa, los textos.

Manu

Me alegra que te guste 😉 Seguro que hay plantillas por ahí de este estilo. Yo básicamente he cogido ideas de otras webs similares ^_^

¿Tienes algo que decir?