jQuery Image Gallery: Working with Progressive Enhancement

While the name may sound like an intimidating and hard-to-grasp concept, the truth is that Progressive Enhancement (PE) is a simple, yet powerful paradigm that allows you to build more accessible web sites and applications by using a multi-layered approach. When using PE, the implementation of a certain number of features on a web page is planned from the beginning to work on client machines that have a minimal hardware/software configuration. From that point onward, clients (read: users) with more advanced configurations will simply be able to consume an enhanced and more polished version of those features. However, in both cases the core functionality of the web page will remain exactly the same, dramatically increasing its accessibility.

Of course, the best way to see the advantages of using PE is by developing some concrete and realistic examples. With that idea in mind, in the first installment of the series I demonstrated how to build a simple image gallery using the PE methodology. In that particular example, the gallery was composed of a few sample images which under normal conditions were displayed in a separate window; when JavaScript was enabled on the browser, though, the images were displayed on the same web page instead, thus providing users with an improved, slightly enhanced version of the gallery.

Even though its nature was somewhat basic, this example showed the benefits that PE hides under the hood; regardless of the settings present in client machines, in every case the gallery remained accessible to all users. That's pretty neat, right?

It's valid to recall, however, that the behavior of the previous gallery was implemented using only plain JavaScript. That's perfectly fine, but given jQuery's popularity in modern web design, it'd be useful to recreate the gallery's behavior using the functionality of this library. That's precisely what I plan to do in this second part of the series. To learn the full details of this process, ago head and start reading right now!