So Your Client Wants a WordPress Slider? Before You Cringe, Here’s What You Need to Know
So Your Client Wants a WordPress Slider? Before You Cringe, Here’s What You Need to Know
Whether you love them or hate them, sliders are still a popular feature of many free and premium themes. It’s not too difficult to see why: they’re eye-catching and draw attention to key information on your site.
Sliders are ideal for displaying your latest content front and center so your posts or best sales pitch are the first things your visitors see. They also let you to make the most of your site’s real estate, effectively allowing you to display two or even three times (or more!) the amount of content you could otherwise be able to publish.
But there are also downsides to using sliders. Recent findings suggest sliders may negatively impact conversion rates, search engine rankings, and even user experience. Ouch.
In this post, we’ll look at the facts to help you decide whether using a slider is a waste of time (and, let’s face it, will ugly up your site), or could actually help improve conversions and bring business benefits. And then we’ll give our verdict on whether sliders are worth using.
Deciding on the Direction of Your Design
When considering the idea of changing directions on your design, it’s important to make a decision by looking at a few different standpoints. In no particular order:
- The current trends
- Monetary and marketing performance
- User experience
I placed two ideas into one category since not all design elements are designed to bring in money. For example, if you’re using sliders to dish out information about your business, your primary goal is likely conversion rather than direct monetary gain.
In some cases, they both may be relevant, in which case, you can evaluate your designs with money and marketing performance being in two separate categories.
We’ll be looking at sliders in all of these categories to determine whether or not they are still relevant for creating an effective and eye-catching site design.
Let’s start by looking at the current trends for sliders.
Trends for Sliders in 2015
I scrutinized the top design features of 200 premium and free WordPress themes and some of the most prominent and successful corporate sites to find out what the latest trends are for 2015. Some of my findings were surprising and others seemed to make a lot of sense.
I shared my findings in detail in The Web Design Trends Dominating 2015 and How WordPress Stacks Up, but one of the trends I found to be the least surprising was that the use of sliders is on its way out.
The most cutting-edge themes and corporate sites were opting to ditch their sliders, replacing them with either full-width or full-page featured images.
You may be wondering why so many companies are moving away from sliders when they can display a lot more information than one image. To answer this, there are a couple of facts that need to be taken into consideration other than just the trends dominating the current market. Taking a look at a slider’s overall performance and user experience will help you get one step closer.
How Well do Sliders Really Perform?
According to behavioral scientist Thijs de Valk in his post, Our themes don’t have sliders … Because sliders suck, sliders are horrible for SEO and they are definitely not user-friendly.
Valk goes on to say:
“So simply having a slider on your website will get you less sales! If that’s not a deal-breaker, I seriously don’t know what is …. It kills your rankings and your conversions!”
He’s not wrong, either. As described by Google in Page layout algorithm improvement, and many times over in the past, pushing your content further down the page effectively ruins your search ranking and that’s exactly what sliders do on a site.
If you want any easy way to kill your ranking on Google, add a slider to your site.
If you’re thinking, “Well, at least my site’s rankings on other search engines won’t be affected,” don’t be so sure. Pushing down your site’s content doesn’t just affect your Google ranking, either. It’s a bad move for most other search engines as well.
It doesn’t just stop there. Your conversion rate is also grossly impacted and not in a good way.
Erik Runyon, the Technical Director of Marketing Communications at the University of Notre Dame, found that only 1% of visitors actually click on a slide. In his Carousel Interaction Stats, he also noticed that of those one percent, 84% of them only clicked on the first one.
These statistics, which are also included in the highly informative site shouldiuseacarousel.com, also points out that most visitors ignore sliders because it’s overwhelming to see so many different messages and calls to action in one place.
The bottom line: it will become increasingly difficult for people to find your site and if they do find you, they aren’t clicking on your slider.
The result? Your conversion rate is low and that translates into a lot less money in your pocket.
Maybe your visitors aren’t clicking on slides because they are too mesmerized by your slider’s obvious beauty and sheer brilliance? Let’s see if that’s the case next.
Amazing people, tons of knowledge
With your WPMU DEV Membership comes access to our exclusive members-only forums, where you can discuss everything from SEO to online business strategy. Enjoy the free time our plugins give you, to grow your business!.TRY WPMU DEV FREE
Do Sliders Knock Your Socks Off?
The animations that often come with sliders are pretty fantastic. They look pretty cool, but that doesn’t mean very much if they aren’t user-friendly.
This is often the case since sliders load multiple large images when a given user visits the page. The more images a page needs to load for the end user to be able to see, the slower the page will come into view.
Not only that, but they often bloat your site since sliders often rely on jQuery and plugin scripts to run, which adds more strain on your site when it tries to load.
Krogsgard also goes on to say that sliders aren’t often responsive and this is a key feature to include in your site since 31% of the world’s internet usage comes from mobile devices, according to We are Social’s report Digital, Social & Mobile in 2015.
We are Social has also estimated that this number also seems to be steadily increasing as time goes on:
“Based on the trends within this data, we expect that mobile will help to push internet penetration beyond 50% of the world’s population during mid to late 2016.”
Many of your users are probably choosing to surf the web on their mobile devices and if you aren’t providing a seamless experience for them, you should consider making some changes.
All these statistics paint a clear picture on their own, but I saved the best for last: sliders are not accessible to those who are visually impaired.
Of the 200 sites I went over with a fine tooth comb recently to reveal the design trends for 2015, I found that only 2.5% of sliders could be considered accessible.
People who are visually impaired often rely on their keyboard to access links and features on a site by pressing the “tab” button. They also use screen readers to pull text from a site in a format that the device can then read and relay back to the user. Sliders often do not meet these requirements.
Accessibility expert, Jared Smith, points it out best on his micro-site shouldiuseacarousel.com:
“Carousels pose accessibility issues for keyboard and screen reader users that simply cannot be adequately addressed by markup or hacks. Carousels are this decade’s <blink> tag.”
So that settles it. If there are people out there who can’t even access your sliders, why bother including them in the first place?
If you don’t mind abysmal conversion rates and search rankings, it’s rather inexcusable to limit your site’s users – and that’s exactly what sliders do.
What’s the Alternative?
In our post How Many Of These 7 UX Blunders Is Your WordPress Site Making?, user experience expert Joji Mori suggests using a grid-style layout for displaying images on your site.
To really get in on the trends for 2015 while they’re still growing, consider replacing your slider with a full-width or full-page featured image. They can provide the stunning, attention-grabbing feature you desire while also focusing on accessibility.
Opting for this kind of image should only add to your site’s main focus and message, though, rather than dominating it. If you’re not sure if your site passes the mark on this, I made up what I call the “swap test” to help you quickly find out.
It’s inspired by an idea of one of Marvel Comic’s top writers, Kelly Sue DeConnick, in an interview with IGN. She created “The Sexy Lamp Test” to proactively reduce sexism when it comes to the female roles portrayed in comic books and other mediums for storytelling:
“If you can remove a female character from your plot and replace her with a sexy lamp and your story still works, you’re a hack.”
Similarly, the swap test helps you to determine whether your featured image is effective while also remaining accessible. If you can replace an image with a background of a single color without losing much of any meaning or limiting functionality, you’re good to go.
A good example of this can be seen on Asana‘s site.
1.6 million WordPress Superheroes read and trust our blog. Join them and get daily posts delivered to your inbox - free!
If they were to replace the featured image with a single color, their site wouldn’t decrease in functionality because their call to action is not embedded into their image. Instead, it hovers over the image as a separate element.
While the featured image showing co-workers in a meeting does add to the overall experience by suggesting their product helps with a business’ workflow, they have a clear written message that takes care of that. Essentially, you can pull out the image without confusing visitors.
Another great example of a site that uses a featured image well is WordPress.com.
There is a clear call-to-action and additional information that is fully accessible, even if the image were removed. Even without a slider, a lot of information is presented without overwhelm while still being able to capture attention.
If you really feel you need to use a slider or you have a client that just won’t let them go no matter what you say, there are also ways to use sliders that are a bit more effective. While ideally, you want to avoid them all together, I’ll walk you through some examples of sliders that aren’t so bad.
The Good, the Bad and the Ugly
Before we dive into some examples where sliders aren’t so, well, horrible, let’s take a look at a few sliders that really miss the mark since it will help paint a better picture of what to look for in a good plugin for this feature.
While these themes are by no means ugly, to say the least, they could use a bit of improvement in the slider department. By default, they weren’t accessible and didn’t provide a great user experience.
The first example is from the Small Business theme.
Each slide for this themes includes between four and six lines of text with fast scrolling making it difficult to read before the next slide is displayed. It’s also not fully accessible for the visually impaired while it does offer minor usability with a keyboard.
It’s also not fully responsive. While the slider does resize itself on smaller screens, the text disappears completely leaving behind only an image. If you were to use this theme’s default settings, your conversion would drop all the way down to zero for mobile devices since no button will be displayed to click on.
By default, its homepage consists of a logo, slider and navigation. Since the main attraction on the page is a slider and little else, it’s a fabulous theme to display images elegantly, but it’s terrible for SEO and the slider isn’t fully accessible or responsive in the slightest.
While it looks striking with the animations and all and it does win points in accessibility for not sliding automatically, it won’t be practical for your search rankings, conversion rate and user experience.
Then there’s The Voux magazine theme. It’s a great theme with a slider that’s responsive and deceptively accessible, though, not on purpose I imagine.
This theme is a premium one that seems perfect on the surface, but it’s not fully accessible. Mind you, it’s a lot more accessible than many other themes, but its default design has a flaw.
Those who need to access this default theme’s slider with their keyboard will notice that you need to cycle through the slider a few times before being able to access the rest of the content on the page. Many screen readers may also have issues reading the text on each slide.
While this is a lovely magazine theme, the slider has a few hits and misses. Where the slider falls short the most is in accessibility which goes to show that purchasing a premium theme doesn’t always guarantee perfection. It’s important to fully review a theme before you go ahead and buy or download it.
Otherwise great looking sliders can, in actuality, be a liability. It’s important to fully review a theme before you go ahead and buy or download it.
If You Must Use Sliders
In reality, all sliders are bad, but there are ones that aren’t so great and sliders that aren’t actually all that bad, mostly because they are more accessible and user-friendly than most others. If you absolutely have to use a slider, then these are some examples of what to look for when choosing your theme or plugin.
The Sketch theme is a great example of a solid slider (if such a thing exists).
The biggest point I would like to stress is that it’s accessible because the slides do not rotate automatically. Instead, a user needs to click through the slides manually. This isn’t the case with most other sliders.
It’s also quite easy for screen readers to decipher the text featured with the images. This also means a slightly improved search ranking, but there still may not be much to look at in Google.
A visitor can also click on the entire slider to access the linked content, rather than on a single button, making it easy to use. It’s also responsive, although, the slider is replaced with a featured image.
This may sound like a terrible and counter-intuitive idea, but it’s surprisingly not when you consider many mobile devices do not handle sliders as well as the desktop version.
One of the reasons is that the screen is just too small to be able to easily click on the slider navigation buttons which is an exercise in futility and frustration for many users. It’s much easier for the end user to just not include it at all.
Like Sketch, the Chronicle theme has a manual slider that’s accessible in the same key ways and includes many of the same features. There is one area where it differs.
This slider is fully responsive, but instead of only displaying a featured image on mobile devices like Sketch, it differs in the way that the sliders remains intact.
What makes this slider better than many others is the fact that the slider’s navigation buttons remain the same size on the smallest screens as they do on the desktop version. With a quick, small swipe, the icons appear for you to easily navigate through the slides without the need to squint and the icons remain visible until you tap away.
If you really think you want or need a slider on your full-sized and mobile screens, this is the kind of slider you ideally should aim for when designing your site.
I think this next example is the best one of the three because when you get right down to it, it’s barely a slider at all in the traditional sense.
The I Am One theme does display slides automatically and even though this slider isn’t technically accessible for that reason alone, it also doesn’t include any text to require accessibility.
The slider passes the swap test since you could replace the slider with a single colored background and no meaning would be lost. There is a header overlay that doesn’t change as the slider does, meaning the images are strictly for aesthetic purposes and nothing else.
The feature header can also be seen by most screen readers which also means this theme is a bit more SEO-friendly – not by too much, but you’re better off with this slider than most others out there. It’s also fully responsive, not that it really matters in this case.
This theme has a great slider included because it’s not actually required to fully access and read the site’s content. Since you really shouldn’t use sliders, having one that doesn’t add or take away functionality from your site is almost as good as not having one at all. If you must use a slider, this is the biggest feature you should try implementing.
Conclusion – and Our Verdict on Using Sliders
We’ve looked at sliders from many different angles including the current trends, site and revenue performance and the overall user experience.
The evidence is clear: you should really stop using sliders altogether on your sites.
If you absolutely must use them, the best sliders to use are the ones that have the least impact on your site and can pull right out without disrupting your site’s call-to-action and content.
If you would like other tips on how to improve your site design, check out our post How Many Of These 7 UX Blunders Is Your WordPress Site Making?
So what do you think after reading all this? Are you ready to ditch sliders forever or do you think I missed some key reasons why sliders should be here to stay? Let me know in the comments below.
Image credit: Inc.