Responsive Web Design 101

responsive-design-crop Four years after Ethan Marcotte coined the phrase in his seminal article on A List Apart, responsive design is recognized by web designers not as just the way of the future, but as an essential technique for the present. But while we designers all agree on this, we often fail at the most basic needs of any new technique: explanation and advocacy.

What is responsive web design?

If you’re still unclear on what responsive web design is after reading that first paragraph, it’s a perfect example of the way in which designers sometimes fall short. Responsive Web Design is the practice of designing a single website which intelligently adapts to various screen sizes. From this brief explanation, let me give a demonstration: we recently created a website for our client Host & Keane. If you pull it up on your smartphone or tablet, elements on the page reflow to maintain their hierarchy, but better fit on the different screen sizes. This is the core of this technique.

Why do it?

Now that we’ve got a clearer picture of what responsive design is, the question is: “why do this?” Well, first of all, when we build websites that are semantic, with a clear hierarchy, adding responsiveness to that isn’t incredibly difficult. Sure, it’s additional work, but if the site is well-built, it’s not overwhelming. So that’s “why not,” but again, “why?” The fact is, since modern smartphones came on the scene (ushered in by the iPhone in 2007) mobile web use has exploded. Even on our decidedly non-responsive agency website, over the past six months, nearly 50% of our traffic came from mobile visitors. Now you’re probably thinking, “Great! If your site is seeing such a high percentage of mobile traffic, clearly this technique isn’t necessary!” But the real picture isn’t so rosy. While desktop visitors on average spend nearly 3 minutes on our site, and visit 6.5 pages; mobile visitors seem to get quickly frustrated, as they leave (on average) before 30 seconds, visiting 1.3 pages. Now the Host & Keane site gets a lot less mobile visitors as a percentage of its total traffic, but of those it does get, they visit only slightly less pages than desktop visitors, and they spend time more in line with what desktop visitors do. As an agency, this is an area where we are constantly working to improve, but for the time being, I hope you’ll come away from this with a better understanding of what responsive design is, and why it’s necessary as a part of your web strategy.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s