It might be still evolving, but HTML5 is already synonymous with media-rich, browser-native interactivity that wows where it counts. So how do you exploit its functionality?
Featuring evocative illustrations by Owen Freeman, Ain’t Nothing But A Movie is an interactive graphic novel produced by Jocabola for Granta magazine. Each scene was presented as a 2.5D composition using HTML5 Canvas elements – with limited resources, it relied heavily on script libraries from Mr.doob, including Three.js to move the virtual camera
Simon Lindsay, interactive developer at New York-based agency Firstborn, insists that while there’s often another tool that can do the same job, context is everything: “HTML5 is more effective when SEO is a priority and when the audience is likely to be using a modern browser,” he says, having worked on campaigns for Aflac, Wrigley and SoBe. “The main alternatives are Flash and Silverlight when a rich user experience is required.”
Franois Le Pichon is founder and creative director of Parisian web design studio Steaw, whose clients include Microsoft, Louis Vuitton and Ben & Jerry’s. He believes that HTML5 is particularly powerful for creating interactive magazines. “Flash is optimised more for animation than displaying content,” he argues. “HTML5 gives perfect content rendering, to which we could add cool and beautiful animation and transitions for a better, unique user experience.”
Seamless integration with CSS3 is another bonus for Le Pichon: “The art direction of an HTML website used to be limited by technical possibilities,” he recalls. “Now we’re more free to create outstanding user interfaces. We can go deep into details, such as enhanced rollover effects, and Canvas enables us to render very innovative things.”
When combined with CSS3, HTML5 is particularly strong for animation, and tools such as Adobe Edge will only make this task easier. Le Pichon is content with a simple text editor, however – for now at least.
Of course, no matter how stripped-back the tools used to create the code are, HTML5’s advanced functionality can send ill-equipped browsers into a tailspin. “It’s something that we need to weigh up at the start of the process,” admits Lins Karnes, UK managing director and executive producer at B-Reel. Besides its seminal Arcade Fire project, the agency works closely with leading ad agencies around the world on campaigns for clients including Nike, Honda and Google.
“We always look to push the boundaries of what’s possible and continually seek out new and interesting ways to deliver a message,” he explains. “Interaction and storytelling play a huge part in our work, and we push hard to achieve a creative polish across all we do.”
Technology plays a pivotal role too, of course, and Karnes points out that as many browsers struggle to meet the same standards, it becomes a constant trade-off that can slow the progress of genuinely boundary-pushing work: “Innovation can’t be achieved if you constantly cater for browsers that don’t support the latest features,” he says.
One possible approach, for Karnes, is to go all-out to push the most suitable browser to its limits and, in doing so, raise the bar and encourage the other browsers to improve accordingly. Digit’s Derrick Holmes advises caution here, however: “Innovation is pointless if half the users can’t use it,” he reasons. “Most people browsing at work are unlikely to have modern browsers and will have little or no administration privileges to install one. But there are tools and methods to ensure that everyone can have access to the good stuff.”
Interactive movie 3 Dreams of Black lets you create and share your own 3D landscapes to navigate through as part of the experience
Digit does however advocate targeted innovations on niche audiences: “Progressive enhancement should be used by targeting specific functionality, such as drag-and-drop, as an enhancement over the traditional form-and-upload UI,” is Holmes’ example – although, of course, it’s crucial to have an alternative in place for those whose browsers can’t support it.
This is a process that Simon Lindsay describes as “graceful degradation” – providing a downgraded version of the website’s functionality ready to kick in as and when required. “At Firstborn we usually provide a full user experience when using a modern browser, such as Safari, Chrome or Firefox, with fall-back compatibility for other browsers,” he explains.
“At the moment, few sites can justify targeting a specific browser for the sake of innovation,” Lindsay goes on. “Support for CSS3’s translate and transform functions has been a major constraint, for instance, and we need to fall back to JavaScript if it’s not supported. Video’s another constraint: using three different file types (OGV, WebM and MP4) is painful and unnecessary. A fall-back to Flash video is usually required, unless you’re developing for mobile.”
Of course, HTML5 is still under development, and so designers and developers must be constantly evolving and learning to get the most from its capabilities. Lindsay has been experimenting with it for a little over a year now, but he first tackled the heady mix of HTML, JavaScript and CSS some six years ago. “The browser manufacturers’ support for confirmed and proposed HTML5 features is constantly improving with each release cycle,” he observes.
Karnes agrees: “When we first started with HTML and JavaScript, we couldn’t even run the most simple scripts without the browser stalling for a little while,” he recalls. “Performance has definitely improved and the new features of HTML5 – media playback, and dynamically generated graphics – really open new doors that were only available before by using plugins.”
Stink has been experimenting with HTML5 for a couple of years, and using it in production for the past year. “Technically it hasn’t changed much, but the perception of it has,” concludes Hart. “The ubiquity of iOS, Android and Chrome helped to push its use and we’ve had clients ask specifically for HTML5 video or Canvas. Some day we’ll have native webcam access and more control over media integration – for now, we have Flash for that.”
