Responsive design has been around for years now, and you've definitely seen it in action (our site is responsive, for one)—but that doesn't mean that the term has entered common parlance outside of the website design and marketing world.
Whether you're in the market for a responsive design website or just wonder what the heck people are talking about, I've got your answers.
What is responsive design?
In short, responsive design refers to websites that are created to respond to the size of the device you're viewing them on. There's no separate mobile website or anything like that; it's the same website and the same content. The code that controls the site simply changes based on the details of the viewing device.
This goes much further than just changing the size of elements on the page; it frequently includes changes to the navigation (menu), main images, and other parts of the website.
Here's an example of smartphone, tablet, and desktop views of a website we designed:
As you can imagine, a traditional static website with a multi-column format can become unreadable on a mobile device, because the page will simply zoom to fit the screen. A responsive website, on the other hand, can be designed to shift those columns into a single long column, so the reader could simply scroll down to view the whole site on a smartphone.
If you've never noticed responsive design, don't worry: it's intended to be completely natural and intuitive. When something is working well, we barely notice. But everyone has tried to load an old website on a smartphone only to find illegible text and a layout that doesn't even fit in the browser. Yikes.
Smartphones, tablets, and other mobile devices have become the primary way that many people view web content (it's common for websites in a range of industries get more than half of their traffic from mobile devices). In fact, mobile usage now accounts for 60% of all time spent using digital media. At this point, a website that doesn't provide a good user experience at any viewing size is hurting your brand more than it helps.
To see responsive design in action, visit a responsive site and adjust the size of the browser window in several directions to watch the elements of the site adjust and even move around on the page. Here are a few of the responsive sites we’ve designed if you’d like to try it for yourself.
Just click to view the live responsive websites:
Responsive design represents a fundamental shift in the way websites are created, and it will only become more ubiquitous as consumers are able to meet ever more of their needs with mobile devices.
In the words of our Chief Creative Paul Gibson, “Responsive design is the most logical way to handle the broad range of screen sizes on the market today. Responsive just creates a better user experience, which is why we recommend responsive design to our clients”
If you’re deciding whether to upgrade your business website to a responsive design, it’s important to consider the expectations of your customers or clients. In certain industries and among certain demographics, use of mobile devices is high and cutting-edge web design is expected. To be honest, very few industries can expect mostly desktop traffic.
One powerful tool in making that decision is Google Analytics, which provides data on what portion of your web traffic comes from mobile devices and other details. Simply log in to your Google Analytics account and navigate to Audience > Mobile > Overview to see details of your mobile traffic.
It's easy to set up a Google Analytics on your website if you haven't done so, though you will have to wait a little while for enough data about your mobile traffic.
If you have any questions about responsive design that I haven't addressed, please add them in the comments below and I'll make sure that you get answers!
If you’d like to talk to us about building a responsive website, you can contact us any time.
You can also look through our portfolio, which includes a number of award-winning responsive website designs.
Editor's note: A version of this post was originally published on 4/10/13. It has been updated with current statistics and up-to-date information about responsive design.