Recently we at bigFIG have begun exploring responsive design techniques as a solution to the constant evolution of viewing mediums for our websites and apps. When we started building interactive magazines four years ago this concept really didn’t exist, and as the tablet space and HTML5 have matured, we’ve watched closely as this philosophy and technique has started to gain a lot of momentum.
WHAT IS RESPONSIVE DESIGN?
So, what is responsive design? It most commonly refers to an approach coined by Ethan Marcotte that is used in web design as a technique to make a website adapt its layout to whatever device it is being viewed on. So if you are viewing a website on a desktop or mobile device, the content will reformat itself to be most optimally viewed on that device. Take a look at this website www.dolectures.com. If you play with the width of your browser (assuming you’re reading this on a computer) you’ll notice how the site reformats itself, changing style and dispensing with certain elements to allow for optimal reading at cretins sizes. Also notice how it doesn’t slavishly repeat one layout and it is in fact hard to know what the principle layout is. Whether you read this on a mobile phone, a tablet or desktop computer, your reading experience will be optimized for that medium.
A comparison of how the site www.dolectures.com responds to different display sizes
So Responsive Design is really a rather simple idea: rather than creating completely separate designs for each medium you want your product to be viewed on, you design it once but in such a way that the content adjusts to fit different devices. There are many hurdles and technicalities involved so it is important to identify what the final goal is and what is ultimately possible given the project scope, time and budget.
It's important to define what qualities the final outcome should have, and then assess what is workable given the timeline
For people from a print background this concept undermines some pretty well entrenched views on layout and design. Typography nuts and image purists might hate the idea that they might lost the minute control they have traditional had over how their content renders. They will in all likelihood feel a gut-wrenching sense of loss at the thought that their carefully crafted type might be able to change size, position and structure accruing to a user’s input and preferences.
ADJUSTING FOR SCREEN SIZE & RESOLUTION
Now, you could of course stick to your guns and try create different layouts for every device out there, but with the increasing number of devices out there this could quickly become unwieldy. Here are just a few of the sizes you’d need to consider in order to do this:
• 1280px
• 10240px
• 960px
• 768px
• 600px
• 480px
• 320px
I’m a typography nut but my view on all of this has shifted dramatically over the course of the last four years. From being a typography and layout pedant I have come to realize that we need to shift the focus from us, the designers, towards the consumers of our media and understand that the most comfortable way for them to view it is ultimately the best way. It is quite clear that not every person has the same preferences for reading and viewing, and we ultimately need to hand over the tools to them to cater their viewing experience to their needs.
The key for us as designers is to focus more on the fundamentals of our work: the hierarchy of elements, their primary function, making the navigation and access to information as easy and intuitive as possible for the reader. And we need to move away from concerning ourselves with style and ornament over communication. We need to become the guides for our readers rather than the star attractions. Some might not like this but I for one love this, it takes us back the core principles of our craft, the essentials of readability, legibility and moves us away from overzealous use of Zapfino, watermark backgrounds and glossy fly-out ornamental petals. Ultimately our readers are concerned with content, and content remains king.
We’ll be exploring these techniques over the coming weeks and months and will be posting updates and developments here.
Interesting sites employing responsive web design:
http://www.dolectures.com/
Extra reading on responsive web design:
• http://rogerblack.com/blog/post/sites_and_apps_chutes_and_ladders
• http://www.alistapart.com/articles/dao/
• http://www.alistapart.com/articles/responsive-web-design/
