Skip to main content

Adding functionality with progressive enhancement

Here at Brighternet we’ve been assessing some Javascript accordion and slider libraries, so we thought we’d share our general approach to progressive enhancement.

We eventually settled on a combination of jQuery Tools’ Tab and Scrollable libraries, so we’ll use those as examples in this article. At the time of writing jQuery Tools was at version 1.2.5.

Index

Scope of work

As the jQuery Tools demos don’t specify the CSS media type, we test with a normal PC browser, which ultimately means that we’re testing with the ‘screen’ media type.

It is important to test the functionality on all devices that you intend to support, such as mobile phones, printers and screen readers. At a basic level this means testing multiple media types at every stage of the process.

For the sake of simplicity, this article assumes that only the ‘screen’ media type will be supported, for browsers on a PC.

Verify that the functionality works as advertised

The first step is to verify that the functionality actually works, by creating a bare bones stand-alone test page void of anything other than the most basic setup. If the library offers a demo, use it, with the most minimal setup provided.

This test is with Javascript and CSS enabled. We test the different combinations during the reduce and enhance phases.

Test the functionality on all browsers you will be supporting. If any browser bugs materialise, see if they can be fixed easily. Only use the library if this basic test page can be made to work sufficiently.

Accordion (via the Tab library)

Note that here the only modification we’ve made is to remove the forward slash from the image URLs in tabs-accordion.css, so that we can test the functionality without having to route the request through a web server.

Scrollable

Note here that we’ve used the minimal CSS provided on the demo page and that we’ve replaced the Flickr images with text so that we can test without relying on Flickr. By using the minimal CSS we also needed to give the prev/next anchors some text and reduce the width of .scrollable so only a single item’s content is shown (which revealed that a set width is required for items).

Reduce and enhance

Now begins the progressive enhancement. First we reduce the technologies to the most basic – (X)HTML only – then enable more advanced layers of technology – CSS then Javascript – testing at each stage. This will ensure that the page will be usable regardless of the technologies supported by the client browser.

Review with Javascript and CSS disabled

The content should be suitable for only a basic (X)HTML page. Any content that does not make sense with Javascript disabled, such as previous/next links that won’t work without Javascript, should be removed from the page and be added by Javascript instead.

The accordion example is fine in (X)HTML – it just shows all content as normal.

The scrollable example shows Previous/Next links, which don’t function without Javascript so should be removed from the markup. Instead, we use Javascript to add the markup, which means the links will only appear when they can work.

Review with Javascript disabled but CSS enabled

Any CSS declarations that obscure the content, with the expectation that Javascript will reveal it, should be removed and instead be added via Javascript so that content is only obscured when it can be made visible again.

The accordion is styled to show the first pane but hide the others, via the display style. Instead, we set the display to ‘block’ in the CSS and use Javascript to hide all but the first pane (jQuery does this via inline display:none/block styles).

The scrollable example is styled to show only the first item, via the overflow style. Instead, we set the overflow to visible and use Javascript to set it to hidden. We do a similar thing with the items’ width and float, so that the content shows the same if Javascript or CSS or both are disabled.

You may also want to make other tweaks to the CSS so that everything works nicely with any surrounding content that will be on the page.

Review with Javascript enabled but CSS disabled

This is probably overkill, because most environments will support CSS as there are few benefits of disabling them. Even so, to be thorough we will deal with this situation as well.

For functionality that requires CSS in order to work properly, which is often the case, we use Javascript to test whether CSS is enabled and only load the functionality if it is. You have to be careful to test a property that is not set by default by browsers.

Both the accordion and the scrollable examples require CSS to function correctly.

For the accordion, we only load the functionality if #accordian has its border-style set to solid.

For scrollable, we only load the functionality if .scrollable .items has its position set to absolute.

Add the functionality to your site

We’ve verified that the functionality can work as basic (X)HTML and enhance the UI if Javascript and CSS is available. It can now be applied to your site. Be sure to verify that everything works as expected with the different combinations of Javascript, CSS and media type, because other content/functionality on the site could have a knock-on effect.

Posted by Stephan on 01/04/2011.


Comments

Comments closed.