Design Strategies (Web Design in a Nutshell, 2nd Edition)

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.1. Lowest Common Denominator Design

One way to make sure your pages are accessible to everyone is to stick with the safest HTML standard (such as HTML 3.2) and shun any extras. That way your pages are sure to work on all browsers, including Lynx and Version 2.0 of the popular browsers.

A minority of web developers take the position that the current embellishments to HTML (Java, JavaScript, DHTML, and plug-in technologies like Flash) 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. This approach reflects the conservative extreme of the range of web design strategies.

1.3.2. Current Version Design

Another minority, at the other end of the spectrum, are the web developers who design only for the most current version of popular browsers (as of this writing, Netscape 6.0 and Internet Explorer 5.5), 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 or platform. This may be perfectly appropriate for intranet design in organizations that have standardized on a particular version of a single browser, but in general, it's unrealistic.

This approach has the obvious disadvantage of alienating a significant 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 DHTML support -- 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 sites that depend on cutting-edge features does create an incentive for users to keep themselves up-to-date. Unfortunately, in many cases, upgrading is out of the control of the end user.

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.