To Slide or not to Slide – That is the Question
Recently a client had provided me with some rough wireframes for a front page layout for their site. One of the things that the wireframes included was a slider at the top – while I didn’t have this as an official rule I created the layout and just didn’t include a slider – instead having a call to action at the top.
It made me realise that I no longer create sliders – and haven’t created one – for a client site – for a long time.
For those that don’t know – a slider is of course those big images that slide across the page – here is an example of one:
You may find online a number of sites talking about how great sliders are – and giving examples of how sliders can make a “visual impact” (most of the time these are websites that sell their own version of a slider). In this article I wanted to talk about why you should think twice about using a slider and what do instead.
Slider vs. Hero Image
One word you may have heard is ‘Hero’ image. A hero image is basically an image that goes across the full height of a website – it’s similar to a slider but it only has one image. These are very useful and practical – below is an example of a site I created that has a Hero section at the top.
You’ll note that this is a single image – and the image itself is actually a background image – with a bunch of content elements and call to actions on top of the background. The hero image is very common in sites now – is a lot more modern and I’ll explain why in a sec. In fact pretty much all sites these days have a hero image with no sliding functionality.
So why is a slider not a good idea? Well – let’s go through the reasons:
Why Having a Slider on Your Website is A Bad Idea
Reason #1: Ain’t Nobody Got Time For Dat
Image courtesy of knowyourmeme.com.
People these days – on the internet are looking to find information. No one is impressed by your slider – most of the time they’re at your site looking to find the information they’re after. Nobody – and I mean nobody – is going to sit there and wait for your 3 or 5 slides or whatever to slide across the page.
If you think of – let’s say – the average slider – with 3 slides. And we’ll say that there is a 5 second interval between each slide. That means you are assuming a person is going to sit for 15 seconds waiting to view all the slides on your site.
15 seconds – in internet terms – is more like 30 minutes (not really but you get my drift).
That means if the purpose for your sliders is to communicate some kind of benefit about your company – you can be sure that over 80% of users are not going to get your message. Why would you do this to yourself?
You are much better off creating 3 separate sections with the message you are trying to communicate – at least that way the user will have to view it as they scroll down your page – at least it will register to some extent.
Reason #2: Loading Speed
When you are looking to create full page sliders – then we’re talking about full page images. That’s a lot of data and it can easily weigh your site down. Now there are sliders where rather than loading full images it creates elements which function as a slider – but in these cases the browser still has to load the application which creates those elements.
Bottom line is – adding a slider is going to considerably add space to your site. And it’s increasing the size of your site while at the same time – as per reason #1 – the vast majority of people are not going to see all that additional data because they’ll just scroll down.
Because site speed is important for SEO – the amount of extra data required to load a slider is another reason why you shouldn’t have it.
Reason #3: Readability (SEO and Human)
In the previous slider I had made an example of – you’ll notice it had some text. And as most sliders that I see doing this – the text is rendered within the image. This is not really an issue with sliders – since I’ve seen many sliders where the text is above the slider image – this requires additional scripts though which will load down your site.
Let’s take the example of the previous site I had mentioned which had a slider and text. Now in this case the text was separate from the slider. It was most likely created by using something like Revolution Slider – but even though the text was separate it was rendered in a <div> tag rather than a heading tag which is what Google looks for:
Now imagine you didn’t know this and used a slider and screwed up all your SEO efforts. Let’s take my site for example – at the top I have ‘Wordpress developer sydney’
This is my target keyword – now if I look at the source code this is a heading 2 – which is important for SEO readability:
Now many people that use sldiers completely screw over their SEO – by either having the text be part of the image or having the text be a div (when using something like Revolution Slider).
Reason #4: No Clear Call to Action
When a user comes to your site – you should know what you want them to do. There should be an over-reaching goal that you are looking for every user to do.
Now with larger sites this is much harder – for example what does the average Microsoft site user want to do? Do they want to learn about server technology, access their email account, go to OneDrive?
But with smaller sites – and even more specialized subdomains within a larger site the goal should be obvious.
For example let’s take DropBox (just a random example) – when youl and on their front page they have 3 calls to action:
You can either:
- Request a free 30 day trail of DropBox business
- Purchase DropBox Business or
- Get DropBox Basic (which is free)
Now imagine having a slider in this situation – would you have a slider for each option? Most people would not even see the third slider (maybe that’s a good thing because DropBox basic is a free option that doesn’t make DropBox any money).
Any time I see a slider – in many cases I see a situation where there is no clear call to action.
The Only Acceptabel Solution: A BackGround / Side Slider
So now I’ve written a whole blog about how the full width slider is a waste of time – but now I will take it back and say the slider does have its uses – and if you are absolutely insistent on using a slider this is the only way I can see it being feasible without affecting the issues that I mentioned above.
And this is simply a background slider – if you are using Elementor with WordPress – it comes with the option to create background slider by default. Here is an example of something I put together for a client:
Above you can see there is a slider (wait – I thought I said I thought sliders were not a good idea??) – but the difference is there is a clear call to action above the images. This is for a coworking space – as you can see the call to action shows above the slider itself).
Many times there are sliders where there is different text on each slider and it’s just really confusing about what you should do – the information coming through – so if you absolutely must have a slider – then have it as a background and have a call to action above.
Hope you enjoyed this post – and got something out of it – I hope this encourages you to think twice before making the standard slider that most people are making. What do you think? Do you agree that sliders are just not great in most cases? Is there situations where you disagree and think sliders can add to the user experience?
Let me know in the comments!
About the Author
Kosta Kondratenko is a web developer working for his company Head Studios (https://headstudios.com.au). He is a WordPress developer in Sydney and is also an SEO expert that focuses on SEO page speed optimisation. He has over 10 years of experience and loves to write blog posts about topics happening in his industry. He’s passionate about sharing his knowledge and helping others achieve their goals. His clients include Silkwood Medical – the experts in lower eyelid surgery.
Leave A Comment