Monday, 15 July 2013

Website Slideshows - Which is the best approach?

Image slideshows have been around for a long time on websites. You're probably so used to seeing them now that you don't even realise when you're looking at one. There are two main ways that they're used on websites: to create movement in a header graphic; to allow the site visitor to scroll through a selection of images in a gallery in an interactive and attractive manner. But how are these slideshows created? What technologies can we use to create them? What is the best approach?

A little history...

In the early days of the internet it was really hard to anything with moving images, and the only way to create any sort of animation was using animated gifs. These were great for vector art and cartoon style graphics, but if you wanted to create something like a high quality photographic header you were going to have to put up with a lot of quality loss. Although Java was around it wasn't widely used and being a full Object Oriented (OO) Programming language was aimed at providing web based applications for 'dumb terminals' to operate network based functions. Out of Java was born JavaScript, which was a lightweight complementary OO language that Netscape released in the mid-90s. With this it was possible to start using lightweight client-server programming to add functionality to web pages, and aimed at nonprofessional programmers was soon used to create web pages that would allow you to make calculations, verify that form fields had been filled etc. It wasn't long before people started to realise that you could manipulate pretty much every part of the web page using JavaScript and they started to write scripts that would allow a set of images to be cycled through, changing the photo at a set interval. At the same time a little known program called SmartSketch was allowing users to create cell animation and vector graphics - the developing company was bought by Macromedia and Flash was born. 

Now there were two alternatives to the standard animated gif. JavaScript became a natively supported language in all web browsers which meant that any scripts would be accessible without the installation of any additional programmes. Flash, however, required the installation of either the Flash player or the Shockwave player in order for the animations to be viewed. As Flash and Shockwave became synonymous with games this became less of an issue over the ensuing years and the easy ability to add controls to a Flash animation made it the go-to option for most developers wishing to create image slideshows of any type.

Where do we stand today?

Many developers started to phase out the use of Flash for slideshows over the last few years for a number of reasons - though the main one for me was the lack of compatibility with Screen Reader software and therefore the potential problems that using Flash could cause in terms of the Disability Discrimination Act (DDA) and an awareness that not all home users were confident enough to install the Flash player - many users being wary of installing add-ons to their browsers due to fear of hacking and malicious software.

Over time the HTML standards changed, CSS was introduced, and the options developers had available to them in terms of placement of items on a web page improved sufficiently that slideshow controls could easily be added to a page and the images could all be loaded when the page loaded but just shown or hidden on command - rather than having to load images when needed, which could be a slow process on a narrowband connection. With this in mind a lot of developers went back to JavaScript. 

Today there is a new kid on the block, JQuery. It's been around since 2006, but has really only become commonplace in the last 2 or 3 years. JQuery is a cross-browser JavaScript library that is designed to simplify client-side scripting on websites. It's free, it's open source and the developer can simply call the libraries from various repositories on the internet, freeing up space on their own servers and ensuring that any code updates are automatically applied, closing any bugs and loopholes that may appear over time and allowing quick access to the latest tools.

Most slideshows in use on the Internet today are now powered by JQuery. There is a huge resource of code samples, free downloads and help available online making it one of the quickest and easiest technologies to work with. Being a JavaScript library it uses common JavaScript technology and so is readily available to all browsers on all platforms, unlike Flash which is not available on any Apple mobile device - a move which further fueled the move away from Flash for many web developers. As a JavaScript library much of the implementation code is quick and easy to write, although it may be a little more complex to adapt a freely available JQuery script to your specific needs if it isn't a perfect match. 

Today we favour the JQuery approach as it allows us to quickly create attractive slideshows and be sure that they will work on all devices and all browsers. Working with JQuery also means that we can combine effects, for example adding a hover maginfier to a slideshow on a brochure websites.