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
Step 3: Technology applied in layers, CSS next
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.
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.