Monthly Archives: December 2010

This week I made a version of the Nivo Slider which degrades in a way that doesn’t break the layout but users without JavaScript still have the option to see all the images in the slider. Or – if you don’t want to read the article – disable JavaScript in your browser and just check out the demo.

One thing didn’t sit well with me though, as an idealistic standards-obsessed web-head; the sites I see which use the Nivo Slider don’t degrade in a way I like. Fine, they degrade "gracefully" – nothing all out breaks – but look what happens, for example, when you visit TedX Concordia with JavaScript disabled:

Click to enlarge

There’s a big empty space… weird. Really weird when you consider that the images are there, just display:none-ed, so a user with certain screen readers will still "see" the images.

That’s right; the blind user will "see" more than the not-blind user. If that’s not the kind of terrifying Macbeth-Act-2-Scene-4-fair-is-foul-and-foul-is-fair stuff which means something isn’t right in the world, I don’t know what is!

The same goes for the Dev7studios Nivo Slider demo which just shows a "loading" animation, giving the false impression something will happen.

I don’t want to spend all day watching this.

Yes, yes, I know most developers like to insist that "All modern browsers support JavaScript!" and as such it is not optional, but my point is only that catering to the needs of users (potential customers) who have JS turned off isn’t nearly as hard as everyone likes to think it is.

The Nivo Slider Without JavaScript

Before actually making the Nivo Slider degrade gracefully, you might to take a look at my starting point; check out my Alex Ross Wallpaper Nivo Slider Demo to see my starting point. It’s pretty much identical to the Dev7studios demo; any changes I’ve made have been commented to explain.

The goal I’m setting here is to make the Nivo Slider behave more like Pure CSS Popups by leveraging CSS2 and the :hover pseudo-class.

HTML

First, we need some hyperlinks between the slider images, which link to the images:

The Final Product

These simple changes allow a Nivo slider to degrade such that the images it presents/animates are still available to users who disable JavaScript, without disrupting the page’s overall layout and design The only difference between the page when viewed with JavaScript and without is that with JavaScript enabled the images shuffle all on their own, while when JavaScript is disabled the user has to mouse-over the hyperlinks to see the images. See the Alex Ross Wallpaper Nivo Slider No Script Demo.

Addendum (27/10/2012)

The finishing touch would probably be adding one more CSS rule which uses the :target pseudo-class:

#slider img:target {
display:block;
z-index:40;
}

That way the end user can click on a specific hyperlink and – since the hyperlinks’ href attributes all refer to the images using fragment-identifiers (#batman, #superman, #wonderwoman…) – the user can continue to see that image once they move their cursor away.