Quick introduction to HTML5 and CSS3?

HTML5 is the next evolutionary step in HTML. Up to now, and up to HTML4, it has been a very static affair but HTML5 allows you to do more advanced things with the user interface that had previously only been possible using Flash.

It’s now available on all the latest versions of Internet Explorer (IE9), Firefox, Chrome and Safari (probably other browsers too but these are the main ones), but won’t work on IE6, IE7 or IE8. Backward compatibility is something we discuss in more detail further down in this post.

One of the main uses of Flash on websites (in the past and up to the present day) has been to stream movies, which flash can do very effectively. HTML5 though now allows for video streaming to be done natively in the web browser without any need for Flash, and this alone is why HTML5 has been mooted as being the ‘Flash killer’.

However, HTML5 will allow for much more ‘Flash-type functionality’ than just video streaming, it also allows for moving things around on-screen, creating all sorts of visual effects, and really allows for replacing much of what Flash can offer.

The added benefit is that HTML5 is far more search engine friendly than flash could be, and it will also work on iPhones and iPads, so it would appear to have many advantages without any of the disadvantages of Flash. Undoubtedly Flash will still have a use, and for online games and other rich interfaces that have lots of user interaction, Flash will still be the only option, but HTML5 will have many uses and over time will likely lead to many (if not most) websites being a little more visually stimulating and interactive than websites are now. That’s good news for designers as it provides a greater range of options for you to consider, and means there’s more reason for clients to require good designers who can create interesting websites that still retain good design and good usability too.

One ongoing problem is having to support older browsers (yes, we're talking about you in particular IE6/IE7/IE8!), and of course all the new tags in HTML5 are not understood by these older browsers, but fortunately there are solutions out there that convert these new tags into a format that older browsers can understand, meaning we are able to freely use all the latest tags and not worry (too much) about what the older browsers are going to do with it - of course we still have to test, but that's inevitable.

The best option we have found for dealing with older browsers can be found here: html5shiv to handle HTML5 in previous versions of Internet Explorer

If you would like some HTML5 examples, take a look at the following links:

http://studio.html5rocks.com/
https://demos.mozilla.org/en-US

CSS3 provides many more styling options, which have either been achieved in other ways on webpages previously, or simply could not have been done previously.

The sorts of things that are possible now with CSS3 include:

1. Shadow effects;
2. Rounded corners;
3. Gradients;
4. Transforms;
5. Transitions;
6. Multi-column layouts;
7. Multiple backgrounds;
8. Opacity.

There are again differences in how much different browsers support CSS3, IE browsers prior to IE9 don't support them at all, so workarounds have to be found to either apply these same visual effects by other means, or to simply take the decision that these older browsers will appear differently.

It will take time for all these new HTML5 and CSS3 features to become an integral part of most websites, and in the same way as Javascript based UI features, it's important that they are used in an appropriate way rather than using them simply because we can - usability is key so these features need to be used in appropriate and useful ways without going over the top.

We look forward to seeing these features on more websites in the coming months and years.