When the first mobile phone was invented, probably no one thought that one day people won’t just use them to call their friends, but they will be able to use these devices to do their everyday work, browse the web and play games.
Description: This is a really simple but attractive slider to show your posts or articles. The trick in this case is that the background and the image layer is from the same picture only the background is blurred.
Statistics show some interesting facts about mobile devices. Did you know that in early 2014 the Internet usage on mobile devices exceeded the PC usage? This means that people who have mobile devices are more likely to use their phones to access websites rather than turning on their computers. Admit it: it’s way faster to grab your phone which you probably keep in your pocket or in your bag (so it is available anywhere you are), and start browsing, than to go to the room where your computer is located, turn it on and wait for it to load just to check the latest news.
Making your website mobile friendly
Since users started using their mobile phones for browsing, web developers racked their brains to make their websites much more mobile friendly (so they won’t lose their users), which can really be a challenge as mobile users are using their fingers to navigate through the websites. When they tap on their screen, they need their target to be large (the size of a thumb is multiple times larger than the cursor on a PC, and if the target is small, the finger is likely to cover it entirely, making it difficult to tap on the desired button). They also need bigger font size, cleaner design, and to exclude almost all the continuously flashing, popping-out-of- nowhere ads where the close button is small and barely noticeable. They need to reach what they’re looking for in only a few taps and swipes.
Designing a mobile friendly website can cause a big headache if you start from scratch. Usually when you start with a popular WordPress theme, it will be optimized for mobile devices, so you do not have to worry about it.
Less is more for mobile users
Have I mentioned that they also need to access the most important information quickly and easily? A slide with 6-7 long sentences, an image and a call to action button is great for desktop users, they’ll know for sure if they want to check out the other page. Mobile users want to read a few keywords on what to expect when they tap on the button. Smart Slider 3 allows you to turn on and off layers for different devices and optimize the font sizes to these devices so your users on any device can get the the most of your website effortlessly and immediately.
Let’s talk about the possibility of turning off layers for mobile devices: Smart Slider 3 offers a variety of control elements to increase the user experience. While these control elements are extremely useful on a computer, some of them probably just painful to use on a mobile device. Why would any mobile user want to continuously tap on a small arrow to switch slides when they can swipe through them?
In Smart Slider 3 version 3.0.26 , we added a better mobile touch feature: when mobile users swipe to the right to see the next slide, they can check the content of the previous slide (by swiping left) before deciding which slide to check out first - or stay at the current slide. It is really comfortable.
And the bullets; you can easily target those small dots using the cursor on the “big screen”. How about targeting them using your fingers? That is not so easy, so it’s great that they can be turned off on mobile. Also, the thumbnails still look fantastic on mobile devices. They’re large enough to be a great target, they make every slide accessible and navigating through them is convenient.
There is a notable limitation when the touch action is used vertically on a full page slider or one with large height, if the carousel is turned on (which means that when the user reaches the last slide, and tries to go to the next one, the slider will show them the first slide). In most cases, when the user has gone through all of the slides, they might want to go further down on the page, however, when they swipe down once more, they’ll end up in the first slide again, because of how the carousel and the touch events are working.
It would worth putting an arrow to the last slide which will scroll below the slider so the user could access the other content of the website. You can do within Smart Slider 3, without any coding knowledge.
When building a slider or a website, it is important to often check the result to see how things look like, and how good the user experience is. In most cases, you would want to test on a computer, on a tablet and on a mobile phone. But what if you don’t have some of those devices? Google Chrome comes to the rescue as it has a device mode option, which will allow you to check and test your website on different devices, so you can optimize your content in a more superior way.
It is also worth mentioning that Google had a search algorithm update in 2015 where they might rank mobile friendly websites higher than non-mobile friendly ones. So having a website that can be easily and comfortably used on touchscreen devices is a long term investment, to gain and keep your users. Don’t miss this opportunity, make your slider in your WordPress, Joomla! or Magento slider mobile friendly today!
Comparison – Mobile compatibility and touch
- Device specific slider size
- Disable slider on mobile devices
- Disable controls on mobile devices
- Different background image sizes on mobile
- Retina background image support
- Horizontal and vertical touch options
- Comfortable navigation on mobile devices
- Hide layers on mobile devices