Five Reasons Why HTML5 Rocks For Mobile

Andrew Holden is co-founder and Chief Experience Officer (CXO) at Weever Apps. Andrew is a web development expert and frequently writes about mobile visitor engagement and online best practices.

HTML5 is everywhere this year!  Google supports it.  Facebook’s all over it.  It’s clear that HTML5 is the future for mobile.

Ok, that’s cool. So what is HTML5 and what does it do for mobile?

Great question! HTML5 is the latest version of HTML – the standard for presenting and structuring content on the World Wide Web.  One of the great advancements with HTML5 is that it allows websites to function like mobile apps by offering design capability that is mobile friendly, as opposed to laptop/desktop friendly.  This means websites can be designed to fit mobile screens and have a user interface that is easy to control and highly functional with a touch screen. The term used for this technology is “web app”.

For practical purposes, there are two ways to implement a “web app”.

  1. Websites can be designed so that they can scale from a desktop monitor down to a smart phone screen.
  2. An independent web app can be designed, which will open when a website is accessed on a mobile device.

This new approach of presenting mobile content is breaking down barriers – including time, money, and the ubiquitous App Store.  The doors are now being opened to individuals and small business.  Big players are also gravitating to this alternative as they recognize the benefits.

Here are the facts about the mobile market:  50% of all local searches are now on mobile devices.  This is largely due to smart phone ownership surpassing cell phone ownership in the US and other countries.  Despite this notable adoption, most businesses don’t have any mobile solution of any kind – let alone the subsequent marketing benefits.  Unfortunately, traditional app development is just too time-consuming, expensive, and technical.

Firefox and HTML5

Earlier this evening, I was reminded of just how primitive the HTML5 support was in Firefox 3.5/3.6. While we have seen three major version releases since 3.5, it was actually still the latest version of Firefox less than 6 months ago (and was that way for almost 2 years). Therefore, Firefox 3.5.x still holds a decent amount of market share (probably as much as, if not more than IE6 did a year or two ago). Looking at a handful of websites for which I have analytics data, versions of Firefox prior to 4 still accounted for anywhere between 2% and 15% of the total visits to those sites last month. With all of that information, it’s probably still important to make sure your sites work in versions of Firefox as far back as 3.5.

There are two somewhat major gotchas in the way Firefox 3.x handled HTML5. The first is easily fixed with a few lines of CSS. The second can only really be fixed if you rewrite some of your HTML.

Some HTML5 “Features” You Might Not Expect

As we continue to transition whole-hog into HTML5 with new Web development, there are a few things you might need to know before deciding how to handle certain situations. I have discovered two somewhat major gotchas over the last few months that really made me reconsider my usage of the new technology.

While articles, asides, headers, footers, etc. are a fantastic way to introduce semantics into your page designs, there are a few elements and attributes that might not do quite what you’d expect.

HTML Presentations with Opera

Because Opera is not an extremely popular browser, most developers probably aren’t aware of one of its greatest features: Opera Show mode. Opera Show mode is the official name of the full screen mode for Opera (technically, it’s only called Opera Show when a projection media style sheet – discussed below – is present); and it brings with it a great possibility.

More than two years ago, Opera added support for the projection media mode in CSS. Whenever the browser is expanded to full screen mode, it activates the projection media, allowing you to apply a completely different stylesheet to the full screen page than you have in other settings.

Comments in HTML5

As we’ve discussed on this blog in the past, HTML5 introduces a lot of new elements that are intended specifically to imply semantic information. One of the elements being introduced is the <article> element.

For the most part, the <article> element is supposed to denote a block of information that can stand on its own (essentially, the main content of the page or post). When developing a blog template. The spec currently describes the <article> element with the following verbiage:

What Is HTML5?

There’s been a lot of talk about HTML5 and all of the new elements it introduces. Forms will be built and used completely differently, the structure of documents will be much more semantic, and new features will be available to website and application developers.

But, what are these semantic elements? Are they really anything new? Will they change the structure of your document at all? The simple answer is “no”. The new elements, for the most part, just make your documents easier to parse and understand (for machines and for people using assistive technology). Very few of the new elements are really all that new; they’re just the same old elements with new names for new purposes.

Pages: