Responsive Web Design [Infographic]

In this day and age people have grown accustomed to having internet access on all of their devices. Some of the time you might be using the internet on your laptop other times it might be a phone. The difference in screen sizes between the 2 devices is huge.

Website owners and designers need to pay attention to the fact that people visit their site using a variety of devices, particularly business websites, because if they don't they will be losing readers and customers. Responsive web design has been growing in popularity rapidly recently and many are claiming 2013 to be the year of Responsive Design.

What is Responsive Web Design?

Responsive design is serving the exact same page to every visitor but the design and layout of that page responds to the size of the viewport. Every piece of content on a responsive site adapts to how it's being viewed  -  be it a desktop PC, a mobile phone or even a TV.

A basic example of this would be a standard 2 column site (content + sidebar) set to always be 95% width with a breakpoint somewhere to make the 2 columns flatten into a single column design when there isn't enough space for both. Everything above the size of a standard smartphone will see the fluid 2 column layout but mobiles would see a single column because of the use of a responsive media query breakpoint.

Why is Responsive Design Important?

If you're a regular visitor to a site then chances are high at some point you'll want to access it on your mobile or tablet. If the site is responds to those devices then awesome but if it's doesn't the site owner has a major problem because the mobile search behaviour infographic I looked at last week says that 40% of people will just up and leave when they come across a non-optimized site.

Multiple Screens and Cross-Device Viewing

Different devices serve different purposes but they all work together well.

Responsive design is so important now because a lot of internet use is cross-device.

It's not something people often think about but we actually use more than a single screen at a time. It's called multi-screening and it's far more common than you think. How often have you been happily working away at your computer and received a text message? Or been replying to a message on Facebook while watching TV? Exactly. We do it all the time without even realizing it.

Obviously if you visit a site on one device and choose to go visit again on another the site should work the same on both. It just makes sense but often that isn't the case. Some sites just show you the same version no matter what device you use, so you end up having to zoom in on small screens, or they have a completely separate mobile version (which is bad for SEO).

Cross-Device Activities

Browsing is one of the most common things to do cross-device - but so is shopping, booking flights and managing finances. Take this as a scenario:

You see an advert on TV for a new movie you want to buy so you grab your phone and load up Amazon to find it. When you do find it you put it in your basket and continue viewing TV. Later that week you login to Amazon on your laptop, head to the checkout and buy your movie.

Granted that's a very specific use case but it's actually not that uncommon. 3 different screens have been involved in the buying cycle and Amazon has been displayed on all of them. If Amazon didn't look appealing on all 3 of them then it's a fair assumption that the buying cycle could have been broken by it.

Responsive Design Success Cases

News publishers are arguably one of the kinds of sites that benefit from being responsive more so than others. People read the news at home, on the move and on whatever device they can get access to it on. A few successful news outlets had this to say about their responsive designs.

The BBC

We believe Responsive Design is one of the most innovative and largest scale uses of a new approach to create Web applications. It enables us to deliver a better BBC News experience.

Chris Russell, Head of Product, BBC News Online

The Boston Globe

We could have just built a smartphone version, but that wouldn't have helped us with the rise of tablets. There are so many different screen sizes proliferating now that we wanted to make sure that we didn't miss out on future opportunities.

Jeff Moriarty, VP of Digital Products

The Guardian

A key focus of the new site is that it offers best in class performance, taking into account a user's connection speed and adapting accordingly. we want to ensure our readers have the best possible experience.

Tanya Cordrey, Chief digital Officer

The Infographic

INFOGRAPHIC: 2013 The Year of Responsive Design infographic

The infographic used in this post was created and sponsored by Uberflip.

William is a Web Developer at PattonWebz where he's had plenty of oppertunity to see the rise of responsive web design and he's a strong believer that the future of the web is responsive.