Responsive Design Explained

By: 6th December 2013 Digital Marketing, Web Design No Comments

Chances are that if you have talked to anyone involved with the web development industry in the last couple of years, the term “responsive design” was mentioned to some degree. Responsive design is not a new concept, but in 2013 it has finally made the leap into boardrooms, as it has proved to be an excellent technique to make your website accessible to a mass audience.

What is responsive design?

responsive-design

Responsive design is a development technique that allows your website to adapt to the device your users are viewing it on. It also provides you with the capability to write once and publish everywhere, meaning less work for you.

Up until the smartphone market exploded, the web was traditionally only viewed from personal computers, which had a predictable range of dimensions and resolutions. This meant that you could safely build a website expecting to have space on the screen for multiple columns of content.

It was a simpler time in web development. Designers could easily mock up full sites in photoshop as they knew how many pixels they had to work with. Developers could easily translate those designs into pixel perfect copies on the web.

Then came the phones which you could browse the internet on, followed by the tablets, followed by the internet enabled tv’s, and now we have fridges, cars, wristwatches and glasses all of which let people get on the web. You should be able to see the problem now – screens that can be any size and any aspect ratio. Our nice and easy world of being able to design a website knowing how many pixels we have to work with is no more.

Responsive design grew out of the frustration of trying to apply traditional design techniques to all these new screen sizes. Instead of figuring out what your website is going to look like on your computer monitor, we now design mobile-first. This means you build the website so it looks and functions well on small screens, and then add additional layout features as the device screens get larger. This is a very different approach from traditional web design, and in order to embrace responsive design, you have accept that your website will not look the same everywhere. Your website simply cannot look exactly the same on a smartphone as it will on a desktop monitor.

The benefits of responsive design

Responsive design solves a lot of problems with websites, and not just on the tech-side of your business.

  • Responsive design allows you to have one website that works across multiple screens. Initially, when smartphones and tablets hit the market there was a trend to have separate sites for mobile, tablet, and desktop experiences. This meant that there would be 3 separate versions of your site which needed to be maintained and populated with content. This is expensive and required a large time investment to create and maintain.
  • The mobile-first approach forces you to think about your content and determine what information is most critical to your site visitors. People expect to scroll a website on a phone, so you can order the most important content at the top so they do not have to search as much for what they are looking for.
  • Responsive design is not only about reacting to screen size differences. It can also be used to have your site adapt to the device being used to view your website. Page elements can work differently on touch screens for example, allowing people to swipe content. You can also adapt to features like GPS location, where your site could provide a special coupon to people who are close to your store or make a map with directions to the nearest store more prominent on the screen.

Who is using responsive design?

As mentioned earlier, 2013 has been the year responsive design hit the mainstream. It is now considered the industry-standard approach to take when redesigning or building a new website. Responsive design has been adopted by many major companies and has shown to have substantial benefits over the traditional web design approach.

Here are some sites which have made the transition, including stats on how responsive design benefitted them:

  • Walmart Canada – (source)
    • 20% conversion boost by switching to responsive design
  • Time Magazine – (source)
    • Pages per visit, across mobile, tablet and desktop are up considerably.
    • Mobile is up 23% compared to what it had been.
    • Homepage unique visits are up 15%, and time spent is up 7.5%.
    • The mobile bounce rate decreased by 26%.
  • O’Neill Clothing – (source)
    • 65.7% conversion rate increase on iPhone/iPod
    • 101.2% revenue growth on iPhone/iPod
    • 407.3% conversion rate increase on Android devices
    • 591.4% revenue growth on Android devices
    • 20.3% conversion rate increase on non-mobile devices
    • 41.1% revenue growth on non-mobile devices

These were just some of the sites where I could find specific stats for this, but as you can see from the list below, responsive design is becoming the approach used by major brands.

If your are curious to see more sites that make use of responsive design, you can check out mediaqueri.es. It is a site dedicated to showing off examples of responsive design sites.

What does responsive design mean for you?

Responsive design is a solution to many issues you need to deal with when it comes to deciding how to tackle your website and redesign projects. It forces you to build for the future by creating a site that you know will be usable on any screen size. Responsive design also helps you focus on the core content of your business and what your customers need when they visit your site. It also makes your site more maintainable and less expensive, as you no longer need to have multiple versions of your site for different devices.

If you are interested in pursuing a responsive approach to your next website, contact us and let us help move your website into the future.