Responsive Web Design – What is it and why should you care?

Responsive web design is something you’ll be hearing about (and seeing) lots this year. Google says it’s the recommended way to build websites from here on out, and Mashable has a detailed post on why 2013 is “the year of responsive web design”.

I find myself answering these questions more and more as awareness increases, so I thought I’d write a brief non-technical explanation on the basics of being responsive.

What is a responsive website?

Responsive web design (often abbreviated to RWD) is a web design approach aimed at crafting sites to provide an optimal viewing experience—easy reading and navigation with a minimum of resizing, panning, and scrolling—across a wide range of devices (from desktop computer monitors to mobile phones).

– Wikipedia

Responsive websites respond to the viewing area the user is looking at, and displays content in different ways depending on how wide the window or screen is. The general goal is to make the important content easier to get to and navigate on smaller devices (smartphones, tablets, etc.).

It’s pretty simple, but it makes even more sense when you see it. Take my site for example. Slowly resize your browser window width right now, making it narrower.

At certain points you’ll see the site “breakdown.”  You’ll notice the first change at about half the width where the sidebar relocates to the bottom. This is roughly what you’d see on a tablet.

Then, a bit narrower still, and you’ll have an idea what you’d see on a mobile phone.

So that’s what it is, a site that looks good and works well on any device. The merits of this are pretty obvious, but why not just build a mobile site?

Why responsive?

Well, because it’s better. Obviously prioritizing content and making it easier for users to find their way around on smaller devices is for the best. This used to be achieved by building a mobile site, but these presented numerous issues.

Perhaps most importantly, you had to build and manage two separate websites. This can cost a lot of extra time and money, which might explain why most sites didn’t have a mobile version.

But even if you had the budget to build and maintain consistency between two sets of code, more and more screen sizes and resolutions are hitting the market every day, making it almost impossible to accommodate everyone.

Responsive sites solve these problems, and others, handily.

With the majority of major websites out there going responsive, as well as a recommendation from straight from Google, you should probably be thinking responsive for your next website. If you’re a WordPress person, check out this article on Smashing Magazine for building responsiveness into your next theme.