Website Sliders Suck

Reading Time: ~ 9 minutes

What Is a Slider?

A slider is a term used to describe adding a slide show to a website. Common positions for image sliders are main homepage sections (typically the hero section), banner areas, and within landing page content.

What Caused the Slider Revolution?

As far back as 2011, web designers proclaimed that sliders made your website more attractive.

This group of designers said sliders acted as focal points and were an exceptionally smart way to engage online interaction.

Various forms of sliders were built to make them fancy and to encourage interaction.

• Some automatically started playing and rotating
• Some required you to click to change images
• Some were crisp images
• Some contained stylish designs and gorgeous layouts
• Some had text overlays

Design pundits for modern sliders advocate that sliders provide:

1. focus on the key message above the fold
2. stunning visuals to display more than just one image
3. ways to display multiple calls to action for your important content

While some may believe this to be true, sliders simply are not worth the trade-off in speed or potential irritation to the user.

In addition, sliders are proven even more ineffective due to a phenomenon called “banner blindness.” This means that people tend to ignore banners and other areas where ads or ad-like elements (i.e. sliders) are present. I’ll get into the pros and cons of sliders more in a moment.

Sliders were most commonly used on business websites. Portfolio websites adopted sliders as a way to showcase portfolio items or ecommerce products.

Web designers and website owners placed sliders at the top of their sites as a way to show as much visually appealing and important content as possible “above the fold.” Visitors to the site could patiently review the website highlights and easily take action.

Sliders & Page Speed Today

Almost 10 years later, people still ask about and use sliders. WordPress slider plugins have gotten much better, both in terms of functionality and performance, but you still have to be careful in your choices.

There have also been quite a few changes regarding the development of web pages during the last ten years that make sliders a bad choice.

Mobile phones have changed how people interact with websites. It has become customary to scroll through a website on a mobile device.

Google has emphasized that sites need to load fast. In 2018, they announced page speed as a ranking factor.

We expect webpages to load quickly. When they don’t, we get impatient (and leave).

The average bounce rate for pages loading within 2 seconds is 9%. As soon as the page load time surpasses 3 seconds, the bounce rate soars, to 38% by the time it hits 5 seconds. –Pingdom

Amazon found that every tenth of a second (100 ms) delay in page load time translates to a 1% drop in sales. Half a second delay caused a 20% drop in traffic. –Greg Linden

A 100-millisecond delay in website load time can hurt conversion rates by 7 percent. –Akamai Online Retail Performance Report

For anyone not as huge Amazon (i.e. all of us/bloggers who depend on website sales for a paycheck), these numbers can be devastating.

So with all this data illustrating that people don’t want to wait, why make your website visitors wait to see the next slide?

Think about that for a second.

Do you really think people will stop and not scroll your site in order to wait for the hero section to display the next image? How many hero images are you going to display in your slider? The user has no way of knowing, and they’ve got more important things to do. Realistically most people are not going to wait and watch everything from the first slide to last.

Design for How People Browse (Scrolling) Instead

As previously mentioned, with the rise of mobile devices and a speed-first web, people are accustomed to scrolling. It is second nature, and you should create your website design accordingly.

We prefer to display those hero images typically found in sliders as static images in sections with relevant calls-to-action (CTAs). We even separate those CTAs on our homepage with sections of content including testimonials, services, an about section, and most popular products.

Near the bottom of our homepage, we display the featured images and titles of our most recent posts. Site visitors can click (or swipe on mobile) to view the next set of images and titles in the series.

Why Sliders Suck

There will always be people who love sliders and people who vehemently disagree with the use of sliders.

I oppose the use of sliders as a general rule. And yes, I’m jumping on the bandwagon and using the idiom “sliders suck.”

Features of Sliders

Let’s re-review the features of sliders really quick:

• Auto-playing slide shows
• Eye-catching full-screen images
• Fancy transitions on your website
• Have buttons to click for calls to actions

That all sounds great in theory. Here’s the problem. Sliders actually do the following:

• Cause huge performance and speed problems
• Lose effectiveness with today’s impatient viewers
• Fail to provide value in a world used to scrolling

Most Slider Plugins Are Bloated & Inefficient

Most slider plugins load too many scripts that slow down your website, load too many high-resolution images, and use bloated code with inefficient features. Do yourself and your website visitors a favor and just ban these plugins altogether.

Website Sliders Slow Down Your Site

Nobody wants performance problems—sliders can significantly slow down your website if they are not coded properly. Performance and speed issues negatively affect your customers while adversely affecting your SEO.

Sliders Are not Mobile Responsive

Typical sliders are also not mobile responsive. Not only is this bad for the user experience plugins that are not mobile responsive can cause other issues on your site.

Here’s a related example of why this is so bad…

We recently audited a site and found they were unknowingly creating two versions of each website page, one for mobile devices and one for desktops. Turns out a social sharing plugin wasn’t mobile responsive, so their caching software automatically created two cache files. 

Your site needs to be fully mobile responsive. This day and age if you want to be competitive and be able to monetize, it’s a non-negotiable.

Why Slideshows Suck, Too

Slideshows or carousels became popular with the rise of listicles. Top ten lists, crazy images and typography, and ads seemed like the perfect pairing on a slideshow page to generate clicks and ad revenue.

The slideshow/advertising combination still works today. But it’s super annoying, creates thin content which hurts your search engine rankings, and is clickbaity.

How to Build Beautiful Homepage Sliders

You might not want to hear it, but beautiful homepage sliders are only that: beautiful.

In terms of conversions, they are ineffective and can cost you money in the long run.

You can still create an effective design that converts well though. Here’s how.

Using Sliders in Web Design

If you are going to use a slider on your website use the Genesis Responsive Slider plugin. The reason we recommend this plugin is because it allows you to create sliders that actually are mobile responsive (unlike most).

Here is an article from Susan Ramsey—now a part of the BizBudding team since our merge with Pretty Darn Cute—on how to set up the Genesis Responsive Slider.

Sliders in Themes

Most themes don’t have built-in slider functionality. Mai Theme Classic (our v1 themes that utilize the Classic editor) include the [grid] shortcode for powerful and dynamic layouts.

Sliders display content in a horizontal scrollable slider, instead of rows.

Use this [grid] shortcode to display content in a horizontal scrollable slider:

[grid content="post" slider="true"]]

This default slider already uses arrows=”true” to your [grid] shortcode. You can also apply autoplay=”true” to automatically have your [grid] scroll through the content, thus creating movement on your screen.

Use this [grid] shortcode to auto-scroll the slider:

[grid content="post" slider="true" autoplay="true"]]

After you autoplay the slider, you can auto-scroll the slider in milliseconds by adding the speed=”#” attribute to your shortcode.  The default speed is 3000 milliseconds (3000 milliseconds=3 seconds). To make your slide scroll faster or slower, just adjust the speed.

Use this [grid] shortcode to make your [grid] scroll faster (2 seconds):

[grid content="post" slider="true" speed="2000"]

When to Use Grid

Use the [grid] shortcode when you want to display:

• Recent Posts
• Child pages of current Page
• Child pages of a specific Page
• Post Categories
• Child Categories of a specific Category
• Posts and Pages by Category, Tag, or ID
• WooCommerce Featured Products
• WooCommerce Product Categories
• Mai Favorites
• Mai Testimonials

Sliders: Perfect for Testimonials

Utilizing the slider parameter is one of the most useful [grid] parameters to display testimonials. [Grid] can be used on any post type or page templates to format a variety of content types into a grid—including testimonials via our Mai Testimonials plugin. Your testimonials can be easily displayed on a page via the [grid] shortcode, which means they can be in columns, as a slider, in a widget, etc. In our [grid] Shortcode Parameters support doc, we have several important code snippets you can use to showcase your testimonials beautifully.

Users can easily swipe through mobile responsive sliders with their thumb, creating an interactive experience. To display Mai Testimonials in a slider, the only [grid] attribute required is slider=”true” like in our example below:

[grid content="testimonial" columns="1" slider="true"]

Here’s what it looks like:

[grid content="testimonial" columns="1" slider="true" adaptiveheight="true"]

How do you determine the perfect slider time? I think it’s often determined by the SWAG method (Scientific Wild Ass Guess).

However, there are a few times when you can calculate what the best slider transition time should be.

Slider Transition Times for Testimonials

There are programs and tools that calculate how long it takes to read words.

I love these tools. So much so that we use them on our own website. I like them because it tells me how long it should take me to read an article in full.

Taking into account the time it takes to read something when creating content—whether it’s blog posts, sliders, or anything else—is always a good idea for the user experience.

That brings me to my next topic: slider transition times for testimonials.

Slider Transition Times for Long Testimonials

Long content testimonials should have increased slider transition times. The reason is that it will take people longer to read the testimonial.

The average adult reads 200 to 250 words per minute.

Let’s look at an example. Your 575-word blog post would take 2 minutes 52 seconds to read.

Here’s an example of a typical long-form testimonial:

“We love the BizBudding team! They took our site to the next level in design, functionality, and speed. We especially enjoyed their friendly and fun approach to the work and their dedication to our project. Their team exemplifies quality work and exceptional communication.”

You can use Google Docs to get a total word count, just visit Tools > Word count. Our testimonial above is 43 words and would take the average reader 13 seconds to read when reading 200 words per minute. Time it for yourself. How close are you?

A fast reader (300 words per minute) would read the testimonial in 8 seconds. When you are dealing with mostly long testimonials, it’s best to go with the slower read time or a median to satisfy the majority of your users.

Use this process to calculate how long the transition time should be for your long content testimonials.

Slider Transition Times for Short Testimonials

We tend to be able to read groups of two words quicker. Our minds make an association and we move on. Longer form content requires us to concentrate a bit more.

Shorter, two-word testimonials can transition quickly and work well for transitions between one and three seconds.

Image-based Testimonial Slider Times

Images and groups of words with images create a feeling of association and comfort in our minds.

Use logos of brands that your customers associate with.

You can also use images combined with words and symbols. Images of your customers paired with their testimonial can help increase trust because people can see that it came from a real person. You can use a plugin like WP Business Reviews to incorporate image-based testimonials with slider transition times of 2–4 seconds.

Key Takeaways

• Testimonials are the only content we use in sliders on our website, and we do so with functionality built into Mai Theme Classic that avoids the common pitfalls of sliders. If you decide to use sliders we recommend you take this same approach.
• Mai Testimonials makes it easy to configure and display your testimonials with sliders.
• Other recommended tools: WP Business Reviews, Genesis Responsive Slider plugin.
• Longer testimonials should have transition times of 8 to 12 seconds while short or image-based testimonials should transition with seconds.
• Opt to display hero images as static images in homepage sections with relevant content and CTAs.
• Page speed should be your number one priority (along with great content). Sliders slow down page speed and people won’t wait.