Menü
Sliders, slideshows, carousels: call them what you will, they're an incredibly popular way to enhance a Website.
When I create a site for a client, they almost always ask me to add one to their home page, if not to every page in the site.
But although undeniably attractive, sliders aren't always needed in a website design. In this article, I'll look at the benefits of sliders with WordPress, and identify when you should use them and when you might not. I'll also look at some alternatives.
Benefits of Sliders
Sliders look great, especially on large screens. They give you an opportunity to showcase a bunch of products or to link to multiple pages in your site.
If every department in your organization wants to be featured on your site's home page, a slider can be the best way to achieve this: add a slide for each department, and you have your solution.
As they're so common on websites now, they can also give an impression of being modern and up-to-date, which in turn will give the business, organization or individual behind the site an impression of modernity.
But before you add a slider to your site, take some time to consider why you're adding it and what purpose it will serve. Of course, you should do this for every aspect of your site, but lots of site owners skip this consideration with sliders.
Why Use a Slider?
Before you add a slider, take some time to consider why you are adding it:
- Do you have visual information you need to convey, and does this apply to more than one piece of information or area of the site? (If you only need one image or link, a single banner image will load faster and do the job.)
- Will your audience be arriving via the homepage or via other internal pages in your site, in which case will the slider even be seen by a majority of visitors?
- Will people be coming to your site on desktop or mobile? The standard letterbox-style slider design is less effective on mobile.
- Can you add the information from the slider in the body of the home page instead?
- Are you adding a slider to achieve an objective (communication, call to action, link, etc.) or just because it looks nice?
Whatever your answers to these questions, consider what impact your slider will have on the experience for site visitors, and on their behavior when they land on your site. And consider this for each slide in the slider, too.
So you've considered this and decided that your site does need a slider. Here are some tips to help you get the best user experience (UX) from your slider.
Where to Place Sliders
Users are expecting a slider to appear on the home page of your site, near the top. This may be above or below your navigation.
If the slider is the single most important thing on your home page (i.e. if it's taking users to a link you want them all to follow, such as a subscription page), then you should make it big. Size your images so that they will fill the screen, and users will have to scroll down if they want to consume the rest of your home page.
SpaceX is an example of a site whose slider takes up almost all of the home page. It's big enough to dominate, but not so big that you don't see you can scroll to find out more.
If the slider isn't integral to the purpose of the home page, then you should make it slimmer. Crop any images to letterbox-like proportions and make sure they all render correctly when displayed by the slider. And if your slider isn't integral to the home page, then you might want to consider whether you need it at all.
If you don't want your slider to dominate the page, you could consider using it at the bottom of the page, as an additional form of navigation. This could replace the footer as a visual way of encouraging people to visit other pages in your site.
Another consideration is which pages the slider should go on. A slider will slow down page loading, so shouldn't be included in every page in your site. You might decide to include it only on the home page, or on static pages but not blog posts.
Alternatively, you might have different sliders for different sections of the site. For example, in a fashion site, you might have a different slider for each department in your store.
Each slider you add to your site needs to have a purpose. Remember to identify what the slider is there to do; that will help you identify where to place it and how big it should be.
Sliders and Mobile Devices
It used to be that many websites didn't send sliders to mobile devices because of concerns over bandwidth and loading times. That's less of an issue now for many audiences, as a 4G connection will often be faster than domestic WiFi. But that doesn't mean you should just send the slider to mobile devices without making adjustments.
The majority of website visits now are on mobile devices, and for some industries and audiences the proportion is well above 50%. So it's important to get this right.
A standard wide slider won't look good on a small screen; it will shrink down to barely anything, and any links it contains will probably be too small to tap with a finger or thumb.
So you have two choices: you can restrict your slider to desktop computers, or you can send a different version of it to mobile devices.
If you don't think it's worth sending your slider to mobile devices, I would question whether you really need the slider at all. If the slider is there to fulfill a function, then it will need to fulfill that function for visitors on mobile just as much as for those on desktop. If you're not planning to send your slider to mobile devices, pause and consider whether you really need it.
If you are planning on sending a slider to mobile, it makes sense to use alternative dimensions. It may well consist of the same images and links as the desktop slider, but with the images cropped to different proportions. Or you might decide to use alternative images that work better on mobile.
Fancybox or Nivo sliders
If you do not want to use a built in slider I can suggest to find it on internet. These sliders are easy to integrate and there are several examples on their websites. I prefer Fancybox. Nivo is beautiful but does not support Responsive images.
Additionally LogicalMDesign also has their on slider which are not so fancy but that is a real replacement of Nivo player and also Responsive and we will not loose valuable points from Google Page speed metrics.
