Ask us
 
Close Ask us

how can we help?

Whether you need help, have a question, or just want to say hi we would love to hear from you.

 
 
 
 
 
 
sitemap Twitter Facebook
PlanMySite.com

New Jersey Web Design Blog

Evolution of Web Design – Progressive Enhancement with jQuery

Progressive-Enhancement-with-jQuery

With the World Wide Web being more than 20-years-old, it should come as no surprise to learn that Web design has evolved significantly since it was first developed. Thanks to new technologies and developments within the Web design field, such as Progressive Enhancement, modern Internet applications look simply amazing. But, what is Progressive Enhancement and why should you look for a Web developer who will put this methodology to work for you?

What is Progressive Enhancement?

Progressive Enhancement, or PE, is a Web development methodology that involves starting with a solid development base and then adding onto that base in order to create a more enjoyable experience for those who use the Website. In other words, the Web developer lays down a solid foundation for the Website before adding on all of the little extras that make the site easy to navigate and enjoyable to use. In this way, you can be certain the Website can be accessed by anyone who might be interested in seeing it while also resting assured that those who visit your site will have a positive experience.

Why Should You Use Progressive Enhancement?

There are many benefits to implementing the Progressive Enhancement methodology. Some of these include:

  • It provides users with a sense of security because they can visit your site and can interact with your content with a variety of different devices and browsers
  • It emphasizes the content on your site, making it more valuable to your site visitors
  • You can activate your basic Website right away while concentrating on adding the “extras” later
  • Websites developed with Progressive Enhancement are easy to maintain
  • The Web developer can focus on completing more complex aspects of the Web design without worrying about the basic foundation of the site

How Does Progressive Enhancement Work?

To understand how Progressive Enhancement works, it is beneficial to look at a real world example. For those with basic jQuery knowledge, the simple example below shows how this methodology works.

Example 1: jQuery Fancybox – adding a stylized box to all of the photos on your Website (Fancybox plugin can be downloaded from: http://fancybox.net ).
Requirements:

  • Downloaded jQuery 1.3+ and latest fancybox version,
  • Simple HTML template with “img” tag embed in “a” tag, for example:

  example1

This simple script will transform your normal image into a nice looking modal box with image.


When JavaScript is turned off or when the browser does not support javaScript, the user will just see normal picture or photo.

Example 2: jQuery User Interface – creating tabs from the list (using jQuery and jQuery UI).
Requirements:

  • Downloaded jQuery 1.3+ and jQuery UI,
  • Simple HTML template with items list and content elements, for example:
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce quam ante, aliquam quis sollicitudin eget, vestibulum id lorem.
Suspendisse dignissim interdum posuere. Quisque euismod posuere lectus, ut porttitor sapien blandit eget.
Aliquam cursus quam a augue feugiat sodales. Duis ultrices commodo tellus eu scelerisque. Morbi scelerisque gravida feugiat.

When JavaScript is turned off, the user will just see a single list and listed content elements.

Simply put, Progressive Enhancement helps ensure every one of your site visitors has a positive experience when visiting your Website by making changes according to the tools the visitor is using to access the site. At the same time, it sets up your Website to be easily modified and enhanced over time so you can provide your users with the best experience while also keeping up with Web design technology as it continues to evolve.

 

add comment