When Apple announced that it would not be supporting Flash on the iPhone and iPad, it signaled the end of the technology that had powered interactive graphics, video and animation in websites since the 90’s. This immediately created a technological gap and alternative technologies are racing to fill the void.
A number of technologies have been in development over the years to provide an alternative to Flash and we’ll cover a few of them here.
There are a number of JavaScript graphics libraries that have been developed to provide interactive graphics and animation. Two popular libraries are Raphaël and D3.js.
RaphaëlJS
Raphaël is a JavaScript library that outputs SVG graphics with JavaScript hooks, and VML for older versions of Internet Explorer which for a long time didn’t support SVG.
It is the ideal platform where supporting older version of IE is a priority.
D3.js
D3 is similar to Raphaël in it’s use of SVG objects but uses JavaScript and CSS selector syntax to control the appearance of the SVG. D3.js is particularly suited for use with interactive charts where Raphaël is a more general library.
At the same time the W3C web standards body have been working on the core standards for the web that are known collectively as HTML5 and CSS3. A combination of maturing browser technology and less requirements for supporting legacy browsers is allowing for standard methods that work natively across most platforms and devices.
CSS3
The CSS3 recommendations added syntax to describe transformations and translations of 2D and 3D objects. Used with CSS selectors or minimal JavaScript, HTML elements on a web page can be moved, resized and transformed using the browser’s inbuilt graphics engine. In some cases some it can even utilise the hardware acceleration of a device’s graphics card and rival the graphics performance of native applications. CSS is no longer just about web design as it can be used to define how the elements behave in response to user actions such as fading text, resizing or changing text and graphics, moving objects and handling the timing of those transitions. Rather than be limited to the region of the Flash object, these effects can utilise the whole webpage area.
CSS3 animation is increasingly supported in the major browsers meaning visitors to your site do not need to download anything to have an enhanced experience and can be shown simpler content where their browser is older and does not support those features.
