Image Sliders

Xipidity Slider Demo


Falcon Heavy

SpaceX Falcon Heavy

Xipidity Slider Demo
Xipidity Slider Demo
Xipidity Slider Demo
Slides will advance automatically. Click the dot or swipe to manually advance.

Image Sliders

Although image sliders are popular, there are arguments to be made which suggest they should not be used.
  • Usability studies show only 1% of the visitors actually click on a slider and when they do it is usually the first slide
  • Poorly designed sliders are confusing as the intended message is lost
  • People become banner blind when there is too much page activity
  • Visitors will miss the messages of the slider if they consider it an advertisement
  • Excessive use of sliders will slow down your site
  • Sliders don’t always work well on mobile devices
  • Large sliders push down important content

However, there are others who feel a well designed slider adds value and is an efficient way to display an image gallery or make a call to action plea. A real estate blog comes to mind or a charitable campaign.

Xipidity does not include an image slider and will not force you to place one on your home page, but it does support most Slider plugins. This site has the Smart Slider plugin installed.

Things I like about Smart Slider

Entry level version is free
As is the case with many plugins, the entry level version is free with premium options offered at a cost. The base version is adequate in many cases.
Easy to use
As the overview video demonstrates, a basic slider can be created in about a minute. It took me a couple of hours to become familiar with the product.
Smart Slider is very flexible but to reap the full benefits will require upgrading to the premium version. One feature I have yet to explore is the ability to create a slider of blog posts.
Smart Slider does a reasonably good job adjusting to various display formats. I liked the ability to make individual tweaks to the various individual formats to ensure a great experience regardless of the device.
This is an area where the folks at Nextend excel. There is an abundance of documentation and YouTube videos to guide web authors in the use of their product.
Creating your story board
It is important when creating your blog post to consider the intended message and how best to deliver this message. If a slider is to be a part of your story, consider the following tips.
Consistent Size
I can not think of a circumstance where the slides should not be the same size. For a banner presentation I like to use a CinemaScope (21:9) aspect ratio. For Xipidity, I suggest setting the slide dimensions in Smart Slider to 815×348 pixels and using an 1630×699 image. The goal is to ensure the image pops regardless of the device used. A word of warning, the larger image is three times as large and if site performance is a concern, the smaller image may be the right solution.
Image Format
Choosing the appropriate image format is important. In the world of digital imaging, the two prevalent formats are “jpg” and “png”. JPEG images are compressed, which means after the image is saved some of the data is lost. Just like making a photocopy of a photocopy, each time you edit and save a JPEG, it will look slightly worse than before. In most circumstances the version of the image will be the original plus one. JPEG should also be avoided with text-heavy images or illustrations with sharp lines, as defined lines tend to get blurred due to anti-aliasing.

PNG images store data differently than JPEG, meaning there is no loss in quality each time it is edited and saved. PNG also handles detailed, high-contrast images well. It’s for this reason PNG is more often than not the default file format for screenshots, as it can provide an almost perfect pixel-for-pixel representation of the screen, rather than compressing groups of pixels together. All of this comes at a cost as the file size of PNG images are typically three time larger than JPG.
Don’t over do it
If I land on a page where the content is cluttered with excessive activity I simply leave as my first and last impression is the page is simply click bait or what I want will be too hard to find.
Don’t assume
Don’t assume visitors will instantly recognize an image slider and understand how to use it. Add some context which instructs the visitor in its use.
Another slider plugin I evaluated was Jssor. I liked this plugin as it is free, contains numerous transitions, and shares many of the features of Smart Slider. If you are interested in a very full featured replacement editor, take a look at the editor post and Elementor specifically. The editor plugin has a slider built in.