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.

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.

Without a doubt, the iPad is changing the way we use technology. From a marketing, SEO, and video standpoint, the iPad is now allowing businesses to reach consumers through yet another screen. Video watching on the iPad is extremely popular. It only took a few weeks for researchers to determine that the iPad user watches two and a half more times video as the iPhone user.

With over 300,000 iPad bought on the first day alone and thousands and thousands of more since, it is essential that marketing companies meet the high demands for video consumption. Marketers are adapting to this changing market.

A majority of online videos use Flash, but the iPad only supports videos using HTML5. HTML5 is forcing marketers to adjust. Video tags allow HTML5 videos to be found easier through search engines. This results in better indexing and ranking of videos.

The biggest impact of HTML5 is its native video support. Videos become more ubiquitous in terms of marketing. Users can consume and publishers can distribute videos without the need for browser plug-ins. A majority of the television and video industry have already made the changes for their sites to support video playback on the iPad.

SEO can be extremely prevalent with HTML5. Search engines will be able to easily identify all the video and content on a webpage. HTML5’s use of tags will help with the marketing aspect of video consumption on the iPad. HTML5 is also eliminating the need for browser object tags and marketers are no longer forced into the standard Flash video sizes.

HTML5 offers an element known as the tag. This tag allows marketers the use of navigation menus, such as sections of links to other pages and materials that present with little or no original content. This element is relatively unknown right now.

Understanding content is going to be key in the success of HTML5 for marketers. Videos will be a significant part of SEO. HTML5 will make it easier for search engines to index and rank videos. HTML5 will play an important role in allowing marketers to advertise across multiple screens, including iPad, smartphones, television, and computers.

Video marketing continues to grow and new developments in technology are continuously changing the way information is provided to the consumer. Some web design firms realize this and have taken a keen and proactive step in the direction of video. In short, you need to prepare for the trend of HTML5 in order to keep up.

If you’re hiring a web designer, you need to ensure they understand HTML5 and SEO if you don’t want your site to quickly become stale.