HTML5 is being developed as a next big HTML revision.
The code introduce a number a new elements and attributes, such us: Canvas elements, Video elements, Geolocation, Office Web Applications. Each browser has its own rules and characteristics that differ between versions and brands, and each one is adopting HTML5 at its own rate.
HTML5 is a critical step for mobile web application development. Some of the key elements that it provides are:
Offline Support — WebStorage (WebSQL, localStorage and sessionStorage) and off-line support make it possible for mobile developers to store things locally on the device and in that case interruptions in connectivity will not affect the ability for someone to get their work done. Even we can display a website without connecting to the internet. The cache persists after Safari exits, even it can be used by ‘multiple browser sessions’
Canvas and Video — These two features are designed to make it easy to add graphics and video to a page without worrying about plugins. When supported by the phone’s hardware, as is the case with the iPhone, they provide a powerful ways to get media into a page.
Native GeoLocation API — This is actually not part of HTML5, but is a separate specification. That said, it is often bundled together because the mobile phones that are including HTML5 are generally supporting the GeoLocation API.
New elements: Media elements (canvas and video): — These two features are designed to make it easy to add graphics and video to a page without worrying about plugins. When supported by the phone’s hardware, as is the case with the iPhone, they provide powerful ways to get media into a page
Structural elements (section, header, footer, nav, etc)
Providing a semantic code
Web Forms (native code form advantage): — Even simple things like the improvements in HTML5 for forms could make life easier for mobile applications. Fields that can be validated by the browser are improvements for mobile devices.
HTML5 Microdata (WHATWG HTML5) — Microdata helps technologies such as search engines and web crawlers better understand what information is contained in a web page providing better search results.
WebWorkers — Web workers is a tool for spawning background threads to speed up the browser application processing. The API allows developers to make background workers that run scripts simultaneously to the main page script. This allows for faster thread-like processing with coordination via message-passing mechanisms. Web Workers are particularly suited for situations where you don’t want to keep the user waiting while some code is processed, so we delegate the job to a ‘worker’.
Most importantly, nearly all of the hybrid applications frameworks—Phone Gap, QuickConnect, RhoMobile, Titanium Mobile, and others—rely on HTML5 features to provide a rich application experience.
For these reasons and many more, I believe the adoption of HTML5 will be driven by the needs of mobile, not the needs of desktop developers.
When Can We Use HTML5?
Many people dismiss HTML5 as something they won’t have to worry about for some time.
None of this really matters until:
- IE supports whatever new standard we decide on
- IE no longer has the majority of the market share
This is why mobile will drive HTML5 adoption. The iPhone, Google Android, Nokia, and the Palm Pre are all based on the open source Webkit browser engine. Those phones represent somewhere around 65% of smart phones sold.
The two major platforms not using Webkit are Windows Mobile and Blackberry. Some of the capabilities of HTML5 are available to Windows Mobile users via the Google Gears plugin.
It also remains to be seen if Microsoft will have a viable mobile strategy. At the moment, it doesn’t look good for the future of this platform as HTC, which is currently responsible for 80% of Windows Mobile sales, is rumored to expect Android to comprise 50% of the units it ships in 2010.
Therefore, the real barrier to HTML5 adoption is RIM’s Blackberry platform.
Fortunately, for both Windows Mobile and Blackberry, Opera’s browser is both available and popular. It is consistently one of the top if not the top download on mobile applications sites. And Opera is one of the leading developers of HTML5.
Finally, if you look past mobile phones to other mobile devices like the iPod Touch, Nokia’s internet devices, and the upcoming Google Chrome, you see that Webkit is even more broadly distributed.
What are the Mobile benefits?
- iOS, Android and blackberry 6’s are based on webKit also Nokia S60 browser on Symbian mobile phones, Blackberry Browser (version 6.0+), Midori, Shiira, Chrome browser,zbl, Maxthon 3, KDE Projects Rekonq Web Browser and Plasma Workspaces also use it as the native web rendering engine. WebKit has been adopted as the rendering engine in OmniWeb, iCab and Epiphany replacing their original rendering engines. Epiphany supported both Gecko and WebKit for some time, but the team decided that Gecko’s release cycle and future development plans would make it cumbersome to continue supporting it. HP’s Palm WebOS uses WebKit as the basis of its application runtime.
- As of the first half of 2010, analyst estimates place the cumulative number of mobile handsets shipped with a WebKit-based browser at 350 million. WebKit will continue to dominate the mobile industry as the market penetration of smartphones, the engine’s primary contributors
- geoLocation native
- Thinking about HTML5’s structural elements will make our code more logical and semantic (section, group and articles)
- off-line Support: localStorage and sessionStorage may be useful for personalisation and customisation
- off-line web apps: Using WebSQL we can have a complete web application running offline
- HTML5 Microdata (SEO and google ranking)
- Considering the most populars platforms; iOS, Android and BlackBerry 6’s are based on WebKit rendering engine, is a good feeling about “where to go”
But what happens with the old browsers?
Well, all these features degrade gracefully in every browser (even IE 6).
Middle-end and low-end smartPhone browsers that don not support a particular element attribute will simply ignore it.
Mobile devices that support HTML5
Phones and tablets based on www.html5test.com statictics (300/300):
- Opera Mini 6: 35
- Maemo 1.7.4: 170
- Blackberry 6: 233
- Opera Mobile 11: 234
- Apple iOS (iPod/iPhone 3.1) HIGH => HTML5:132
- Apple iOS (iPod/iPhone 3.2) HIGH => HTML5:134
- Apple iOS (iPod/iPhone 4.0) HIGH => HTML5:195
- Apple iOS (iPod/iPhone 4.1) HIGH => HTML5:195
- Apple iOS (iPod/iPhone 4.2) HIGH => HTML5:206
- Apple iOS (iPod/iPhone 4.3) HIGH => HTML5:206
- Android (2.2+) HIGH => HTML5:182
- Android (1.6) MEDIUM => HTML5:44
- Android (2.0) MEDIUM => HTML5:182
- Android (2.1 Eclair) MEDIUM => HTML5:182
- Android (2.2 Froyo) MEDIUM => HTML5:182
- Android (2.3 Gingerbread) MEDIUM => HTML5:182
- Blackberry 6 HIGH => HTML5:233 ()
- Blackberry 5 HIGH => HTML5:5
- Palm WebOS 1.4 MEDIUM
- Nokia Symbian Series 60-5.2+ HIGH => HTML5:104 (*)
- Nokia Symbian Series 60-5.0 HIGH => HTML5:29 (**)
- Nokia Symbian Series 60-3.3 MEDIUM => HTML5:0
- Netfront 4.0+ HIGH
- Netfront 3.4-3.9 MEDIUM
- Netfront 3.3 LOW
- Samsung Bada LOW => HTML5:159
- MeeGo (MAEMO) LOW => HTML5:170
- Windows Phone 7 (IE 9) HIGH
- Windows Phone 7 (IE 7,8) LOW
Real mobile Browser scores testing (300/300) :
- iPhone 4 (iOS 4.3.3): 206
- iPod Touch (iOS 3.1.3): 132
- HTC desire HD (Android 2.2): 182
- samsung Galaxy ACE (Android 2.2.1): 182
- HTC G1 (android 1.6): 44
- HTC Hero (android 1.5): 44
- BlackBerry 9800 (BB 6): 233
- BlackBerry 9000 Bold (BB4 5.0): 5
- BlackBerry 8520 (BB 4.6.1): 5
- SonyEricsson C905 CyberShot: 0
- HTC Diamond Touch P3700 (windows): 89
- samsung wave 2 GT-S8530 (SO bada): 159
Desktp browser scores testing:
- Safari 5.0.4 for windows: 187
- Firefox 4.0.1 for windows: 240
- Chrome for windows: 278
- Microsoft Internet Explorer 9: 130
- Opera 11.10: 258
- Safari 5.0.3 on MAC: 228
- Microsoft Internet Explorer 10 PP1: 130
- Google Chromium 11.0.690: 293
- Webkit Nightly 79987: 273
Mobile Safari scores 206 (and 7 bonus points) out of a total of 300 points.
Though this may seem a bit low, it actually indicates excellent support of new standards, especially for a mobile browser.
What Mobile web sites are using HTML5?
bing.com, yahoo.com, youtube.com, aol.com, ShopNBC, ASOS, Expedia, bbc.co.uk, nowtv.com, etc