Tag Archive | "CSS3"

Tags: , , , ,

Responsive Web Design – HTML5+CSS3 or XHTML+RDFa?

Posted on 21 May 2012 by John Britsios

Responsive web design (RWD) is not a new concept, but it is finally receiving the attention it deserves due to the increasing number of handheld devices in use today. With the many different display sizes in use today, every website needs to cater to each specific device, in order to optimize the user experience.

Users of handheld devices such as tablets and iPhones are quickly frustrated by the necessity to continually pan and scroll in order to view content. RWD greatly improves the user experience by tailoring the viewable content to each individual device’s viewport.

The methodology is simple: the site uses media queries to determine each device’s parameters, and then serves the page using a customized style sheet (CSS) file specifically designed for that device type. This is totally transparent to the user, allowing for a fluid layout that fills the available viewport.

You need Flash player 8+ and JavaScript enabled to view this video.

data="http://www.youtube-nocookie.com/v/ad6-0opSbw4?version=3&hl=en_US" rel="media:video"
xmlns:media="http://search.yahoo.com/searchmonkey/media/" xmlns:dc="http://purl.org/dc/terms/">

One of the most publicized methods of implementation of RWD is via the use of HTML5+CSS3. However, this isn’t the only viable alternative. XHTML+RDFa is also equally effective, and actually can convey additional benefits.

Implementing HTML5+CSS3:

  • First, the header, content, widgets and footer on the page should be encapsulated in a page-wrap container. This allows the container size to be customized by the style sheet to fit different viewports;
  • Next, the HTML5 elements should be reset to block, identifying the block of elements to be addressed;
  • The main CSS structure should be developed, establishing the width and float for the various elements in the block;
  • Media queries will need to be set up, in order to identify which CSS should be followed in order to suit the device characteristics of the target device;
  • The fluid layout needs to be established, as well, as this allows the setting of the percentage of width (of the main CSS structure) at which elements should be displayed;
  • Finally, the percentage of width at which the display needs to be set for all images and embedded videos.

By following the above steps, a page which might display four columns on a 2560px PC display can fluidly adapt to a three, two or even one column display on smaller devices.

Implementing XHTML+RDFa:

For this approach, the basic steps are the same as above in order to achieve a fluid design that provides a quality user experience for any size device. This option, however, provides additional benefits worthy of consideration for any business website.

Implementing RDFa in a site’s design provides a great deal of semantic data to the search engines, which can greatly augment the site’s relevancy to the search queries for which it is returned. It also can result in more highly customized rich snippets to improve the click-through-rate (CTR).

That means the site will receive more targeted visitors, and provide them with a better shopping experience… critical elements for improving any business site’s conversion rate.

Using schema.org property settings to convey semantic relationships enables one to establish item properties that enable the search engine to better understand what the page ‘s primary focus is. This can have a tremendous bearing on ranking for specific search terms.

Either of these two methods can yield a significant edge.

As with any recent technology, the earliest adopters are those that will realize the greatest benefits as a result of implementation before their competitors.

Comments (4)