Creating Web Sites

There are more than 900 official web pages published at Harvard with new ones created daily. Clearly, many people are involved in web development here. Each developer brings a unique intent and purpose to the task on behalf of academic departments, offices, libraries, museums, and more. While we applaud the independent, decentralized nature of web publishing at Harvard, this lack of uniformity can confuse visitors to our sites.

At the Faculty of Arts and Sciences Office of Communications, we promote consistency but not at the expense of individual style. To that end, this guide is offered as a compilation of resources to aid your development of new and existing web sites. Whether you are working on your own, by committee, or as a member of a professional web team, we believe heeding the suggestions offered here will improve web production and benefit site users.

Mission

Before organizing any information or designing a single web page, ask yourself two questions:

What purpose will this site serve?

For whom are we creating it?

Don’t make the mistake of creating a web site just to say you have one. There are many benefits to publishing on the web—you can reach vast audiences around the clock less expensively than with print publishing—but don’t let that entice you if you don’t have a need. Creating a web site is just the first step. Maintaining it to ensure that information remains current is vital to your site’s success. This takes time and vigilance. Be certain you are committed and your purpose is firm before proceeding.

Write a clear statement of purpose. Include objectives, target audiences, proposed content, and intended use of graphics. Focusing on specifics this early in the process will help everyone define and agree on goals.

Question Everything

Start by asking lots of questions:

Will your users be repeat visitors who want quick access to information?

Will they be infrequent users who need a clear sense of your site’s architecture to guide their exploration?

Will users access information with slow modems or faster Ethernet lines?

How will information be arranged so that it makes sense immediately?

How will the pages link?

How will users navigate?

Is your content suitable for reading online or will users want to print it?

How will users interact with your site?

What graphic elements will be used to brand pages for instant recognition?

How will you gauge your site’s success?

Once you have determined your audience and what information you intend to publish, you need to develop your site’s architecture. You must first make important decisions about how users will interact with your site and how it will be structured. Knowing your audience will help you determine how you should structure the site to meet their needs.

Undoubtedly, more people than you care to hear from will have opinions about the outcome of your site. Keep in mind that the user prevails. Trying to please all concerned parties will only lead to a hodgepodge of disjointed, dysfunctional web pages.

In print documents, readers expect a logical flow of information guided by a table of contents, chapters, and page numbers. Web architecture is less hierarchical. Users can begin at any page within your site and progress throughout the site in myriad ways. The structure of your site and the tools you provide to navigate are essential to your site’s success.

Where am I and how do I get to where I want to go? Visitors to your site should always be able to answer these questions. It is frustrating to get lost within a site with no idea of where you are and how you get out or get to the information you need. Users typically have a frustration threshold of about ten seconds.

Help your visitors by offering local and global navigation. For example, within an academic web site you might have global links to the home page, search functions, academics, and administration on every page. Then, you could offer local navigation within academics, for example, to faculty, departments, course catalogs, and more. Let your content dictate how it should be structured while keeping in mind that web information is linked, not linear. Interactivity and user control defines the web. Determine the relationships between content areas to develop an intuitive user interface. You might think a link to faculty should be listed under academics when others will look for it under administration.

Remember, question everything.

Here is a useful exercise to try. Get out some index cards and sticky notes. Write the name of every web page you plan to create on a separate card. Give the stack of cards to anyone who will take a few minutes to group the cards in the way he/she thinks is most logical. Write down their responses. You will quickly see patterns emerge. Grab some sticky notes and find a blank wall. Use one note for each web page and stick it on the wall according to the categories your test group indicated. Ask more people what they think of the proposed structure. Try different ideas by moving sticky notes around. When everything is where it should be, draw a diagram. This is your site’s architecture.

While there are no official style guides for the web as there are for print, there are some tried and true methods when it comes to site structure and navigation.

• Users should be able to get to the information they seek in three clicks or less.

• You should limit the home page content offerings to five or six categories.

• The user should always be able to return to the home page.

• Do not have pages that dead-end.

Visual coherence and logic within your web site assures your visitors that your content and site functions are deliberate and accurate. At your home page, a visitor should immediately know the answer to these questions:

Where am I?

What is it like here?

What do these people do?

What will I find here?

Don’t think of web design as you do print design. For starters, think in screens, not pages. Information is linked, not linear. And the user controls the look of the page, not the designer.

Speed is the fulcrum upon which design decisions are made. If you lean toward superior graphics with large file sizes, you sacrifice speed. If you nod to speed and forsake graphics, users will find your site less appealing and won’t be compelled to explore further. Seek a balance. Design elements should enhance not impede exploration of your site.

Go to five web sites about designing for the web and soon you will start reading the same things over and over. There are no international standards for good web design, although some conventions prevail.

Here are some design practices to consider:

• Be consistent. Keep it simple.
• Do not use too many links, colors, or formats on one web page.
• Give yourself a budget of about 40k for each page and stick to it.
• Use software that will optimize your artwork and photos, which allows you to cut file sizes without sacrificing quality.
• Become familiar with web colors. Using them will speed page downloads.
• Use complimentary colors.
• Don’t use background graphics. They slow down the page download and add visual clutter. Graphics should compliment, not overwhelm or irritate.
• Keep animation to a minimum.
• Use white space and graphics to direct the reader’s eye.
• Using cascading style sheets will speed load times, increase consistency, and simplify your pages.
• Preview your design on different browsers and platforms before going live.
• Be consistent with the placement of navigational features.
• Be consistent with the use and placement of identifiable graphics that mark or "brand" your site.
• When in doubt, opt for clear, not cute.

Put your most important information "above the fold" as publishers do in newspapers. The top four inches of real estate is the most valuable. To accommodate most screen sizes, design pages within the 640 wide x480 high pixel dimensions (browser safe = 600x350). Pages to be printed should be designed within 535 wide x 670 high parameters.

• Generally, users will scroll vertically, not horizontally.
• Users will scroll vertically for about three or four screens. After that, offer an arrow to a new page.

• Crimson is best represented using hex colors #660000 or #770000
• Include links to the FAS and Harvard home pages on your home page
• Incorporate the FAS shield in your home page design
• Be certain that your site pages are copyrighted with the following phrase:

© President and Fellows of Harvard College

• There are many software applications available for web editing and design. We use Homesite, BBEdit, Dreamweaver, Illustrator, Fireworks, and Photoshop.

Naturally, the text on your page delivers your message, but it can also enhance or hinder the design. Use text to your advantage.

• Try to use just two fonts, one for text and one for headers.
• Times 12pt. is most commonly seen on the web, like in print. Unfortunately, it doesn’t look very good at small font sizes. Arial and Verdana, which were created for the web, are best for small print and widely available.
• Capitalize only the first word in headlines and subheads for greater legibility.
• Don’t center text; use left justification. Create text lines with a 400 pixel width, up to a maximum 480 pixel length.
• If you create text in a word processing program and paste it into HTML, do not format the text. Special characters are not supported in HTML.
• Stick with fonts that come with the Windows and Mac operating systems. Name the typeface in your style sheet or HTML tags to avoid having the browser render pages with the default font.

• Do not include too many links on a single web page.
• In general, try to avoid the phrase, "Click Here."
• Try to incorporate links within the sentence structure.
• Links are distracting and invite the user to go elsewhere. Try to keep them grouped in a navigation bar or at the bottom of a passage.

Above all else, let three words guide you:

• Clarity

• Brevity

• Consistency

People do not read web pages the way they read print publications. Even if they take time to read online, the 72 dot per inch resolution of a computer screen can torment the sharpest eyes. Most users won’t read long passages; instead, they scan for information. Write as if you were creating copy for a pamphlet or brochure. Give your reader small chunks of information to digest.

If you must present a long document on your site, make sure it can be easily printed and make that option clear to your user. Take clues from printed manuals that use headlines, subheads, bullets, lists, italics, fonts and other graphic elements to keep the pages from looking like massive blocks of grey.

• Be concise. Write with the expectation that your text will be scanned.
• Using headlines and subheads can help break up text blocks and serve as navigational tools.
• Put important information at the top of your message.
• Make printing easy, especially for long documents.
• Keep text blocks narrower than 400 pixels. A good rule of thumb is to use 40 – 60 characters per line.
• The page title (used in HTML code) should include the name of your organization.
• Think about what your page title will bring to mind when viewed in a long list of bookmarks. Write it accordingly.
• Avoid using Harvardisms and Harvardese. There is an entire web site devoted to Harvard acronyms. If there are enough to fill a web site, don’t expect users to know what they mean. Write for clarity and understanding.

We recommend using The Associated Press Stylebook and Libel Manual. It is commonly used for print documents, and will add consistency to your web pages. Just as a cascading style sheet adds uniformity to the design elements of your site, following the AP stylebook will help you add regularity to your writing style.

Before publishing on the web, proofread your documents. Check for common grammatical errors. Then, ask someone else to proofread your documents. Again, ask yet another person to proofread your documents. You can never have too many eyes checking for errors.

The web doesn’t have the personal appeal of a book or the audio appeal of TV. So designers overcome the technical, impersonal aspects of the web by creating ways for visitors to interact with sites. Users want to know there is a face behind the coding. Always give them a way to contact you and offer feedback.

Forms are common on web sites. Make them as clear and simple as possible. Try to prevent misinterpretation by giving examples of how you want users to complete fields. If possible, test the form with a focus group similar to your intended audience. What you think is crystal clear might be confusing to them.

In June 2001, Harvard established accessibility standards for all university web sites. These standards follow the guidelines promoted through the World Wide Web Consortium, W3C, and are considered an industry standard.

Here are the primary requirements. More specific requirements are available at http://webmaster.harvard.edu.

1. A text equivalent for every non-text element shall be provided via "alt" (alternative text attribute) or "longdesc" (long description) tags.
2. Web pages shall be designed so that all information required for navigation or meaning is not dependent on the ability to identify specific colors.
3. Web pages that contain frames shall use descriptive HTML titles for each document within the frameset to facilitate navigation with screen readers and text-based browsers.
4. Pages shall be usable when scripts, applets, or other programmatic objects are turned off or are not supported, or shall provide equivalent information on an alternative accessible page.
5. Client-side image maps shall be used whenever possible in place of server-side image maps. If server-side image maps are used, redundant text links shall be provided for each active region of the map.

We used myriad resources when compiling information for this site. There is no shortage of sites offering information about web writing, design, and code. Here are some of the most noteworthy:

Building Web Sites, General Information:

• Harvard’s webmaster site - The first stop for anyone involved in web production at Harvard should be http://www.webmaster.harvard.edu. This web site offers sound advice and valuable suggestions about meeting usability standards, creating web sites, and coding pages.
• Web Developer’s Journal - http://www.webdevelopersjournal.com

• Web Reference - http://webreference.com
• Jacob Nielsen, usability guru - Useit.com - http://www.useit.com
• Idoc’s Webmaster’s Resources - http://www.mikodocs.com/
• CNET Web Building and Internet Services – http://www.cnet.com
• World Wide Web Consortium offering old but good advice on coding - http://www.w3.org/Provider/Style/Overview.html
• Web Central - http://www.cio.com/central/
• Web Developer – http://www.webdeveloper.com
• Creative Pro – http://www.creativepro.com/category/home/68.html
• Web Monkey – http://www.hotwired.lycos.com/webmonkey/
• Internet.com’s Web Developer – http://www.internet.com/sections/webdev.html
• Web Central – http://www.cio.com/central/
• Web Page Design for Designers – http://www.wpdfd.com

Style Advice:

• Yale’s style guide, a must see – Yale Center for Advanced Instructional Media Web Style Guide
• Wired magazine’s style guide - http://hotwired.lycos.com/hardwired/wiredstyle/
• Webopedia – dictionary for computer and Internet technology – http://www.webopedia.com
• CIO’s Web Central – http://www.cio.com/central/style.html

Design:

• Web Page Design for Designers - http://www.wpdfd.com
• Web Pages That Suck – an irreverent look at bad web design – http://www.webpagesthatsuck.com
• Creating Killer Web Sites – supports the book of the same name – http://www.killersites.com
• Electronic Pages - http://in3.org/notes/

Writing for the Web:

• Eric Schnell’s guide for librarians has good information for any web writer - http://bones.med.ohio-state.edu/eric/papers/primer/webdocs.html