Ok so that’s a big fat fib, the HubSpot CMS system does have an image slider functionality, but it’s very unloved and for good reason.
If you’ve ever wondered whether or not your website should use a slider, head over to http://shouldiuseacarousel.com/ and have a look at their slider (ironic right?), which is jam packed with some terrifying stats on the level of engagement your average slider has according to those in the know. Isn’t it bizarre? We know users love images, there’s stats aplenty about how much more engaging photos and graphics are to users over and above just text, it seems crazy that populating a large part of your homepage with script that offers up a cornucopia of images one after the other doesn’t instantly wet your users appetites. That’s often the most difficult part of UX design. When what seems to to be something that should work is shot down by the black and white stats it can be very confusing not to mention disheartening.
Banner blindness plays a big role in this. Anybody who has used the web for some time will have been endlessly bombarded with moving adverts attempting to grab the users attention and to entice them to click on the offer. We’ve tuned these out now, the appeal has gone, and regardless of how beautiful the imagery is you may have to include, you’re simply running the risk of people skipping past this massive take up of screen real estate or even worse clicking the back button.
The HubSpot CMS system image slider is exceptionally basic. I don’t think its core output has changed during all the revisions of HubSpot CMS and it’s just there as a legacy element of the modules because it’s a hard sell trying to talk all their users out of deploying them. We realised early on into HubSpot CMS development it just wasn’t a suitable solution and ended up deploying third party solutions that were populated using a custom module setup rather than the standard module system, which sat in amongst some of the nicest to use website editing interface that HubSpot CMS offers, sticks out like a sore, clunky old thumb...
The switch to hero images, or if you’re feeling cinematic hero videos, means you’re not diluting your message for users, trying to cover all bases and potentially missing all of them with a slider that just doesn’t work. Not only that but your site should be light and fast loading. Regardless of the tech behind it, all sliders rely on JavaScript to assemble the moving parts into order which slows your load time down, not to mention all that data the site has to wait for to load as you spool up a massive series of images to populate the slider. Your users won’t wait and Google knows this so it won’t help your site rankings either.
The standard slider in HubSpot never played nicely when it came to being responsive, which is why we resorted to working with third party solutions more suited to the task. But even so sliders are fiddly things when it comes to working with different size screens. You end up scaling not only the whole thing, but potentially the individual elements within each of the slides, such as the text, in a desperate attempt to retain some sensibility to the layout and ensure the text is still legible and readable. Sure, in a hero image, you still have make sure that the layout is just as digestible at multiple sizes, but that’s just one layout, one background image, you’re not having to worry about 5 or 6 different messages and come up with a way of ‘correcting’ the styling for each at 5 different breakpoints to cover all the potential screen sizes. And don't get me started on background images!
Oh you have, so I will, remember computers aren't smart enough to display ‘the best part’ of the background image on a hero image, so when we developed our custom header system for our HubSpot CMS sites, we allowed for this, giving the person doing the adding or editing to select the most suitable position for the image to anchor from. You can’t set multiple anchors for sliders, so you're stuck with one position for all of the slides, and so you're going to have to hope all your images have the same focal point position. Very unlikely and you often see images with bizarre sections of the image in frame at smaller screen sizes, which only make sense when scaled out to desktop.
So let’s throw all sliders in the bin! Today! Right now in fact!
Come on they’ve got to be useful for something right?
The last time we used a slider was to display the logos of the customers of our customer. They had some big names, a very impressive and influential list of business social proof going on and were keen to include all of them. When you’ve got a large stack elements like this it does seem like a sensible move to include them in a slider, but resist! No matter how large the screen, you’re never going to get them all on in one go, so some are going to be missing. What if the user doesn’t realise they’re not viewing the full stack? What if the user is on a mobile and you’ve dropped down the number that appear on the mobile to 3 from your so impressive list of 20? And they don’t spot the movement, or more likely can’t be bothered to wait for the scroll. Wouldn’t it make much more sense to have a select number of logos appear highlighting your most prominent customers that extends out as the screen increases with a clear link to a page containing the full list? You’re much more likely to entice a click through for further details. People want detail when it comes to your work with brands to ensure you’re not fibbing about them being customers anyway, so it’s a perfect excuse to get them reading a case study.
Like HubSpot we’ll always have a slider solution in our armoury so that should the genuine need arise, it’s easy to deploy, but we’ll see it as a last resort. Never again shall we have a site intro mired with a slider and neither should you!