doteduguru

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.

Download 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

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

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)

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