This article was originally published a few years ago. The information, tips and techniques explained may outdated. Examples shown on this page may no longer work. Please consider this when viewing the below content.
Sliders and website design
Also referred to as image carousels and slideshows, sliders are a common design aspect on many websites. Seen as a way to visually present images, or other content including text and videos, the concept of a slider is based on the idea of using a slide show to present to your audience.There was a time when image sliders were very popular, like anything new and shiny. However many online marketing experts would now argue that sliders are ineffective and even "suck" - that they contribute to confusion (visitors miss your messages) and hinder conversion (difficult to use) on websites. Others say that a slider can improve the initial interest in a website - kind of cover page for your website, or a way to introduce your business.Whichever way you look at it, sliders and any other design ideas that are used on websites, must be considered on a case by case basis, not just whether they are popular or not, or whether they worked for one type of website, but not another. My opinion is that image and content sliders can be a valuable visual asset on a page, especially on the home page, but to be effective one must do more than just adding images, setting a transition speed and choosing an transition effect.
How to decide if a slider is right for me?
Going back to what a slider is, a simplified web version of a slideshow, making a decision should be based on whether the slider can offer something that is useful to the design and functionality of your web page. Questions you should ask yourself include:
- how will a slider benefit the person viewing?
- should I use images only, or images and text?
- will each slide link to a key page on my website?
- will a slider cause confusion?
- how does the slider help user pathways?
- does a slider fit in with the rest of the design?
- what impact does a slider have on the position of other page content?
Also it is important to consider your audience and what they might expect to see on your website. What first impressions are you looking to give? What kind of business are you in? If people landing on your website are expecting to see plenty of visual media and photos, then a slider can also be a great tool to display this.
Forgotten considerations when using a slider
If you decide that a slider is a good fit for your home page, then there are some other very important things to consider that are often overlooked.Will you display your slider on mobiles and tablets, or just at full size on desktops and laptops? - If you are considering using a slider then make sure you are using a responsive slider- Test it on smartphones and tablets to be sure that it works effectively- If you are using text overlay, then reduce the amount of text on smaller devices, or better still replace the slider with a static image banner on mobile phonesHow long does your home page take to load?- Test the loading speed of your website's home page before and after implementing a slider- Optimise images before uploading (see point below)- Use less slides rather than more- A slow loading page increases "bounce rate"What did you do with your images before uploading to the slider?- Never just purchase an image without optimising first- Resize to the maximum dimensions of the slider- Compress to the minimum resolution that doesn't impact image appearance- Rename all image files with search engine friendly filenames, not something like image1834509345053480803.jpg, but rather business-team-member-support.jpg
How to choose a slider?
Many great themes already have a jQuery slider built in. By choosing a theme where the slider is included, you don't have to then try to integrate one manually. You can see how it will look on the page, and also this saves on issues that can arise with 3rd party slider plugins that may conflict with theme scripts.If you are concerned about a slider making your home page too slow to load, then grab the URL of the theme's demo page and plug it into something like GTMetrix to test how long the page takes to load.Some themes include a copy of a premium 3rd party plugin slider, that you can implement. Or you might have to find one yourself. Either way it is important that the slider is the best WordPress slider for the job. You can find out some stats on slider loading times by viewing a recent article and tests by Chris Lema titled "How do you find the best WordPress slider" - He tested 20 and found some interesting results.If you do choose a slider plugin, then make sure that the developer is maintaining the plugin, and also check what support is included. With so many updates and upgrades in WordPress each year, compatibility is really important.
What is your experience with sliders?
I'd love your feedback by answering one question in my survey - What are your thoughts on image sliders to show off content on a website?If I get enough responses, I'll publish the results back here in the near future.