With web-browsing habits changing as smartphone and tablet use increases, how do websites keep up? The answer: responsive web design.
What is it?
Responsive web design (RWD) was created by web dev Ethan Marcotte and gives websites a flexible foundation, enabling them to respond and adapt content to the screen-size or browser window it’s being viewed in.
For example, on a full desktop PC, a site may have multiple images with text structured around it. The same site when viewed from a smartphone would shift to view smaller images and restructured text to enable simpler viewing from the smaller screen.
The landscape of the web is changing, there are more and more devices that enable people to access the internet and each has a different screen size and level of support for HTML5 and its related technologies.
Smartphones are the key driver of mobile internet, with Ofcom’s latest research revealing that 42% of smartphone owners feel that their smartphone is the most important device for internet access.
In addition to this, Ofcom’s latest figures for tablet computer usage show a growth from 2% of UK households using a tablet in the first quarter of 2011, to 11% in the first quarter of 2012. One in five households asked, said that they are planning to buy a tablet device within the next year too.
This wider range of devices and higher usage levels puts a greater strain on businesses to provide the same level of user experience across each of them so that no matter who visits their site and whatever device they use, they still have access to all of the information that they would on a full desktop browser.
This is not to say that an RWD site is a complete mobile solution. If your business is driven by mobile traffic, or you have a more complex desktop site, the restrictions of cutting down the site for smaller screens – as with responsive web design – may not cut the mustard as well as a specifically-designed mobile site.
Fluid proportion-based grids, media queries and flexible images (through CSS or dynamic resizing) are the three top technical ingredients needed for a responsive site.
.net recommends sketching out how the elements on the page will adapt to fit the different browser sizes of the devices it will be viewed on to avoid the disconnect that often comes from thinking primarily about the desktop design.
The whole purpose of RWD is to adapt to the user’s needs and device capabilities. For example, a mobile user will be viewing your site on a small screen, so taking their needs into account won’t just mean adapting your content to the screen size. We need to think about what that mobile user will need/want first when visiting your site and lay out the content according to this.
Responsive web design is not designed to be the perfect solution for all devices and screens but to create a ‘future ready’ website. As Web Monkey puts it, we shouldn’t “assume that what you did yesterday will be the best thing to do tomorrow”.