As you browse the Internet, you will notice that many websites use a rotating image effect or “slider” on their website’s homepage. Sliders are being phased out by many web designers. So, here at WP Hubly, we wanted to identify possible image slider alternatives for your website.
Some may feel that the image slider gives them the opportunity to highlight multiple offers, products or services to visitors. Or they may think that they can use the space to have more than one “Call To Action” (CTA). Still, others have decided to use a slider or carousel to display an image gallery or a portfolio of their work.
Even the web design community is divided on the use of a slider. However, more web designers are moving away from using an image slider.
There is a group of influential people on the Internet that feel the image slider should just go away. You can read some of their comments here:
- Sliders Suck and Should be Banned from your Website – Yoast
- 6 Reasons why Image Sliders are bad for Conversions – Instapage
We strongly feel that sliders for the purpose of rotating more than one offer on a home page are not the approach to take. Here is why we feel this way?
Reasons Against Using an Image Slider
Here is our list of why we think you should rethink the use of a slider. We will first start with the effect they have on your users:
- Sliders confuse people, especially when you barrage them with too many offers.
- People ignore a slider because it behaves like an advertisement.
- Visitors will not sit and read every slide in an image or content slider. Many messages will be lost.
How about from a web design perspective?
- A slider will slow down your website because it needs to load additional JS or CSS files and this will hurt your SEO ranking
- Sliders do not work well on mobile devices.
- The slider causes important content to be pushed down so the visitor has to scroll to see it.
In July 2013, a study was done on a few of the website for the Notre Dame University. On the main website (nd.edu) with over 3 million visits, less than 1% of site visitors clicked on a slider. When they did click 89% of those are clicking on the first slide. You can see the results of the test here.
This would seem to indicate that a static image would have worked just as well instead of adding of the additional overhead of loading an image slider into the web page.
We would really like to hear your comments about using an image slider. What do you prefer? What strengths or disadvantages do you see in using an image slider? Please share your opinion with us in the comments section.
Image Slider Alternatives You Can Try
In an effort to provide a better experience for visitors and provide them with content they will actually read, we have provided some professional looking alternatives to using an image slider.
Our goal was to find a block of content that maintained a high level of professionalism. We also wanted to provide a more focused message for that top section of the page as it is the first thing website visitors will see on the website.
Based on the feedback from the Notre Dame study, we also wanted solutions that would increase conversion rates and help with SEO.
Our last goal was that the suggestions needed to scale well across varied devices. So mobile responsiveness was a strict requirement.
With this in mind, here are some suggested alternatives to using an image slider. We hope you find them useful.
The Hero Image
Apple is a great example of how this can be used instead of a slider. They highlight multiple products on their homepage. But each image is rich in colour and clarity. This method is also easier for tracking conversions.
PayPal has taken a revised approach and still used an Image Slider but it is not auto-rotating. Instead, the “Hero” area is using 3 static images in an image slider that a user must click on manually. I am not sure what they are trying to accomplish by using this method. Additional files or resources for the slider still need to be loaded. And the first image is more likely to convert better than images two and three.
If you are looking for more inspiration for using a hero image, you may want to start with HTML5Up. The offer free HTML templates for building a new website. These templates may give you some inspiration for your website.
The Hero Video
A hero video uses a video in the space where the slider would go instead of a static image. The trick here is to find a video, not too large in size but still good quality that loops seamlessly. There is a good example here at The Hidden World of the National Parks.
If you want to know how to do this for your website, you should check out this helpful post on embedding a video background. They also have links to some sources where you can get good quality videos fit for this purpose.
A cinemagraph is what we have used for the featured image of this post. This method was chosen as a website trend that was taking hold last year.
The Budweiser website has a very good implementation of this on their homepage. The only issue we found with this is in the time it took to load.
If you want to create your own cinemagraphs, you can visit Flixel. They have an application that runs on MacOS and iOS that helps you create a cinemagraph and then they will host it for you as well. The Flixel website also sports a cinemagraph as a full page background image on the home page.
Here are some more tutorials on how to make your own:
There is also a lot of information and some helpful links on cinemagraphs at the Cinemagraph website.
The Full Page Background Image
This acts in a very similar fashion to the Hero Image. It provides a couple of options as far as what happens when the visitor scrolls down.
Google has used a semi-full page background for the Chrome homepage (https://www.google.com/chrome/).
The Awwwards website has a great portfolio of websites using a full page background that has been given awards for their design. One of our favorite and cutting edge sites was Vier Antwerp (https://vierantwerp.com/). This site has used the combination of a “Hero Video” and then divided the space into clickable boxes that display a static image when the mouse moves over them. This may be overkill, but I will bet it gets far more attention than an image slider.
Are you Using an Image Slider?
I am sure there may be other image slider alternatives. But these were the few that seem to have taken hold in the industry already.
If you are not sure which alternative to use, look around at some of the websites we mentioned to gain some inspiration for your own website. In the end, there is not a definitive answer as to which method works best.
With web design trends shifting away from using an image slider, we hope you found this information useful.
Please feel free to share your honest and direct opinions about using an image slider. We would love to hear from you.