How to Engage New Website Visitors With Web Slideshows

Eight seconds. That’s how much time you have to capture the average internet user’s attention on your website. You can tweak your content and page layout as much as possible, but there’s no way around it: Engaging website visitors, especially first-timers, is a real challenge for online businesses.

However, this challenge is very much solvable thanks to the numerous web design technologies at our disposal. Among all the methods for quickly grabbing attention and prompting action, you’ve probably seen the web slideshow technique. And there’s a good chance it could work on your site, too.

Now, when you hear the term slideshow, your mind might immediately jump to PowerPoint presentation, and from there, conference room and boring.

If so, try to forget about PowerPoint for a moment. As it turns out, web slideshows are among the most popular and effective methods for conveying visual content to visitors.

In this guide, we’ll learn about common uses of web slideshows, the best practices for implementing them, and how to get started with placing one on your website.

What is a website slideshow?

A website slideshow, also known as a “slider,” is a web page feature for presenting multiple images in a gallery-like manner. A slider displays one image at a time, and cycles between images automatically after a timeout and/or after a user input, such as a swipe or a button click.

Specifically, online businesses tend to use sliders on their homepage to communicate their missions or to showcase CTAs for new products. Take this simple example from Microsoft’s website:

Image Source

This style of presentation aids the browsing experience in two primary ways. First, it draws the viewer in by placing important content above the fold, no scrolling required. This content could be new products or offers, an announcement or blog post, or anything else visitors should know.

Second, web slideshows can add visual flair to your pages. For example, cycling through big, vibrant images creates a memorable experience and can even evoke certain positive emotions in readers that they then associate with your brand. This is especially effective for artist portfolios, media companies, and other organizations with a strong emphasis on aesthetics.

When to Use a Web Slideshow

You’ll find sliders across the web, but there are some cases in particular when they work particularly well. Let’s do a quick rundown of their best uses:

New Products/Offers

Place a slider on your homepage and populate it with CTAs showcasing the latest your business has to offer, à la the Microsoft example above. New to CTAs? Check out our favorite examples.

General Information

Many organizations use sliders to communicate their mission, strategy, or story. You’ll see this frequently on sites for consulting agencies, nonprofit and educational organizations, and special projects without a physical product to present.

Product Showcase

Rather than cycling through multiple products, you might focus on one product or product line. With this approach, each slide can explain a different aspect, benefit, or iteration of your product.

Rather than presenting everything at once, a slider breaks down the information into digestible pieces of content. For example, check out this sleek design from Nike, showcasing 15 years of the Dunk sneaker line.

Image Source

Portfolios

Media companies, creative organizations, and freelance creatives often use sliders to highlight their latest or best work. You might present multiple images from a single project, or multiple projects with links to their dedicated pages on your site.

Featured Articles

News sites and blogs with frequent updates can add CTAs for their latest or most popular content in a slideshow. Avoid plain text CTAs here — instead, use featured images for each post to direct users’ eyes toward your new content.

Now that we’ve seen what sliders can do, let’s next discuss how to implement them. And yes, there is a wrong way to make a slider.

Web Slideshow Best Practices

1. Enable automatic and manual transitions.
2. Visually indicate the number of slides.
3. Optimize for page performance.
4. Mind the transition effects.
5. Make it mobile-friendly.
6. Make it accessible.

From a usability standpoint, sliders are a bit of a double-edged sword. Due to their popularity, slideshows are familiar to the vast majority of people who land on your page, and they should have no issue understanding the purpose of the feature.

However, this also means that poorly-designed sliders will disengage users very quickly, especially if it’s the literal first thing they see. For this reason, it’s essential to carefully plan out your slideshow element and follow these six best practices:

1. Enable automatic and manual transitions.

As I mentioned, web slideshows can rotate through their content automatically based on a time, or manually when a user clicks an arrow button or swipes the screen.

We recommend your slider allows for both methods. On page load, the slider transitions automatically, providing enough time for the user to take in each image. If a user wants to change slides themselves, they can do this too, which might deactivate the timed transitions. This approach gives users better control over the content they want to view. Also, this is how most web sliders are implemented, so it’s intuitive for visitors.

To aid users, place your arrow buttons on both sides of the element (left and right side, or top and bottom). These buttons can be visible within the element by default, or appear when a user hovers over the slideshow. That style choice is up to you.

2. Visually indicate the number of slides.

It’s a good idea to signal how many total slides there are in your slider, so users know how much content is left to view. You can do this with thumbnails that appear on hover-over, numbers (e.g., 1/5, 2/5…), or another subtle visual cue like in the Microsoft example above.

3. Optimize for page performance.

If your page takes more than a few seconds to load, visitors will start losing interest. Many won’t even see the full slider you worked so hard on.

First, think about the number of images in your slideshow. The more slides, the longer the load time, so only include the slides you need. Save the rest of your content for later on the page. Then, optimize your slider images by reducing the file size for each image as much as possible.

Finally, many slideshow builders will implement lazy loading. Only the current slide will load first, and hidden slides won’t load until requested to be shown. This feature spreads out loading needs as much as possible, so look out for it in your search for a slider builder.

4. Mind the transition effects.

Transitions are one seemingly small detail of sliders that folks have very much grown accustomed to, and anything outside the norm could be off-putting.

You might be tempted to bolster your slide transitions with a dissolve effect or a star wipe. I admire your taste, but try to resist that urge and keep your transitions simple. You’re best off going with a simple fade effect or horizontal/vertical pan. This call is up to you, but the less distracting and jarring your transition, the better.

5. Make it mobile-friendly.

Sliders are highly-dynamic, image-heavy elements. If your module isn’t designed to work on smaller screens, it might come out looking like a highly-dynamic, image-heavy mess.

As they make up close to half of your traffic, do your mobile visitors a favor and apply responsive web design principles to your sliders (reputable slider builders and plugins can do this). Or, consider removing the slider from your mobile site altogether to reduce clutter.

6. Make it accessible.

Finally, all of your sliders should be as accessible as you can make them. This means mobile responsiveness, image alt text for each slide (and a textual alternative for the slideshow itself if possible), enabling manual slide transitions, and triggering these transitions with arrow keys in addition to button clicks.

How to Make a Slideshow for a Webpage

Want to give sliders a shot? You have a few options. Let’s review what’s available, from least technical to most technical implementation.

Use a slideshow builder.

For a lightweight solution, use specialized web slideshow building software. With these tools, simply pick your slider content, tweak the settings, and embed the slider element into your page. Start with a free tool like Bannersnack or Cincopa and see how you like it, then consider upgrading to a paid option.

Popular website builders also enable slider functionality, either natively or through either a third-party add-on. Make sure these tools can make your slideshows both responsive and accessible to users.

Use a WordPress slider theme/plugin.

If your website is built on the WordPress CMS, many themes come with built-in slider modules. There are also numerous free and premium slider plugins that will add slideshow functionality to your site, on any post or page. For your WooCommerce store, consider a WooCommerce slider plugin for product displays.

We recommend adding sliders with plugin over a theme, since changing your theme won’t scrap your slideshow. That said, premium themes with sliders are quite convenient in this case.

Manually program a slider.

If you’re feeling brave, try coding an image slider plugin yourself. To work properly, a slider needs HTML, CSS, and JavaScript, the three big languages in frontend development.

Both W3Schools and freeCodeCamp offer tutorials for building your image slider. Or follow our guide to building an image carousel in Bootstrap CSS. Program the slider in, then tweak the CSS to style your new module to fit the rest of your website.

Bonus: Create a Video Slideshow

As an alternative to a manually programmed interactive image slider, you can opt for a video slideshow that displays the same information.

If you’re short on time or resources, we highly recommend the free Slideshow Maker from Canva. This tool was designed to be fast, intuitive, and easy for anyone to use, including those without design chops.

With Canva, you can easily create slideshows from templates themed for different niches, like explainers, food, and fashion. Populate your slideshow with images and videos from your own library and from Canva’s library of stock media. Then, customize your slideshow with icons, illustrations, animations, and music. Finally, download your slideshow for free (and nope, there’s no watermark).

Image Source

Not Just a PowerPoint

Web slideshows aren’t perfectly suited for everyone. However, if you want to emphasize visuals while lowering your bounce rate, we recommend trying them out.

When adding a slider, keep our best practices in mind, and ensure that it serves the overall mission of your site, rather than distract from it. Finally, be sure to keep them visually pleasing and engaging for all. This isn’t a brightly lit conference room, it’s your business!