home | O'Reilly's CD bookshelfs | FreeBSD | Linux | Cisco | Cisco Exam  

Book HomeWeb Design in a NutshellSearch this book

1.3. Design Strategies

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.

1.3.3. Splitting the Difference

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 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 4.0 browsers. So, tables, frames, and much of JavaScript are fine, but DHTML effects may still be a problem.

The trick is to code your page such that it degrades well for older or more simple browsers. Simply being careful about always adding alternative text for images with the ALT attribute will make 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 4.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 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 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 wow 'em on the current browsers but don't drive users away if they're using an earlier version.

1.3.4. Something for Everyone

An approach that is common (albeit more labor-intensive) among professional web developers is to create multiple versions of a site aimed at different levels of users. One site might incorporate DHTML tricks and JavaScript events. Another could be a solid HTML 3.2-compliant site with images and attractive page layouts, but without the bells and whistles. You could create a text-only version to 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: one that takes advantage of the full functionality of the latest graphical browser and another stripped-down version that serves everyone else.

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 frames/no-frames or Flash/no Flash. 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 performing actions based on the browser being used (see Chapter 28, "Introduction to JavaScript"). Pages can also be assembled on the fly for a particular browser using Server Side Includes (see Chapter 18, "Server Side Includes"). 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.

1.3.5. Take Advantage of Tools

Whether you are designing with particular browsers in mind or with the goal of reaching the widest browser audience possible, the good news is that there are tools that can help you. The latest web authoring tools, such as Macromedia Dreamweaver and Adobe GoLive, have functions that ensure that your code will work with your preferred browsers. They give you a good head start toward creating HTML properly for your intended audience.

Dreamweaver 4.0 has a "Check Target Browser" feature that checks your HTML (but, unfortunately, not scripts) against a list of browser profiles to see if any tags or attributes are unsupported and then generates a report with its findings. Go to Macromedia's site (http://www.macromedia.com) to download browser profile updates as new browsers are released. To take some of the guesswork out of browser support for scripting, Dreamweaver allows you to set a target browser, to which it responds by limiting the behaviors you can select to just those supported in that browser. There are also built-in functions for doing browser detection.

Similarly, Adobe GoLive lets you define a set of browsers you want to support and automatically lets you know if it finds HTML tags or attributes that are not supported. Select the set of browsers you want to support using the Browser Sets option under the Source category in the Preferences dialog box. In fact, GoLive has a Web Database feature that lists all the HTML tags and their browser-support information. You can also select a target browser when adding scripts to your page and use the Browser Switch icon to detect the browser version and serve the appropriate script.

Library Navigation Links

Copyright © 2002 O'Reilly & Associates. All rights reserved.