Beyond “HTML5,” Part 3: The Future of the Open Web
So far in this blog series we’ve explored the meaning of “HTML5” and the road to the Open Web, and we’ve reviewed Open Web technologies that are supported by today’s browsers. Finally, it’s time to look at some exciting Open Web features that will shape the web of tomorrow, and their current alternatives.
Camera and Microphone Access
Last time we saw some device integration features available to mobile and desktop browsers, including geolocation and accelerometer access. In the near future, device cameras and and microphones will be available as well, allowing us to capture images, audio and video and do real-time effects and compositing.
Example: Mustache Camera Demo
This mustache camera demo uses a camera to capture an image, then locates the face and applies some snazzy glasses and a mustache. Like the other device integration features we reviewed, this is strictly opt-in; a user has to grant permission for the current website to access the camera.
Support Outlook
Camera/microphone access is enabled in newer versions of Chrome and Opera. Support in Safari, Firefox, and IE is not scheduled yet, so the technology is probably another year or two from being mainstream.
Today’s Alternative
Flash! The demo above works in older browsers by falling back on Flash, which has supported webcams and microphones since version 8. Camera access on some mobile devices can also be achieved by building a native app, or by using a native wrapper like Phonegap.
CSS Animations
Last time we explored CSS3 transforms and transitions as a simple way to manipulate and animate page elements. CSS3 also includes support for full keyframe animations. Unlike transitions, animations can have multiple keyframes and can change their properties multiple times during a sequence. Animations can also loop, alternate directions and interact with Javascript for even more power and flexibility.
Example: CSS3 Animated Tetris
This example (works in Firefox, Chrome, Safari, Opera) shows a Nintendo Game Boy playing Tetris without any Javascript or images. The tetrominoes animate into place and the lines clear in a looping animation.
Support Outlook
Almost there! When IE10 is released, all the major browsers will support CSS animations. Even allowing for the fact that older versions of IE will remain in use for some time, CSS animations should be ready for general use in another one to two years.
Today’s Alternatives
There are plenty of options for animation. There’s Flash, of course, but if that’s not to your taste, Javascript-based animations work in most browsers. Adobe Edge provides a Flash-like interface for creating animations that will work in IE9 and up, and most recent browsers. If it isn’t 100% necessary for your content to be animated, you can always use CSS animation now and treat the animation as a progressive enhancement.
WebGL
WebGL opens up the HTML <canvas> element to the world of hardware-accelerated 3D. Based on the OpenGL API, WebGL is now supported in Chrome, Firefox, Safari, and Opera (but is disabled by default in the latter two). WebGL enables the creation of 3D scenes that can include complex models, lighting, animation and interactivity. It appeals to developers of games using OpenGL and related technologies, but it’s far less familiar to web developers who are used to standard HTML, Javascript, and CSS. Frameworks like three.js can help make this transition easier.
Examples: Kai ‘Opua and Google Cube
Kai ‘Opua is a game created by Collin Hover that teaches children ages ten to fourteen about design principles and Hawaiian culture. The character explores a world built on the back of a giant space whale, and learns how to farm taro and other plants.
Cube is a Marble Madness-style game that teaches about the uses of Google Maps. The player guides the marble through the streets of each level to achieve a goal, like finding a certain building or following bike-friendly routes.
Support Outlook
Chrome and Firefox are WebGL-enabled now. Opera and Safari also have experimental support, but require the user to turn WebGL on in the browser settings. Nothing has been announced yet for Internet Explorer, iOS, or Android, so broad WebGL support is probably at least three years away.
Today’s Alternatives
When considering WebGL alternatives, it’s important to ask whether “true” 3D is a requirement for your application. Pre-rendered 3D assets can be used convincingly as long as the camera angles are limited. If true 3D is a requirement, three.js can provide software rendering using ordinary <canvas>, as in this example. This might be an option provided the scene is not too complex. Finally, Flash 11 has a very robust, hardware-accelerated 3D engine, called Stage3D.
CSS 3D Transforms
In part two we saw how CSS transforms can be used to rotate, scale, and move elements. 3D transforms take that concept further and bring web content into three dimensions.
Example: 3D Rotating iPhone
This demo (works in Chrome, Firefox, Safari, Internet Explorer 10) shows a 3D model iPhone built of images that can be rotated and spun. The gradients applied to the iPhone change when the model is rotated, simulating different lighting effects.
Moving between 3D transformed elements can give a cinematic motion effect. This presentation about CSS3 uses impress.js to move between slides in 3D space.
Support Outlook
3D transforms are supported now in Chrome, Safari, Firefox, iOS, and newer versions of Android. Internet Explorer 10 will support them as well. They should be safe to use in another eighteen months to two years.
Today’s Alternatives
Unfortunately nothing out there is as simple and powerful as 3D transforms. Certain types of 3D, such as the product demo above, can be faked using a series of pre-rendered images that are swapped quickly to form a low-tech “kinetoscope.” Flash might also suffice.
CSS Regions and Exclusions
The next generation of CSS layouts will bring the web closer than ever to the design capabilities of print publications. CSS regions and exclusions will give designers more control over the way text flows and wraps around objects.
Example: Adobe CSS3 Regions and Exclusions demo
In this demo, the text underneath the “Bonneville Speedway” headline is divided into three linked regions, with text flowing from one column to the next. Hypothetically, the developer could use a media query to resize or reduce the number of columns at smaller screen sizes or vertical orientation. An exclusion outlines the negative shape of the mountains and the car. Even as the background moves left and right behind the text, the text will never overlap the excluded area.
Support Outlook
CSS regions and exclusions are still experimental. So far only Internet Explorer 10 has announced support, so regions and exclusions are not likely to be widely available for another one to two years.
Today’s Alternatives
The layout above easily can be matched with absolute positioning or floats, but sadly, no existing technology offers the same flexibility. The best alternative for now is careful layout control and lots of patience.
CSS Filters, Blending and Compositing
Filters and compositing bring the capabilities of graphics programs like Photoshop to the web. Blend modes allow designers to specify how elements’ colors blend and interact when stacked. For example, a yellow element and a blue element might blend to form a green area. Compositing controls the visibility of stacked elements—one element can be used to “mask” an underlying element. This example shows some of the compositing methods available to another HTML element, canvas. Filters includes common image manipulation techniques like blur, contrast, brightness, and hue. This demo shows some of the filters available in Webkit now.
Custom filters, also known as “shaders,” are small programs that allow manipulation of the pixels and vertices of an element. These can be used to create cinematic effects like a waving flag or a box that folds and unfolds.
Support Outlook
CSS filters are already supported on SVG elements in many browsers, and on HTML elements in Chrome, Safari, and iOS. Additionally, Firefox can apply SVG effects to HTML elements. Older versions of Internet Explorer supported a proprietary filter system, but Open Web standard filters should be available in one to two years. Blending, compositing, and custom filters (“shaders”) are still in the draft stage and are not likely to be widely supported for two to three years.
Today’s Alternatives
Fortunately, most of the techniques above are replacements for things that can be done easily in graphics editing software. For now we can achieve many of these effects by layering images. Custom filters on page content are not currently achievable, but might be possible to fake with video or Flash’s Pixel Bender image processing technology.
Final Caveats and Conclusions
The Open Web movement is an important step in the development of the web. The collaboration and openness between technology creators is unprecedented and encouraging, but several important points should be kept in mind.
- The Open Web is first-generation technology at best. Many of the technologies we’ve discussed are not finalized, so they may change before they’ve been rolled out to all browsers.
- Even “good” browsers are limited by the hardware available to them. Mobile Safari and the Android browser support many Open Web standards, but they are still low-power devices with slow CPUs and limited memory. On these platforms, an Open Web application is just as likely to crash, leak memory, or reduce battery life as Flash or any older technology. HTML5 is no substitute for good memory and graphics optimization.
- The major technology players might not always have the web’s best interests in mind. In the rush to develop new features, browser manufacturers have released many non-standard features into the wild. These are ostensibly experimental and prefixed with vendor’s names, like -webkit and -moz; and they are aggressively promoted long before their competitors have made any declarations of support. While many proprietary features have been adopted as standards, early adopting web sites are not inherently forward-compatible. There are many “HTML5” web sites that should work in all modern browsers but don’t because their developers only considered the browsers that supported those features at the time they were built.
Those of us who have been in web development long enough to remember “Best Viewed in Internet Explorer” don’t need to be reminded why “Best Viewed in Webkit” is a scary prospect. It’s up to web developers to be responsible with new technologies and to think in terms of true standards, not experimental vendor features. The Open Web is the future, but it’s up to us to make sure that future is truly open.
