So you want to build a responsive website? (A few resources)
Matt Bailey / +Matt / April 12, 2012

A lot of the work we do here at GPMD is in the area of ecommerce and, like many other agencies, our framework of choice is Magento. As I’m sure you’re aware, it’s becoming increasingly important for websites to be device agnostic, so I set myself the rather daunting task (if you've ever worked with Magento before you'll know what I mean) of creating a responsive Magento base theme; one which we could use as a starting point for our own projects, but also one that we could release to the wider community as a kind of starter, or base responsive framework/theme.

The project is now well underway (check out my Dribbble profile for some sneak peeks), but there’s still a lot to do. In the meantime I thought I’d start sharing some of my thought processes, resources I’ve found useful, and specific issues that I’ve encountering as I go along.

This first article is a list of resources that I’ve found extremely helpful in the initial stages of thinking about, and planning for the project.

Recommended reading

book repsonsive web design

book mobile first

book adaptive web design

book smacss

I'’ve learnt so much from these books and found them absolutely invaluable in guiding me in the way I’ve approached this project. Don't worry, they're all fairly concise; each one can be read in a couple of hours or less.

Boilerplates & Grid Systems

I love things like HTML5 Boilerplate but in this case I wanted something a little more stripped back, so I settled on Gridless. I also chose to use The Semantic Grid System to help me set up my grid. In both these cases it was necessary to adapt and tweak them to suit my particular needs, but they are a great starting point.

Another reason for not using HTML5 Boilerplate is that my project Isn’t actually HTML5 (I can hear the audible gasps of horror) - trust me, there are literally hundreds and hundreds of template files in Magento making a conversion to HTML5 an enormous task and one, for which, we simply don’t have the time! I’ve stripped out the HTML5 specific stuff I have no need of and just kept helpers for media queries and CSS3.

CSS Preprocessors

While I'm on the subject of The Semantic Grid System, you should definitely be looking into using a CSS preprocessor for a project this size (The Semantic Grid System uses LESS to work out the precise percentages required for a responsive grid).

If you're not sure what a CSS preprocessor is, check out this article on Smashing Magazine: An Introduction To LESS And Comparison To SASS

Here are links to the respective websites for more info:

If you're on a Mac I would recommend CodeKit for compiling your CSS from LESS or SASS. You could also consider LiveReload, which is also for Mac, but has a pre-Alpha version for Windows.