Slide-shows have become commonplace on websites, and there are three reasons for this:
A slide show makes good use of our page, using the time dimension to tell our visitors about what we do lets us get over a lot of content easily without their having to scroll about the page, or navigate through the site. Well scripted slide-shows are, therefore really helpful tools…
What is the best technology to drive your slide show?
Introducing CSS animations
The alternative, a CSS3 driven animation offers the advantage that the animation code is included in the page, no calls to anything external, so a faster page load. In principle this technology also offers better cross-platform implementation. Being part of the W3C specification for CSS3/HTML5, all browsers will someday be able to run this – the only remaining question is should you be using it now?
We’ve been very pleased to see how well CSS3 based animations are now implemented – our tests indicate that all current browsers support this technology .
We’ve found CSS3 animations to be quite easy to write – so we can focus on what we want to do, rather than how to do it (and keep costs down).
Being a core part of the HTML specification, it is quite easy to offer alternative content, if a visitor is using an older browser.
We’ve been working on the technology for a while, our first public implementation is now available on the Electronic and photonic molecular materials research group website:
Electronic and photonic molecular materials research group, University of Sheffield.
And the future?
CSS3 animation is good, and can take on the role of a simple slide-show without problem, as well as adding some nice interactive effects to the page. Clearly it is a technology that we will be developing with our clients over the coming years.
 Current versions of Firefox, Opera and Internet Explorer support CSS3 animations as native, Chrome and Safari still currently require the proprietary -webkit- prefix.
 SVG or ‘scalable vector graphics’ are pictures based on mathematically defined curves. They need very little bandwidth – so they are quick to download, but they are also scalable – so you can expand a picture made up of them as much as you like without it breaking up. This is useful if you want to use the same graphic for a phone (perhaps 600px wide) and a wide screen monitor (2400px or more across).