I’ve built a few responsive Web sites recently and each time, I question why bother? Surely, with modern mobile browsers, pinch and zoom and high-resolution screens, we should not have to worry about making a site work well with different browsers, it just will…
Let’s consider what is mean’t by “Responsive Web Design (RWD)”. It’s a set of techniques working together to ensure that the user has the optimum experience of a Web site within the limitations of the device they are using to access the site. Breaking this down, it means sites where the font’s scale nicely, the images are optimised to fill the available space and (perhaps most crucially) the layout changes to suit the device accessing the site.
As you would expect, in reality, there are some very good reasons for building a site responsively. The fact is that even with my (superb) Galaxy S III, I prefer accessing sites which are optimised for mobile access. As long that is, as the full site functionality is available to me.
So what benefits does RWD bring? Let’s start from the other end and consider a non-responsive site. Back in the early days of the Web I managed a team of Web developers and had endless discussion with both clients and our own marketing team about the site design. Their perspective was that the Web site should look just like the printed brochures they were used to creating. Explaining to them that we could not predict how the site would look to the end-user (as we did not know their screen size, colour resolution, browser type etc.) was an endless struggle. Now with (fairly) consistent behaviour amongst desktop browsers and a virtual guarantee that the screen will support at least a 960px page we are able to deliver their original vision of a brochure delivered as a Web site. But how does that brochure page look on a mobile with a QVGA (240 * 320) screen? I can easily imagine that the user would be utterly lost!
With a well designed RWD site, things are very different. Sites are created to work differently with different screen widths. Using the magic of conditional CSS, we can easily create layouts which make the best use of the available screen area. Consider the these two screen layouts:
First, the normal 960px based desktop layout
Imagine trying to navigate around this with a QVGA browser screen
Then, a much narrower mobile screen
By using some clever CSS, the layout is changed so that the user has only to scroll down through the content. The site is sized to be the width of the browser.
The techniques needed to create the different layouts are fairly straight-forward. The skill comes in working out how to lay out the content. In my example, I’ve prioritized the main content, putting it before all the other content except the header (which I recommend keeping small).
If you do this right, the user is able to locate the content they need quickly and easily. Put yourself in their place for a moment, which would you rather: content you can access with your mobile or content which looks brilliant but only on a desktop machine?