More and more I find myself using my iPhone for finding content, researching and just browsing even if I’m at home. I find it much easier to use than having to go get my laptop each time, as I’ve always got my phone on me and it doesn’t need ‘booting up’ to the same extent. This has led me to give considerable thought to Responsive Web Design over the last couple of years.
I went to DrupalCon in Munich this August where I met Sam Richard, so the following quote is from his presentation and I love it. I think it is one of the best explanations of the concept of Responsive Design out there:
“Responsive Web Design isn’t about current devices and known unknowns, it’s about future devices and unknown unknowns”. - Donald Rumsfeld
It is not only about adjustable screen resolutions, but rather about a whole new way of thinking about design. I have been working with some great designers who will spend hours and hours getting right website designs in Photoshop without giving any real thought to all the different devices. There are already too many options available and there will be far too many in the future to continue adjusting and creating custom solutions for each screen size, device and advancement in technology.
“Day by day, the number of devices, platforms, and browsers that need to work with your site grows. Responsive web design represents a fundamental shift in how we’ll build websites for the decade to come.”- Jeffrey Veen
Therefore I say: ditch those pixel perfect designs, start thinking about users and their devices, and begin with making content and navigation primary concerns over visual flair (see Kristofer Layon for more). Basically, think mobile first! It’s extremely ineffective to design static snapshots to describe a responsive layout. Not only does it generate a lot of design work, but there’s no way to transport all the greatness of a responsive layout to a client in an irresistible way. As a solution I think we should create HTML + CSS prototypes of the wireframes and designs. Of course there is a certain point you have to reach visually before you can switch over to the browser, but there are tools out there to design interactive HTML prototypes such as Axure (or of course we can do it for you). Another great design technique you can use to establish a visual direction is style tiles.
And yes, there are some conversations about how much extra it costs and whether we should go responsive for all websites. There are discussions about how much extra work it will take and is the responsive philosophy going to stick around for long or is it just trendy at the moment? See the following article written by Daniel Howells which goes in to more detail on this.
Well we concede that it does take a little longer and as such, it does cost a little more. However if we think about the future, how much time are we going to spend fixing it when a new device comes out or the client gets their Google Analytics results back to find that only 2% of all visitors only make a purchase because the ‘buy button’ is too small to click on their touchscreen? Responsive Web design creates a great custom experience for everyone. As Web designers, we should all be striving for that every day on every project anyway, shouldn’t we?
And in the end, what do we need for Responsive web design? Careful planning, creativity, fluid grids, media queries and flexible media (well ok, there are more than just media queries involved). For more information and a better explanation of Responsive Design, take a look at this article by Ethan Marcotte. For a good example, why not take a look at this very blog? Try to resize your browser to see it in action. The websites minimum width is 280 pixels. This is designed and developed with a mobile first approach, so the layout is totally fluid. We have tested for the following devices (to name but a few): Samsung galaxy S3, HTC Wildfire, HTC Sensation XE, iPad 2, new iPad, iPad mini, iPhone (4 and 5). And it’ll work in all the major current browsers of course. Normally this is the point I’d put a date in (to contextualise ‘modern’ for future reference) but that’s the beauty of Responsive, I’m pretty confident I won’t need to!
Comments and thoughts welcome!