2010

02

Aug

What is HTML5?

By Daniel Keegan

HTML keyboard keysHTML5 is a new set of web development standards being rolled out by browser vendors, and taken up by web designers and developers. In fact, HTML5 comprises some improvements to XHTML, JavaScript, and CSS.

No-one owns HTML5, rather World Wide Web Consortium (W3C) bears the cross to modulate and disseminate the values. Several organisations are championing the new standards very publicly, encouraging customers and followers to embrace the new opportunities the technologies present.

There are 3 main goals in mind for the ongoing development of the web, all inextricably linked in the approach to achieving them:
•    To keep content separate from design in the project source code
•    To reduce the number of requests from a user’s machine to a web server
•    To reduce the need for “hacks” – tricky code that directly targets one or a few old/non-standard browsers

Separating content from design
In the early days of web design a page contained all the code to lay out the page and this code surrounded the text content. We’re trying to now move the layout and formatting into a different file, so that the page itself just contains elements like headings, paragraphs and objects like images, videos and form controls.

The trends that have been prevalent since the incarnation of Web 2.0, designers and developers achieved by methods that are tedious and laden with frustration – when you nailed it for one browser you often had to go through a whole new round of tweaking code to satisfy the quirky rendering of another browser.

CSS3 puts the onus on the browser to render these effects, which satisfies all three of the above mentioned goals.

Reducing server requests
As we saw above, the browser can now generate most of the compelling visual effects prevalent on the web today. Previously we relied on many image files – the top border, the drop shadow, the rounded corners, a repeating gradient – to render a glossy button. The latest browsers can render all these effects “on-the-fly” so the browser doesn’t have to download and cache a large volume of graphics files from servers.

The left button is rendered in Safari 5 without the use of any image files. The right image shows me having to create the button in a graphics program and slice it up into corners and borders ad nauseam.

There are also new ways in which visitors’ site preferences can be stored locally by the visitor’s browser. Consider my BBC homepage settings, the very personal placement of the weather at the top and the absence of anything remotely sport or celebrity related.

The site maintains a database of any changes to the users’ preferences during the browsing session. The site therefore doesn’t have to maintain a huge database of all its visitors’ preferences, and it also doesn’t have to look these preferences up on each page load.

Reduce hacky code
“Hacks” are used by designers to cater to the vast array of browsers out there, to make sure their designs are:
•    Accessible
•    User-friendly
•    Visually consistent on different browsers and platforms

The result is long-winded code, which deviates away from standards and strains the servers and user’s machines. HTML5 attempts to make the browser vendors build this functionality into their software, relieving both servers and users’ machines of a significant amount of processing work.

Fools rush in

HTML5 is still a prototype, cited for completion in 2018 (I know!). Having said that, I’ve tested a few browsers and Apple’s Safari 5 has gone the furthest toward adopting most of the proposed improvements. Apple provide a showcase on their site of how Safari handles the latest whizzy effects. Adobe have also released a free update to Dreamweaver CS5 which gets users of that software started with the improvements to HTML5. You can already start playing with the latest technologies.

Developers in-house and at agencies are already undertaking work to update sites to use the latest technologies. In light of this, the onus is (more than ever) on organisations to do away with the prehistoric Internet Explorer 6, which is not only riddled with security vulnerabilities but really hinders users’ experience on the web.

Comments

  1. Chris Mann

    There are also some nice HTML5 demos on the Microsoft site… http://ie.microsoft.com/testdrive/Default.html

  2. Chris Mann

    Good infographic for HTML5 here: http://www.focus.com/images/view/11905/

    Bad move on Apple’s part to use an "open" technology as a marketing device for a specific product (Safari). They say: "But soon other modern browsers will take advantage of these same web standards". Other browsers have done this for quite some time. Their own demos work really well on Chrome is you can get around the user agent hack that Apple have in place. Apple need to stop making Safari 5 into something "ground breaking".

Leave a Reply