This is the sixth in an irregular series of blog posts about the tools we use to design, develop and maintain websites and the digital products we create. We’ve previously written about the Pingdom Website Speed Test, Sprout Social, Chrome Developer Tools, Free Stock Photos and Google Webmaster Tools.
Image sliders (also know as slideshows or carousels) tend to be one of the more controversial tools a website publisher can use. I know, it sounds a little silly — what’s controversial about putting a few images and some copy on your site? — but there’s legitimate reasons why a slider is a bad idea, and legitimate reasons why it’s the perfect tool to use.
This post isn’t meant to hash out that debate, but I’ll give you the brief overview of both sides.
Our general take on sliders is to decide on a case-by-case basis. Recently, we’ve been focused more on making amazing hero images, but that doesn’t mean a traditional image slider is never appropriate.
In fact, when we do use sliders, we have two great tools we use to create them.
I stumbled upon Soliloquy a few years ago, when we were looking for a sleeker, easier-to-use alternative to older WordPress slider plugins. Soliloquy has an easy-to-use interface, has plenty of display options and, best of all, is responsive.
Since every site that we develop now is a responsive design, if we’re going to include a slider, it’s got to be responsive as well. Soliloquy is responsive – out of the box.
Here’s a great video from Thomas Griffin, the developer behind Soliloquy, on how easy it is to set up a slider.
Soliloquy is the rare WordPress slider plugin that keeps us developers in mind; it’s incredibly customizable on the back-end with plenty of hooks and filters. And it’s got plenty of add-ons as well; when we built the site for Fantasy Sports Warehouse, we used both their Featured Content add-on and Thumbnail add-on so the latest stories could automatically feed in and users could see previews of each slide.
It’s not a WordPress plugin, but simply a jQuery plugin that lets you build easy slideshows and, as we most often do, image carousels. When we have a design that requires the ability to cycle through items — perhaps 3 news teasers showing at a time, with more to be shown when the “next arrow” is clicked — this is how we do it.
Or, if we’ve got a design that has one featured image and multiple thumbnail teasers, where you can scroll through the teasers to update the featured image (like many of our project pages), Cycle2 is the plugin we use for it.
The documentation online isn’t the best — we’ve had to do plenty of testing and tweaking to get it to work exactly as we’d like to — but once it’s up and running, it’s incredibly powerful.
If you’re going to use a slider, here’s some great tips from the folks at the Nielsen Norman Group on designing effective sliders.
As always, they have some amazing usability information — so click through and read more.