Having a slider on your website is not a must as they don’t have any core function, but they can serve many purposes.
Why do you need it on your Site?
Carousels are essentially banners where the images change every few seconds, moving from one side of the screen to the other, or from top to bottom. There are various functions they might have, to list a few:
Highlighting
You can underline your company’s focus and profile instantly by displaying your key message in the form of large titles within your slider. It will help your visitors to connect to your branding and distinguish it from others. When it comes to the text, large titles with just a few words will work best. If you need to include long sentences, a possible solution is to include them as significantly smaller subtitles below the main title.
Teaser
If you are about to launch a new product or service, sliders are a good way to inform your audience about it; they will be the first thing visitors will come across on your site. Some visuals and a short message at the right place can draw attention to the new item, and inspire your visitors to investigate further.
Product slideshow
You can place your best-selling products in a carousel at the top of your page to sell them even faster. It’s a win-win, because your buyers will also be glad that they don’t need to search for them.
Menu
Slideshows can be used to entice your visitors to the most-visited parts of your website. This will also save them time and potentially prevent some drop-offs.
Call-to-action
As slideshows tend to serve all these different functions, having CTA buttons on them will feel less ad-like than having a standard banner. As a result, they can work more effectively, and look more aligned with the overall design.
From a design perspective, sliders make sense because without them a webpage can feel “stale” and old-fashioned. They can be part of your website design where you show off some design skills. Very often you have to keep the rest of the page simple for the sake of usability and readability, so sliders can be a place of visual experimentation.
Carousel as a Part of the Branding
What works visually depends on the overall look of your website. It might be obvious that you will use the same fonts and colour scheme for your slider as for the rest of the page. But if you think of movement and transition, that has a specific message to it as well. If your site has a very modern look something simple but sleek will fit it best, like this design by Magnus Walker.
If your design is more playful you might want something more layered like this site of Incolor Kuhinje.
Video sliders are not for every site (we’ll talk about performance issues later), but If your content is something that makes more sense as a moving sequence, it will be worth the effort. One good example is Inventia’s site.
Slideshows are often used as product showcases, but even that doesn’t have to feel like an endless scroll through similar options. This showcase template from SmartSlider is an equally pretty and practical example.
In some of the best cases, content dictates form and often those very specific solutions prove revolutionary – like this before-and-after slideshow.
While the animation of your slides, their easing method, and the way of navigation are part of the design, using sliders also has speed and usability implications.
Carousel Development Tips and Tricks
The biggest problems with slideshows are usability and page performance. Since Google considers the website’s speed as a weighty criteria for ranking the page, speed issues will affect your SEO. But usability is equally important because a page that frustrates your users is the worst possible first impression. As a result, a badly executed slider can be worse than nothing.
Tips for better Usability
A mobile version: for mobile use, the best practice is to make your slider scroll-friendly, but research shows people very often don’t even try to navigate carousels. I think this is especially true for mobile slideshows, which have already proved themselves to be problematic for many users. The solution there is to prioritize carousel items so that the ones of most interest to your visitors are shown first. Apart from the navigation you will probably need to adjust the sizes through media queries so your slides and titles are all optimally displayed on mobile. A slideshow that covers the whole screen and makes navigation impossible is probably the biggest fail, but having some unreadable titles or ones that run larger than the page itself will also look unprofessional. Cross-device (and cross-browser) texting is essential when it comes to website sliders.
Things to Avoid for Better Performance
Overcomplicated templates: especially if you are working with some content management solution, adding slides can make your site very slow. Why? Because automatically generated code will run very long, the linking and animations can become overly complicated, and as a result, it will all load slowly. The same can be the issue with sites that generate slideshow code for embedding. There’s nothing wrong with looking up slideshow examples and code snippets but opt for the cleaner, shorter options.
JavaScript: probably the biggest mistake here: if images load through JavaScript, it will decrease page speed. Load them through CSS or at best with HTML. But even when it comes to animations, JavaScript is not a must anymore – Scroll Snap API makes it possible to implement carousel-like transitions using only HTML and CSS. If you have to use JavaScript, at least make sure to have an up-to-date tool with a more efficient API and no additional dependencies. Dependencies, or pre-load libraries (like JQuery) will also affect your page speed.
Autoplay: many users hate this because it can make your slideshow feel ad-like. But if there’s no autoplay, that also means that your site will only have to load one slide when loading the page. It can make a big difference and honestly, If your first slide is good enough, users will proceed to the next anyway. If you must use autoplay, make sure all items are the same intrinsic size, since if all images are displayed at the same size, the image with the largest intrinsic size will be considered the LCP (Largest Contentful Paint) element.
Non-composited animations: Reducing CLS (Cumulative Layout Shift or an unexpected shifting of web page elements while the page is still downloading) will improve your Lighthouse Performance score, but poorly executed animations can increase it. The rendering pipeline is JavaScript, CSS, HTML, Paint and Composite – and a non-composited animation is any animation that triggers one of the earlier steps in the rendering pipeline (Style, Layout, or Paint). Non-composited animations perform worse because they force the browser to do more work. To avoid this, it’s better to stick to transform and opacity changes for your animations (as opposed to the left, top, width, and marginTop properties, for example).
One other CSS property to avoid is will-change, because by using it, you’re telling the browser the element is a few moments away from changing, the browser consequently dedicates memory and resources to this element. If you use it for too many elements, it will thus degrade performance. The will-change issue is also an indication that you have an overcomplicated layer structure which will badly affect the performance anyway. If you need something extra, using rotate and scale is fine – it will still perform better than a JavaScript animation.
Videos: having video sliders is difficult performance-wise, but there are ways to get it right. First of all, use the HTML5 video tag – With the video element, your browser can play a video natively, as opposed to an iframe that loads the source of another URL into your page. External sources will load slower. If you have video sliders, also consider using a preview image with disabled video pre-load for better page speed.
The Cecily Group – a Case Study
When designing the carousel for our website, we wanted to have something that is visually appealing but doesn’t feel very in-your-face or ruin the user experience and SEO score of the page. We also tried to go completely slideshow-free, which left our main page feeling a bit empty and dry. However, we opted for header images without animations for the subpages. As for the slider images, we went through a few versions before we found something that fits the overall branding but doesn’t still leave the focus on the titles. When choosing a transition design, the shape and use of the logo inspired me to have something that comes together from squares and rectangles.
