Going Round in Circles: Choosing a Content Slider
A slider is what we web geeks call any funky banner space that appears on a web site. It's usually a series of big, bold visuals designed to entice the user with a quick sales pitch or highlight key projects and upcoming events. It can be a simple series of images (as demonstrated on Oxfam) but they can also be as intricate as the BBC's home page where the slider moves between various sections, each with its own layout and in-depth content.
Sliders have to be dynamic and eye-catching and in the past were built using Flash, meaning a user had to have a particular browser extension to make it work and those with slow connections could be in for a long wait while the Flash movie downloaded. These days the driving force behind sliders is usually a jQuery plug-in; a nifty bit of javascript code which takes boring old HTML and makes it dance, without the need for a user to jump through hoops to actually see it. The BBC uses it's own custom-built javascript library called Glow but luckily there are some free options out there that require very little development time to transform a home page into a slick gateway to the rest of the site.
Anyone looking to implement a slider will have seen plenty of articles titled 'Top 20 jQuery sliders' and there are many options to choose from. At Liquid Light we've tried and tested most of them, always looking for a single slider that handles all the quirks of functionality that different sites inevitably require. As our projects are built using the TYPO3 CMS, a slider has to be integrated with other content, so editors can switch messages and graphics as required. Here are some plug-ins we've implemented...
The jQuery Cycle plug-in is one of the originals, a reliable favourite of ours for various slideshows. At its heart, it's an image slider that you can extend with an array of fancy transitions. Forget boring old fade, with Cycle you can shuffle images like a deck of cards or zoom in and out. It's tremendously easy to get up and running. On the site for our client ICA we implemented a series of bold images on their home page to highlight the various infrastructure projects they're involved with in Africa.
But it can be used for more advanced purposes. With Berwick Partners, we implemented a series of illustrations and headings to put key news stories at the top of every page of the site, a great opportunity to show off their unique qualities. In this implementation we can use Cycle's option to include some navigation buttons but that's about as advanced as Cycle gets. In this day and age there are bigger concerns than which transition we can pick, now web pages have to be responsive and suit desktop and mobile users alike. While Cycle can fit any screen size it doesn't respond if the page is then resized or the font size changed without extra javascript detection, but luckily other jQuery sliders came along to help out...
The Responsive Slides plug-in is a very neat, lightweight solution we used for The Gym Group to promote their key sales messages throughout the site. The size of the slides react to the browser, but the options are limited; you can only fade between slides and content has to be in unordered list tags. If only there was a plug-in that had a variety of options but also behaved responsively...
Orbit
Product design company Zurb built Foundation 3, a powerful front-end framework that is fully responsive and makes building sites for multiple device sizes very simple. Part of that framework is Zurb's cool slider Orbit which combines responsiveness with some nifty options that make it the most flexible slider we've played with. Orbit lets you take most types of content (div, images, list items) and turn them into slides with options to have a play/pause interface and thumbnails if desired.
When it came to creating a BBC-style news slider on the home page of mortgage advisors John Charcol Orbit was the jQuery plug-in we opted for, allowing us to make each slide a content rich series of news stories and promotions. The only drawback when using content rather than images is that each slide can't be transparent and needs a background colour because the slides are stacked on top of each other rather than hidden from view. But Orbit is constantly evolving over on GitHub with feature requests being worked on by Zurb's developers.
All the above examples are very simple to get up and running, provided clients don't require anything too bespoke. Over on AFDB, we had to come up with our own customised slideshow in order to show their latest news stories with a thumbnail, title and synopsis. But the Orbit plug-in has come in very handy, allowing us to quickly turn a series of images or news stories into something much more exciting.
