Would you mind if I’m frank for a moment? Sometimes you have to do things in a way that you know isn’t the way they could or should be done but due to reasons above your pay grade, that’s the way it’s going to be. For example, the decision about whether or not your website’s homepage should use a rotating slider.
On 6/1/2016, ArtsHacker Ceci Dadisman published an article layout out the case for why website sliders are as dead as a dodo and why you should consider converting to static hero images.
But I’m willing to bet that more than a few readers work at an organization where making that conversion is not an option due to technical restraints or there’s someone at the top of the decision making food chain who really loves the sliders so they aren’t going anywhere.
If that sounds like your situation, then you’re in luck because Smashing Magazine published an article by Christian Holst on 7/6/2016 that examines how to go about implementing a landing page slider (which he calls a carousel) the best way possible.
It’s a great post and breaks everything down into ten requirements you need to consider in order to make the most of that option.
- All platforms: Sequence the slides carefully, because the first slide will get multiple times the exposure as subsequent slides.
- All platforms: The carousel should never be the only way to access a website’s features and content.
- Desktop: Only use auto-rotation when the diversion of attention away from other home page elements caused by the animated graphics is acceptable.
- Desktop: Rotate slides at a moderate pace — 5 to 7 seconds usually suffices for a slide with just a heading. If the amount of textual information differs between slides, a unique rotation time for each slide is usually called for (a detail almost never adhered to).
- Desktop: Pause auto-rotation on hover to avoid changing a slide that the user is likely reading or about to click.
- Desktop: Permanently stop auto-rotation after the user has clicked on the carousel’s interface controls.
- All platforms: Always indicate the current slide among the set, and allow users to navigate back and forth. Conventionally, this means using dots and arrows that are big enough and that contrast with the underlying image. On the desktop at least, this can be achieved in other ways, such as by using the “table of contents” design.
- Touch devices: Due to the lack of a hover state (and, therefore, a way to pause auto-rotation), never auto-rotate on mobile websites or for touch devices.
- Touch devices: Support swipe gestures, in addition to any other UI controls.
- Mobile devices: Ensure that the text in slides is still readable if you are scaling down artwork from the desktop.
Holt’s post is nothing but accessible and you don’t need to be a programmer or have anything but the most basic of web design knowledge to walk away with something useful.Read the article at SmashingMagazine.com