Home arrow JavaScript arrow Progressive Enhancement in an Image Gallery
JAVASCRIPT

Progressive Enhancement in an Image Gallery


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.

Author Info:
By: Alejandro Gervasio
Rating: 5 stars5 stars5 stars5 stars5 stars / 3
July 12, 2010
TABLE OF CONTENTS:
  1. · Progressive Enhancement in an Image Gallery
  2. · Creating a basic image gallery
  3. · Enhancing the image gallery with JavaScript
  4. · Binding the JavaScript to the image gallery

print this article
SEARCH DEVARTICLES

TOOLS YOU CAN USE

advertisement
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!


blog comments powered by Disqus
JAVASCRIPT ARTICLES

- More Top jQuery Tutorials for Beginners
- More Top jQuery Plugins for Menus
- Top jQuery Tutorials for Beginners
- New UI Framework and SDK for JavaScript Rele...
- JavaScript OpenPGP Tool, Node.js 0.6.3 Avail...
- Yahoo Releases Cocktails Language and Develo...
- Customizing jQuery Slideshows: Dynamic Contr...
- Customizing jQuery Slideshows: the animate()...
- Customizing jQuery Slideshows: slideUp() and...
- Customizing jQuery Slideshows: hide() and sh...
- Web Workers: Performing Calculations in Para...
- More Top JavaScript Frameworks and Libraries
- More Dynamic jQuery Styling Techniques
- The Top JavaScript Libraries
- The Top JavaScript Frameworks

Dev Articles Forums 
 RSS  Articles
 RSS  Forums
 RSS  All Feeds
Weekly Newsletter
 
Developer Updates  
Free Website Content 
Contact Us 
Site Map 
Privacy Policy 
Support 



© 2003-2012 by Developer Shed. All rights reserved. DS Cluster 4 - Follow our Sitemap
Popular Web Development Topics
All Web Development Tutorials