Site icon MonstersPost

How Not to Ruin The Site with Carousel?

Sliders and carousels are pretty popular in web design. Many beginner developers are sure that they are must have attributes of any site. As a result, they stuff sliders in every project. At first sight it may seem that there is nothing wrong with that, but sliders can really ruin your site in no time flat.

As a rule the most troubles are observed on the homepages and it is no wonder. The majority of links lead to the home pages, so they should look and perform perfectly well. The matter is that 75% of users make first judgment about the business based on the design of the homepage.

Here are several failures you may observe when dealing with sliders.

***

What’s the way out?

There are many alternatives to sliders that will not affect the loading speed and SEO ratings of the page. So, let’s take a look at them and why they are better.

Hero layouts

Slider is not the only tool that can make the site look more dynamically. Hero layout is a more effective solution. Cleverbirds.com is a great example of this kind of site.

Hero images actually help you show the real content that will be rated by search engines. You are probably interested in how are they better that the regular slider, here are some facts.


Call to Action

Calls to action are also pretty powerful, actually if combined with static images they can be much more effective than you expect. In this way, the home page looks both attractive and informative. This method works for any kind of site as it helps users take the decision much faster.

Take a look at the squareup website. Everything looks clear and structured.


Sign Up Forms

Sign up form is a great alternative to the slider. It is also more effective to place it at the top of the page as you save a great percentage of email subscribers. It is just more simple for the users to find the form that is distinct rather than scrolling down the page, through loads of information. It is vital to keep them simple and short. Long forms can be distracting to the visitors and will be useless. You can also include sign up forms to the hero layouts to drive attention of the visitors right after they land on the site.

Zoho made a simple full-screen home page with a short sign up form and a call to action. As a result users are able to focus on the offered services much easier.


Video

You may say that videos are similar to sliders and there is no point of using them. Well, this statement is absolutely wrong as videos convert much better than the sliders. Actually, 70 of 100 search results include videos. Up to 85% of users are most likely to buy products after watching the quick preview. Sliders simply don’t give such information as videos that give a clear picture of the product with demonstration and description of all features.

Subhub has actually combined two ideas, on their site. It offers sign up button, and a video that gives users a clear picture of what kind of service the company provides.

***

Are Sliders Totally Useless?

However, there is no need to fully reject sliders. Of course, it is strongly recommended not to use them in the header section to display any kind of important information. Here are some tips on how and where to use sliders to not ruin the website and affect conversion:

Make it simple

There is no need to include full width sliders to your site as they are useless. Small sized sliders are much effective and do not decrease page loading time. It is better to include some kinds of logos, testimonials, brand names, or any other information that is less important than the main content.

Creativeblog designed its slider pretty interesting. They made it small and stuffed products with discounts inside the slider. So the visitors see all the hot offers right from the top.

Move Down

Move sliders down from the top of the website. They should work as prompts for users who are searching for more information and it is better to place them in the middle or at the bottom of the page.

Here is a cool solution from wpmudev. The slider features only three items with cartoon-style images and testimonials.

Auto-scroll

Pay close attention to the auto-scroll. Automatically changing slides and images make the site look live on the one hand and on the other hand they are irritating as users can’t focus on the information. That is why it is recommended to turn off the auto-scroll function giving more control to the users through navigation buttons or thumbnails.

As you can see, builtbybuffalo offers exactly the same kind of slider. Users do not distract on moving slides and can change them whenever they need.

***

When It’s OK to Use Sliders

There are still some cases where sliders are essential and can make your site more user-friendly and informative. There are cases when sliders can work for the project and it is quite hard to find a fair alternative to them.

Online Stores

When you need to demonstrate the product from different dimensions. For example, you sell some kind of shoes, dresses, shirts or whatever, and you need to show how do they look from behind, from the top, etc. For that you will need, on average about 3-5 images on the product. Now imagine how it will look on the site if not hiding them inside the slider.

Here is a good example from debshops. To see some kind of clothes in a specific color you only need to hover on a block behind the image. This function saves visitors a great deal of time and ensure user-friendly interface.

Portfolios

Online portfolios are critical for freelance designers and developers. Here sliders can also become in hand. They allow employers to navigate between the works with a single click and watch these works in high resolution. However, it is still not recommended to integrate auto-scrolling to the slider.

Check out this online portfolio from thebeastisback. Thanks to a built-in slider visitors can preview all the works by only clicking navigation buttons.

Displaying Offers

This is an exception when sliders can be used in the header section. It can work as a tool for showing the best offers from your company. However, there are several strict rules on how to use it the right way. First of all, it is necessary to limit the number of slides to 2 or 3. This number is based on the research from yorkwebteam that says that the first 3 slides get the most conversion. Next you need to exclude auto rotation and add navigation buttons. Regarding the content it is necessary to include an offer with distinct title, image of the product, several core features, etc.

Sephora is one of the best examples of this approach. As you can see, it follows every of the abovementioned steps. As a result, the slider doesn’t affect the loading speed of the website.

***

How to Avoid Main Problems with Slider?

Well, if you just can’t give up the idea of using a slider, here are some tips on how to make it work more smoothly and not affect SEO.

Load speed optimization

So, to make slider load faster, you are going to need make it as light as possible. It can be done through some kind of simple script. If you are familiar with jQuery, you should delete all extra lines of code that won’t be used in your project.

It is also recommended to use minified version of jQuery library, that is twice lighter than the regular version. Using jQuery with a CDN can also be a great way to make the site load faster. For example you can use the library from code.jquery.com.

SEO

Try to integrate deep linking to the slider. In this way, URLs will be changed automatically as the slides are selected. Alt text and key-phrases are also a must. An option will be using some kind of premium plugin like mightyslider that is built in accordance with SEO recommendations .

Better Performance on Mobile Devices

To make slider perform equally well on all devices, first of all, you need to make it responsive. In this way, it will adapt to screen resolutions making the content look clear. Sliders on our themes are built on the same principle, so you can be sure that they will work flawlessly.

Better Focus

As it was mentioned above, it is better to limit the number of slides to 2-3 and eliminate an auto-scroll function. In this way users will be able to navigate to the next slide whenever they need. In this way they will be able to focus on a particular product and take the right decision.

Now you know what are the alternatives to sliders and how to use them properly. Go ahead try one of the listed options on your website and let us know about the changes, also feel free to ask us any questions, or give some of your ideas on this subject.