Ok for starters we don’t need another blog post talking about why a website slider is so bad. That has been done again and again and again.

We’ve seen studies showing they aren’t great, even websites dedicated to showcasing how terrible they are. There was a ridiculously horrible case study published back in 2013 that talked about how much sliders hurt ND.edu (Notre Dame University) and basically had a 1% CTR.

Before we go any further let me also clarify something. When I say “sliders are bad” I am mainly referring to them in the context where they appear at the top of the homepage on websites. Sliders used in other capacities such as a gallery or eCommerce can actually be beneficial. In fact, a well-placed product carousel at the top of an eCommerce shop is one of my favorite features.

website sliders illustration

Personally I am not a huge fan of website sliders on most websites. I find them distracting, annoying, and kitschy. But this isn’t new for me, I haven’t been a fan of them since the beginning and have recommended to get rid of them on a number of different occasions. They’ve confused my customers, angered my clients and even caused a large scale security flaw in several of my websites. Want a quick way to double the size of your website? Install a slider? That’s right, most of these sliders rely on a ton of JavaScript and CSS not to mention the high quality images that are loaded alongside them.

Just because you can use it, doesn’t mean you should

Think about the QR code. A magnificent piece of technology designed to help make people’s lives more easy and simple. Millions of dollars were dumped into this technology and companies from Starbucks to McDonald’s adopted it on their websites, storefronts and more. But let me ask you a question, when was the last time you even heard of someone using a QR code? Have you even seen anyone use a QR code? I haven’t! Just because a technology exists, doesn’t mean you should use it.

qr code flop

Even as far back as 2011 web developers started to hate them. Here is a piece of a discussion on Stack Exchange (UX) that really stuck out for me:

“Almost all of the testing I’ve managed has proven that content delivered via carousels are missed by most users. Few interact with them and many comment that they look like adverts — we’ve witnessed the banner blindness concept in full effect. In terms of space saving and content promotion, a lot of competing messages get delivered in a single position that can lead to focus being lost. I’m quite certain that they are indeed a user-interface cliché borne out of their inclusion in wire-framing apps and being part of JavaScript frameworks.”

In addition to all this, they really don’t work very well on mobile. Yes I know there are alternatives and a good responsive site will ditch the slider if it is less than a certain amount of pixels. Despite that, many sliders will still fail “the mobile test.”

sliders-mobile-friendly

In short, enough evidence has come about that website designers and website developers have finally wised up and changed their ways. How am I so sure? Let’s dig in and do a little internet research.

Are any new websites using sliders?

In my opinion one of the savviest and professional websites on the interwebs is Hacker News. Hacker News has a “show” section where people can show off their startups, apps, websites, or even ideas. Generally this section is known for having the newest websites using the newest development technologies.

SO let’s look at the top 10 websites of today and see if any of them have a slider:

https://lapface.com/ No slider
https://gleehq.com/signup No slider
https://www.apianalytics.com/ No slider
https://www.securityknowledgeframework.org/ No slider
https://tagsdock.com/ No slider
https://whatsroulette.com/ No slider
https://weightof.it/ No slider
https://uptimebutler.com/ No slider
https://robinpowered.com/ No slider
https://hyperlax.tv No slider

Out of all of these websites on Hacker News, not one of them utilizes a slider.

Now let’s take a look at the top 10 websites on Product Hunt which is also known for being the “best of the best” when it comes to quality:

https://neighborly.com/go No slider
https://www.growthverse.com No slider
https://doyouevenlist.carlhamlet.com No slider
https://www.momentaryink.com No slider
https://www.mattermost.org No slider
https://www.muzeek.com No slider
https://www.hellotwist.com No slider
https://www.apianalytics.com No slider
https://hyperlax.tv No slider
https://www.pramp.com/ No slider

Again, not a single website on our sampling of Product Hunt websites featured a website slider.

With all that said, where did the slider go? What took its place? Where do we go from here?

Enter: the hero image

A hero image can be defined as a very large and attractive header image, normally towards the top of a website. A lot of times hero images are photographs but they can also be artwork, illustrations or even video.

Photographs work well because they are so relatable. Carefully selected photographs can tell a story about your company as well as the people within your company. One such example of this is Gmail’s signup page:

gmail hero image

Fullscreen Backgrounds

Other websites that feature actual people from the website can really help personally connect the website to the visitors in a way that words just can’t do:

website full image

Larger companies have also started to make big moves to hero images and in favor of ditching sliders completely. Last year Yoast announced that none of their themes would include sliders.

Most websites are trending towards some form of hero style design these days. Dropbox is a great example of this.

dropbox-eg

Basecamp uses a very unique style that does not favor a carousel. The most important aspect about the “above the fold section” of the home page is that there should be clear call to actions. It is hard to “call anyone to act” when the action is moving every 3500 milliseconds like a slider. On the basecamp.com homepage, there are 2 very clear call to action’s that you see right away:

basecamp-eg

Even on our website we opted out of using a website slider in favor of 1 static image. We’ve found in our own experience that using a hero image at the top of a page is much better for conversions:

SEO company website

Large Video Backgrounds

Many websites in 2015 have been implementing video backgrounds in their designs. Since most users are now on broadband connections and fast mobile 4g and wifi connections, webmasters now have the ability to display videos within the background of a website. Video backgrounds aren’t for everyone, and you should follow a few basic tips but if you implement them correctly you can get your message to your users in a very unique way.

Here is one example that I came across recently that used a video as a background:

 web design full video background

If you are going to use a video as your main content piece above the fold, there are some basic guidelines to follow:

  • make sure your text contrasts well with your video
  • mute your video by default, nothing more annoying than sound playing when you land on a website
  • adjust for mobile – it is probably not a good idea to have your video play on mobile
  • make sure your design is compatible with all browsers, HTML 5 has made this easier but there are still issues

A word on trends and web design:

The best thing you can do to help not perpetuate the slider and other trends is not to endorse it. If you have a client in favor of it, show them the evidence and the research. It is your job as a professional to guide your clients in the right direction.

Remember you are a professional, just because a client may “like” a particular design does not mean you should allow them to move in that direction.

There are still thousands and thousands of websites with sliders on them and hundreds of carousel plugins available for download. With time, effort and an adherence to good practices we can rid the internet of this awful technology.