Faced with the dilemma of varying browser capabilities, web designers have developed a variety of design approaches, some more extreme than others. The “correct” way to handle a particular site, of course, depends on its use and audience, but this section should provide a peek into the different positions in the ongoing debate over where to draw the line.
A minority of web developers adhere to the ideal standards that the Web should be accessible to everyone. They may also maintain that presentation should be in the hands of the end user, not the author. These designers tend to stick with the safest HTML standard (currently HTML 3.2 or even 2.0) and make sure that pages work on all browsers, including Lynx and version 1.0 of the popular browsers.
In web design discussion forums, there is consistently a voice representing the position that all the current embellishments to HTML (Java, JavaScript, style sheets, and DHTML) are unnecessary to successful communication over the Web. Designers who design for the lowest common denominator may choose not to use any of these technologies in their designs.
Another minority, at the other extreme end of the spectrum, are the web developers who design only for the most current version of popular browsers (as of this writing, Navigator 4.0 and Internet Explorer 4.0), with little concern for site performance for other users. The statement “tell them to upgrade—it’s free !” has often been used in defense of this design tactic. Beyond this, there are even designers who design for only the most current version of one particular browser. Note that this approach may be perfectly appropriate for intranet design.
This approach has the obvious disadvantage of alienating a large percentage of the audience. If the functionality of a site depends on a specific trick, for example, if you can’t get off the front page without JavaScript, then your site has problems communicating.
On the positive side, these designers tend to be the ones who forge new territories and put new technologies to the test. Creating exciting web features that depend on cutting-edge features does create an incentive for users to keep themselves up-to-date.
Far more commonly, designers take a more balanced approach to web site creation. Designing web pages that “degrade gracefully” is the buzz phrase in web design circles. This design incorporates the cutting-edge web technologies, such as DHTML or JavaScript, but implements them in such a way that the pages are still fully functional on older browsers.
One strategy is to design pages that take advantage of technology supported in the previous version of major browsers. As of this writing, that would be the version 3.0 browsers. So, tables, frames, and JavaScript are fine, but style sheets and DHTML are a problem.
The trick is to code it in a way so that your page degrades well for older or more simple browsers. Simply being careful about always adding alternative text for images with the ALT attribute goes a long way toward making a web page more functional for Lynx users. When tables are used, they can be constructed so they read logically when scanned by a text-only browser.
Once working pages are developed using version 3.0 technologies (while keeping an eye on performance on older browsers), the site can be embellished using the latest techniques and tricks. For instance, it is possible to create a page that looks just fine for all browsers, but that also takes advantage of Cascading Style Sheets for those browsers that can use them. It doesn’t hurt the other browsers; the up-to-date users will just get something extra. The same goes for DHTML tricks. They’re fine as long as they’re not used to carry the crucial message or functionality of the site. Think of these things as icing on the cake.
By being mindful of how well elements degrade, you can construct pages that will wow ‘em on the current browsers but not drive them away if they’re using an earlier version.
Another successful (albeit more labor-intensive) approach is to create multiple versions of your site aimed at different levels of users. One site could incorporate DHTML tricks and JavaScript events. Another could be a solid HTML 3.0-compliant site with images and attractive page layouts, but without the whistles and bells. You could create a text-only version that would serve the folks using Lynx, nonvisual browsers, and browsers on handheld electronic devices. If you were feeling ambitious, you could provide an all-Flash version of your site for those who are interested! In most cases, two carefully planned versions are plenty.
Some sites allow their users to decide which version they’d like to see. It’s not uncommon to arrive at a site and be asked to choose between a souped-up version or a text-only version, or to choose between frames or no-frames. This puts the control in the hands of the viewer.
A more sophisticated approach is to automatically serve up an appropriate version of the page for the browser that is making the request. JavaScript is capable of basing actions on the browser being used (see Chapter 22). Pages can also be assembled on the fly for a particular browser using Server Side Includes (see Chapter 13). Hotwired’s WebMonkey site is a great example of this method in action, plus they share their secrets, so check it out at http://www.webmonkey.com/.
Of course, this approach takes a bit more time and technical know-how, but it has its rewards.
Get Web Design in a Nutshell now with the O’Reilly learning platform.
O’Reilly members experience books, live events, courses curated by job role, and more from O’Reilly and nearly 200 top publishers.
