What is Responsive Web Design?

In the 1990's and into the beginning of the 21st century, the average web development agency would construct a website to fit monitors with screen resolutions of 640 pixels wide by 480 pixels high, or possibly 800 pixels wide by 600 pixels high. Everything from the layout to the images, to the font size would be selected to match this "desktop experience" of the end user... because, well... everyone was sitting at desktops with identically sized monitors reading webpages.

For example:

This is a screenshot of a website designed for one monitor size

Then, in walks the iPhone, the Droid, and the [insert name of smartphone here]. All of a sudden, your beautiful website looks like this:

What a big website looks like on an iPhone

(By the way, the owner of the above pictured website hired me to redesign it and turn it into a responsive site, which I did! Check it out at frjacquesphilippe.com)

Presently, we are experiencing a revolution of resolutions. Screen-size resolutions, that is. Millions and millions of consumers/visitors are accessing the web from a multitude of mobile devices from every nook and cranny of human civilization. Whether it's in the passenger seat of a minivan, a window seat in an airliner, on the porcelain throne, or from the couch, our visitors are reading our websites from little screens. We still have visitors utilizing large 21, 23, 24, and 27 inch monitors. Oh, and let's not forget tablets (e.g., the iPad).

One of several responses in the web development industry is responsive design. This is a method wherein the website automagically adjusts to fit the screen size of the device accessing the webpage. Perhaps the best way to explain this is to show you. Visit CatholicVeritas.com from a desktop computer and resize your web browser to get it as narrow as possible and watch the content shift to fit the browser's narrow width.

From the desktop computer, the website looks like this:

Screenshot of a Responsive Website from a Desktop Monitor

As soon as the browser becomes very narrow, the website responds automatically and looks like this:

Screenshot of a Responsive Website from a Narrow Web Browser

Notice how the website remains fully readable without the need for the user to zoom in by pinching the touchscreen. The main menu is now a simple drop-down box, and the sidebar has shifted to display below the main content. With responsive design, the website is a pleasure to view and navigate from any smartphone.

I built CatholicVeritas.com upon Drupal 7 and the Omega base theme. The result of hours of hard work resulted in a beautiful and much more accessible website.

You, the reader, may be thinking, "This all sounds nice, but does it really result in an increase in readership and/or conversion-rates for e-commerce sites?"

The answer is a resounding "Yes!" as shown by this little test administered by Electric Pulp, a web design agency based out of Sioux Falls, SD.