With the launch of The Test Market website we have deployed our first website written in HTML5 – the new standard for creating dynamic, accessible websites and ‘webapps’. HTML is the structure of web pages and version five offers a lot of new features such as embedding video and audio without Flash, new form controls, the ability to create images and graphics with the web browser and build rich applications for computers and mobile devices. Combined with CSS3 (used for styling websites) it is going to revolutionise the web. The Test Market website takes advantage of of this emerging technology to offer a richer experience for both users and content creators.
One of the most powerful new features in HTML5 is the canvas element, this allows the web browser to draw and manipulate pictures. On The Test Market website I use it to transform a table of data into pie charts and line graphs. Why is the better than using a jpg? If you look at the screen shots below you’ll see two versions of the same page. One displaying the raw numbers, and the second the pie chart. Using some JavaScript and the canvas tag I read the table and dynamically draw the pie chart. This has two main advantages, firstly, if I want to update the graph I just change the figures using the Content Management System – no need to manually redraw any graphics – this means the client has full control. Secondly and more importantly the information is now accessible – a regular image is unsuitable for someone with a disability such as blindness – their computer is unable to read the ‘text’ pie chart when it’s placed as a jpg file. But by using a table the information can be read by screen readers and is fully accessible. This has the added advantage of being indexable by search engines such as Google.
To the right is the Content Management System, showing the raw data used for the pie chart, where it can be edited by users.
The website also takes advantage of some CSS3 features to improve the styling. The table below uses the new border-radius property to create rounded corners on the table cells. Previously images would have been required to create this effect the result being that if we wanted to make the boxes a different size or colour each image would have to be recreated. Now all we need to do is change a couple of numbers in the CSS file. Once again this means the content is fully indexable and accessible, and can be updated using the Content Management System.
As both HTML5 and CSS3 are still very new standards not all web browsers – such as the ageing and obsolete Internet Explorer 6 & 7 – support all the features. However this is not a problem as the website has been developed using a design philosophy called progressive enhancement where advanced features are displayed only if the browser supports it, and if it doesn’t the user is still provided with the complete content and all areas of the site are still accessible, albeit sometimes in a less glamours, more traditional form.
HTML5 has a lot to offer and The Test Market only scratches the surface of what is possible. At Betley Whitehorne we’re fully committed to finding the best uses for it and developing some great new websites and applications using this empowering technology, so get in touch if you want to find out more.
4 responses so far ↓
1 Ric // Jun 9, 2010 at 11:25
You can learn more about The Test Market here.
2 Steve // Jun 9, 2010 at 11:32
Great new site, Ric. HTML 5 is no longer a mystery!
3 Ric // Jun 9, 2010 at 12:42
Thank you Steve. A lot of people make websites but few truly understand the technology and how to best use it. I want to promote the importance of the technology used for making sites including the stuff that is hidden from the user. It is as, if not more, important to them than the visuals they see. It’s important sites are designed to follow the standards laid down by the governing bodies to ensure they are accessible to as many people as possible.
4 James // Jul 6, 2010 at 6:34
It’s great to see that you are utilising the new features of HTML5 in your client’s websites. They make the web a more interesting and accessible place. And being able to update charts like those using a CMS is really good!
Leave a Comment