testing5

Why HTML5 Mobile?

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 Features

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.

Advanced Forms — 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. The more that can be handled by the browser means less time downloading javascript code and less round trips to the server if validation can be found before the form is posted.
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.

WebSockets

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:

  1. IE supports whatever new standard we decide on
    or/and
  2. IE no longer has the majority of the market share

and for mobile… that is happends right NOW!

 

 

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.

Blackberry has its own specialized browser not built on any of the major browser engines. It only recently started handling html, css and javascript reasonably well, but still is insufficient and buggy compared to other browsers.

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.[31] 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
  • Using our front-end code (javaSCript, HTML5 and CSS) we can transform to native APPs. We can use the same product for all the mobile platform bases on open source technologies. Further information: http://www.phonegap.com/about
  • HTML5 Microdata (SEO and google ranking)
  • HTML5 Advanced Forms: The more that can be handled by the browser, the less time is spent downloading JavaScript code and less round trips to the server if validation can be found before the form is posted
  • 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

Conclusion:

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

2 Comments

Leave a Reply

Your email address will not be published. Required fields are marked *

* Copy This Password *

* Type Or Paste Password Here *