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.