Thursday, March 28, 2013

Which HTML5 Features To Use in your Cross Platform App

In order to determine what features of HTML5 to use, you must first understand your user base.

  • Are all of your users corporate users, where you can control the version of browsers (and mobile devices) accessing your application?
  • How important is it that you support all possible end user devices?

Odds are there is a point of diminishing returns where you decide you'll stop supporting an old (or just down right poor) browser version. 

As with anything in this field I'd say, "It depends..."

To create a truly cross platform web-based application you must also understand the features of the mobile platform that you want to support that will probably not be on your desktop web application radar.

Mobile hardware features

  • Video (codecs limited by hardware)
  • Audio (codecs limited by hardware)
  • Web applications
  • Cross-document messaging
  • Server-sent events
  • Web sockets
  • Session storage
  • Local storage
  • Web workers/shared workers
  • Scroll into view
  • SVG in HTML (but SVG is supported via <img>)
  • Geolocation
  • WebGL
  • FileSystem API
  • Indexed DB
  • Webcam
  • Web notifications

Based on current statistics (see bottom part of this post) and a desire to support "most" end user devices, I picked some lowest common denominator OS versions that you might consider when deciding what HTML5 features to implement.


The following charts are best viewed with a web browser, s.t., you can pan across to see the whole chart.



low-end



mobile browsers

(Click to toggle detail visibility.)

Android 2.2200

iOS 3.1141

BlackBerry OS 7288



Mobile OS Market Shares


 In order to make a determination on what to support, it's important to evaluate the market share percentage use of each OS.

 This chart is a little out of date, but is pretty close to today's market:





 IOS is more popular in the U.S. that other parts of the world.

Android (operating system)

VersionCode nameRelease dateAPI levelDistribution (March 4, 2013)
4.2.xJelly BeanNovember 13, 2012171.6%
4.1.xJelly BeanJuly 9, 20121614.9%
4.0.xIce Cream SandwichDecember 16, 20111528.6%
3.2HoneycombJuly 15, 2011130.9%
3.1HoneycombMay 10, 2011120.3%
2.3.3–2.3.7GingerbreadFebruary 9, 20111044%
2.3–2.3.2GingerbreadDecember 6, 201090.2%
2.2FroyoMay 20, 201087.6%
2.0–2.1EclairOctober 26, 200971.9%
1.6DonutSeptember 15, 200940.2%




IOS (operating system)

Primary
SeriesiPhoneiPod TouchiPadiPad Mini
Model1st3G3GS44S51st2nd3rd4th5th1st23rd4th1st
PhoneTelephone1.02.03.04.05.06.0N/AN/AN/A
MailE-mail client1.1.32.1.13.1.14.16.03.24.35.16.06.0
SafariWeb browser1.1
MusicPortable media player1.0
(iPod)		2.0
(iPod)		3.0
(iPod)		4.0
(iPod)		3.2
(iPod)		4.3
(iPod)
VideosVideo player3.24.3
SpringBoardHome screen1.02.03.04.0
Spotlight search3.03.0
FoldersN/A4.0N/A4.04.2.1
Home screen backgroundsN/A4.0N/A4.03.2

List of IOS Devices



BlackBerry (operating system)

Number of BlackBerry Users Globally:As Of:
534,000March 1, 2003
1,069,000February 28, 2004
2,510,000February 26, 2005
4,900,000March 4, 2006
8,000,000March 3, 2007
14,000,000March 1, 2008
25,000,000February 28, 2009
41,000,000February 27, 2010
70,000,000August 27, 2011
77,000,000March 3, 2012
79,000,000December 1, 2012

Models


A BlackBerry Pearl 8100

Original BlackBerry
Main article: List of BlackBerry products
BlackBerry 10 devices:
BlackBerry 7 devices:
BlackBerry 6 devices:
BlackBerry 5 devices:
Blackberry 4 and earlier devices:
  • Early pager models: 850, 857, 950, 957
  • Monochrome Java-based series: 5000, 6000
  • First color series: 7200, 7500, 7700
  • First Sure Type phone series: 7100


Windows Mobile (operating system)

YearMarketshare
in U.S.
200411.3%[70]
200517%[70]
200637%[71]
200742%[71]
200827%[71]
200915%[71]
20107%[71]
20113%[71]
Pocket PC 2000Pocket PC 2002Windows Mobile 2003Windows Mobile 2003 SEWindows Mobile 5.0Windows Mobile 6Windows Mobile 6.0Windows Mobile 6.5
Pocket PC (without Mobile Phone)Pocket PC 2000Pocket PC 2002Windows Mobile 2003 for Pocket PCWindows Mobile 2003 for Pocket PC SEWindows Mobile 5.0 for Pocket PCWindows Mobile 6 ClassicWindows Mobile 6.1 ClassicN/A
Pocket PC (with Mobile Phone)Pocket PC 2000 Phone EditionPocket PC 2002 Phone EditionWindows Mobile 2003 for Pocket PC Phone EditionWindows Mobile 2003 SE for Pocket PC Phone EditionWindows Mobile 5.0 for Pocket PC Phone EditionWindows Mobile 6 ProfessionalWindows Mobile 6.1 ProfessionalWindows Mobile 6.5 Professional
Smartphone (without touch screen)N/ASmartphone 2002Windows Mobile 2003 for SmartphoneWindows Mobile 2003 SE for SmartphoneWindows Mobile 5.0 for SmartphoneWindows Mobile 6 StandardWindows Mobile 6.1 StandardWindows Mobile 6.5 Standard


The Microsoft Factor

When it comes to web development technology, what happened to Microsoft?

The question you must ask yourself is, "Do I want to spend my time writing a lot of code just so that the IE and Windows Mobile users can have a nice user experience in my application?"

The following javascript can help:

<!--[if lt IE 9]>
 <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->

As you see below, both desktop and mobile Windows web browsers significantly lowers the HTML5 compliance bar.

One solution is to charge your customer for using poor Microsoft technology. ***


low-end 

IE 

browsers

How's that for an oxymoron?
(Click to toggle detail visibility.)
Internet Explorer 842desktop
Windows Mobile 6.58mobile
Internet Explorer 10320tablet


Desktop Browsers

Don't forget about supporting desktop browsers.

Lets' look at the top desktop browsers.

Worldwide Browser Statistics December 2012 to January 2013

The following table shows browser usage movements during the past month.
BrowserDecemberJanuarychangerelative
IE (all)30.78%30.70%-0.08%-0.30%
IE 9.0+18.13%18.52%+0.39%+2.20%
IE 8.011.48%11.12%-0.36%-3.10%
IE 7.00.79%0.73%-0.06%-7.60%
IE 6.00.38%0.33%-0.05%-13.20%
Firefox21.89%21.43%-0.46%-2.10%
Chrome36.46%36.55%+0.09%+0.20%
Safari7.92%8.27%+0.35%+4.40%
Opera1.24%1.19%-0.05%-4.00%
Others1.71%1.86%+0.15%+8.80%

most recent most popular browsers

(Click to toggle detail visibility.)

Internet Explorer 10320

Chrome Canary468

Firefox 19393



Other Platforms

Odds are that your application won't need to run on television or gaming browsers, but just in case, here's some stats...

television

browsers


GoogleTV341

Samsung Smart TV 2012302


Sony Internet TV357 


gaming

browsers


Nintendo Wii94

Sony Playstation 368


Xbox 360120


Web Browser Layout Engines

Layout engineRelease versionPreview versionUsed by
Amaya11.3.111.3-preAmaya
Gecko19.020.0All Mozilla software, including Firefox; SeaMonkey and Galeon; Camino; K-Meleon; Flock (up to 2.x); Debian IceWeasel; GNU IceCat(formerly GNU IceWeasel); Icedove, Iceape and Iceowl; Fennec. Also used by the Maple platform in 2010 and 2011 Samsung "SmartTV" devices which are based on the build used in Firefox 3.0.
KHTMLN/AKonqueror†
Presto2.10.2292.10.238Opera; Opera Mobile, Nintendo DS & DSi Browser; Internet Channel
Tasman(IE 5.2.3 for Mac)none (aborted in 2003)Internet Explorer 5+ for Mac OS X
Trident6.0 (IE 10)6.0 (IE 10)Internet Explorer and other Internet Explorer shells like Maxthon (Microsoft Windows operating systems only), Windows Phone 8
WebKit534.20r146740Tizen (both OS and browser), Safari (both desktop and mobile), Google Chrome, Maxthon 3, Shiira, iCab 4, OmniWeb 5.5+, Web, Adobe AIR, Midori, Adobe Dreamweaver CS4 and CS5, Android browser, Palm webOS browser, Symbian S60 browser, OWB, Steam, Rekonq,Arora, Flock (version 3+), RockMelt, Dolphin Browser, Sleipnir, Konqueror†, rekonq. Used by the LG Smart TV platform to enable web content on TVs.
Different browsers are built upon different layout engines.

Given the statistics we've seen thus far, check out HTML5 support here:  http://en.wikipedia.org/wiki/Comparison_of_layout_engines_(HTML_5)

Google Chrome, Safari and Android use WebKit, which has be the best HTML5 support.

However, at the current time, it's pretty spotty across the board.

Summary


The benefits of HTML5 include ease of developing cross platform applications:
OOB features include: smart form controls, multimedia support, local databases, drawing, better performance, geolocation, etc.

The problem is that HTML5 is not close to being fully supported by all end user devices.

Definitely use HTML5 features that are implemented in all end user devices of your given user population.

Realize that most HTML5 features are designed to degrade gracefully, e.g., form controls for email and telephone fields degrede to Input type=text.  That means that for the devices that support email and tel that device will display an appropriate keyboard input control, which is pretty nifty for mobile devices.

 Consider using HTML5 field validation.  It's easy to turn on and you are already validating all the data on the server side anyway, right?

Be smart about which HTML5 features you use.  For example, if you are developing a gaming application you might save time by using HTML5 canvas features and including a javascript library for IE users.

Use HTML5 for making sites accessible.  The HTML5 tags make it easier for screen readers to easily access content.  Using HTML5 symantic tags, e.g., <nav> <section> <asidie> helps to make a better experience and makes your code cleaner.  HTML5 has built in roles that make ARIA compliance a snap.

Determine if the end user device supports the HTML5 feature you have implemented, if it does not, then provide a graceful downgraded option.

If nothing else, please at least use <!DOCTYPE html> it even works in IE!

References

http://lexsheehan.blogspot.com/2013/04/the-best-html5-storage-mechanism.html
http://en.wikipedia.org/wiki/Android_(operating_system)
http://en.wikipedia.org/wiki/IOS
http://html5test.com/
http://www.whatwg.org/specs/web-apps/current-work/
http://www.w3.org/WAI/intro/aria
http://ejohn.org/blog/html5-doctype/
http://bgr.com/2012/12/04/mobile-market-share-2012-android/
*** http://www.huffingtonpost.com/2012/06/14/internet-explorer-7-tax-kogan_n_1597220.html
Sponsor Ads(Please visit one if you liked this article. Thanks!)
Posted by at

1 comment:

  1. emailtaaiOctober 8, 2021 at 11:25 PM

    Techsaga is the best Mobile apps development companyGet a mobile app for your business today, to connect with a wider audience. Believing and nurturing, Innovation, Advancement and Growth introducing Technology and much more that we do in our routine to bring awesomeness to every product. We never settle until we achieve best.

    ReplyDelete

Subscribe to: Post Comments (Atom)