Sales
0208 045 4945
Support
0800 230 0032

#Trending Tech – Responsive Web Design

RWD - future ready web
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.

Why?

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.

How?

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”.

Share with:

Enjoy this article?

Comments

  1. Gavin says:

    just though I would share a good example site for websites that are using Responsive Web Design, http://mediaqueri.es/

    I recommend people have a quick browse if they are about to start looking into responsive design. There are some really good examples of how to display navigation etc in a responsive way.

    The sooner designers and developers incorporate RWD into their design process the better. I think by this time next year everyone will expect a responsive site to some degree, in the same way they currently expect you not to use tables for your layout.

  2. I like this article, with the increase in devices, platforms and browsers that need to work with your site we see the need for responsive websites – respond to their environment.

  3. […] have regularly discussed methods of developing these in the best way through HTML5 and responsive web design, for example, over the past few months and it seems now these sites are more important than ever to […]

  4. […] the belief that RWD should be a universal ideology, there are several factors to both sway and repel organisations from […]

Leave a Reply