Mobile Academy: HTML5

T3

HTML 5 & Mobile Web

HTML5 and mobile. HTML5 isn’t just about mobile, but it has many fea­tures designed for devel­oping applic­a­tions that run any­where the Web can run.

Bruce Lawson

9/10, 6.30pm (Tues)

HTML5 is designed to be cross browser and cross device,  but with caveats. [because to date nothing has hit the goal of being able to support all devices of all shapes, sizes and capabilities,  coz it’s such a broad brief]

[Bruce goes on to explore the range of support,  but I’ll not list it all here because it is such a well known thing.]

In summary it also cures cancer, makes tea, and flies fast jets, ;-) ok maybe it doesn’t however Bruce is such a strong advocate he makes it sound like it could well do.

Myths and legends of HTML5

When Mark Z, of facebook fame, said that they had to go away from HTML 5, he went on to say that the long term is HTML,  and that it is more about their android and iOS apps. [others go on to say that the switch is because of the issues that arise from supporting such a large base, and the optimizations that this forces upon you,  more than simply that HTML is not good enough.  I can see that,  you do need to behave in a particular way, with your interface back to the servers, in order to allow the service to operate, with hundreds of millions of users, and when a significant proportion are on-line simultaneously]

HTML 5 will not improve your web site just because you use it. [this is born out of the “its what you do, not how you do it” school of thinking.]

HTML 5 is not just mobile … It is based upon design principles that includes universal access across different devices, platforms and browsers.  [this is a key point, and cannot be iterated too clearly when talking to a mobile centric or mobile first crowd,  that HTML 5 works on PC browsers as well is a key trait, because it is this that gives you some measure of confidence that the platform will progress and improve, whilst supporting an ever increasing range of devices and therefore user’s choices.]

Be warned not all devices support it,  it is only the more modern, so make sure your users will have it,  if not then here be dragons. [Pretty much any device from 2012 onwards will support it, however all bets are off for earler/older devices.  More than 2 years old,  then forget it, unless you provide a compatible browser or web-kit along with the app]

But also be warned that currently no browsers support every part of HTML 5, partly because it is still evolving, the standards body are targeting 2014 but it may be later. [see Caniuse.com or html5test.com to test your device’s degree of support for HTML 5 features, and be warned not all browsers are equal.  I tested safari and opera on a Samsung Galaxy III and Safari scored 434 out of 500 and Chrome scored 390, no doubt Opera’s browser would score higher.]

how did HTML5 come about: well the browser companies, opera, apple, Mozilla, and chrome all got together to produce “web apps” and this was work went on for 6 years  before the w3c woke up to the fact that XML wasn’t  the near term future for browsers and imported the web apps standard,  and started working from there.

The next part has a few highlights.

FORMS

They started with web form, trying to make them better by adding features such as built in validation, with out JavaScript Eg input types of date, number etc,  including required tags.

VIDEO

Video has been brought into the browser instead of relying on flash, however be aware that you need to encode to two different formats eg web-m

if you want to support apple or MS and also h.264 (a.k.a h.666) for the others.  [Personally I’d suggest H.264 where you can for mobile use]

Subtitles are also supported with synch, and better yet as the subtitles are just text it means that they can be indexed, and styled with CSS.  Good for getting video content searchable by search engines etc.

STORAGE

You can store out side of cookies, by using the local storage API.  This is good because cookies have some limitations which can be serious for example Cookies are always sent with all requests, and can leave access across tabs.  Where as local storage, is as the name suggests stored locally.

So local storage API is provided,  and it persists.

You also have access to session storage,  which is just for the one Sesh.

HTML5 also provides a web db based on SQL,  and is supported most by browsers,  but may be replaced by webbd in the future.

APP CACHE

Give it a list of the assets your app needs, and the browser will load these into the app cache ready for when your off line.

But it is complicated, so be warned (again) and it does not always do what you think.

So ok for simple apps. but the complexities involved with server built pages can be a barrier.

FEATURES and Managing the variances between devices / computers / browsers.

As HTML 5 is not supported by all browsers especially. IE 6,7,8.  therefore its best to test with Caniuse.com which tells you what features are supported or not.

However as the better HTML5 browsers provide feature-detection it is possible to make a more graceful back out to older style solutions.

[Polyfils are a set of Java scripts that help provide HTML5 like functions for those browsers that do not have native support.  This helps to even the play ground]

There is an Eco-system of poly fils, typically this is a bit of js that fakes an HTML5 feature and the best place to look for them

The website to go to to get the polyfils is modernizr.com which provides a set of Javascript,  it will do the feature detection for you.

It also includes yepnope.js which is a good way to make the decisions regarding the features.

MISCELLANY

Responsive web design tools are available which are based on CSS media queries, allowing for the re-flowing of content based on the screen resolution and the orientation.

WebGL provides 3D graphics in the browser [but not IE] and whilst it is not good enough for many high end games,  it is fine for the majority of casual games.

An example game that has been developed by Opera, to show case the facilities of WebGL is Emberwind, [and I think it’s open sourced as well.]

Geolocation is available  in javascript,  so you can lookup where the device is.

Device orientation events including the motion is also available,  and this is key when considering good design.  some of the best apps also have different layouts / features depending on the orientation of the device.  Eg using portrait as the main data entry and landscape for browsing searching.

Real Time communications

Web sockets allow for a two way comms channel,  minimises the bandwidth and can mean you do not need to be polling the server rather the server can “push”

Server sent events allows the server to send to the browser, eg new headline, stock price etc.

Non HTML communications with servers are often considered off limits when using HTML5,  however this is not the case,  and webRTC is being developed.

The Get User Media is a part of webRTC that also includes peer to peer API, for video conferencing, and the like.

It is Open source.  Google, opera and Mozilla support it.

The file API let’s you open files on the local computer.  HTML5  checks file type before it is uploaded.

In the future there will be support for a Full screen API and for web notifications

RULES

Here are Bruce’s 5 golden rules HTML 5 development

INSPIRATION

So, if you’ve gotten this far (what were you thinking) then you might like some examples and some inspiration, and Opera maintains Shinydemos.com to do just that.