Mobile Device

What is Responsive Web Design: A Non-Nerd Explanation

by Michael Erwin

Posted on

Updated:

Web Designers use a lot of jargon. Most of it is inside baseball that you don’t need to be concerned with. Responsive Web Design is however something you should understand, as it could have a huge impact on your website usability and lead conversion.

What is it?

Simply put, Responsive Web Design (RWD) is a technique used to create a website that is flexible, and changes depending on the device being used to view it.

In addition to flexible layouts, a Responsive website might load different images or fonts depending on the specs of your device.

This website uses RWD. If you are viewing it on a smart phone, the navigation bar changes to a menu icon, and the layout changes to fit a narrower display. If you are using a large screen, such as a desktop PC, you can see this in action by re-sizing your browser window.

Opposite RWD on the design spectrum is Fixed Width Design. A Fixed Width website uses a specific size for its width, usually measured in pixels. When such a site is viewed on a smaller screen, it is simply shrunk to fit with no changes to the layout or resources.

A close cousin to RWD is Adaptive Design. This technique uses more than one fixed width layout, and switches to suit the device using breakpoints.

Why is it important?

Mobile Devices are used for nearly half of Canadian Online time.

Do you remember waaaayyyy back in 2007 when the first iPhone and iPod Touch were released? Until that time, web browsing was done almost entirely from desktop computers. These computers had only a few screen resolutions and aspect ratios, and websites were designed using fixed widths to match.

Since then, thousands of different screen resolution/size combinations of been released.

Comparison samle of screen sizes of Android devices visiting a website.
Comparison samle of screen sizes of Android devices visiting a website.

This image is just the Android devices that visited one particular website. Add to that desktop, iPhone, iPad, Windows Phone, BlackBerry, and soon smart watches and the variety is staggering. A one size fits all solution is clearly not going to cut it anymore!

If that isn’t enough to convince you of the need for RWD, according to ComScore, mobile devices are used for nearly half of Canadian online time.

What should I do?

Check your website on your phone right now. Go ahead, I’ll wait….

Less than 0.2% of the entire internet uses RWD.

If you don’t have a phone handy, you can visit http://ami.responsivedesign.is/ and enter your website address to see a representation of how your site might look on different devices.

How was it?

If your site appears to be responsive, congratualtions! Less than 0.2% of the entire internet uses RWD. If yours is not it might be time for an upgrade.