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.
(Clicking on an image will take you to the respective website)
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.
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:
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.