Much of the coverage of HTML5 over the last couple of years has focused its role in the grand strategy of corporate combat: Will Apple standardize on HTML5? Is Google counteracting with its support of Flash? Lost in the maneuvering are the real technical accomplishments of HTML5, and the tactical opportunities they enable for individual organizations.
If you want to improve your search rankings, better support mobile readers, and transform your development process, it's time to integrate HTML5 into your Web work.
[ Discover what's new in business applications with InfoWorld's Technology: Applications newsletter. | Get the latest insight on the tech news that matters from InfoWorld's Tech Watch blog. ]
5 sites that get HTML5
First, a few words of clarification. "HTML5" is not a single product in the manner of, say, the 11g release of Oracle's database management system. Instead, HTML5 is a collection of definitions, which, even in the narrowest sense, no existing Web browser fully supports, but all major Web browsers partially support.
More broadly, HTML5 includes not just HTML standards, but also the associated CSS3 (Cascading Style Sheets), JavaScript, multimedia codecs, and SVG (Scalable Vector Graphics) that work together to make the most of the new HTML definitions.
Of course, HTML5 might not be right for every organization at this point. Whether it's justified for a specific situation requires detailed knowledge of end-users' browsers, the parts of HTML5 used, and an organization's goals for its Web presence.
No practical applications yet use all of HTML5. The compatibility of the parts you need, with the browsers your end-users run, and your server-side technology, is a matter for thoughtful consultation.
But, it's safe to say that now is the time for most development shops to adopt HTML5, and to begin taking advantage of its four powerful benefits.
1. Faster image downloads, especially for mobile users
In Web page design, a "gradient" is a background effect: a subtle shading or texturing of the "window" on which your Web site proper is viewed. Corporate designers go to considerable lengths to balance shades, match borders, and otherwise achieve a tone or style whose effect on most viewers is both important and unconscious. Jacob Gube, founder of Six Revisions, shows "25 Great Examples of Using Gradient Effects in Web Designs".
The first two decades of gradient effects were achieved by "painting". Before HTML5, a background had to be supplied as an image (perhaps spliced together from several sub-images). Photoshop, for example, has a "gradient tool" largely used to construct background images for use as gradients. This has been wildly successful, in the sense that essentially every competent Web designer commonly employs gradients realized as background images.
HTML5 changes this. The CSS3 part of HTML5 expresses gradients semantically, that is, in meaningful words, rather than pictures. Here's an example:
.gradientArea { background: -o-linear-gradient(#FFB260, #FF7F13); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffb260', endColorstr='#ff7f13', GradientType=0); } }
The detailed syntax of this example, or its rendering into a lightly-shaded orange rectangle, isn't important; what matters is the consequence of expressing it through words rather than images.
First, it's more compact. CSS3 gradient specifications are typically a few hundred bytes; background images for gradients often range into the thousands. Even more than this superficial superiority, though, is the fact that the CSS3 gradient is in-line: its transmission doesn't require opening another file. When so many Web-site visitors arrive by way of reduced-bandwidth mobile browsers, keeping the count of auxiliary connections to render a page low can be crucial in keeping performance up.
In broad terms, then, your Web designers do the same things they've always done -- use the Photoshop gradient tool, or something similar -- but export to CSS3 rather than HTML4 or XHTML. What the end-user sees in his or her browser is indistinguishable, but it's achieved with a quicker, perhaps much quicker, download. Also, it's much easier to adapt CSS3 gradients to different screen-sizes, with all the obvious benefits for your mobile viewers, whose linear screen resolutions might vary by a full order of magnitude.
Technical details complicate this picture slightly:
- In principle, it's possible to in-line old-style gradients, and thus reduce download costs. This is rarely done.
- HTML5 includes other gradient effects outside the scope of CSS3; and
- CSS3 support of gradients introduces new levels of programmability. One could, for instance, adjust a gradient based on the age or location of the viewer.
As entertaining as these possibilities are for programmers, we don't recommend them. Don't let them distract you from the main point of HTML5's semantically-expressed gradients: they make for quicker downloads, easier porting to mobile form factors, and less expensive maintenance.
2. Improved SEO
Several other common graphical effects have CSS3 expressions, including opacity (a foreground image is sufficiently transparent to allow its background to be partially visible), rounded corners, and drop shadows. All of these share with CSS3 gradients the advantages of compact uploads and easier cross-platform maintenance. They also introduce advantages for search-engine optimization (SEO) that deserve careful explanation.
To understand the SEO implications, return for a moment to gradients. Another technical advantage of CSS3 gradients is that they're more compatible with source-code control systems (SCCS). Before CSS3, gradients were realized as pictures. To change a picture in common SCCSs is an opaque operation: the SCCS itself can only record that the change occurred, along with any comments about the change.
With CSS3's semantic markup of gradients, though, SCCS can conveniently operate on the text which expresses the gradient. The SCCS can automatically report that, at a certain time, the hue of the gradient changed, or its intensity, in a format such as this:
< background: -o-linear-gradient(#FFB260, #FF7F13); --- > background: -o-linear-gradient(#FFB260, #FF3F13);
Programmers find this a great convenience: the tools they use to manage source code, including construction of validated production versions, extend more naturally to the graphical constructs of Web design.
This advantage amplifies even more for opacity and other CSS3 markups. Suppose a company, "Acme Widgets", styled its own name with opacity on its home page. Before CSS3, this was done with Photoshop or a similar tool, and resulted in an image which displayed the words "Acme Widgets" with a specific opacity.
However bold the graphics, the content was totally lost to search engines. Because they're embedded in an image, the words "Acme Widgets" are effectively invisible to search engines. In the early years of search engines, there were several famous cases of important Web pages not showing up in search results precisely because the search engines saw much less textual content than human readers did.
CSS3 change this. CSS3 makes it possible to maintain far more of the textual content of a page as text, yet still style it for opacity, 2-D and 3-D effects, and so on. The implications for SEO are enough in themselves to make CSS3 compelling: the beauty of your Web pages doesn't matter at all when no one sees them, and older styles of graphical implementation make too much of your content invisible for search engines and the prospective visitors who use them.
3. Sophisticated animation effects
HTML5 is full of individual features with the characteristics already explained above: HTML5 gives the same appearance the top Web designers were already achieving, but at less expense, with quicker load-times, and the SEO and maintenance advantages of semantic markup. HTML5 also introduces effects that were generally beyond earlier versions of the standard; one of these is animation.
For sophisticated animation effects, Web teams in the past have generally turned to Flash. Flash has well-known disadvantages: search engines don't index it (not strictly true, but certainly a liability at best), Apple's iOS and other operating systems don't allow it, and its security profile and licensing restrict its use in many organizations. With HTML5, though, relatively sophisticated visual animations become available as semantic animations.
4. Easier Web app development, especially for mobile apps
A final qualitative advantage that HTML5 offers is that it's rich enough as a programming environment to compete with native applications. This is particularly important, again, for mobile end-users. Native app development is costly: its programmers are expensive, licensing ranges between whimsical and frustrating, and portability is a challenge. HTML5 is so potent that many applications can effectively be coded entirely within HTML5. Consider these advantages over native apps:
- automatic coverage by search engines;
- immediate access to end-users, with no need to install anything; and
- a single code base that spans internal desktops, mobile, and remote home or office use.
HTML5 has been years in the making. Its many definers have captured the most important parts of Web-site construction, and made them available as semantic markup and comprehensible APIs. Intelligent use of HTML5 makes for quicker, more nimble downloads, much better search-engine placement, and easier development.
Laird is vice president at boutique development consultancy Phaseit, is an Invited Expert in SVG who writes frequently on HTML and related topics having to do with the Web. He can be reached at Cameron@phaseit.net.
Read more about software in Network World's Software section.
This story, "4 reasons to jump to HTML5" was originally published by Network World.