So you want to build a responsive website? (A few resources)

Posted by Matt Bailey on 12 April 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

(Clicking on an image will take you to the respective website)

Book - Responsive Web Design

Book - Mobile First

Book - Adaptive Web Design

Book - Scalable and Modular Architecture for CSS

 

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.


 

I hope the above information is helpful and of interest to those people looking to develop their skills and learn more about responsive web design.

As I said above, I hope to share other bits and pieces of insight and progress as I go along, so keep checking back here, or follow me on Twitter.

---

You can follow Matt on Twitter, Dribbble and Google Plus.

Comments (2)

  • Raimondas Raimondas on May 23rd, 2012

    Hi Matt, a useful article. I am very interested in your progress. We are interested in the outcome of your project. I think anyone who knows a thing or two about Magento should be salivating to see the final result. Is there a way to keep pulse on your progress?

  • Ben Chakroun Ben Chakroun on June 1st, 2012

    Good work matt. I have a Responsive Magento Theme at http://respondtheme.com so It will be interesting to see how you approached the task

Post your comment