|
April 19, 1999
Web site design part art, part science,What follows are some of the lessons learned from the development of the U.S. House of Representatives Internet Law Library. It is a mixture of some of the common lore of the Internet, suggestions that others have put into print, and some items discovered through trial and error. This collection of thoughts and observations is offered in the sharing spirit of the Net. If you have any suggestions for additions, corrections, or modifications to this essay, please let me know at ElliotChabot@abanet.org
|
|
Set your goal |
The first key to a successful Web site is to decide on the goal of your site. What is your
purpose? What is your vision? The clearer your focus, the more likely you are to achieve it.
The vision for your site is the foundation on which it is built. Strong sites call for strong
foundations. Three elements that you may want to consider are who, how, and what.
|
|
Fundamental Expectations |
The Internet is an enormous cooperative venture. As such, there are certain expectations among
and towards the people who use the it. One of the most basic principles behind the Internet is
that those who benefit from the Internet should give something
back to the Internet. In the context of building Web sites, this means that
each Web site should include some original useful material.
The more original, useful material your Web site includes, the greater the likelihood that your Web site will be a success. Phillip Perry ("Beware These Nine Costly Mistakes When Creating a Home Page for Your Law Firm," Law Practice Management, November-December 1996, pp. 20-29, on p. 22) puts it succinctly: "What people are looking for is information that will help them make more money in their business, become smarter buyers of your services, or lead more productive or happier lives." Meet those needs, and your site will do well.
|
|
Know the Building Blocks |
HyperText Markup Language (HTML) is the coding scheme used to create most documents on the
World Wide Web. HTML describes the logical organization of a document and, to some extent, its
physical layout as well. In order to be able to build Web pages, you need to either learn HTML or learn how to use a tool that will generate HTML. Mag's Big List of HTML Editors (compiled by Tom Magliery) contains an extensive collection of HTML tools, including free add-ons to make Word and WordPerfect act as HTML editors. For those of you who would like to be able to deal directly with HTML codes, you might want to look at:
For those of you who prefer to learn from a book, you might want to try the fourth edition of The HTML Sourcebook by Ian S. Graham (New York: John Wiley & Sons, Inc., 1998). |
|
|
If you do choose to do your own HTML coding, it is strongly recommended that in addition to proofreading your work and trying all of your hypertext links, you also check your work using an HTML verifier. The W3C HTML Validation Service allows you (at no cost) to verify the correctness of your HTML code against HTML 3.2, HTML 4.0, and other standards.
|
|
Blinking Text |
All text between the <BLINK> and </BLINK> tags will flash on and off when
viewed by Netscape Navigator. Blinking text is hard on the eyes, is almost universally reviled
by the Web page developer community, and quickly becomes . There are several good alternatives to using blinking text:
|
|
Buttons & Imagemaps |
A graphic can be turned into a button by surrounding it with a hypertext link. For instance,
if you wanted to turn the image seal.gif into a virtual button
that will take you to the U.S. House of Representatives homepage, you could code it
as
<A HREF="http://www.house.gov/><IMG SRC="seal.gif" width=240 height=200 ALT="U.S. House of Representatives"></A> Which will result in Most browsers will place a border around illustrations used as hypertext links. The border is normally in the same color as are textual hypertext links (blue for links that have not been visited recently and purple for links that have been visited recently). David Siegel, in chapter 10 (Images on the Web) of Web Wonk: Tips for Writers and Designers, argues that borders detract from the aesthetic quality of the illustrations and get to be downright monotonous after a while. To turn off the borders, add BORDER=0 to the <IMG> tag. In the above example, that would be <A HREF="http://www.house.gov/><IMG SRC="seal.gif" border=0 width=240 height=200 ALT="U.S. House of Representatives"></A> Which will result in In the above examples, clicking anywhere on the image will take you to http://www.house.gov/. HTML, however, gives you the option of dividing an image into different areaswith each area linking you to a different Web page. Such multi-linked images are known as imagemaps. Imagemaps come in two varietiesserver-side imagemaps and client-side imagemaps. Client-side imagemaps were developed second of the two and are generally thought to be somewhat easier to build and maintain, provide the user with a bit more information, and execute a bit faster than server-side imagemaps. (If you are curious about how to implement server-side imagemaps, see pp. 116 to 124 of The HTML Sourcebook by Ian S. Graham (New York: John Wiley & Sons, Inc., 1998, fourth edition).) Client-side imagemaps are based on your defining rectangular areas within your image and having each rectangular area link to a particular URL. There are tools available that will generate some or all of the HTML code that you need to generate imagemaps (see, e.g., the Yahoo! Imagemap Software page). Alternatively, you can write the HTML code yourself. The HTML for client-side imagemaps follows the general format: <IMG SRC="image-URL"
|
|
where
An example of an image map would be taking a picture of the U.S. Capitol building and coding it so that if you click on the Senate side, it connects you to the Senate homepage and if you click on the House side, it connects you to the House homepage: <IMG SRC="capitol.gif" WIDTH=289 HEIGHT=131 BORDER=0 ALT="The U.S. Congress" USEMAP="#capitolmap"> <MAP NAME="capitolmap"> <AREA SHAPE="RECT" COORDS="0,0,144,200" HREF="http://www.senate.gov/" ALT="Senate"> <AREA SHAPE="RECT" COORDS="145,0,289,200" HREF="http://www.house.gov/" ALT="House of Representatives"> </MAP>
Note: Although client-side imagemaps were originally only supported by Netscape Navigator, they are now widely supported. Even the non-graphical Lynx browser (starting with version 2.5) supports client-side imagemaps. Kenn Nesbitt ("Hot Netscape Pages Made Simple," Internet Advisor, April 1996, pp. 16-19, on p. 10) suggests allowing for non-imagemap-enabled browsers by placing your imagemap inside a link to an alternative page, e.g., <A HREF="alternative.html><IMG SRC="capitol.gif"></A> Be wary of using Nesbitt's workaround, though, as it may deactivate the imagemap feature in some imagemap-enabled browsers.
|
|
Colors |
HTML allows you to designate the color of your text and the color of the background on which it
appears. Before deciding on what colors to use, take a look at
chapter 2 (Everything You Wanted to
Know About Background Colors) and
chapter 3 (Set Your Links
Ergonomically) of David Siegel's "Web Wonk: Tips for Writers and Designers." (For a bit
more technical review, see
"Consistent
Color on ALL Browsers10 Easy Steps" by Geoff Baysinger.) A good tool for letting you
see how various colors interact with each other is InfiNet's
Color Index.
For a while after Netscape began to support color control HTML commands, many sites tried white lettering on a black background. While this is very striking when viewed on a computer monitor, using white text can create a problem with printing. Some printers ignore HTML-designated background colors, but do try to represent text colors either directly (on color printers) or through gray-scale (on black and white printers). The result of trying to print such a page on such a printer (with white paper) is that it prints white on whitenot a particularly readable color scheme. If you expect people will want to print a copy of your page, do not use white text. White on white is very hard to read. |
|
The promoters of WebTV warn that full white backgrounds, such as <BODY BGCOLOR="#FFFFFF"> and full red backgrounds, such as <BODY BGCOLOR="#FF0000"> will cause screen distortion for people using WebTV. They recommend using #EFEFEF instead of #FFFFFF. Beware of this solution, however, as some browsers represent #EFEFEF as a gray crosshatch pattern, instead of as a solid color. |
|
Images sometimes contain very subtle color variations variations that may be virtually undetectable by the human eye. These subtle color variations, nonetheless, result in image files being larger (and therefore taking longer to download) than if they did not include the extra colors. NetMechanic provides a free service (GIFBot) that will take an image from your web site and show you how it would look with fewer colors. File size savings of 50% or more are not unusual. For more strategies on dealing with image colors, see chapter 3 (Preparing Images) of Creating Killer Web Sites: The Art of Third-Generation Site Design by David Siegel, Indianapolis: Hyden Books, 1997, 2nd edition.
|
|
Copyright |
Copyright law applies to the Internet just as it does to printed material. Even without
copyright law, copying the work of another (without permission) is a breach of common courtesy
and would reflect badly on your office. Do not put anything on
your Web pages from another person's Website without first getting their
permission.
It is normally good practice to also acknowledge on your Web site those people who have given permission for you to have copied material from their Web site. An example of such acknowledgments is the art credits page of the U.S. House of Representatives Internet Law Library.
|
|
Evolution |
The Internet is a rapidly evolving environment. One common thread among the best Web sites is
that they are constantly changing. If at all possible, change
something on your web site every day, either by adding something new or by
improving something already there. The cumulative effect of all these changes is an improved
site. Sites that are constantly improving tend to draw repeat customers.
Don't be afraid to experiment now and then. Don't be afraid to leave the beaten path once in a while. Creating a great web site is like sculpting a great work of art. You are constantly chipping away bits and pieces here and adding bits and pieces there. Polish! Polish! Polish! Work on a truly outstanding Web site is never finished. Many sites have a "What's New" page to list recent additions and changes. David Siegel, in Killer Web Sites: The Art of Third-Generation Site Design (Indianapolis: Hyden Books, 1997, second edition, p. 21) recommends that you put these on your core page, rather than hiding them on a "What's New" page.
|
|
Feedback |
The Internet provides great potential for two-way communication. Simply putting up a Web page
provides one-way communicationyou to the person reading your page. In order to get to
two-way communication, you need to provide a way for your reader to get back to you (or to the
appropriate person in your office).
There are several ways that good use of Internet features and design can facilitate two-way communication. Where practical, use all of these on every page of your site:
|
|
File Extensions |
The Internet has been designed to be able to transmit many different types of files. When an
Internet browser receives a file, one of the first things that the browser attempts to do is
determine what type of file it has. In part to help browsers do this, the practice has
developed of using standardized extensions at the end of file names. (File name extensions are
normally three or four characters long and are preceded by a period.)
Although Netscape Navigator does not generally rely on file name extensions to determine what type of file is being received, some Internet browsers do rely heavily on the extension names. Therefore, when naming your files, it is strongly recommended that you conform to the standard file extension naming conventions. The most commonly used file extensions on the World Wide Web are:
For a review of the practical differences between the GIF and JPEG formats, see Frequently Asked Question 1.3 of the JPEG Image Compression FAQ. See also, the GIF Compression and Jpeg Compression pages of David Siegel's Creating Killer Web Sites.
|
|
Humor and Entertainment |
While entertainment may not be the primary goal of your site, incorporating a bit of humor into
your site need not violate the dignity of your office. A Web site that both provides
information and is enjoyable to use is more likely to draw repeat customers than a site that
provides the same information but is as dry as dust.
|
|
<IMG> height & width attributes |
When you view a Web page that has an illustration, your computer normally receives two filesone
that contains the text of the Web page and one that contains the illustration. When you
view a Web page with two illustrations, your computer normally receives three filesone for
the text and one for each of the illustrations. A page with three illustrations will normally
have four files, and so on.
When Internet browsers display a Web page, they normally will format the text up to the first illustration. They then wait until they have downloaded enough of the first illustration to determine its width and height. Once that width and height information is available, the browser formats the text that follows the illustration. When you build a Web page, you can speed this process up by designating the width and height of each illustration using the WIDTH and HEIGHT attributes of the <IMG> tag. When you use these attributes, browsers can display all the text more promptly because they now know how much space to allocate for each illustration. If, for example, you wanted to display a picture of the U.S. Capitol building that is 289 pixels wide and 131 pixels high, you might use the HTML command <IMG SRC="capitol.gif" WIDTH=289 HEIGHT=131 BORDER=0 ALT="U.S. Capitol Building">
Note that you can use the WIDTH and HEIGHT attributes to enlarge or shrink an illustration. For instance, using the same capitol.gif file, if we now specify the width as 145 and the height as 66, the image becomes
One way to determine the original size of an image is to view the image by itself using Netscape Navigator. To do this, place your cursor over the illustration and press the alternate mouse button (normally the right button on the mouse). A short menu will be displayed on your screen. Choose "View Image". Netscape will now display just the image. On the status bar at the top of the Netscape browser, it will display the dimensions of the image (width x height).
|
|
JavaScript |
The introduction of the JavaScript programming language has been one of the major steps forward
in making Web pages more interactive and dynamic. While Netscape browsers will recognize
JavaScript (starting with Netscape Navigator version 2.0), most other Internet browsers
do not yet recognize it. Even worse, unless you are careful, browsers that do not recognize
JavaScript as being computer instructions will display your JavaScript as if it were text.
If you use JavaScript on one of your Web pages, use the following techniques to avoid having your JavaScript code interfere with people using non-JavaScript enabled browsers:
JavaScript is relatively new. Additionally, there are slight differences between how the different versions of Netscape Navigator (and the other browsers that now recognize JavaScript) interpret JavaScript. (For a partial list of the JavaScript implementation discrepancies between Internet Explorer 3.0 and Netscape Navigator, see Chapter 3 (Test Your Scripts with Both Browsers) of Dmitry Kirsanov's Top Ten Web Design Tips.) You may, therefore, want to consider taking extra steps to get customer feedback on any problems they encounter with your JavaScript code. One approach to consider is the approach used by the U.S. House of Representatives Internet Law Library. The Law Library adopted the convention of putting a coffee cup icon at the bottom of each page that uses either JavaScript or Java code. If you click on the icon, it will take you to a page which requests that the reader report any JavaScript or Java error messages to the site's webmaster immediately (along with related information to help the webmaster diagnose the problem).
|
|
Layout: Advanced Techniques |
As noted elsewhere, when the original HTML specification was drafted, very little emphasis was
placed on controlling physical layout. As the Web became more popular and graphic artists,
user-interface specialists, and related professionals entered the fray, pressure began to mount
to develop ways to give Web page authors more controlnot just for the sake of aesthetics,
but also to increase the readability of Web pages.
Two very good writings on the subject (with lots of practical techniques on how to control layout using currently available HTML) are chapter 6 (Controlling Horizontal Space) of "Web Wonk: Tips for Writers and Designers" by David Siegel, and a pair of articles by Laura Lemay in Web Techniques "Single-Cell Tables," November 1996, pp. 22 & 24-26, and "Design Kludges," December 1996, pp. 20 & 22-23. The Siegel chapter and the November Lemay article explore the use of tables to format text. The December Lemay article delves into some of the newer commands available in HTML (including the <MULTICOL> and <SPACER> tags). Note: If you do take the tables approach, be sure to read Laura Lemay's "HTML Workarounds" in the June 1996 issue of Web Techniques (pp. 16 & 18-20). The article provides useful tips on how to keep table data readable on browsers that are not tables-enabled.
|
|
Netscape and its Competitors |
The original HTML specification emphasized the logical organization of documents and left open
most of the questions dealing with physical presentation. As a result, the same HTML
documentwhen viewed with a different Internet browser, on a different platform, or with a
different monitormay look significantly different. (For an excellent comparison of how
differently the same HTML document can look across different browsers and platforms, see "Web
Design-O-Rama: Battling Browser Hell" by Mark Frost and Lynda Weinman, in the January 1996
issue of The Net, pp. 66-71. For a
tabular comparison of which browsers support which HTML tags, see
Full
Results of Our BrowserComp Testing by Ziff-Davis Internet Labs (a narrative version appears
in "Browser Compatibility: Is
Seeing
Believing?" by Lisa Sweet, ZD Internet, December 1996, pp. 77-81).)
As HTML has evolved, more attention has been given to physical layout. Nevertheless, one of the major decisions that confronts Web designers is what combinations of browsers, platforms, and monitors are you going to try to have your site accessible from. According to the Nineth WWW User Survey (May 1998) of the Georgia Institute of Technology's Graphics, Visualization, and Usability Center, 70% of the people who use the World Wide Web expect to use Netscape in the next 12 months, over 96% use a color monitor, and 83% use a monitor that measures at least 14". Should you design your site to run with Netscape on a 14" color screen and leave the rest of the world to fend for itself? What about the users of Microsoft's Internet Explorer (23% of all users according to the GIT/GVUC study)? Internet Explorer supports most of the features of Netscape plus a few that Navigator does not currently support. What about users of Lynx, a non-graphical browser that is used extensively in the library community? What about users of Cello, Mosaic, Arena, Emacs, or the other Internet browsers? Some Web professionals, such as prominent Web site designer David Siegel, take the position that the best sites use Netscape Navigator's advanced features because Netscape provides the greatest control of presentation (see, e.g., Severe Tire Damage on the Information Superhighway). Other designers, such as Laura Lemay in "HTML Workarounds" (in the June 1996 issue of Web Techniques, pp. 16 & 18-20) argue that there are enough opportunities through innovative use of HTML that you can design sites that take advantage of almost all of Netscape Navigator's features while providing almost equal functionality to users of other browsers. Weighing these two competing goalsfunctionality and accessibilityis one of the key decisions that a Web designer needs to make. Note: A good source for information on how different browsers respond to HTML commands is the fourth edition of The HTML Sourcebook, by Ian S. Graham (New York: John Wiley & Sons, Inc., 1998). In addition to the article by Laura Lemay mentioned above, an important article on techniques for designing across the spectrum of browsers is "Make Multimedia Friendly" by Matthew Gray and Eric Richard, Internet World, March 1995, pp. 26-28 (see especially its section on "Text-Only Users"). An article mentioned in the Lemay article (and worth at least a quick look) is "The Last Page" by Michael Swaine, Web Techniques, June 1996, p. 80.
|
|
PICS |
PICS (Platform for Internet Content Selection) labels are a specialized type
of HTML tag that allow you to embed site rating information in your web pages. Ratings may
indicate the appropriate age for viewing your pages, or the amount of sex, violence, profanity,
commercialism, or other categories contained on your pages. Several Internet site filtering
products, including SurfWatch,
Cyber
Patrol, and Cybersitter, read the PICS
labels on a Web page and can be configured so that if the PICS labels indicate that a Web
page exceeds certain levels of sex, violence, etc., the software will prevent the user from
viewing that page. Some filtering products can be configured so that they will prevent a user
from viewing any Web page that does not have a PICS label.
The two most widely used PICS label schemes are from SafeSurf and the Recreational Software Advisory Council. The Web sites of both organizations provide simple instructions for building PICS labels using their schemes. Four other schemesthe Vancouver Webpages Rating Service (with a distinctly Canadian orientation), Safe for Kids (a very simplified rating system), ADEQUATE.com (based on the systems used for rating American movies and television programs), and IT-RA (an Italian rating system)are also available. Including PICS labels in each of your Web pages has no effect on people viewing your pages without filtering software. For those using some kinds of filtering software, failure to include PICS labels in your pages may mean that they cannot view your pages at all. Microsoft's Internet Explorer 3.0 browser comes with filtering software built in, as does Netscape Navigator 4.5. An extensive collection of information on PICS is available through the World Wide Web Consortium.
|
|
Relative & Absolute URLs |
Each document on the World Wide Web has an address or "Uniform Resource Locator" (URL). When
providing hypertext links to a document on the same server as your page, there are several
different styles of URLs that will work.
An absolute URL contains the name of the Internet protocol, server, directory, and file that your file resides in, e.g., http://www.house.gov/smith/columns/col691.htm. A relative URL, on the other hand, assumes that you are starting with the same protocol and server, and potentially the same directory. For example, if you are at http://www.house.gov/smith/columns/col691.htm and want to link to http://www.house.gov/smith/columns/col6825.htm the HTML command using the absolute URL would be <A HREF="http://www.house.gov/smith/ whereas the link, using the relative URL would be just <A HREF="col6825.htm"> If you are at http://www.house.gov/smith/columns/col6825.htm and want to link to http://www.house.gov/jones/budget.html using the relative URL, the command would be <A HREF="../jones/budget.html"> Internet RFC 1808 (published as "Relative Uniform Resource Locators" by Roy T. Fielding, World Wide Web Journal, Spring 1996, pp. 37-47, on pp. 37-38) states that, "Experience within the World-Wide Web has demonstrated that the ability to perform relative referencing is necessary for the long-term usability of embedded URLs."
|
|
Robots |
In the nomenclature of the Internet, "robots" are computer programs that scour the Net in search
of information. One of the key purposes that robots are currently being put to is creating
indexes of the Internet by traveling through hypertext links from one page to another, copying
and indexing each page as they connect to it. For the most part, such robots perform a useful
and valuable function, especially when the documents they are indexing are reasonably permanent.
Where the documents indexed are less permanent (e.g., a page with a daily schedule on it), the
results are less valuable.
Robot Exclusion Standard Revisited by Charles P. Kollar, John R. R. Leavitt, and Michael Mauldin proposes to add an HTML command to control what robots do on individual Web pages. Though the proposed standard has not yet been adopted by the World Wide Web Consortium, inclusion of the command does no harm and makes your site ready for the day when robots will honor it. For more information on Internet robots, see:
|
|
Type Faces |
The FACE attribute of the <FONT> tag allows you to specify which typeface you
would like your text displayed in. The typeface name that the FACE attribute
is looking for is the name used by the client's machine (i.e., the machine that the browser resides onnot the server's machine)
to identify a particular typeface. Different platforms often use different names
to describe the same (or very similar) typefaces. If the typeface specified through
the FACE attribute does not match a typeface name used by the viewer's machine, the browser
will fall back to a default typeface. To increase the likelihood that
your text will be viewed with the typeface(s) you intend, list alternative
typeface names with the FACE attribute. Forinstance, instead of using just
<FONT FACE="ARIAL"> use <FONT FACE="ARIAL, HELVETICA, GENEVA"> For an extensive list of fonts and their equivalents, see Typefaces That Work Together by Daniel Will-Harris. If you cannot find the font you are looking for there, then try subject 1.32 of part 5 of the comp.fonts FAQ: General Info.
|
|
Summaries |
Whenever possible, every Web page should include two summaries. Both of these
summaries should be at the top of each Web page, between the <HEAD> and </HEAD>
tags.
The first of these two summaries should be very short. The beginning of this short summary is marked by <TITLE> and the end is marked by </TITLE> The second summary may be longer. The beginning of this larger summary is marked by <META name="description" content=" The end of this longer summary is marked by "> An example of the two types of summaries (adopted from the U.S. Code page of the House of Representatives Internet Law Library) is <TITLE>U.S. Code (searchable)</TITLE> The summaries contained in the <TITLE> and <META name="description"> tags are used by different software packages for different purposes. Netscape Navigator, for instance, displays the text of the summary associated with the <TITLE> tag in the status bar at the top of the screen. Infoseek (one of the major Internet index services) displays both summaries when your Web page is located by the Infoseek search engine. As time goes on, other uses of the two summaries will doubtless come into play. There is actually a third HTML construct, similar to <TITLE> and <META name="description"> that is available: <META name="keywords">. Use this HTML device to identify any key search words that were not included in the other two summaries. An example of using <META name="keywords"> from the U.S. Code page is <META name="keywords" content="USC United States Code"> (Note that the individual keywords are separated by blanks.) Infoseek uses the keywords to help with searches but does not display them with its summaries.
|
|
Getting the word out |
If you want to maximize public use of your Web site, there are promotional activities that you
should consider.
In addition to the traditional methods of getting publicity (press releases, etc.), there are also several Internet index and announcement services that are available at no cost. Among the most popular of these are: Though the requirements for each service vary slightly, most request that you provide the name and URL of your site, your name and e-mail address, and a brief description of the site. Remember that these should be used in addition to the more traditional approaches. The URL of your homepage is an address -- treat it as an address and include it anywhere you would use your traditional postal mail address, including business cards and letterhead stationery. You may have built a fantastic Web site, but if no one knows you're out there, no one will come.
|
|
Your Comments Please!
A very special thank you to Chris Swan (Director of the
New Hampshire State Law Library) for her help and inspiration.
|