First two in a series of HTML5 expectations

The first couple of expectations and assumptions regarding HTML5. Please let me have your comments and see whether these ring true …

1 – HTML5 works the same in all browsers

HTML5 is not yet a ratified W3C standard, however each of the major browsers already have support for the bulk of HTML5’s features. There are plenty of compatibility matrixes available if you need to find out what works where (here’s one at Wikipedia), so I’m not going to worry about that here. However HTML5 compatibility only describes (approximately) one third of the whole picture of what needs to be built. Javascript and CSS3 are the two other cornerstones of the technologies needed to build a modern web interface*, and both of these have their own varying levels of support in the major browsers, complicating things further. So, if you want to build one web site that works in several browsers, there are two possible approaches :

  1. Cut the features of the web site to a bare minimum so that what you build uses only the generally supported features of HTML5/Javascript/CSS3 that work in all browsers. This will result in something that looks very generic/plain/old-fashioned (take your pick) but will probably do the job from a functional point of view.
  2. Plan to allow your designers and developers an extra 10%-15% for every additional browser that you add to the list to be supported. They will spend this time working around different features and variations in the HTML5/Javascript/CSS3 support for each browser.

Alternatively if cross-browser support is less important you could target a single browser, or choose a couple which are widely used across your target user base. Chrome and Firefox might be the two, Opera could be a consideration, Safari if you have Mac users, while Internet Explorer – in any incarnation  still considered something of an outsider – will probably pickup with the spread of Windows 8 and IE 10.

There’s a great score card for all browsers here, showing that Maxthon 4 is the winner in the HTML5 stakes right now (and I’ve got to admit I’ve never heard of it)

*There are several other lesser-used technologies included and referenced by HTML5, such as SVG, MathML, Ruby …

2 – HTML5 works the same on all devices

A common statement from a client who is looking to build an app or web-app is

“We only want to build one thing, and we want it to work the same on everything”

This question is driven from the clients (usually anecdotal) understanding that native apps need to be written explicitly for a given single device, and the following expectation that simply building it in HTML(5) will magically make it work on everything, everywhere.

If you think about it for a moment, it’s actually a big ask for a web page (and all of its embedded media and images) that are designed for a 15″ screen to shrink down to a 2.5″ screen, and every other screen size in between, without some serious considerations about the effect on the usability and features per device, not to mention the fact that the smartphone user almost definitely wants different things from a website when they are walking around town vs. in front of their laptop in the office, and would want a different experience again on their web TV.

A simple way to think about this usability difference per-device is to consider ‘hover’; A common bit of design fluff is that some parts of a web page change when you hover your mouse pointer over them – maybe the colour changes or something animates …

Now think about how hover works on a tablet – that’s right, there’s no mouse pointer and no hovering – when your finger is not on the screen, the browser doesn’t know where it is – therefore your designers and developers need to cater for this when building the web app. Either they don’t use ‘hover’ at all for any device, or you design and code to cater for the devices where the concept of ‘hover’ exists, and those where it doesn’t.

The current answer to the most obvious of device differences – screen size – is known as Responsive Design, which is a way of scaling a given page up and down so it is fit for the size of the screen on the device. Responsive Design is a great idea, and can work really well, but it involves a lot of complex design decisions (per device-size) up-front, followed by a highly complex HTML5/Javascript/CSS3 coding exercise. Of course, frameworks and tools are springing up to meet this complexity, but be prepared for 5x effort when building for responsive design vs. a single device and browser.

More to come on this topic over the next few days.

Advertisements

3 thoughts on “First two in a series of HTML5 expectations

  1. […] HTML5 works the same in all browsers […]

  2. […] Continuing the story on HTML5 and why it’s ‘good enough’ for enterprise, here are two more commonly heard assumptions regarding building a web app using HTML5. […]

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: