HTML5 and Mobile devices

Microsoft HTML5 event - Helsinki 2012/01/18

@ottovirta
Head of web experiences
Foodie.fm

About Foodie.fm

• Food recommendation service
• Web, iPhone, Android, Symbian -clients
• 100000+ users in Finland
• 10000+ recipes
• 15000+ products
• 800+ store selections

This is what gets people hyped

Mobile overtakes desktop in web usage 2013-1014

But what they forget is that mobile isn't HTML5

More than 2.1 billion mobile devices will have HTML5 browsers by 2016, up from just 109 million in 2010, according to a report by ABI Research. http://gigaom.com/2011/07/22/the-html5-boom-is-coming-fast/

Where we stand today

In order to be able to provide services to a wider audience we need to:

• Do device or browser detection
• Usually maintain more than one version of the service
• Do a lot of custom code for each platform
• Maintain that whole mess

Common problems with HTML and mobile

• Lack of network information
• Storing of information
• Device access
• No infromation or control of memory consumption

Good news:
HTML5 is app oriented

The new and shiny stuff for apps in HTML5

• Network: Network information api, Web Sockets, XMLHttpRequest 2.0
• Data: App cache, Web storage
• Controls: New form input types
• Graphics: SVG, Canvas, WebGL
• Device access: Motion Sensors, Geolocation, File Api
• .. and a lot more

Styled with CSS3

• Media queries
• Most of the stuff previosly done with images like gradients, rounded corners and shadows available
• 2D/3D Transforms, Transitions and animations
• Webfonts

So what about Javascript?

• Less of it. A great deal of current javascript code will become obsolete because of the new HTML5 features and CSS3 transitions.
• Feature detection instead of device or browser detection
• More app oriented. With libraries like backbone.js and knockout.js javascript is moving back to being a programming language instead of being just a tool for doing UI stuff.

HTML5 + CSS3 + JS =

• Less unnesessary code
• Better user experience
• Compatibility with different devices and browsers
• Less stuff to maintain

What about today?

HTML5 is widely supported in desktop browsers and modern smart phones like Android and iOS-devices. There are also a lot of polyfills that can be used to add missing features. However if you need to target any of the older phones you won't be able to take full advantage of the new and shiny features of HTML5...yet.

More info

• http://www.mobilehtml5.org
• http://www.html5boilerplate.com/mobile
• http://caniuse.com/
• https://developers.facebook.com/html5

Thanks!

@ottovirta