Introduction to HTML

Perhaps the most powerful aspect of the computing technology is the ability to combine text, graphics, sounds, and moving images in meaningful ways. The promise of multimedia has been slow to reach the web because of bandwidth limitations, but each day brings new solutions. The options enumerated here are certainly not the only ones, and will surely soon become outdated, but they are the solutions we use in our work and have proved to be the most practical and effective for our purposes.

Splash vs. Content
Web designers must always be considerate of the consumer. A happy customer will come back, but one who has been made to wait, and is then offered goods that are irrelevant, will very likely shop elsewhere. Since multimedia comes with a high price-tag in terms of bandwidth, it should be used sparingly and judiciously.

Splash screens have become a common location for multimedia elements. Like the cover to a book, splash screens are intended to entice users into a site  to open the book and read what's inside. Animations and sound can pique a user's curiosity, compelling them to enter the site and explore. Using "splash" in the interior of a site, however, is not something we advocate. Any page element that is not relevant to the content is simply distracting.

The options for content are essentially defined by bandwidth. Audio files can be compressed so effectively that sound can now be considered for site content, particularly for intranet sites. For example, a site about poetry could include recitations; a text about a composer could include excerpts from her work; a language site could include pronunciations.

Animation files at present are not terribly useful as content because of compression limitations. Most animation file formats require the file to be fully downloaded before it can be played, so file size is a serious limitation. And most popular animation formats do not support compression, so if one content-rich GIF image is 30k, two combined makes 60k, and so on.

If your site will be accessed by people using modems, forget about digital video, at least for the moment. The quality compromises required to deliver video to modems altogether obviate its usefulness. However, if your site is intended for use on an intranet, video content is a definite possibility.

Plug-ins
Each day brings a new plug-in that allows users to see new and exciting things using their favorite browser software. This is especially true of multimedia; the options for encoding and delivering audio, animations, and video are dizzying. It is tempting to create files that utilize the functionality offered by these custom plug-ins, but there are two considerations designers should bear in mind. First, you will loose a large number of users when they hit the "Plug-in not supported, etc..." dialog box.  The bother and potential confusion of downloading and installing plug-ins will deter a large percentage of users. Secondly, it is not prudent to create content in a custom file format which could quickly become obsolete. It is best to create your multimedia content in the standard formats for operating systems and browser software.

Determining the proper length for any particular World Wide Web (Web) page requires balancing four major factors:

• The relationship between the page and screen size.
• The particular content of your documents.
• Whether the reader is expected to browse the content online, or to download the documents for later reading
• The bandwidth available to your target audience. (e.g., how fast is their connection to the Web?)

In long Web pages the user must depend on the vertical scroll bar slider (the little box within the scroll bar) to navigate. In most graphic interfaces (Macintosh, Windows 3.1) the scroll bar slider is also fixed in size, and provides little indication of the document length relative to what's currently visible on the screen, so the user gets no visual cue to page length. In very long Web pages small movements of the scroll bar can completely change the contents of the screen, leaving no familiar landmarks to orient by. This gives the user no choice but to crawl downward with the scroll bar arrows, or risk missing sections of the page. However, long Web pages are often easier for managers to organize, and for users to download. Web site managers don't have to maintain as many links and pages with longer documents, and users don't need to download multiple files to collect information on a topic. Long pages are particularly useful for providing information that you don't expect users to read online (realistically, that should include any document longer than two printed pages). If the Web pages get too long, or contain too many inline graphics, the pages can end up taking too long to download. Very large Web pages with lots of graphics can also overwhelm the RAM memory limitations of the Web browser.

Mirror the Structure of Your Content
It makes sense to keep closely related information within the confines of a single Web page, particularly when you expect the user to print or save the text. Keeping the content all in one place makes printing or saving easier. However, once you get beyond about four screens worth of information the user must scroll so much that the utility of the online version of the page begin to deteriorate. Long pages often fail to take full advantage of the linkages available in the Web medium.

If you want to provide both a good online interface for pages and easy printing or saving of the content:

• Divide the page up into chunks of two to three printed pages worth of information, including inlined graphics or figures. Use the power of hypertext links to take full advantage of the Web medium.
• Provide a link to a separate file that contains the full-length text combined into one page, designed so the reader can print or save all the related information in just one step. Don't forget to include the URL of the online version within the text of that page so users can find updates and correctly cite the page source.

In general, longer documents are:
Easier to maintain (they are all in one piece, with fewer links).
More like the structure of their paper counterparts (not chopped up)
Much easier for users to download and print.

The first step in designing a Web site is to make sure you have defined a set of goals  know what it is you want to accomplish with your Web site. Without a clear statement of purpose and objectives the project will begin to wander off course and bog down, or may go on past the point of diminishing returns. Careful planning and a clear sense of purpose are the keys to success in building Web sites, particularly if you will be working as part of a team to build the site. Before beginning to build your Web site you should:

• Identify your target audience
• Have a statement of purpose
• Know your main objectives
• Have a concise outline of the information your site will contain

"We expect the association's Web site to accomplish these goals over the next twelve months: The Web site will reduce the demands on the central office for routine information on association activities, deadlines, dues and fees, and information on association meetings. We expect that the Web site will also allow us to save a significant amount on postage and processing of routine member correspondence. The Web site will carry all of the content that currently goes into our association's quarterly newsletter, but will also carry more timely information as events warrant. After a year we will poll the membership on the success of the Web site newsletter, and explore the possibility of dropping publication of the paper newsletter."

The statement should go on to list a few more specific financial and other organizational goals the Web site is designed to fulfill, how long the evaluation period will be, and how the success of the site will be evaluated.

Building a Web site is usually an ongoing process, not a one-time project with static data. Long term editorial management and technical maintenance must be covered in your plans for the site. Without this longer perspective your electronic publication will suffer the same fate as many newsletters  an enthusiastic start, but no lasting accomplishments.

Know Your Audience
The next step in the design process is to identify the potential users of your Web site, so that you can structure the site design to meet their needs and expectations. The knowledge, background, interests, and needs of users will vary from tentative novices who need a careful structured introduction to expert "power users" who may chafe at anything that seems to patronize them or delay their access to information. A well-designed system should be able to accommodate a range of user skills and interests. For example, if the goal of your Web site is to deliver internal corporate information, human resources documents, or other information that used to be published in paper manuals your site will be used by people who will visit many imes every day, and also by people who only occasionally refer to the site.

Web Surfers
Home pages aimed at browsers should be analogous to magazine covers. The objective is to entice the casual browser with strong graphics and bold statements of content. All the links on your home page should point inward, toward pages within your site.  Provide a very clear and concise statement of what is in the site that might interest the reader.

Novice and Occasional Users
These users depend on clear structure and easy access to overviews that illustrate how information is arranged within your Web site. Novices tend to be intimidated by complex text menus and may be tentative about delving deep into the site if the home page is not graphically attractive and clearly arranged. According to Sun Microsystems Jakob Nielsen, less than 10% of Web readers ever scroll beyond the top of Web pages. Infrequent users benefit from overview pages, hierarchical maps, and design graphics and icons that help trigger memory about where information is stored within your site. A glossary of technical terms, acronyms, abbreviations, and a listing of "frequently asked questions" can be helpful to first-time or infrequent users of your site.

Expert and Frequent Users
These users depend on your site to obtain information quickly and accurately. Expert users are very impatient with multiple low-density graphic menus that only offer two to six choices at time. Power users crave stripped-down, fast-loading text menus. Graphic fru-fru drives them nuts. Expert and frequent users generally have very specific goals in mind, and will appreciate detailed text menus, site structure outlines, or comprehensive site indexes that allow fast search and retrieval.

International Users
Remember that you are designing for the World Wide Web. Your readers could be the people down the street, or people in Australia or Poland. To reach the maximum number of users in other countries you may need to provide translations, at least of your key menu pages. Avoid idiosyncratic local jargon or obscure technical acronyms in your introductory or explanatory pages. Don't assume that every reader follows your local date and time conventions. For example, don't abbreviate dates on your Web pages. To an American, "3/4/97" reads as "March 4, 1997," but users in most other countries would read the abbreviated date as "April 3, 1997."

All presentations of information are governed by a few parameters determined by your objectives, the practical logistics of the medium you chose, and by the nature of your audience.

Browsers
In the larger World Wide Web browsers ("Web surfers") are the unmotivated readers who may blow through your home page without an urgent mission or purpose in mind. Techniques for drawing these potential customers into a sales or entertainment site are beyond the scope of this manual, but you may find some guidance from these sources. The following categories of Web use are more typical of corporate and educational "intranet" sites where the users arrive with a more defined purpose.

Training
Web-based training applications tend to be very linear in design, and present few opportunities to digress from the central flow of the presentation. Don't confuse users or confound your own expectations by offering many links away from the central message. Restricting the links to "Next" and "Previous" paging functions guarantees that everyone sees the same presentation, and allows you to make more accurate predictions of user contact time. Most training presentations assume a contact time of less than one hour, or are broken up into sessions of an hour or less. Inform your users about how long the session will last, and warn them not to digress away from the required material if they are to get credit for the training. Training applications typically require a user log-in, and often present forms-based quiz questions in true/false or multiple-choice formats. User log information and scores are typically stored in a database linked to the Web site.

Teaching
Good teaching applications are also built around a strong central narrative, but typically offer more opportunities for students to pursue interesting digressions from the main themes of the Web site. The information presented is usually more sophisticated and in-depth than in training applications. Links are the most powerful aspect of the Web, but they can also be a distraction that may prevent your students getting through the basic presentation. If you want to provide students with links to other Web-based resources beyond your local site you might consider grouping the links on a page separate away from the main body of the material. Often users will want to print the material from the Web and read it later from paper. Make this easy for them by providing a "printing" version that consolidates many separate pages into one long page.

Education
The audiences for heuristic, self-directed learning will chafe at design strategies that are too restrictive and linear. Often the typical user is already highly educated. Flexible, interactive, non-linear design structures are ideal for these users, because it is so difficult to predict exactly what topics will most interest an experienced professional or graduate student. The design must allow fast access to a wide range of topics, and is typically very dense with links to related material within the local Web site and beyond on the World Wide Web. Text-based lists of links work well here for tables of contents and indexes because they load fast and are dense with information, but this audience is also easily bored and needs the frequent stimulation of well-designed graphics and illustrations to stay involved with the material. Contact times are unpredictable, but will often be shorter than for training or education sites because the users are usually under time pressure. Easy printing options are also a must for this audience.

Reference
The best-designed reference Web sites allow users to quickly pop into the site, find what they want, and then easily print or download what they find. Typically there is no "story" to tell, so the usage patterns are totally non-linear. Content and menu structure must be carefully organized to support fast search and retrieval, easy downloading of files, and convenient printing options. Keep the graphics minimal to speed download times, and you may want to investigate search software instead of relying exclusively on index-like lists of links. Contact time is typically brief, the shorter the better.

Most Web sites are designed to be viewed by audiences inside an educational institution or company, and are often not even visible to the larger World Wide Web. While these intranet sites share the same technology as sites designed for the larger Web audience, the design and content of intranet sites should reflect the very different motivations of intranet users.

External Sites
External sites are usually aimed at capturing an audience. The overall goal is to maximize contact time, drawing the reader deeper into the site and rewarding the reader's curiosity with interesting or entertaining information. In external Web sites the assumption is that the reader often has little motivation to stay, and must be constantly enticed and rewarded with rich graphics or compelling information to get them to linger within the site.

Intranet Sites
Successful intranet sites assemble useful information, organize it into logical systems, and to deliver the information in an efficient manner. You don't want intranet users lingering over their Web browsers, either in frustration at not being able to find what they are looking for, or in idle "surfing" through the local intranet. Allow employees and students to get exactly what they need quickly, and then to move on.

Design Standards
In most institutions the use of the World Wide Web has evolved over the last three years from an informal collection of personal or group home pages into a semi-organized collection of sites listed in one or more master "home pages" or "front door" sites. Ironically, universities and companies that adopted the Web early are often the least organized, as each department and group has over the years evolved its own idiosyncratic approach to graphic design, user interface design, and information architecture. But the Web and institutional intranets are no longer just a playground for the local "gearheads." Patchy, heterogenous design standards and a lack of cohesive central planning can cripple any attempt to realize productivity gains through an intranet.

Navigation: time is money
Sun Microsystem's Internet and intranet sites are models of a consistent, in-depth approach to design for the Web. User surveys show the average Sun employee uses about 12 intranet pages per day, and about two new intranet sub-sites each week. Sun's user interface expert Jakob Nielsen estimates that his redesign of Sun's intranet user interface could save each employee as much as five minutes per week through consistent, company-wide application of design and navigation interface standards. The aggregate savings in Sun employee time may amount to as much as $10 million dollars a year, through avoiding lost productivity and by increasing the efficiency with which employees use the company's intranet sites.

Design Standards
All institutions deploying intranets have clear economic and social motivations to develop and propagate a consistent set of design standards for the development of local Web pages and internal information sources. But problems in implementing an institution-wide set of standards are also considerable. Groups and individuals feel they own the "right" to design and publish as they please, and often have more Web expertise and experience than does the senior management. Groups that have used the Web for years already have a considerable investment in their current designs, and will be reluctant to change. University administrations often lack the economic resources to develop institutional standards manuals, and to then motivate academic departments to adopt them. The lack of national or international consensus on what constitutes proper Web design only complicates the matter further.

User-centered Design
The list of problems cited above will be familiar to every university or corporate webmaster, and to anyone who has had to sit on a Web or intranet committee. They are all great reasons for doing nothing, but they ignore the most important factor in any intranetthe user. Without reasonable, consistent design standards the average intranet user suffers in confusion, lost productivity, and lost opportunity to fully benefit from the promise of intranet technologies. If you adopt a user-centered approach to intranet design the advantages of consistent graphic design and user interface standards are immediately obvious, and clearly transcend the parochial interests of participating departments, groups, and individuals. If the typical user of an intranet sees more confusion than useful information, no one will benefit.

Without a clear set of design standards your local intranet will continue to evolve as a patchy, confusing set of pages  some well-designed, some disastrous, and all just parts of a dysfunctional system. The lack of design standards also limits intranet use by imposing complex design decisions on new users who would like to develop intranet sites, but face the daunting task of developing their own graphic design and interface conventions instead of being able to simply adopt an existing professionally-designed system of intranet standards.

Web pages share similarities to individual pages in print publications, but because Web pages may be accessed directly with no preamble, Web pages must be more independent than print pages. Too many Web pages end up as isolated fragments of information, divorced from the larger context of their parent Web sites through lack of essential links, and the simpler failure to properly inform the reader of their contents.

The best overall publication guide we know of is an information design classic, the Xerox Publications Standards manual. The Xerox manual has formed the basis for countless company and institutional publications standards manuals. We think the best writing guide is not Strunk and White, but William Zinsser's On Writing Well. Zinsser's book is better on all counts, and contains much more practical advice for writing in different publication formats and for different audiences.

Titles and Subtitles
Forget icons, banner graphics, bullets, horizontal rules, and colored backgrounds. Editorial landmarks like titles and headers are the fundamental human interface issue in Web pages, just as they are in any print publication. A consistent approach to the titling, headlines, and subheads in your documents will aid your readers in navigating through a complex set of Web pages.

The text styles used in this manual follow suggestions from the Xerox Publishing Standards:

Headline style:
Bold, capitalizing the initial letters, for:

1. Document titles
2. Other web sites
3. Titles of documents referred to wthin the text
4. Proper names, product names, trade names

1. Subheads
2. References to other heading within the style manual
3. Figure titles
4. Lists

	Incorporate the name of your company, organization, or Web site.
	Form a concise, plainly worded reminder of the page contents.

	Be concise
	Use lists where possible
	Make printing easy

Many types of documents (like this manual) are not well suited for the telegraphic style that works well for documents designed to be read online. Web authors often cut so much out of Web presentations that what is left would barely fill a print pamphlet. Concise writing is always better, but don't "dumb down" what you have to say  there's enough dumb stuff on the Web already. Just understand that readers will want to print longer documents. Make printing easy for your readers and you can use the Web to deliver content without cutting the heart out of what you have to say.

	Excessive markup: Beware of too much markup in your paragraphs. Too many links, or too many styles of typeface destroy the homogeneous, even "type color" that characterizes good typsetting.
	Link colors: If you are using custom link colors, choose colors that closely match your text color. Reading from the screen is hard enough already without having to deal with screaming orange or bilious green links.
	Use the best tool: Write your text in a good word processing program with spell-checking and search features. Transfer text to HTML only after it has been proofread.
	Style sheets: Don't use the word processor style sheets to produce "All capitals" or other formatting effects. You will lose those special formats when you convert to plain ASCII text for HTML use.
	Special characters: Don't use the "smart quotes" feature. Avoid all special characters like bullets, ligatures, and typographer's "en" and "em" dashes not supported in standard HTML text. Consult a good HTML guide book for the listing of special and international characters supported through the HTML extended character formatting.
	No auto hyphens: Never use the automatic hyphenation feature of your word processor on text destined for the Web. This may add non-standard "optional hyphen"characters to your text that will not display properly in Web browsers.

• Poor: Click here for more information on placing links within your text.
• Better: Web links are powerful, but may also cause problems if they are placed carelessly

Managing Time
Many Web sites must be frequently updated so the information doesn't get stale. But the presence of the new information may not be obvious to readers of your Web site unless you make a systematic effort to let them know about it. If items listed the on the menus on your home page are updated you could just put a "NEW" graphic next to each updated item. You should also date every one of your Web pages, and update that as information changes so that users can be sure that they have the latest version of things. However, if your site is complex, with many levels of information spread over dozens (or hundreds) of pages you might be better off making a "What's New" page that is specifically designed to inform users that information in your site has been updated. You may also want to use a "What's New" page as a university or institutional newsletter, emphasizing timely information in your organization.

Menus, Submenus, and Home Pages
Unless your site is very small you will probably need a number of submenu pages that the user enters from general category listing on your home page. In complex sites with dozens of topic areas it is not practical to load up the home page of a Web site with dozens of links  the page gets too long to load in a timely manner, and the sheer complexity of long pages may be off-putting to many users.

Each major submenu in effect becomes a mini-home page for that section of your Web site. For specialized, detailed menus you may encourage frequent users to link directly to a submenu in your Web site. Thus the submenus could become alternate home pages oriented to specific groups of users. Just make sure to include a basic set of links to other sections of your site on each submenus, and most important of all, always include a link to a menu or home page on every Web page in your site.

"Other related sites" Catalogues
The World Wide web is growing so rapidly that even the large commercial Web index services like Yahoo are only partial listings of the information that is accessible from the Web. Often the first sets of links Web users make when they begin to build their own Web sites are collections of favorite links to sites related to their professions, industries, or personal interests. In a corporate or institutional site a well-edited, well-maintained "other sites" page may be the most valuable and heavily-used resource in your Web site.

Bibliographies, Indexes, Appendices
The concept of "documents" in electronic environments like the Web pages is often flexible, and the economics and logistics of digital publishing make it possible to provide more information to your site users without the costs associated with paper documents. To make a report available to colleagues on paper you would have to print a copy for each person. Costs and practicality dictate that paper reports be very concise, and without much supporting material or appendices  thus your audience is often left without access to the information upon which the writers based their conclusions for no reason other than the high cost of printing on paper. Aside from the main body of reports, you may wish to include lists of resources that would not normally be included in corporate reports because of space and cost considerations, but which could be made available in a Web site. Bibliographies, glossaries, appendices of information that might be too bulky to load into a task force report or committee recommendations document could be placed in a Web site instead, making the information available to other researchers without over-stuffing reports with material of interest to only a few readers.

Frequently Asked Questions  FAQ pages
The web and other Internet-based media have evolved a unique institution, the FAQ, or "Frequently Asked Questions" page where the most commonly asked questions from users are listed along with answers. FAQ Web pages are ideal for Web sites designed to provide support and information to a working group within an institution, or to a professional or trade group that maintains a central office staff. Office staff and public relations personnel know that most questions new users ask have been asked and answered many times before. By making a well-designed FAQ page and referring users to it you could significantly improve the user's understanding of the information and services offered through your Web site or professional group. The FAQ page could also sharply reduce the time demands on your support staff who normally answer those routine, repetitive questions from users or clients.

If you are interested in the World Wide Web you can hardly escape references to hypertext and hypermedia. These days the computer press is full of very fuzzy thinking about how Web-based information can somehow "link everything to everything." The implication is that with the Web you can probably dispense with one of the most challenging aspects of presenting information  how to put it into logical order and create an interesting and understandable resource for the user. Nothing could be further from the truth. If you have only a hazy idea how one section of your site relates to other areas, if you have no comprehensive narrative or clear sense of organization, your readers will know it soon enough, and most of them will leave in pursuit of better organized material.

Sequence
The simplest way to organize information is in a sequence, where you present a linear narrative. Information that naturally flows as a narrative, time line, or in logical order is ideal for sequential treatment. Sequential ordering may be chronological, a logical series of topics progressing from the general to the specific, or even alphabetically sequenced, as in indexes, encyclopedias, and glossaries. However, simple sequential organization usually only works for smaller sites (or structured lists like indexes), as long narrative sequences often become more complex, and thus require more structure to remain understandable.

More complex Web sites may still be organized as a sequence, but each page in the main sequence may have one or more pages of digressions, parenthetic information, or links to information in other Web sites.

Grid
Many procedural manuals, lists of university courses, or medical case descriptions are best organized as a grid. Grids are a good way to correlate variables, such as a time line versus historical information in a number of standard categories such as "events," "technology," "culture," etc. To be successful, the individual units in a grid must share a highly uniform structure of topics and subtopics. The topics often have no particular hierarchy of importance. For example, "tuberculosis" is not more or less important a diagnosis than "hilar adenopathy," but ideally both case descriptions would share a uniform structure of subtopics. Thus the user could follow the grid "down," reading about tuberculosis, or cut "across" the grid perhaps by comparing the "diagnostic imaging" sections of both hilar adenopathy and tuberculosis. Unfortunately, grids can be difficult to understand unless the user recognizes the interrelationships between categories of information, and so are probably best for experienced audiences who already have a basic understanding of the topic and its organization. Graphic overview maps are very useful in grid-like Web sites.

Hierarchy
Information hierarchies are one of the best ways to organize complex bodies of information. Hierarchical organization schemes are particularly well-suited to Web sites, because Web sites should always be organized as off-shoots of a single home page. Most users are familiar with hierarchical diagrams, and find the metaphor easy to understand as a navigational aid. A hierarchical organization also imposes a useful discipline on your own analytical approach to your content, as hierarchies only work well when you have thoroughly organized your material. Since hierarchical diagrams are so familiar in corporate and institutional life, users find it easy to build mental models of the site.

Web
Web-like organizational structures pose few restrictions on the pattern of information use. The goal is often to mimic associative thought and free flow of ideas, where users follow their interests in a heuristic, idiosyncratic pattern unique to each person who visits the site. This organizational pattern develops in Web sites with very dense links both to other information within the site, and information on other World Wide Web sites. The goal is to fully exploit the Web's power of linkage and association, but web-like organization structures can just as easily propagate confusion and fuzzy thinking about the interrelationships of your information chunks. Ironically, organizational webs are often the most impractical structure for Web sites, because they are so hard for the user to understand and predict. Webs work best for small sites dominated by lists of links, aimed at highly educated or experienced users looking for further education or enrichment, not for a basic understanding of your topic.

Summary
Most complex Web sites share aspects of all four types of information structures. Except in sites that rigorously enforce a sequence of pages, your users are likely to use any Web site in a free-form "web-like" manner, just as most non-fiction or reference books are used. But the nonlinear usage patterns typical of Web surfers do not absolve you of the need to organize your thinking and present it within a clear, consistent structure that complements your design goals for the site. The chart below summarizes the four basic organization patterns against the "linearity" of your narrative, and the complexity of your content.