An Overview of Responsive Web Design

In August 2011, CRT was charged with re-thinking the technology that was behind realtor.org. We were determined to implement technologies that were freely available and built on open standards. One area we were really excited to move into was the area of Responsive Web Design. We did a lot of research and review of what information and materials were available. At that time, there were not many organizations that were using these principles. The Boston Globe launched in October of 2011 and that was about it for larger organizations and Responsive Web Design.

In April 2012, a revamped version of realtor.org launched using Responsive Web Design principles. The largest factor for us moving in this direction was that we anticipated the increase of mobile usage on our sites in the very near future. We were right. In 2010, 3% of visitors to realtor.org were using mobile devices. As of today, we are seeing 25–30% of our visitors using mobile devices. That’s a huge leap. As CRT continues to work on sites at NAR, we will employ these principles on all web properties.

Please note: what follows is meant to be a very high level overview and there will be subsequent posts that will cover more specifics of these principles. The intent here is to help make these concepts a little more understandable so that if you are looking to have your site redesigned, you can understand what this concept is just enough to be able to talk to your designers and developers. First, let’s talk about what Responsive Web Design is not.

What Responsive Web Design is NOT
In talking with people about Responsive Web Design, I’ve come to find there is a lot of confusion about it. Here is a list of what it is not:

It is not a method for communicating directly with people who visit your site, like a chat client.
The word responsive is loaded and causes people to believe that it has to do with action they have to take. The truth is the word Responsive in ‘Responsive Web Design’ is referring to how your site’s code interacts with your device. I’ll go into more detail in a bit on this.
It is not a way to be notified when someone views your website
If you received a notification every time someone visited your site, you would go crazy. There would be a constant pinging that would be worse than the already huge onslaught of email and communications we get on a daily basis. Thankfully this is not Responsive Web Design.
It is not an app built for a specific device.
Responsive Web Design doesn’t care what device you have. It’s main goal is to get what is important to your target audience.
What Responsive Web Design is
Responsive Web Design is a concept first proposed by a designer/developer named Ethan Marcotte in May of 2010. Ethan was influenced by another designer/developer named Luke Wrobleski who wrote about how moving forward, designs for web applications should be done with consideration for mobile. He called it Mobile First. Wroblewski cited the rising number of mobile devices and usage of these devices as core drivers for his pitch.

Using Mobile First as a base, Ethan demonstrated the concepts of Responsive Web Design in this article. The crux of it is that there are three things to consider:

Fluid widths
Flexible images
Media queries
Fluid Widths & Flexible Images
I’m covering both of these items together because they have similar principles. Both items refer to the fact that as a container narrows, the item within that container resizes to fit appropriately. Please note I am writing this for all readers and not just technically aligned readers, so I will keep this at a high level. The basic idea here is that all the parts of your website are contained in boxes. In a traditionally built website, these boxes have fixed dimensions that stay the same no matter what device you have. In Responsive Design, the idea is that these boxes will resize to work for specific orientations.

It might be best demonstrated with these images. Below, you will see what our new site, REpurposedApps, looks like on a desktop.


All the boxes are a uniform size for the content and it has a width typical of a website today. The site performs exactly as you would expect in browsers.

Now watch what happens to the same site on a phone:
What you’ll note here is that the boxes have resized to fit the proportions of the screen, including the images for the apps. Because of my different device widths, the website transformed its look and feel to an appropriate dimension. But how did it know?!? AHA! Enter media queries.

Media Queries
Media queries are new to HTML as of the last version (HTML5). As a member, you won’t need to know anything about these other than you would want your site to work on all devices at different orientations.

At a high level, media queries essentially ask a question of your device. That question is ‘What width would you like to view this website in?’ Your device’s browser answers this question simply by passing its orientation to the site. The site then gives the browser the appropriate code. There are tons of media queries for developers to choose from, but these are the main ones for the task at hand. A beautiful proof of concept can be had at Matt Kersley’s site. Matt built a way for you to view multiple versions of the same site at different widths. The link above is set to open realtor.org in different device orientation windows. On that page, if you scroll to the right, you will see all versions of realtor.org.

Why Should it Matter to You?
Let me start by saying why this matters to us. You, the member, are on your mobile phone or tablet a lot. We recognize that and want to offer an experience that works for whatever device you have. My point being is that you need to consider your audience for your site. For a lot of your clients, this is their first impression of you. If they’re accessing your site on a mobile phone and it’s not responsive, that might be the end of the conversation for them right there. Following these principles will demonstrate consideration for their experience.

We also did not want to think about building native apps for a few reasons:

We wanted something that was device agnostic.
We wanted a lean code base.
We wanted to demonstrate something the members could have done on their sites for little to no cost.
End of Part 1
I’ve covered an awful lot in this post and would hope that you take a moment to absorb and view the reference links. One link I think you should visit to see what a number of sites are doing is mediaqueri.es. You’ll see a number of examples that could come in handy when wanting to create your own site.

Okay, end of post.