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