In the beginning there was a website. Then there were Flash and HTML versions of the site. Then there was a WAP version. Maybe. Then the Flash version got binned. Then there was probably an iPhone version. Then just in time, designers got smart, browsers got good and Responsive Design was born.
Advances in web design best practise are making sites better for all users and more cost effective. The use of Responsive Web Design is gaining momentum and in 2012 you definitely need to know what Responsive is and to consider it for your website.
Our story starts several years ago, when the iPhone became popular. At the time it also became popular to have an iPhone version of a website. This was (still is!) typically pretty dull and often not at all like the full website. Even if it did have a nice design, the iPhone isn’t everything. Today web audiences are fragmenting like never before. How can a designer be expected to create new versions of a site for iPads, dozens of different Android phones, Netbooks, Xboxs, PlayStations and Smart TVs? More importantly, how can organisations afford to pay for all of those designs?
A lot of web design is a throwback to print design: a design fits neatly on a page and always looks the same. If it needs to display on a different sized screen it’s a new design, an afterthought or it’s just ignored. Responsive Design takes a different approach: every user on every screen deserves a first class experience.
Fluid web design was the first step towards Responsive Design. In a fluid design the width of the content expands if you adjust your browser window size. That’s great for a standard computer screen and a slightly larger computer screen but it has it’s limits. If you adjust it to phone size you get just one or two words per line. If you make it as wide as an HDTV, you might get a hundred words on a line!
Responsive Design takes the ideas of fluid design to the next level. You can think of Responsive Design as a family of fluid designs. There is a design for the standard computer screen and another for a phone screen. There may also be one for a huge screen and one for a tablet or netbook. Each of these designs are variations on a single theme and they’re fluid so they suit a range of similar screen sizes. For instance, the mobile screen will suit all smart phones not just the precise size of the iPhone. These family of designs don’t just vary in their width, they can change in many subtle ways to optimise the experience for users on every screen. On an HDTV the font size might be bigger so you can read it from a distance. On a smart phone the sidebar might be below the main content instead of at the side so you get maximum reading room.
Freerange Future have recently launched two Responsive websites. Warwick O’Brien is a prominent Adelaide-based sustainable architect. Arts Alexandrina is a microsite that promotes the 2012 South Australian Regional Centre of Culture in Goolwa. You can take a look at these sites on your computer and on your phone to see how they differ between the two screens. You could also try stretching and shrinking your computer web browser window. You’ll see the fluid effect of the interface resizing and then a sudden change in layout as the site reshapes itself to suit a smaller screen.
It takes some clever design thinking to do Responsive Web Design but it’s more cost effective than creating and maintaining multiple versions of a site and not much more expensive than a single design. So consider Responsive Web Design for your new website or to improve your existing site. All of your users will appreciate it.
