My goodness, what a difference 2 years make in web design and development! A week last Friday I attended the 3rd and final Responsive Day Out conference, curated by Clearleft’s Jeremy Keith. It was a lovely, sunny June day in Brighton and an expectant crowd gathered outside the Dome for a day of instruction and inspiration.

Responsive Day Out 3: The final breakpoint

Having “done the hat-trick” (attended all 3 conferences, 2013, 14 & 15) I now have a pretty good overview of the evolution of the web industry’s approach and attitude to responsive web design but let’s first have a short history lesson.

The concept of “responsive web design” is not new, John Allsopp wrote about the idea in his A Dao of Web Design article way back in April 2000. In that article, Allsopp considered the prevailing approach to web design at the time; to build web pages as though they were print media, exercising the sort of fine control over content that designers were used to having with DTP software. Naturally, the web development tools available at the time just weren’t fit for that purpose and the endeavour was bound to be frustrating. Allsopp advised designers to accept “the ebb and flow of things” and he even went so far as to suggest that, “Using percentages (or other relative values) to specify page layout in CSS automatically creates adaptive pages.” Of course, that was all in the deep past, long before tablets and smartphones changed the way we approach the design of web content, but it’s an important point in the history of web design.

The first iPhone was released on 29th June 2007, it had a browser (Safari) and it could be used to render web pages. Since all existing websites were designed to be viewed on much larger screens, web pages on the iPhone were scaled down to fit on the smaller screen, leaving the viewer to zoom in to make text readable. Over the next couple of years other smartphones entered the market and there was a steady increase in the number of users visiting websites with their phones and a consequent rise in dissatisfaction with the user experience. In order to improve the situation, some organisations (including the BBC) began to develop mobile versions of their websites and although this did help to improve the mobile web experience, the idea of maintaining 2 websites with co-ordinated content just seemed wrong-headed. The flaw in this approach became more obvious in April 2010 when the first iPad was released. Should a tablet use the desktop or mobile version of your website? Neither, it’s a tablet, but no one (as far as I’m aware) considered developing a third version of their site for tablets. It had already become clear that websites must be designed to adapt to different device resolutions.

On the 25th May, 2010 another milestone article was published at A List Apart. The Author of that article was Ethan Marcotte and the article was entitled Responsive Web Design. Marcotte brought together three separate elements of web development in order to create an approach to the design of websites that allowed them to be viewed on devices of any resolution. The article points to a way forward: “Fluid grids, flexible images, and media queries are the three technical ingredients for responsive web design, but it also requires a different way of thinking.”

It didn’t take long for Marcotte’s ideas to catch on. Most web designers and developers had been looking for a lead, and here it was. Of course, it’s one thing to have an idea or even to demonstrate that it works technically, it’s an entirely different matter to completely change the way one has worked for years and adopt a new workflow. Not to mention the small fact that the CSS Media Queries module would not reach W3C recommended standard for another 2 years in June 2012 when all browsers supported it.

So there was a period of time when web designers knew what they should do  but were prevented from doing so, either by poor browser support or (more fundamentally) because their established workflow couldn’t accommodate it. How the heck do you DO responsive web design? Enter Responsive Day Out.

Over the space of 2 years and 3 conferences, the UK web design industry has come to terms with responsive web design, with some suggesting that we no longer include the word “web” – responsive design, it’s just what we do.

Each of the 3 Responsive Days Out had a different flavour and it wasn’t just that Jeremy Keith’s curation of each event was different. The difference was as much to do with the mood of the audience as it was with the messages from the speakers. I can most clearly sum up the 3 events as follows:

Responsive Day Out 1

I don’t know what I’m doing!
Photoshop is crap (I think).
Let’s design in the browser (apparently).

Responsive Day Out 2

We’ve been doing this and it kind of works.
Photoshop isn’t so bad and designing in the browser is fun.
Hamburger menus!

Responsive Day Out 3

Responsive what? Yes, of course I’m doing that.
Isn’t there something else we can do to improve the web experience?
Accessibility – that’s where it’s at.

And so, Responsive Day Out has come to a natural end. As an industry, we have adapted our workflows to incorporate a responsive approach to web design and our websites can now be viewed on hundreds of different devices.

Some were surprised that Responsive Day Out 3 was “the final breakpoint” but no one who attended could be in any doubt that the industry has moved on and the whole process (rabbit caught in headlights to cool nonchalance) took just 2 years.

So, what’s next? Well I, for one, can’t wait for Accessible Day Out 1.∗

You can listen to all the talks from Responsive Day Out 3 at Huffduffer and read Jeremy Keith’s summary in his journal.