If you have been working with WordPress for a while you have no doubt encountered sliders, either in templates or on websites. Sliders can be very effective or a major distraction. Here are ten tips to make sure you use sliders correctly on your website(s).
1. 1. Who Is Your Audience?: Before you think about using a slider on a website, it is important to know why. If your purpose is to tell a story, link to important pages on your site or show off the highlights of a product, a slider could be useful. In contrast, if you only want to use it to show off some fancy effects, I recommend not using it.
2. 2. Be Aware of Bandwidth Issues: If the slider dominates your page it will be using large image sizes, which will almost certainly cause bandwidth issues. To reduce that problem, use compression. Still, the challenge is to reduce file sizes without compromising the quality of the image. Two programs which allow you to see multiple versions of an image at varying states of compression are Corel PHOTO-PAINT and Adobe Photoshop.
Here is an example of the Save for Web dialog box in Photoshop. The top-left image is the original image. Each image has compression set at 60 for the top-right, 30 for the bottom-left and 15 for the bottom right. This last image is quite small, only 28.1K while the original is 902K but it has suffered quite a bit of quality loss in the form of muddied color and loss of sharpness. This is the tradeoff when compressing images.
In reality, a quality setting of around 60 is probably your best bet. In this case the image (top-right) is 90K. One other thing to be aware of is that images full of colors and complex background will not compress as much as images with few colors, such as a scene with a blue sky.
Note: While it is possible to use CSS to reduce a large slider that takes a long time to load, that is only half of the equation. You need to resize the images to match otherwise there won’t be much, if any improvement in loading times.
3. 3. Don’t Let the Slider Dominate the Page: When deciding to use a slider, consider its placement, the slider size and how much space it uses on a website. Among other things, do not use the slider to tell the whole story. Use accompanying images and text.
4. 4. Keep It Simple: This means setting up a slider with a simple fade transition and few, if any effects.
5. 5. Give the User Control: This simply means letting the user stop the slider at any time and to move forward/backward as they see fit. Not allowing the user control is a great way to lose your audience.
6. 6. Timing: Make sure you allow enough time for the user to absorb the information before transitioning to the next image. As an example, on this site, the transitions are too fast.
7. 7. Use Lazy Loading: This is an option which doesn’t load all your slider images at once. Instead, only a couple of images load at a time. This will reduce bandwidth issues. Here is an article which offers 11 lazy load sliders.
8. 8. If You Use a Call to Action: Make sure it sits at the bottom of each image so it doesn’t interfere with the message and keep it consistent on all pages.
9. 9. Sliders Don’t Work Well On Mobile: When thinking about sliders, it’s important to realize they don’t work well on mobile devices. A solution is to build a responsive design and to use a different layout for the mobile interface. Another option is to use a responsive slider plugin.
1 10. Slider Stability: Read the reviews about each slider to find out if there are any problems and if so, what they are. It’s also a good idea to test out a few sliders (and on different browsers), to see how well they perform.
Other Issues: Who is the developer? Is it an individual or a company which has been around for a few years? Is there ongoing development? Is the slider easy to configure? Is there documentation and if so, is it well written with plenty of detail? And finally, if you run into to trouble, is there support and with that support, how fast do they respond?
Conclusion
As you can see, sliders can be an effective addition to your site which can increase user engagement. In contrast, if the slider takes up too much space, loads slowly, is automatic and/or uses meaningless effects, it can harm the performance of your site.
