Working with HTML5
by Simon Bisson
Is it time to switch? Simon Bisson finds out what HTML5 can do for your applications.
HardCopy Issue: 59 | Published: February 1, 2013
The Web is an important part of any developer’s toolkit, providing a blank canvas for desktop, mobile and tablet user interfaces. It’s a lingua franca that crosses operating system divides and offers the nearest thing to a write-once, run-everywhere development model we have. At the end of December 2012, the latest version of the core Web standards, namely HTML5, became a World Wide Web Consortium (W3C) Candidate Recommendation, the last step on its long road to standardisation.
It’s not surprising it’s taken this long. What we call HTML5 isn’t one specification; it’s a whole raft of different technologies that need the support of companies across the industry. Things are made more complex by the different corporate philosophies of browser developers. What works for Microsoft may not for Mozilla, while Apple and Google could have a completely different set of positions. In the end though it’s the user that matters, and what’s being delivered in HTML5 is a set of standards that should form the basis of the next decade of the Web.
One of the most important HTML5 features comes from CSS3. CSS Media Queries allow a page to quickly get details of the capabilities of the rendering browser so that content can be adapted and formatted on the fly. It’s an approach that’s easier to use than browser detection, and more suited to working with ever-changing browser user agent strings. Responsive Web designs built on Media Queries are an effective way of delivering content and applications, reordering sections on the fly to layout pages so they look their best on the viewing device. Other CSS features simplify animations and transitions, as well as providing design elements that used to require separate image content.
You can simplify HTML5 application development using any of a wide selection of open libraries. Some, like Twitter’s Bootstrap, are focused on front-end development and on CSS; others, like the popular jQuery, give you a framework where you can build and deploy complex applications that work across a wide selection of browsers thanks to support from most major browser and IDE developers. The jQuery library also offers a mobile alternative which can significantly simplify development and includes a templating language that allows developers to put a site together and then designers to quickly add customisations.
While HTML5 is an important component of the modern Web, it’s also finding a role outside the browser in a new generation of desktop and mobile user interfaces. Good quality HTML5 tooling is increasingly common. While much code is written in familiar text editors and IDEs, specialist HTML5 design tools are addressing specific features and situations. Similarly, while most browsers support HTML5 debugging and property inspection, using an IDE allows you to tie debugging directly to code editing.
Microsoft’s Visual Studio LightSwitch rapid application development suite also supports HTML5, delivering ready-built HTML5 applications that can be used in any modern Web browser. There’s no need to know HTML design – it’s just a matter of dragging and dropping components onto a design surface and writing the appropriate business logic.
Adobe is in the process of transitioning much of its developer platform away from Flash to HTML5. While Dreamweaver CS6 remains at the heart of its HTML development strategy – with tooling for building responsive sites using media queries, along with CSS3 design – it’s also rolling out task specific HTML5 design tools to Creative Cloud subscribers under its new Adobe Edge brand. Edge Animate is a design tool that uses the familiar Flash timeline user interface to help designers build complex HTML5 animations. While HTML5 doesn’t have all the features of Flash, it does allow you to build animated content using CSS and the canvas tag.
Working with HTML5
With HTML5 now considered stable, it’s time to start getting sites ready for the final release. A lot of Web developers, especially those working with the mobile Web, are using experimental prefixes in their code. These are no longer necessary now that HTML5 has reached Candidate Recommendation, particularly as browsers continue to improve in leaps and bounds, even on mobile devices.
Many developers are using the WebKit prefixes in mobile applications. With Mozilla launching a Gecko-based mobile OS and with Microsoft’s Windows Phone picking up market share, this is a dangerous practice that looks likely to do the same for the mobile Web as Internet Explorer 6 did for the Web back in the early 2000s. Designing for just one browser, even if it does have a significant proportion of the available market share, risks turning the Web into a monoculture.