May 23

6 Steps to Effective Responsive Web Design

Tag: Usability,Web DevelopmentJohn Britsios @ 03:29

Responsive Web Design (RWD) is the more sensible solution, when compared to its predecessor, and has displaced graceful degradation as the preferred design methodology for serving usable web pages to various size displays.

When tablets and smart-phones first began gaining the attention of web designers, the first response was to build multiple sites, to serve multiple devices. This presented a number of problems, aside from the additional costs.

The next common approach was to design a page with the more modern browsers and apps in mind. The page could then be “dumbed down” for browsers, apps and devices with lesser capabilities.

This of course, meant that the introduction of a new app or browser required massive rework of the page, in order to serve properly to the new technologies. The inherent costs made this an imperfect solution.

Responsive web design and progressive enhancement

Eventually, however, responsive web design and progressive enhancement presented a better option. Pages could be designed to very basic criteria that would display adequately on virtually any device, and specific upgrades could be applied, per the device’s capabilities.

Initially, this involved the use of HTML5+CSS3, using media queries to identify the calling device’s parameters. This works well, by allowing the data to be served to different devices via distinct style sheets.

In other words, the graceful degradation model was reversed. RWD basically offers the story in plain language, adding flowery language for the devices with more expansive “vocabularies”. The methodology is not complex, and offers several benefits.

By designing a site for a standard PC monitor size – say 2560px – with a basic structural style sheet, the webmaster is addressing most PC browsers, both progressive and archaic, in a manner that will present the pages info in a usable fashion.

Using CSS3, various fluid layouts can be achieved, which will display the page in the optimal layout for a number of different viewports, whether netbook, tablet or iPhone.

Note that this negates the need for a duplicate website (or several) just for mobile users and avoids the pitfalls and additional costs that such an approach can create. And it brings new potential customers to the table.

How complex is the process? Surprisingly, not at all. There are six basic steps:

  1. Page-wrap containers are used to capture the header, footer, widgets and content on the webpage. These will become the main targets of the CSS3;
  2. HTML5 elements need to be set to block, which further identifies the target;
  3. Width and float are handled in the basic structural CSS, and will become the reference point for the CSS3 files;
  4. Media queries need to be written, to harvest device parameters of the calling viewports;
  5. The percentage of the display width established in the basic structural CSS needs to be established for each CSS3 file, in order to set the fluid layout for each viewport;
  6. All images need to have their maximum width set as a percentage of the max. display. This will include embedded videos, as well.

If you’ve done your job well, a page that displays four columns on a PC screen will be automatically reset to one, two or three columns for smaller viewports.

And when a new set of mobile parameters hits the market, you only need to add a simple style sheet!

A Recommended Alternative

HTML5 and RDFa can be implemented together, as well, although this is not yet officially recommended by W3C. If you prefer to adhere to the W3C recommended techniques, you may prefer to use XHTML+RDFa.

This is only slightly more complex than the first method outlined, but offers much greater benefits.This method offers the opportunity to pass along semantic data to the search engines, which can translate into greatly increased profits for your business.

The use of RDFa assists the search engines in matching your webpage to relevant search queries, meaning your page will be viewed by targeted users.

It also means that more relevant rich snippets will be displayed in the search results, which will enhance your click-through rate (CTR).

Finally, you will have saved significant expense, without sacrificing either usability or accessibility in the interest of expedience.

You may be surprised to find how easy this is to implement. With some basic style sheet knowledge and a bit of familiarity, you’ll be amazed at how quickly you can add a vast number of mobile users to your potential client list.

Share and Enjoy:
  • Print
  • Digg
  • StumbleUpon
  • Facebook
  • Twitter
  • Diigo
  • email
  • Faves
  • FriendFeed
  • Google Buzz
  • LinkedIn
  • MisterWong
  • MySpace
  • PDF
  • Reddit
  • Technorati
  • Tumblr