Responsive Web Design

What is it?

Designing for mobile devicesWikipedia defines Responsive Web Design as “Responsive web design (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 mobile phones to desktop computer monitors).”

Visitors to your web site will no longer have to enlarge every page to be able to read your message.  Sites that appear as a long narrow column on a smart phone will widen to a multicolumn presentation as the display size increase through tablets to desktops.  Pictures will expand or shrink ore even disappear as the screen size changes.  And the content can be the same in all these formats.

This web site has been designed and developed to be responsive on displays of varying sizes.  Check it out by viewing the site on your smart phone and desktop display.  Or, on a desktop display you can make the browser window smaller and see how the site will look on smaller displays.

So what?

Google is giving added value to responsively designed web sites. “Sites that use responsive web design, i.e. sites that serve all devices on the same set of URLs, with each URL serving the same HTML to all devices and using just CSS to change how the page is rendered on the device. This is Google’s recommended configuration.”

More and more people are accessing the internet with smart phones, tablets and other smart devices.  Now even televisions have built in web browsers.  “The web’s moved beyond the desktop, and it’s not looking back. The number of devices we’re designing for is growing just as quickly as mobile traffic,” says Ethan Marcotte, the father of Responsive Web Design and author of several books on the subject.

This means it is more and more important for businesses to present their messages well in format most appropriate for each audience, whether that is a wide desktop display, a narrow smart phone or something in between.  And in most cases a person uses multiple devices to learn about your company and to respond to your messages.

In general, the easier it is for a person to find the desired information on your web site, the more likely they are to take the action you want them to take.  This may mean contacting you by telephone or email, or it may be that you want them to buy one of your products or services.  Research has shown that people tend to use mobile devices to learn about products and services, and to use larger desktop systems or tablets to order them.

A properly designed web site can keep your most important messages for the viewer to see first.  For English readers this means the most important messages are at the top left hand corner of the display.

Less important information can be positioned lower on the display or to the right.  Images can make a web page more interesting, or they can over shadow more important text on a smaller display.  Responsive Web Design techniques let the images shrink as the display size gets smaller or disappear completely.

How is Responsive Web Design different?

Over the years industry standards and browsers have evolved to separate the content (coded in HTML) from the presentation attributes (coded in CSS).  Only recently have these two components and browser support matured enough to make Responsive Web Design possible.
There are three technical components to a web site designed to be responsive

1)  Fluid Grid:  the layout of the page is designed to respond to the size of the display.  In some cases this means one column on a smart phone grows to be three on a wider display.  The navigation across the top of the page on wider displays may be replaced by a “Menu” button that reveals a drop down menu.  This enables the visitor to see the important content at the top of the page without scrolling through menu options, unless he or she needs to.  Some less important content may disappear completely on smaller displays or drop to the bottom.

2) Flexible Images:  responsively designed web sites control the dimensions of images, so they don’t displace more important messages that may be in the text.  Galleries of images can expand to fill the entire display on a smart phone and only a portion of the larger display of a desktop system.

3)  Media Recognition:  modern web site browser can recognize the size and type of display devices.  The designer captures this information and defines different presentations for different display sizes.

What about Content?

Content is still king.  Don’t be fooled by this talk about how best to present your messages on the internet.  Valuable content, as measured by the viewer, is still the most important element of effective web sites.  This is true for web sites just as it has been for more traditional marketing media like print advertising or direct mail.

  • Mediocre content with great presentation still won’t get you the results you want.
  • Great content presented in an acceptable fashion is better.
  • Great content presented in an effective way is the best.

What’s next?

So make the investment now.  Start by upgrading your web site for effective use of smart phones, tablets and wider displays, while there are only a few options.  This way you will be ready as the number and type of devices continues to multiply.