“Responsive Web Design” is a trend which is only going to continue to grow in popularity in 2012 so I thought I’d take some time out to explain what it means for clients.
The phrase is destined to become the latest in a long line of buzzwords like “Web 2.0”, “Ajax” and “Cloud”, plastered across booths at conventions and thrown around by agency types who have no idea what they mean, but the technique could save web and mobile developers a lot of time and our time is your money so you may want to read on...
Search for responsive web design on Google and you’ll find hundreds of technical articles aimed at developers so I thought it’s be a good idea to get back to basics. Essentially Responsive Web Design is a way of designing websites so they look good on all screen sizes and all kinds of devices, like mobile phones, iPads, netbooks and even TVs, something which is becoming increasingly important. The term was coined by Etham Marcote in an article dating from early 2011.
What’s the problem?
There was a time when designing for desktop PCs was fairly simple, you decide on a minimum screen with (for us this used to be 800 pixels, then as monitor sizes grew, 1024 pixels) and you make sure that your website works at that size, a ‘one size fits all’ approach. Recently though we’ve seen an explosion in web browsing on smartphones and more recently tablet PCs like the iPad and Samsung Galaxy Tab. If your website doesn’t work on a phone or tablet PC then a significant and growing percentage of your users won’t be able to use your site.
Recent phones like the iPhone, Android phones and Windows phones do an admirable job of scaling web sites to fit the screen and normally look quote good, but the user still has to zoom in and scroll around most websites, which isn’t ideal.
Developers have experimented with lots of solutions, including creating several apps for different devices or creating ‘mobile only’ versions of websites and showing that to smartphone users instead of the normal desktop version. This second strategy has worked fairly well for many big brands, including the BBC and Facebook, but often infuriates users (I often see mobile-only sites on my Motorola Xoom which has a 10.1 inch screen for example and often you can’t switch). It also takes a lot of time to build multiple versions of websites and apps for different devices and not everybody has the resources that the BBC and Facebook have.
What’s the solution?
What if it was possible to design and build a single website that looked great on all devices? Well, that’s the promise of Responsive Web Design.
The concept is simple, detect how big the user’s screen is and allow your site to grow and shrink gracefully, increasing the amount of content on larger screens and removing unimportant content and loading smaller images on smaller screens.
If it’s hard to visualise how this might look then it’s probably best demonstrated with a few examples. MediaQueries is a gallery site dedicated to showcasing the best examples of responsive web design.
http://www.mediaqueri.es
Try opening a few of the examples and resizing your browser to see how the site changes. Make your browser really small to see what it would look like on a mobile phone, bigger to see what it would look like on a tablet and maximize your browser to see it in it’s full desktop glory.
So, what tricks can we use to keep a site looking good on all these devices? Here’s just a few.
1) Keep several copies of images and load different sized images depending on the screen size. Loading smaller versions of images on smaller browsers also has the secondary effect of making them load quicker too. Very important if the users is on a mobile data connection.
2) Show different amounts of content on smaller devices. If you have a grid of products for example then we could show 50 per page on a laptop screen but just 10 on a mobile screen. Again, this will lead to faster load times.
3) Remove some content altogether on smaller screens. For example, an extra column of adverts might show on bigger screens but disappear on smaller screens.
4) Use different layouts. For example, bigger screens might have a paragraph next to a large photo but when viewed on a smartphone the text might appear underneath the photo.
There are lots more techniques, but essentially it’s about adapting the content and layout of the page as the screen size (and orientation) changes.
What does this mean for our clients?
So, why should a client care about Responsive Web Design?
Well, clients are increasingly demanding, with good reason, that their site be viewable on a myriad devices and we now have another tool in our arsenal for making that happen.
Responsive Web Design CAN decrease the cost of doing this. Although there is clearly a lot of work involved in creating several different layouts for each page and making sure they adapt correctly, it’s still less than the cost of creating many different versions of a site, or creating multiple apps. It’s also easier to maintain and update one website so maintenance costs will be lower.
It’s not the right approach in all cases. Some websites are simply too complicated to adapt in this way or demand certain layouts that won’t work. In those cases we’ll still suggest creating a separate site just for mobile users, or a series of apps for iOS, Android etc. but it’s another tool in our toolbox and and one I predict will becoming increasingly important.
One thing is for sure, it’s far more than just this year’s buzzword.