Build a Responsive Website in a Week / Paul Robert Lloyd

Since returning from San Francisco, much of my spare time has been spent writing a tutorial for .net magazine. Published as part of their ‘Responsive Week’, this is for developers who want to learn about responsive web design but don’t know where to start.

It’s also an opportunity to summarise the current discussion around responsive design, and describe how it fits into broader themes like progressive enhancement, mobile first and the universal nature of the web.

The tutorial is split into five parts:

These follow the development of a simple media gallery, the finished example of which can be found here: http://paulrobertlloyd.github.io/roadtrip/

The distinction between design and development is becoming increasingly blurred, so I start by illustrating how one might design a website that could have infinite layouts. The next three chapters describe each component of responsive design: fluid grids, flexible images and media queries, before I finish by covering testing, optimisation and performance.

While this breaks down the approach into easily digestible parts, it has the unfortunate effect of suggesting a linear process. Yet in my experience, the responsive design process is quite iterative, involving a lot of back and forth. Hopefully I’ve given a sense of this in the final chapter.

I somewhat underestimated the enormity of this project. I thought I could complete it during the four-day Easter break, but designing the example site took up much of that time.

In fact, it felt like an insurmountable task at times, especially as I’ve never written a tutorial before. Taking refuge in coffee shops, far from distractions found at home, I created five OmniOutliner documents, opening each with a question: what will the reader learn today?

Once I had these outlines, I could concentrate on each chapter. Writing ‘pigeon English’ (or, more accurately, bashing my fists on the keyboard and allowing a train of poorly constructed thoughts to appear on the page) shifted the mental barrier stopping me from getting this done. Once this was edited into something more structured, I shared drafts with friends to ensure it made sense and was factually correct! Thanks to Anna, Josh, Andy, Jeremy and Bevan for their contributions in this regard. Thanks also to Owen, who corrected many grammatical errors.

As much as I hope this series educates others, it’s been an immensely valuable learning experience for myself; not only in terms of responsive design, but how to write a tutorial too. Like many projects, having acquired this knowledge, I now want to rewrite the whole thing.