9-Point Checklist for Creating the Best Responsive Slider

Not everyone has the same screen sizes and the same resolutions when browsing. Mobiles, unlike the nowadays trending monitors, have small screens. Meanwhile smartphone and tablet adoption rapidly increases, so does the importance of mobile-friendly websites.

Every website owner should aim to create a mobile friendly website, if for nothing else then to avoid losing potential clients due to the fact that they can’t browse on the site comfortably.

When Smart Slider 3 was designed, we took special care of making it as responsive and mobile friendly as possible, while keeping the settings simple and easy to understand for everyone. We also made sure that no one has to write a single line of code when making a responsive slider, so every option, that makes your slider 100% responsive is available in our intuitive interface.

In this article, I’ll introduce the most useful responsive options and settings in Smart Slider 3.

1, Custom slider sizes

When a slider is created for desktop, and scales down for tablet and mobile, it gets small, as during the resizing, the slider keeps its ratio. Using the custom slider sizes, you can change this ratio, which can be really useful.

If you don’t need the slider on any device, you can turn it off, and no codes will be placed on your site.

Custom slider size
Custom slider size on the left and simple down scale on the right

2, Full width responsive mode

When the Full width responsive mode is selected, the slider tries to fill the space between your browser’s left and right side, so the slider will reach outside of its container if needed. However, the height will be calculated based on the set slider size, so it won’t fill the browser window vertically. (We do have a responsive mode that does this, it is called Full Page responsive mode and you can see a demo here.)

The best way to set up a full width slider

During the creation of the full width slider, I believe the best result can be achieved using 1200x600px slider size, and setting the Maximum slider height to 600px. (Due to this setting, the slider will be 1920x600px in a fullHD monitor, so the slide and the layers are the same size as they are in an 1200px wide browser.)

Full width slider
The best way to set up a full width slider (left) and the common way to create it (right)

The maximum slider height makes sure that the slider is not scaled down until the browser window is smaller than 1200px. Additionally, it is much easier to work on an 1200px wide slide, especially if your monitor does not have large resolution.

3, Device specific background image

You have a full width slider, and the background image you are using is just as wide as your slider is. It looks and works perfect on desktop, or maybe even on tablet and mobile. But your mobile users should not load a 1920px wide image for their small resolutions. Simply set different images for each devices, which will reduce the loading time, too, since both your users and Google likes fast and optimized websites.

Device specific background
Device specific background image (left) and scaled background image (right)

4, Responsive controls

Not the layers and background images are the only responsive parts of your slider. At the Controls (arrows, bullets and thumbnails are controls) it is possible to set a responsive value, to set how much the control should scale down (or up) on different devices.

If changing the responsive value won’t help, the controls also can be hidden on any device. Hiding them will make the slider and the page cleaner, and increase the user experience. The bullets (the small dots under the slider) can be targeted easily on desktop using the cursor, but when you are using your phone and try to hit them with your fingers, that won’t be an easy task at all, so it is suggested to simply turn them off on small devices.

5, Font sizes

The layers that looked perfect on desktop, might not even near to look good on mobile. Probably text have shrunk so much that they became illegible. To avoid this problem, we have created a Size modifier, where the value can be changed to make the text easier to read.

Font size modifier
Changing the font size using the font size modifier

If you don’t want the texts to be responsive, but to be shown at the same size on each device, you can turn on the Adaptive sizing for them. When using this option, the layer has the very same size on desktop (no matter the width of the browser), tablet and mobile.

Even if the adaptive sizing is turned on for the layer, it is possible to use the size modifier to increase / decrease the font size on any device.

6, Hide layer on mobile device

But if neither moving the layer nor changing the font size help, you can disable the layer on any devices using the Show on option at the layer tab. This feature is useful even if the layers are not illegible, but there are just too many of them, and that doesn’t really work well on mobile devices.

All in all, being able to hide any layer individually can make a huge difference when it comes to displaying the slider on smaller screen sizes.

Hide layer on any device
Hiding a layer on mobile

7, Layer positioning

When the font sizes were increased to make the texts legible on mobile device, it might just happen that they are overlap each other, even if the text size made it possible to read the texts. Fortunately, if you switch to any device view, and make any positioning change the changes will only affect that device, but change nothing on the other views.

Different position on mobile device
Changing the layer position on mobile

If you simply move your layers on mobile so they are no longer covering each other, that does not affect on how the layers are positioned on desktop view.

Note

If the custom slider size is not used the slider size is calculated based on the slider’s size and Default width percentage. The latter case, it is suggested to drag the size changer to the left (to the smallest value), and that will be more accurate for mobiles. For tablets, click on the mobile icon and drag the size changer to right (just to a little bit), to make it switch back to the smallest tablet value.

8, Different text length for every device

While a long text fits well on an large layer on your desktop slider, it is very unlikely that it will fit and look good on mobile. The text layer has a special option that no other layer has: it is possible to create device specific texts, that can be managed on one layer.

9, Non-responsive layers

When you don’t want the layer to scale up or down you can turn off the responsive behavior at the layer size. This option is useful if you use icons or small elements which shouldn’t be scaled.

Version Overview

Pro only
  • Custom slider sizes
  • Device specific background image
  • Hide controls on specific devices
  • Change the responsive value of the controls
Free
  • Full width responsive mode
  • Maximum slider height
  • Size modifier
  • Hide layers on different devices
  • Change layer position's on different devices
  • Text layer & device specific texts
  • Non-responsive layers


Similar Sliders - Full-width

Full-width TemplateFree Full-widthShowcase TemplateKen Burns

Related Documentation Pages