So you want to use a “slider” on your webpage. But should you? Find out here.
What is a Slider?
An image slider (or carousel) is a popular webpage feature – especially on homepages.
A slider is basically a slideshow of images, text, and/or videos that may either automatically scroll or allow visitors to scroll through the content.
Sliders are usually powered by JavaScript, used on the top of webpages, and automatically advance at time intervals. But, like most popular webpage features, there are a variety of slider solutions.
You’ve probably seen sliders used before. This ecommerce store, for example, uses a slider to show off the variety of custom products they offer:
Slider Pros
Some trends defy explanation – the slider trend isn’t one of them.
Here’s why sliders took over the web:
Pro: More content in less space.
Sliders, by nature, make portions of your content visible at different times. The upside to this is that you can pack a lot of content into a small space.
Want to tell a visual story about your new product (but don’t want to use a lot of vertical scrolling to do so)? A slider solves this.
Pro: Text on image layering without image manipulation or writing code.
Before popular slider plugins layering images and text required either image manipulation or code.
Sliders have eliminated this need for most users.
A robust slider plugin will handle the image changes and coded functionality for you – so you can focus on design.
Pro: Interactive content that draws your visitors’ attention.
The best sliders give the visitors control (either through forward and back buttons or with scrolling).
Such functionality makes sliders interactive. Interactive sliders can both catch attention (and hold it) if designed well.
Slider Cons
But sliders aren’t always the best choice. In fact, sometimes they can just be a poor choice for your webpage.
Con: Few slider plugins and extensions follow responsive design best practices.
The majority of web traffic is now from mobile devices. Consequently, your webpages should be designed to respond to various screen sizes (from a 4″ smartphone to a 27″ desktop monitor).
Unfortunately, few sliders are truly responsive. Too many slider plugins will just scale your entire slide to fit the width of the screen (which will probably make your content way too tiny on mobile).
There are some responsive slider plugins (like Soliloquy) and others that can be configured to respond well to different sizes after a learning curve (like Slider Revolution).
But be prepared to put some work in to get your slides looking great on every device. Oh, and test everything. Even many responsive slider plugins won’t look perfect on every screen size on first try.
Con: Most visitors will only view one or two slides – much of your content will go unseen.
Fact is, people don’t stay on webpages very long.
There is a temptation when designing webpages to think that people will read every word (like a riveting novel).
I’m sorry to break it to you but people don’t interact with webpages like that.
If your visitors are like the average online users they may only see 1-2 slides before the scroll on (or click on another page).
Con: Some of the best slider plugins and extensions have a steep learning curve.
Powerful software has muscle – meaning options for you, the wielder of such power.
But with great power comes great responsibility.
Be prepared to take a few days to learn your slider software.
Con: Heavy above-the-fold resource demands (they load slowly!)
Sliders are slow.
Well, the sliders themselves aren’t slow (usually they advance the slides too quickly). But they do slow down your webpages – sometimes a lot!
Sliders are nearly always found “above the fold”. That means that they should be visible to the visitors as soon as someone loads the webpage.
But sliders often use high quality (and large) images and hefty JavaScript files. What does that lead to? Much slower load times for your webpages.
When using a slider be sure to optimize your images (try to retain high resolution while compressing size to 1MB or less). If you aren’t already, consider minifying your site’s JavaScript files to shave off a few megabytes.
But, when it’s all said and don’t, if using a slider is hurting your site speed significantly it may not be worth the increased bounce rate and decreased search engine rankings.
So When Should You Use a Slider?
Use a slider when you need an interactive method for displaying an album of photographs.
There are numerous ways to show off your original photographs. A well designed and responsive slider may be just the ticket. Allow your users to scroll through your best photos within a category in a high resolution and interactive format.
Use a slider when you want to illustrate a series of related features or items in a package.
If you’re launching a new product or service you may choose to use a slider to illustrate its features, uses, or benefits.
If you design each slide to lead the visitor to the next you can decrease your bounce rate and increase the chance that your visitors see your content.
Use a slider when you want to tell a story – even the story of your company.
Story telling is one of the most powerful communication methods we people have at our disposal. You can configure a slider to tell a story – even the story of your company – using images, text, and video. Consider making your slider function more like a photo album or book and leave each slide off wetting the apatite for the next.
When Shouldn’t You Use a Slider?
Don’t use a slider when you want one just because you saw a cool site use one.
Following “trends” for trends sake alone is seldom a good idea. By the time you get around to doing it well most sites will be moving on to something better (like the “hero image”).
Don’t use a slider when you don’t know what your slider should include or why it exists.
Every element of your website should have a purpose. If your slider doesn’t have a particular purpose don’t use a slider.
Don’t use a slider when there is a simpler (and more responsive) method of displaying your content.
Ask yourself “Can I accomplish this purpose using a simpler element.” If the answer is “Yes” you probably should take the simpler route. Simpler usually means more easily updated, more responsive, and (most importantly) less resource intensive.
Don’t use a slider when your site is already slow or using a slider would significantly decrease site speed.
Does your webpage already have speed issues? Is Google ranking you in the red for mobile? Are your visitors made to wait for your page to load?
Don’t use a slider.
Fix your site speed issues first. A slider will only make them worse.
Best WordPress Slider Plugins in 2018
If a slider is the best choice for your site and your purpose check out these professional slider plugins for WordPress:
- Soliloquy – Best responsive slider plugin for WordPress.
- Slider Revolution – One of the best selling slider plugins for WordPress.
- LayerSlider – Multipurpose animation plugin often used for sliders.
The Best Slider Alternative in 2018
But wait!
Do you really need a slider?
There may be a better option – and it’s simpler than you think. It’s often called the “hero image”.
Hero images are created using just HTML and CSS. They’re lightweight and beautiful and can include images, text, and interactive elements.
Although it won’t advance from one image to another you’ll notice that it looks quit a bit like a slider.
You can make your own hero image!
CSS
/* Most hero images use a background image with a color gradient and take up the entire height and width of the screen. */
.hero-image {
background-image: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url("https://www.rystedtcreative.com/wp-content/uploads/2018/10/mojave_dynamic_2.jpeg");
height: 100%;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
position: relative;
}
/* Define the style of the text so that it is centered and visible. */
.hero-text {
text-align: center;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
color: white;
}
/* Style the call to action button */
.hero-text button {
border: none;
outline: 0;
display: inline-block;
padding: 10px 25px;
color: black;
background-color: #ddd;
text-align: center;
cursor: pointer;
}
.hero-text button:hover {
background-color: #555;
color: white;
}HTML
<div class="hero-image">
<div class="hero-text">
<h1 style="font-size:50px">I'm a Hero Image</h1>
<p>I'm lightweight <em>and</em> beautiful.</p>
<button>Click me</button>
</div>
</div>Now you can go make your own hero image – sans plugin!
Joshua Rystedt’s Tips for Better Sliders
But hey, as awesome as we think hero images are, sliders still make sense in some circumstances. If you do use a slider keep these things in mind.
The best sliders…
- Are scrollable – either with a mouse wheel or with a swipe.
- Include back of forth buttons.
- Automatically advance at a pace relevant to the amount of textual content on the slides (ie probably more slowly than you expect).
- Pause automatically scrolling when a visitor’s cursor hovers over it.
- Only load the first slide “above the fold” – let the rest load after the webpage is visible.
- Are responsive.
- Are clearly legible.
- Include beautiful photos that are also one megabyte or less.
So, is a slider right for you? Let us know what you decide in the comments below!
Rystedt Creative’s WordPress Development team can create responsive sliders and hero images for your webpages while maintaining search engine optimization and a marketing funnel. Your next step is as easy as contacting us.
