One day many of the apps you see now in the app-stores will be available as cross platform web apps supported by all devices with user experience and performance comparable to that of the native application. bemoko are making this happen.

So what is new in HTML5?

… and how is that going to elevate the web experience for the end-user?

HTML5 brings a wealth of enhancements that can elevate the standard and experience of web applications. Functions include:

1. Video and audio support
2. Canvas for enhanced graphics
3. Geolocation API
4. Local data storage
5. Context menus
6. Drag & drop
7. Data grids – structured editable data sets
8. New semantic elements, e.g. <section> and <article>

Offline and Synching Data

A key benefit of native applications (desktop or mobile) is the ability to interact with the application whilst you are offline. The HTML5 offline support allows web applications to achieve this. Google have demonstrated their support for the HTML5 offline support by announcing that they are no longer supporting Google Gears – an early solution for for offline web access – and are backing the HTML5 offline APIs and along with strong support from the major browsers is an indication that this API will mature and become an essential foundation for the web.

Offline storage will be an essential ingredient of any web application that requests information from a user and delivers essential information that a user would want to access anywhere, anytime. For example when a user fills in a forms, or edits some data it is an important aspect of the user experience that the information entered is not lost and causing frustration. With HTML5 changes can be stored locally in the browser and synced with the main server when a connection is re-estabilished. Information applications – such as travel guides – also provide much more value if you can access information quickly and reliably, even if you are in the tube, on a plane, or in a foreign country on an expensive data plan.

Native Media Support

HTML5 brings native media support to the browsers. There has been much fragmentation in the format of video and audio that is required for web delivery. Historically this also came with a lack of control for how the media will be displayed (e.g. embedding in a page) and the requirement for extra plugins. This makes it more costly for service providers to deliver media and makes media experiences less than seamless for the end user. By standardising the media support within a web environment this fragmentation can be brought under control, making video deliverable easily accessible to all and make experience more pleasurable for the user.

There is still the ongoing battle between the Ogg and H.264 video codecs – with H.264 bringing improved video delivery, but in a propriety format. With strong and passionate arguments on either side. H.264 is looking like it will be the victor, but only time will really tell. (blog update : see update below on video support why this is not so certain). Standardisation brings with it significant performance benefits with device manufactures bringing standard video codec processing into hardware instead of software which can lead to over twice as much battery life.

Geolocation API

The Geolocation API already brings with it the possibility for the user to share their location. By design, this is a user choice on a site-by-site basis – choosing to share their location when they feel they’ll benefit and when they trust the service provider. This opens web sites up to the opportunity of location base services, such as finding people or places near by, combined with mapping services this can all help to create a more pleasurable experience with a service provider – saving time and shoe wear.

Canvas, drawing and graphics

The canvas features of HTML5 bring enhanced control over dynamic graphics, providing the opportunity to add a new dimension and interactivity to web sites. This provides a foundation for the popular javascript languages, for example jQuery and Prototype, to deliver ease-of-use tools bringing this creative power to even the novice web designer. It will however take some time (if at all) before the HTML5 canvas functions reaches the capabilities of Flash. Even with Apple’s objections to Flash, Flash will still provide much value to the web experience for some time to come.

HTML5 Apps vs Native Apps

Will HTML5 apps become more like desktops apps? In some respects they will surpass them – the idea of storage of your data in a secure cloud that that is accessible everywhere, backed up for you, accessible across multiple platforms and with an application that is always kept up to date for you will in many cases make the idea of a local installed piece of software seem quite limited. HTML5 will become the defacto standard for delivering cross-platfrom applications. The dedication to HTML5 by the large players, including Google, Apple and Microsoft , is a great example of the big players aligning and demonstrating the importance of getting HTML5 right.

HTML5 mobile apps

All-in-all, life will be become more exciting for the web developer. HTML5 is relevant for web developers today. Although HTML5 is still in draft, many features of HTML5 – such as geolocation and offline support – are already available in leading major browsers. This is especially true for recent mobiles such as the iPhone and Android platforms which all benefit from the improved user experience that HTML5 can bring.

How does this impact cross platform delivery though? Even as HTML5 matures different platforms will need variations on the UI. For example a TV user interface will always be different to a touch screen user interface. The challenge is also made more apparent when you consider that there’ll always be evolution in web capabilities. It’s natural for manufacturers and consumers to demand innovation and continue to push the boundaries.

bemokoLive cracks this problem elegantly and allows you to control the user experience across multiple channels efficiently – delivering to the recent innovations, the standard majority and lagging legacy environments – all from the same source.

Try bemoko now – download here and be up and running in a few minutes.

Further Reading

If you want to read more about why HTML5 is changing the game take a look at the following articles from the industry experts:

• “Rather than use Flash, Apple has adopted HTML5, CSS and JavaScript – all open standards. Apple’s mobile devices all ship with high performance, low power implementations of these open standards. HTML5, the new web standard that has been adopted by Apple, Google and many others, lets web developers create advanced graphics, typography, animations and transitions without relying on third party browser plug-ins” Apple (Steve Jobs) – Thoughts on Flash
• “The new crop of HTML5 web browsers are capable of some pretty amazing things, and several of our engineers decided to take some 20% time to see how far we could push them. The result? An HTML5 port of Id’s Quake II game engine!” Google Web Toolkit blog – Look ma, no plugin!
• “The future of the web is HTML5. Microsoft is deeply engaged in the HTML5 process with the W3C. HTML5 will be very important in advancing rich, interactive web applications and site design. The HTML5 specification describes video support without specifying a particular video format. We think H.264 is an excellent format. In its HTML5 support, IE9 will support playback of H.264 video only.” Microsoft blogs – HTML5 Video
• “But making iPhone apps means going through Apple’s lengthy approval process and dealing with some hardcore development. There’s a way round this, though, by offering something via a mobile browser using HTML5.” NMA

blog update – 2nd May 2010 : video, H.264, Ogg and VP8 support

The article Behind the open codec FUD attack make’s the case that Mozilla is unlikely to adopt H.264 since it cannot afford the $5million license fee. Google’s VP8 format may provide the compromise solution.

We at bemoko believe that you need to design for mobile – but that does not necessarily mean a lot of effort. It means being aware of the functions that a mobile user benefits from, creating a UI that looks good on their choice of phone and a general rounded well delivered end-to-end user experience.

Both these desires – the desire for an efficient delivery, driven from their existing web site investment and the desire to create a focused, relevant and elegant mobile UX – can be met using the bemoko approach.

Take a read of a recent article on our bemoko wiki – Semantically Tuning a Web Site – to give you an idea of how we can use your existing web site today to deliver a “designed for mobile” user experience, without having to follow the generic transcoding approach or blindly squeezing your PC web site onto a mobile. Since this mobile site is driven by your web site, if you make updates to you web site the mobile web site will follow. We’ll shortly be releasing an article on how you can deploy bemokoLive to support this PC website transformation approach as well as a few case studies of some people who were pretty happy with what they saw. Give us a call if you want to know more and we’ll get a live demonstration up for you.

There are many different software solutions around which will allow you to deliver markup to the myriad of devices currently available. Development for traditional, HTML based, websites has always been made more difficult as the different browsers interpret the markup in different ways and there are many tweaks needed to get the site to display correctly on all browsers. Interpretation of the standards, particularly CSS, seems to vary immensely (especially when some people, large companies based in Redmond for instance, seem to invent their own standards!).

This problem is multiplied many times over for mobile site development. Device independent rendering software solves a lot of the issues of screen size, memory limitations, paging etc – but what appears to be correct markup renders very differently on different devices. In my previous job, at a company that made device independent software, we had to make a large number of specific modules for certain devices to get round some of the stranger problems, one example that stands out is a device that would only display a whitespace after an anchor if you put three nbsp’s followed by a space.

Every device (even from the same manufacturer) seems to have different quirks displaying the markup but most of the problems occur in the different CSS implementations. Manufacturers either intentionally leave bits of the spec out or implement it incorrectly.

So, once you have your markup correct you have to start testing on a large number of devices to ensure your new big idea is displayed correctly. What’s the best way forward? There are several options:

• Buy every device and test each one
• Use emulators
• Use a service such as DeviceAnywhere
• Find a cheap way to hire lots of people to test on their own phones
• Automate the testing process
• Ignore it and hope everything is OK

Clearly buying every device is not an option given the number that exist and the rate of change. Normally devices are broken down into 5 or so different categories based on capability which gives a smaller sample size, but this can still be a large number of devices.

Emulators have their uses, but are not adequate for testing. Most of the emulators I have used are not accurate enough to test on and I have seen some that let markup through that crashes the real device.

Services such as DeviceAnywhere provide the actual devices to test on through a web interface, this is the best way of getting to a large number of devices but it is still time consuming to test on them all, and it can get expensive. There is also limited coverage at the moment so you can only test for a limited number of geographies. For a good overview of all the services available hop over to an article by an ex-colleague of mine, Tarek

If you know a lot of students you might be able to get some good testing coverage, but this would be tough to organise. A new service could address this problem, Mob4hire is like a social testing network which could be useful. There are also a number of options for this in the Far East, but network coverage could be an issue.

The holy grail here would be automating the testing process, but this is certainly a far off, if not impossible dream. You can automate testing the markup and this is useful for regression testing but you cannot automate looking at the display on the phone to check it.

If you think ignoring the problem and hoping it will be OK is the way forward, then you are probably in the wrong industry.

I would like to have been more positive in my first blog for bemoko and to reward you for getting this far with the answer to testing on mobile devices. Unfortunately I can’t provide that answer but bemoko has a lot of experience in testing sites that have been produced and, while it’s not perfect, a good strategy can be built to give a decent testing coverage using a mixture of the methods I have outlined above.