The World First Ever HTML5 Advertisement

Category : Google, HTML5, Open source, web

We all love new technology, its event better when it is open and standard. But getting your feet wet and actually using the new technology? and in production? and where there is money involved? that is totally a different matter…

Last week I started advertising a big developer event we are holding in November – a countdown clock that counts the seconds till Google Developer Day . We considered a Flash ad like we are all used to, but our marketing team though it would be cool to have HTML5 ad…

I am a little a shamed to say that at first I objected, saying that HTML5 is still not fully supported by all browsers. After much deliberation we decided it was worth the extra budget to serve HTML5 for browsers that support it and Flash Ad to deprecated browsers. The reports from the publisher is that this HTML5 ad beats all Flash ads CTR. This is something worth investigating – is HTML5 ads perform better than Flash ads?

So get ready – Here is the first world HTML5 ad (click to enlarge) -

For the next few days you would be able to view it (with Firefox and Chrome) here.

Gracefully Detect Old Browsers and Fallback from HTML5

Category : HTML5, JavaScript, Software development, web

HTML5 rocks! It even says so in this (highly recommended) great web tutorial, but there are still a lot of browsers out there, that still do not support HTML5, or some of it’s features.

First, What is HTML5?

Wikipedia defines HTM5 – HTML5 is a language for structuring and presenting content for the World Wide Web, a core technology of the Internet. It is the fifth revision of the HTML standard (created in 1990 and standardized as HTML4 as of 1997[1]) and as of September 2011 is still under development. Its core aims have been to improve the language with support for the latest multimedia while keeping it easily readable by humans and consistently understood by computers and devices (web browsers, parsers, etc.). HTML5 is intended to subsume not only HTML4, but XHTML1 and DOM2HTML (particularly JavaScript) as well.

How do I find out which features are supported in each browser?

HTML5Rocks keeps track for each features support in each browser another cool site to check would be caniuse.

Now, the really issue is what do you do at run-time? how do you gracefully fallback when there is no support for the great feature you have implemented using HTML5.

There are two way to detect and fallback from HTML5, the right way, and the wrong way

So here they are:

WRONG WAY – On the server-side, check the User Agent header and serve different pages based on the user agent header… Not recommended – first, there a lot of  User Agents, second, this is a very buggy approach because headers change and are not deterministic (FF can easily send IE headers).

RIGHT WAY – Use JavaScript to detect when there is no support for a HTML5 feature (AKA object detection) here is an example:

 function start(){ if(supports_canvas()){ // Do funky HTML5 canvas fun }else{ // fallback to boring old HTML } } function supports_canvas() { return !!document.createElement('canvas_bogus_name').getContext; } 

 

Have fun and support HTML5: