Responsive HTML5 and CSS3 Layout

Written by
Date: 2012-03-26 18:29:05 -0400

These last days I've been trying different possible ways to install a responsive layout for this site.

I've been reading about Twitter Bootstrap, but it looks like a too complicated framework to be used only in a small blog like this one, so I tried less framework, which is good, but I could not install it properly. (I forgot to say I'm not a web designer).

Looking for a way to use less framework, I found frameless grid and finally I've installed the Golden Grid System

I'm now using it, you can resize your browser's window and see how it adapts to different sizes.

More or less 10% of visitors to this site came using mobile devices, and the old layout was not mobile friendly. As I'm not using Wordpress, Drupal, Movable Type or any other CMS, it was not simple to just download and install a new theme. I needed to deal with the layout by myself, actually adapt a good layout like the Golden Grid System.

The good part is that I can really customize as much as I like, I really enjoy being in control, even though it is more difficult to deal with it. An extra bonus is that I learn new things.

Thanks to this I met sass which is:

Sass is a meta-language on top of CSS that’s used to describe the style of a document cleanly and structurally, with more power than flat CSS allows. Sass both provides a simpler, more elegant syntax for CSS and implements various features that are useful for creating manageable stylesheets

Maybe something like Markdown to HTML.

Now, coming back to the new layout of the site, I still need to improve it. I modified it a little, but I can't test it in screen bigger than 1900 pixels, if anyone can and please send me some feedback. Some screenshots might be great.

I really think that these days, sites need to be mobile friendly, with more and more people reading the web using mobile devices. So I decided this was the time for my site.

Hope you like the new layout.