The trend that finally replaced the website slider

Ok for starters we don’t need another blog post talking about why website sliders are 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.

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.

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.”

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:

http://lapface.com/

No slider

https://gleehq.com/signup

No slider

https://www.apianalytics.com/

No slider

https://www.securityknowledgeframework.org/

No slider

http://tagsdock.com/

No slider

http://whatsroulette.com/

No slider

http://weightof.it/

No slider

https://uptimebutler.com/

No slider

https://robinpowered.com/

No slider

http://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

http://www.growthverse.com

No slider

http://doyouevenlist.carlhamlet.com

No slider

https://www.momentaryink.com

No slider

http://www.mattermost.org

No slider

https://www.muzeek.com

No slider

https://www.hellotwist.com

No slider

https://www.apianalytics.com

No slider

http://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:

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:

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.

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:

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:

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:

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.

Patrick Coombe is the founder and CEO of Elite Strategies Llc. Patrick takes a hands on approach to managing Elite Strategies and loves to get involved with technical projects relating to clients inbound marketing needs.