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.

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.

Author: John Britsios

Founder and Chief Information Officer (CIO) of SEO Workers and Chief Executive Officer (CEO) of Webnauts Net, a qualified Forensic SEO & Social Semantic Web Consultant, specializing in Semantic, Forensic & Technical Predictive Search Engine Optimization, Content Marketing, Web Content Accessibility, Usability Testing, Social Semantic Web based Responsive Web Design & Ecommerce Development, Conversion Rate Optimization.

Be Sociable, Share!

    Article Syndication

    You may syndicate this article content only if you do not modify the article in any way, leave the links intact, and utilize the canonical link relationship or Robots meta tag directives in the head section of your blog:

    • <link rel="Canonical" href="http://www.searcheditors.com/responsive-web-design-html5-css3-xhtml-rdfa/">
    • <meta name="Robots" content="noindex,noarchive,nosnippet,follow">

    Attention Comment Spammers

    • Google says that spamming other sites can lower your site rankings;
    • Keywords within anchor text in the comment fields are not accepted;
    • Signature links under comments are not accepted;
    • Highly relevant links in the body of a comment can contain anchor text such as the web site or blog title, and only upon our approval;
    • You can expect that your comment may be deleted if you are attempting to get a backlink link rather than adding real value to the conversation;
    • SEO or Link Builders, if we catch you commenting but linking to a client's site, your online reputation, your firm's and that of your client are being put at severe risk;
    • Link to a page or a blog that can be identified as being about you, so our readers can gain additional perspective on your point of view and where necessary sufficient disclosure.
    • http://twitter.com/manusporny Manu Sporny

      I’m the current chair of the Working Group at the World Wide Web Consortium that developed RDFa. You can use RDFa in HTML5 and it works just fine. Click on the examples here to see (all examples are HTML5+RDFa documents):

      http://rdfa.info/play/

      Developers don’t have to pick between the two options you state above. RDFa works in all versions of HTML. HTML5+RDFa+CSS3, FTW.http://www.w3.org/TR/rdfa-in-html/

      • https://plus.google.com/115194199565322841506/about John Britsios

        Manu, I am a web standards advocate since I first started working on the internet (year 2000) and I strictly stick to the W3C recommendations.

        I know that HTML or HTML5 + RDFa can be implemented together, as well, although those are not yet officially recommended by the W3C. They are still in editors draft. That is why I recommend for now XHTML+RDFa.

        If those alternatives will become W3C official recommendations, I will certainly follow those practices too.

        Makes sense?

      • https://plus.google.com/115194199565322841506/about John Britsios

        Manu you might be the chair of the W3C working group , but I was surprised when I read the new W3C recommendation http://www.w3.org/TR/2012/REC-css3-mediaqueries-20120619/ where is clearly stated that “HTML4 and CSS2 currently support media-dependent style sheets tailored
        for different media types.” and that “HTML5 [HTML5] (at the moment of writing
        still work in progress) references the Media Queries specification
        directly and thus updates the rules for HTML”.

    • http://scorlosquet.myopenid.com/ scor

      This is no longer an OR question. With the latest version of RDFa, you can combine all the benefits of HTML5 and RDFa. RDFa Lite is a good introduction: RDFa Lite is a good introduction. See also the HTML+RDFa specification.