Most modern browsers now have fairly good support for many HTML5 properties but what are the new features and their advantages over current methods?

New semantic Markup

Coding is much more minimal and neater with meaningful tags have been introduced to structure a document. For example, a basic WordPress blog can be laid out using the following:
<header> – for introductory information such as a logo and description.
<nav> – for primary navigation.
<article> – for main content such as a blog post.
<aside> – for information related to the main content such as a sidebar.
<footer> – to contain secondary navigation, copyright notice etc.

Semantic markup has many benefits, mainly because it allows programs to properly recognise the information in your pages and make decisions based on it. It can aid huge improvements in such things as search engine optimisation and accessibility.

Resources
A List Apart – Semanatics in HTML5

Video

HTML5 supports video playback without the need for a plug in, the result of which is a format that is much lighter on bandwidth and the CPU. Videos play instantly and users can jump to anywhere in the video without buffering. In addition videos can be manipulated inline using JavaScript and CSS.

Resources
YouTube HTML5 Video Player
FlashBlog – HTML5 and Flash video

Canvas

Some herald canvas as the death of Flash since it can be used to represent elements visually in your browser and generally go beyond the limitations of CSS. It can be utilised, for example to draw diagrams, charts and animations, although, the possibilities are endless. In this example Canvas and Javascript have been used to create a game of Astroids.

Resources
How to Draw with HTML 5 Canvas
HTML5 Canvas and Audio Experiment

Offline Storage

This allows offline storage of data within the web browser, essentially making it possible to have, for example, offline versions of Gmail, Calendar & Docs. These developments have lead Google to ditch their Gears technology and should become a staple in their forthcoming Chrome OS.

Forms

The new web forms allows you to do validation, placeholder text and a many other features much more simpler and semantic way and without the use of Javascript. Other new “built in” elements include date pickers and number sliders.

Resources
HTML5 Forms Demo
A form of madness

Geolocation

Allows access to a users geographical position through the web browser and without the need for GPS hardware as found in smart phones. This can create a much more personalised experience for the user based on their location, for example, automatically locating your nearest bank branch or nearest italian restaurant without having to input a postcode.

Resources
HTML5 geolocation demo – (requires FF)

It is probably obvious that this summary barely scratches the surface of the full capabilities of HTML5 and it will be a good many years before we see this as a passed standard. With this in mind, using its features should be done with a deal of caution but this should not stop Web Developers from experimenting and implementing where possible.

HTML5 gives us a web without proprietary plugins such as Flash and Silverlight and drastically improves the experience for the user in terms of speed, usability and accessibility. Huge web companies such as Google and Apple have put real leverage behind HTML 5 and will this will likely play an important role in making it ubiquitous in the near future.

A portfolio site for Film and Travel Writer Jonny Cooper

The theme is based around a minimal, magazine style which brings the focus to his journalistic, writing style, film skills.

The aim of the site is to build a platform in which to establish a strong brand and name in the world of journalism whilst showcasing his work as a filmaker and writer. The site will also be used as a resource for people interested in film or travel to return to.

* Role: Design/UI, HTML, CSS, Javascript

Visit Site

A showcase site for a Villa in Malaga, Spain

The feel of this site is based around a warm, hispanic, colour scheme with an emphasis on a homely, simple, slightly rustic style. I used a watercolour painting metaphor to achieve this, incorporating a Andalucian landscape watercolour on a paper texture background.

The purpose of the site is to attract bookings for the villa all year round by using engaging photography and descriptive copy. The site was built to appeal to a luxury market whilst still remaining affordable to the majority.

* Role: Design/UI, XHTML, CSS, Javascript

Visit Site

Re-design and font-end build of global hostel booking web site.

The aim of the HostelBookers rebuild was to build a faster, more efficient service whilst reestablishing a brand within the travel industry. This lead to an increase in traffic and conversions.

The design was based around improving usability, accessibility and organising huge amounts of content into an easily digestible format.

Many new features were incorporated including a new keyword search mechanism, AJAX functionality such as search filters and form validation and Google Maps integration.

The redesign also involved the creation of a travel guides section, which needed to be easily navigable and use the content and photography to provide an engaging experience whilst driving traffic back to the main site.

* Role: Design/UI, XHTML, CSS, Javascript

Visit Site

The Official HostelBookers Blog

The main look and feel of this site was to be a less corporate, more friendly and engaging version of HostelBookers, attracting backpackers from all over the world.

Driven by content and photography, the site uses a fairly clean interface where the content is the focal point. There were also many social networking features built into the site in an effort to create a community and readership around the blog. The overall purpose of the blog is to drive traffic back to the main HostelBookers site and generate traffic through SEO.

* Role: Design/UI, HTML, CSS, JS, PHP, MYSQL

Visit Site

Informal Shakespearean Literature Blog

The theme is kept with the popular main site, using rustic, vintage styles.

The aim of the site is provide a resource to people interested in, or
studying Shakespearean literature.

* Role: Design/UI, HTML, CSS, JS, PHP, MYSQL

Visit Site

Blog site linked to Boutique and Luxury hotel site Travel intelligence

The blog attracts a fairly high brow readership so the look and feel needed to match this and the writing style and themes. It also crosses over the brand from the TI.com site.

* Role: Design/UI, HTML, CSS, PHP

Visit Site

A portfolio site for London-based Film Artist Natasha Barber

It was important to reflect Natashas personality by using clean and feminine styles and colours.

The site showcases the work from an artistic viewpoint with short film clips and sketching slideshows.

* Role: Design/UI, XHTML, CSS, Javascript, Flash

Visit Site

* Role: Design/UI, XHTML