Tools We Use: Soliloquy and Cycle2 Sliders

by Jason Unger, Founder

Insights / Digital Ink / Tools We Use: Soliloquy and Cycle2 Sliders

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.

Pro: 

• They’re a great way to include lots of relevant information in a compact space, normally on your homepage
• They can add color and imagery to a potentially bland area of the site
• Since they slide through multiple images and messages, you’re able to get more important items above the fold
• It’s relatively easy to swap information in and out, so you can update with new content as needed

Con:

• They tend to be used less than website owners think; users don’t sit around waiting for images to transition or necessarily click to see what’s next
• Users may simply overlook them, similar to banner blindness
• If they’re not technically sound, they could be bad for your search engine optimization

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.

Soliloquy: The Responsive WordPress Slider

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.

[youtube_sc url=”http://youtu.be/JMxleWzKtiE”]

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.

Cycle2: The Versatile jQuery Slider

We were tipped off to the power of Cycle2 by our friends at Engage, and have used it plenty of times since — even on this site.

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.

How to Build an Effective Slider

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.

1. Include five or fewer frames.
2. Use crisp-looking text and images that coincide with the organization’s charter.
3. Indicate how many frames are present, and where the user is within the “progression.”
4. Use icons and links that are understandable and recognizable.
5. Ensure that navigation controls appear inside the carousel, not below it or separated by a fold.
6. If offering a navigation button for each frame (rather than arrows to scroll through), ensure that each button looks different, and represents the frame.
7. Make links and buttons large enough to decipher and click.

As always, they have some amazing usability information — so click through and read more.