In this first part of a series I introduce you to the concept of Progressive Enhancement and show you how to implement it in a basic image gallery. PE can help you build websites that are accessible to the largest possible number of users. Its principles and approach, which you'll learn from the real-world example created in this series, belong in every website developer's repetoire.
Progressive Enhancement in an Image Gallery (Page 1 of 4 )
The web is constantly evolving, but thankfully it seems to have reached a decent level of maturity. This maturity has come about thanks to the implementation of certain paradigms created in the last few years that now have become very popular, at least with many conscientious web designers and developers.
A good example of such beneficial paradigms is the so-called Progressive Enhancement (PE). It's a smart and solid approach that allows you to build web sites/applications where the implementation of one or multiple features is conceived from the very beginning to work on a machine with the minimum hardware/software configuration possible. Users with more powerful configurations will be able to work with an "enhanced" version of the feature in question, hence the approach's name.
Got the logic behind using PE? I hope so. While admittedly this isn't a very academic definition (you can always check Wikipedia to get one), the truth is that PE is a design methodology that promotes accessibility and usability. It also permits you to use client-side technologies, such as JavaScript and CSS, in a very clever fashion.
On the other hand, the best days of its counterpart, Graceful Degradation, now look a bit more distant, vanishing in the mists of time. Hopefully this trend will continue, as more designers and developers discover the many benefits that PE brings to the table.
Despite my introductory speech, I don't intend to waste your time explaining the theoretical concepts that surround the application of PE. Instead, my goal here is to provide a hands-on demonstration of how to use PE in a few concrete, real-world cases, which hopefully will be an educational and fun experience.
With that premise in mind, in this article series I'll be developing some easy-to-follow examples that will demonstrate the actual functionality of PE, ranging from building image galleries and slide shows, to creating some simple Ajax-driven applications, which you'll be able to tweak and customize at will.
Does my proposal sound appealing to you? Then start reading right now!