HTML5 – not just the latest buzzword in this content crazy world
HTML5 seems to have become the new Web 2.0 and yet many businesses and consumers still don’t understand what it means or how it can benefit them. However, in the year that content is expected to rein supreme, ignoring one of the biggest advances in digital marketing since HTML was invented (back in 1990) is not an option. Commonly used to refer to a combination of new web technologies including CSS3, JavaScript, Canvas and SVG (Scalable Vector Graphics), it is understandable that many don’t actually understand what HTML5 is. But as the glue that holds a host of technologies together, HTML5 will be pivotal to offering consumers the experience they demand in 2013, particularly when it comes to interactive content.
Video in control of the browser
HTML has traditionally been very limited in enabling full multimedia and it’s only now, with HTML5, that video and animation have become properly supported. Video is once again in control of the browser (not the other way around) so there is no need to worry about which plug-in needs to be installed. HTML5 supports video natively ‘right out of the box’ – it all just works seamlessly, no matter which device or browser, video will play in the best quality available.
Even if a brand doesn’t offer video content, consumers now expect a certain level of animation and interaction from the site. Historically this has meant incorporating a plug-in, such as Flash, which often disrupts rather than enhances the consumer’s experience. However, with the advent of HTML5, brands can now incorporate enhanced graphics and even 3D graphics directly into their site. The result: an experience akin to many of the games consoles which are, arguably, leading the way when it comes to offering a first class visual experience.
Creating compelling content
The benefits when it comes to the visual experience are not just limited to video content. HTML5 offers designers more layout options, more font styles and more scope to make engaging content. And, with browsers now displaying content with automatic pagination according to the device the site is being viewed on, the limits on what can be achieved online are only set by the brand’s imagination. This is key considering the huge shift to mobile web browsing we’ve seen over the past few years.
Taking brands mobile
Most of the improvements with HTML5 have a direct impact on mobile websites. Data requirements can be reduced by not only using local storage, but also because images are built using CSS3 and webfonts. Page content can now be responsive to work best on whatever the screen size and device it is being viewed on. And on top of this, HTML5 now extends to interacting with hardware, gaining access to GPS, accelerometers and cameras as well as speech input for forms. All of these improve the customer experience, making it easier to get to the information we require in the shortest time whilst adding value to our experience of the brand.
Building one “thing” and having it work on many devices at once intuitively has been a pipe-dream for so long but HTML5 is making it a reality. It is vastly more cost effective for businesses than developing bespoke native apps across each platform they engage consumers through, and provides the higher quality, consistent experience that consumers are crying out for.
With the increasing uptake of 4G on the cards this year, interactive content is going to be a key battleground for brands looking to engage and retain customers. HTML5 can simplify this process so isn’t it time that more brands start looking at HTML5?
Richard Carter, Digital Director at Bolser.
Tech Explainer: Why HTML5 is changing web design for the better
HTML5 promises major changes in how we build digital products. Major news organisations including The Guardian and The Financial Times are embracing it to make more beautiful and more easily distributed websites and apps. But what exactly is it and why does it matter?
According to Martin Belam, founder of digital consultancy Emblem and former user experience lead at The Guardian, the key point is that building sites in HTML5 now means it will be easier to distribute your content in the future.
"The old HTML makes it hard to get content to go cross platforms, whereas if you are marking everything up well in HTML5 you will be ready for every shift in media consumption taking place in the next ten years," he says.
Sounds exciting, but what's going on?
What is it?
HTML is the language used to build websites. It consists of "tags" which tell a web browser, such as Chrome or Internet Explorer, how to display a page in illustrate elements such as text, pictures and so on.Two examples:
-- Formatting content: Writing the tag <b> before piece of text followed by </b> after it would put everything between the two tags in bold.
-- Pulling in content: If you write tag <img src=""> then enter in the location of an image on a server or between the quotation marks, the tag would pull in the picture and display it on the page.
If you want to see how this works on a chosen website, just press CTRL and U (if you're using a PC - it's ALT-CMD-U on a Mac) and you'll be shown all the HTML behind the page you are looking at.
The rules for the previous version of HTML were written more than a decade ago. HTML5 introduces a new set of tags designed to make it easier to handle multimedia elements becoming increasingly common on the web, add more additional data to content, format content on a site more effectively and ensure content is rendered more effectively across devices.
What does it do?
Most of the new tags included in HTML5 can be divided into three categories, multimedia, formating and semantic markup.-- Multimedia: Much of the hype around HTML5 has focused on its ability to bypass Flash, the Adobe-made software used by many publishers to run animated or video content which is notorious for using up computer memory and crashing. It provides simple tags such as <audio> or <video> which tell a browser what it's meant to do with the source file. (Adobe killed off Flash for mobile in 2011, leaving the door wide open for HTML-based models.)
According to Belam, HTML5 will also allow publications to do things visually that previously were impossible.
"For one client I work with, the typography and the visual aspect of their print publication has been very important, but they’ve never been able to replicate on the web," he says.
"But with the maturing of HTML5 and web fonts, suddenly they are looking at being able to do something much closer."
Interactive visualisations of data and stories - which are increasingly used by the likes of the FT, The Guardian, The New York Times, Wall Street Journal and Reuters - are now much easier to integrate using HTML5.
-- Formatting: New functions add new ways of arranging or modifying content on a page. Highlighted text; the ability to indicate when text has a particular purpose, including picture captions and collapsable information displayed by a user action are all useful new features.
While much of the hype around HTML5 has focussed on the aesthetic impact it will have and the multiplatform responsive design elements, its formatting functions will become an important part of how journalists display content.
-- Semantic: The aspect of HTML5 which will get the least attention from consumers, but could be hugely significant for publishing, are the semantic elements. Publishers can add information about a piece of content that can be read by devices and software.
So metadata tags can more easily be added to articles providing a timestamp can understand. Getting metadata right is one the key parts of product design these days and repurposing content into different products/platforms.
Why is it important?
HTML5 should allow web browsers on any device to interpret how to display content - including videos - in the most appropriate way for that device. This is about not separating mobile sites from desktop and not trying in vain to someone to get someone reading your content on a 3in screen.At least, that's the theory. In practice, a level of optimisation of how your site displays on different screen sizes is likely to be required. It will take a couple of years at least before HTML5 allows publishers to build a site that will smoothly work across all devices without much tweaking.
The ability to make more appealing websites shouldn't be underestimated either. Delivering content in a beautiful way is seen by many publishers as a way to justify charging for it on smartphones and tablets. HTML5 makes it easier to produce more complex and interactive designs.
But perhaps the most interesting element of HTML5 is what it could enable a little further down the line as more devices are connected to the internet. The semantic information attached to content could be used to deliver that information to devices such as web-connected ovens, fridges or washing machines.
Implementation
The good thing is moving to HTML5 won't involve training everyone in the company how to use tags and code pages. What it doe mean however is that you will need developers to redesign your pages and content management system, creating templates for pages in the process.For more detail on some of the tags that will be relevant to journalists, Belam has produced a blog post on HTML 5 for Journalists here.
