Going Responsive

July, 22 2013

I was somewhat skeptical of responsive design. Grids add some additional HTML which is essentially for layout and I thought responsive design generally relied on Javascript, but after transforming my own website I found things are getting better.

Let's start with what my website used to look like.

Previous design of my website where most section were surrounded by a border.

Boxy and segmented, it was built for a specific width and not on a grid. It looked alright on mobile because I used the meta viewport element correctly.

For the redesign I used bootstrap with its responsive grid and font awesome, which is as awesome as the name implies. Gone were the boxes, replaced with infinitely wide horizontal stripes and content suspended on an invisible grid. A grid which can resize its cells and stack them all vertically when down at a phone resolution — thanks to everything floating left.

My cat-based banner image previously was precisely cropped, but that wasn't going to work in a world where everything is infinitely wide. I went with the common approach of making the picture of my cat full width and centred, keeping the most interesting part of the picture in the middle of the viewport. I had to tweak the media queries in the CSS for smaller screens to prevent vertical repeating.

Overall the process was straightforward. Bootstrap lets you do a bunch of customization and avoid LESS. I removed the grid adjustment for the jumbo screen size which looked too weird to me. It would be nice if you could more easily disable the navigation menu on the tablet size; my navigation would look fine on a tablet. The Bootstrap grid is better because it requires less additional HTML; merely nest elements with the CSS classes container, row and span. No more clearing divs everywhere.

Media queries are totally awesome — even better they are very well supported including on all mobile browsers. IE 8.0 and below doesn't support them, but if you default to the desktop CSS rules it doesn't have to. There is probably also a javascript shim out there. Another thing I like about responsive design and media queries is, on Chrome at least, it makes every page more readable when zoomed in; a nice accessibility win.

I am happy with the result and the fact it only took a day or two of effort to complete. Hopefully it looks better, no matter what device you are using to view it.

Tweet comments, corrections, or high fives to @amjoconn