Slideshows: the bottom line why not, and when maybe

Web development has come a long way. What started out as simple slideshows and carousel sliders has evolved into moving and zooming images layered with text and even other images or videos. You'll find them anywhere and everywhere. As a technician and former photographer, I absolutely love well-done slideshows. They can be used to provide a stunning, eye-catching visual effect to spice up an otherwise unappealing home page. As a technician I am entertained at least initially by eye-candy gadgets. If you cruise the internet looking for theme shops that develop themes for Joomla, WordPress, Bootstrap, Drupal or even visit independent web design agencies you'll find that the majority employ some sort of slideshow or moving background in the pole position of their website.

The catch phrase is, "Just because you can, doesn't mean you should." Sad to say, they are ultimately ineffective and may cause more harm than good in how your visitors interact (or not) with them. A simple image with text like the following is more likely to be effective. The article, Why Home Page Sliders Are Ineffective (And What’s Replacing Them) is a great reference which gives an overview of the Hero page or Hero design, whatever you choose to call it.

What's wrong with slideshows?

Poor clickthrough rate and insufficient visitor interaction

Although slideshows and sliders and provide a initial adrenalin rush of eye-candy they are rarely implemented reasonably correctly or used to solve the business owner's problem which is commonly to sell something or get you to click on a button in one of the slides and take action. There are various reports citing clickthrough statistics. They start at poor on the first slide and end up somewhere around abysmal as you progress. See ...... Bottom line - they don't engage the visitor.

Quoted from http://www.kaneworks.com/homepage-slideshows-time-face-ugly-truth/ - It’s About Conversion, Not Page Rank - The objective is to convert your visitors to customers. It’s time to face the ugly truth. The lovely rotating slideshow that is occupying your homepage’s most coveted real estate is turning potential buyers away.

Slideshows don’t get enough interaction from users! Several of the referenced sources say that visitors click on the first slide around 1% of the time. Case studies show that the first slide gets the most action about 70%-80% of clicks while the second slide gets less then 13%. The percentage gets lower for consecutive slides.

Slideshows suggest to the visitor to focus on the slideshow and ignore content below, your other important messages. As people scan pages their interaction drops as they scroll down the page.

Too much, what do I do?

Content sliders are often advertised as solutions to make it easy to promote an array of products or services whereas what they seem to do is make it more difficult for the viewer to choose and act.

Done poorly they are nothing more than a distraction taking up otherwise valuable real estate, pushing your message if you have one well done the fold. Done poorly includes the likes of no navigation, navigation buttons that are small and difficult to click on, no indicator of how many slides leaving the visitor guessing and testy, no ability to pause, overlayed with difficult to read text, and the transitions are either too fast or too slow.

They can be confusing if not implemented properly - too fast, too slow, too much aggravating movement or wiggle, hard to read test.

Bad for SEO: The easy solution without depth

For lack of the time or willingness to find website content, many business owners will resort to using slideshows and sliders to take up the space. The side-effect unfortunately is shallow pages which are difficult for search engines to highly rank. i.e. They dilute your content. your message.

As a business owner whose probable goal is to make a sale or grow an audience you are invariably better off using simple images accompanied by text to tell your story.

One solution fits all, right?

Slideshows and content sliders which are relatively easy to manage and program for large screens may not work well on small devices. It takes quite some extra programming to get both the images and text to work symbiotically. Text that is layered on top of an image and looks great on a desktop computer may look awful on a mobile phone because it is squeezed or really tiny.

Web page load performance

Have you ever visited a website that loads coffee-break slowly? Sure, that was a loaded question. It might be just about any service type, but businesses that are heavy into graphics and images are great candidates. So, think photographers, graphic designers, nature enthusiasts and bloggers. Easy access to programs/functions which give you the ability to create stunnning slideshows, add videos and even single images to a website doesn't ensure that it's done judiciously.

In addition to images that take up page weight, so does the JavaScript/jQuery code that runs slideshows. Because it is so technically easy to load a lot of images with a slideshow, performance often takes a hit for that reason alone. This page in itself is extra heavy, somewhat lethargic, but of both images and JavaScript required to make the demos work.

Uploading raw images to a web page and/or a lot of them has deal-killer written all over it. Although the technology is there, many upload programs to this day still don't resize image to reasonable proportions upon upload. The result is that you end up with fat images which, although they look right because the dimensions are forced, are deal-killer slow to load with the page. It only takes a single unmanaged image to make a web page scream as it languishes to paint the page.

Flawed code

Many coders also follow the abysmal practice of placing slide titles in h1 header tags, meaning that semanticaly your website is flawed and google et co gets confused about what/which is your important point of focus. Years back Joomla theme shops and core used to wrap the logo in an h1 header. Just because they did it wrong doesn't mean you should support it.

Time-consuming and expensive solution

Configuring a slideshow such as the one at the top of this page is no easy task. It takes a lot of thought and a lot of time. Finding appropriate high-quality images or graphics that suit your page's banner position is a task and can become costly easy, especially if you're searching for panorama dimensioned images.

Exceptions

Of course there are exceptions to the rule and in the right situation a slideshow may be perfect, i.e. in the right situation. Just because your competitor does it or a consulting firm that you're considering working with does it, does not make it right. The plain and simple fact is that most businesses don't have a good sense of what to place in the banner position so they choose to emulate others, right or wrong. You have to keep up with the trends, right?

Alternatives

I love setting up slideshows and more so, content sliders and would love to help you out if it's your choice and hopefully, the right choice. If not, then consider a few alternatives to the common slidesow.

SEO philosophy and multiple key phrases

Keep in mind that from an SEO perspecitve that you commonly limit your key phrases per page to two or possibly three. This corresponds to calls to action. Visitors who find your website by doing a key phrase search don't necessarily land on the home page and they don't need to. Any page with adequate substance will do. In the examples that follow I'm not recommending that you use the method to overdo your key phrases, but rather to give the visitor a taste of your service.

Tabs

If you must display 3-4 content blocks with / without images, tabs are a great alternative. This one is a simple version built with bootstrap which is not set to automatically move from item to item. It's always a good thing if you can give the tabs strong, relevant titles and put the visitor in charge of making the selection. Tabs are also relatively light on the browser.

Tab 1

Tab 2

Tab 3

Tab 4

Tab 5

You can have images, videos, or ordinary text in tabs, pretty easy.

Regardless of the effect in hand, do the right thing and optimize your images to make them as light as possible to the network and your visitor.

In the right circumstances or when implemented the right way, a content slider can be an okay solution. In the case of the next example the application was developed such that a set of clickable tabs are placed to the right of the images. Again, this is a preferred option because the visitor always has a visible clue about what is likely to be in the slide box to its left.

It still may be too much to expect the visitor to click on any embeded links layered on the image, but it does make it a little easier for the visitor. There is a problem with this particular content slider in that when viewed on a mobile device the tabs and text becomes proportionately small to the point of becoming unusable. It will be nice when a new version comes out that places the tabs under the image on smaller devices.

Spotlights and Special Effects

Before slideshows and other gadgety effects became so prevalent spotlights were the norm. I define spotlight as decorative, smaller boxed functions that were placed in the banner location on a website, typically between 2-4 in a row and perhaps one or two rows, depending on how much the business owner wanted to promote. They contained images or text or combinations. The advantage of this simple method is that your featured items are always visible. Sometimes you'll find a second group somewhere about the footer. They probably don't see anywhere near the activity in the lower, below the fold, positions.

Web developers are a strange lot in that they will create or invent a lot of new effects, perhaps load them into templates frameworks like Bootstrap, without regard to whether the functions are visitor-friendly. There is a balance somewhere to be attained between smart effects and those that although interesting at first, become annoying very fast. As a business owner it's important for you to participate in the discussion with your designer/developer regarding trendy effects. Trendy is what it is, but just because it's there doesn't mean it's right. As I like to say, "Just because you can, doesn't mean you should.