A Complete Guide to Web Design

10 Chapter 1 – Designing for a Variety of Browsers

Design Strategies

Web Design in a Nutshell, eMatter Edition

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 territo-

ries 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 them-

selves up-to-date.

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 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.

Something for Everyone

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, nonvi-

sual 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.