Subscribe:   Posts   |   Email   |   Facebook   |   Twitter

Internet Marketing and Web Development in Higher Education and other tidbits…

Web Development: Progressive Enhancement – Part 1

18 Mar 2009

written by Nick DeNardis

Web Development: Progressive Enhancement – Part 1

I am starting a series of posts as an extension to my talk a few weeks ago on Web Standards and Accessibility. These posts will be dedicated to explaining how to make a habit of progressive enhancement instead of falling back on graceful degradation. It will also give you the tools to pass this on to your coworkers and developers.

Step 1: Text is all you need, assume and start with nothing.

picture 1 Web Development: Progressive Enhancement   Part 1Download Lynx (Mac | PC). Load up your web page and see if you can navigate to your desired information. Does the order of the content look logical? Is anything important missing? Are you seeing text you should not be seeing?

Often this is the first step overlooked by web developers, not because its hard but because it takes extra time. Pressure from management to get projects done can push accessibility low on the priority list. You can learn a great deal by browsing your site from this browser, how easy or difficult it can be. Try it out for at least 20 minutes, see if you get frustrated or not.

Step 2: Building up, SEO included

picture 4 Web Development: Progressive Enhancement   Part 1

Semantic code has built in search engine optimization. Naming your html id’s and classes by what they contain instead of their visual position not only benefits developers but also search engines. When a computer knows what content you are describing it can bring it to the attention of someone searching for it. When you use javascript to load content dynamically on the page you can be hiding that content from search engines and in turn from your potential users.

If something is important enough for search engines to pick up it should be in the html file and not loaded afterward. As you can see from the screen shot in step 1 the login form is currently in the HTML although it is only visible by clicking on a link that is activate via javascript. The login form is not something a search engine would care about so it should really be removed from the HTML and loaded into the DOM once the page has loaded with javascript.

Step 3: Technology applied in layers, CSS next

3032003589 a3a9eea130 o Web Development: Progressive Enhancement   Part 1

After your site works in a text only browser in a linear fashion without javascript or images start applying some style. Applying the style with CSS will hopefully give you a central location to update the look of your site. One important thing to think of when writing CSS is to be diligent and keep your nesting in a logical order so you or another developer can edit it in the future without wasting time searching through all the inheritance rules.

There are thousands of techniques to writing CSS, I am not going to dictate which one is better than the other, but what I want to convey is thinking about every rule you add and ask yourself if it is necessary. Each added rule adds weight to your page, rendering time and complexity for future development changes. Use HTML tags appropriately, header tags for headers, p tags for paragraphs and so on so search engines know what is on your page and so you don’t have tons of container DIV’s weighing down your page.

Step 4: Images (png’s mainly)

picture 6 Web Development: Progressive Enhancement   Part 1

As the design of web pages get more intricate it becomes more beneficial to use alpha transparent images to minimize the number and filesize of images. Older browsers (Netscape and IE6 mainly) do not support these alpha transparent images natively. Although there are techniques to add this functionality, in most cases the extra rendering time and weight is not worth it.

One rule as a web developer/designer that you have to keep in mind is supporting multiple browsers doesn’t mean you have to guarantee the same experience across the board. There is nothing wrong with serving up different images depending on capabilities as long as the users experience is not impaired by the lack of images.

The example above is IE6 on the left and Firefox on the right. As you can see the left image is jagged because it is just a transparent GIF and the smooth image on the right is a PNG with alpha transparency. The switch was done with an <!–[if lt IE 7]> conditional. Same web page but different experience depending on the users browser, adding functionality if it is available.

The Goal

To reach everyone possible. Think of a web page like a building, it has to be accessible by all no matter how it looks. Starting out with the absolute basics and building up keeping accessibility in mind benefits everyone. Your users, designers and developers will thank you. Although these things seem really basic, they are the building blocks to a successful web site.

Next time: Javascript DOM Manipulation, AJAX and Flash

The content of this post is licensed: ©2009 All Rights Reserved

About the author

Nick DeNardis

Nick is the Associate Director of Web Communications at Wayne State University by day. By night he hosts the video blog EDU Checkup where he reviews higher education web sites live. Nick is an active member of the higher education web community and is an officer of Refresh Detroit, a group of web professionals whose goal is to promote web standards, usability, and accessibility.

Nick DeNardis Nick's Facebook Nick's LinkedIn Bio Nick's Twitter Account Nick's Flickr Photos Nick's YouTube Profile Nick's Digg Profile Nick's Delicious Bookmarks Nick's StumbleUpon Nick's SlideShare Presentations Nick's Last.FM Music

This post was written by - who has written 31 posts on .eduGuru

  • Shawn Lindsey

    Nice Post, it is nice to let others know ways to help keep their site and business alive. I mean there are so many sites out there that die because nothing is ever updated. People create the site and the content and just leave it.

    They really don’t know that there is more to having a successful site than just creating the website and hoping for the best.

  • Aaron

    Great post. This has inspired me to got back and make some of our sites more accessible.

    By the way, what program are we looking at in the screenshot for Step 2?

  • Web Development Company

    Good Post. Really nice, it gives me some valuable ideas. So that i can start working with my site now.

    Thank you for posting such a valuable info….

  • Lee

    Start out with just text. That’s a good thought! Let nothing get in the way of the message. The graphics should support the text, not distract. If I go to another website with flying graphics that take 2 minutes to load I’m going to scream!

  • Benivolent

    Nice Post! Today we got new inforation regarding our buiness.

  • Web Development Hampshire

    Good post Nick, I would add in a qualifier for adding in images, have a valid reason to include them. When it comes to showing an image next to copy/content think twice, will the user look at the image more than the text with your message, if so then the image is not valid in that scenario.
    Often people add in images without knowing the underlying reasons why they should add them.
    Focal points, High Contrast is the main reason why images should be added to guide the user rather than overwhelm.

  • peter jakab
  • Anonymous

    your blog is really informative … i found it interesting !! thanks a lot for sharing keep posting

  • Andrew Addison

    Thanks a lot for those tips!

  • Aparajayah Technologies

    Thanks for posting..

    For Best web development service.

    visit –

Proud Member of BlogHighEd University Web Developers eduStyle

© .eduGuru - Internet Marketing and Web Development in Higher Education and other tidbits…. Powered by Wordpress. | Advertiser policy