Designing a Financial Aid Office Web Site
Overview of the Talk
- How to create a well-designed financial aid office web page.
- What works and what doesn't. Lessons learned during the development of my own page.
- The essential elements that should be present on any financial aid office home page.
- Pointers to further information and tools on the web.
Top 15 Lessons of this Talk
- Good, original, interesting content is the key to a high quality site.
- Select links carefully. Annotate and categorize them for your visitors.
- Use a simple hierarchical tree-structure for your page and present your visitors with a clear path through your page.
- Good pages are short and uncluttered. Keep the text simple and direct. Discuss only one topic on each page. Put key information at the top of the page.
- Keep the pages small so that they load quickly. Pages that load slowly frustrate your visitors.
- Minimize the use of images and keep them small. A picture is worth a thousand words, in load time. No backgrounds or image maps.
- Use GIFs for line art and logos, JPEGs for photographs and continuous tone images.
- Use a consistent header, navigation options and content structure for all your pages to give them a distinctive "look".
- Attach links to key noun phrases that are part of a meaningful sentence. Avoid the "Click Here" syndrome.
- Test your pages on multiple browsers, platforms and displays. Avoid browser-specific extensions, such as BLINK, Java, frames and tables. Don't change link and text colors.
- The most common HTML errors are putting whitespace after a
- tag and forgetting the / in an end tag.
- Verify all links and proofread your text before publicizing your page.
- Web pages are not static and require constant maintenance. Update your site regularly. Monitor your usage logs to identify problems and suggest possible future directions. Pay attention to feedback.
- Include the email address of the maintainer on every page, along with the last-modification date and a link to your front door page.
- Target your page to a specific audience(s) and design it to address their problems.
Why Create a Web Page?
- Recruiting and Marketing. To recruit prospective students (and parents), especially technologically capable students.
- Counseling and Consumer Education. To help current students by providing them with information and advice.
- Feedback. Online surveys can help you assess whether you're accomplishing your goals.
- Collaboration. To collaborate with other university offices.
- Communication. To communicate with lenders, guarantee agencies and with colleagues at other universities. (FINAID-L)
The Web helps you achieve these goals
- An important function of the financial aid office is communication and the web is a new communication channel.
- Not just the latest fad. There are fundamental advantages to the web that aren't present in other media.
- Lower cost publication of information. No per-copy printing costs.
- More information can be provided than in traditional media.
- Larger, more-specialized audiences.
- Dynamic updates of material. Errors can be corrected faster, instead of waiting until next year's print run.
- User controls his or her own access to the information.
- Interactive. You can do things on the web that you can't do in a print publication.
- Equalizing. On the web a small organization can be just as impressive as a large, established institution.
- Evolving extendable medium.
- Supplements - does not replace - traditional media. The web will not necessarily reduce your costs. Like fax machines, the web has become a condition of doing business.
Hire a webmaster
Develop a Strategy
- Develop a strategy for how you will use the web. What are your goals? Publication of information, counseling students, receiving inquiries?
- Pick an audience. Who are you trying to reach? You can have several audiences (parents, undergraduate students, graduate students, foreign students, ...) but you need to clearly identify intended audience. If you don't, you will get complaints.
- Identify the problems your audience is trying to solve and design your pages to help them address their problems/needs.
- Reproduce your printed handouts and brochures online. If you have copies on floppy disks, it should be easy to convert them to HTML. When converting long documents, break them up into smaller pages.
Why is Design Important?
Style principles help you distinguish good designs from bad
- With flexibility, there comes opportunities for making choices.
- There are many ways to accomplish a goal, some good, some bad.
- Stylistic principles help you choose among the many paths to your goal.
- A good design helps you avoid some of the most common mistakes and will help you avoid problems later when you need to change or expand the content of the page.
- A good design maximizes the usefulness of your pages to your audience, helping to create a good impression. A bad design will prevent users from taking full advantage of your site, causing them to leave and never return.
- Good design on the web is not simply a matter of adapting Strunk and White to a new medium. There are fundamental differences between online pages and printed pages.
These and similar principles will govern the construction of Web pages.
- The manner in which people read online information - skimming, instead of detailed reading - forces changes in the style of writing to ensure proper comprehension by the audience.
- Since people can visit a page from anywhere on the net, without benefit of context, documents must be standalone.
- Since browsers can display HTML differently, there are rules of thumb that will help you design pages that look good on most browsers.
- This talk reviews some of the principles I've discovered during the construction of "FinAid®: The Financial Aid Information Page".
How to Learn HTML
Browse other people's web pages
- Browsing other pages is the quickest way to learn HTML.
- All web browsers provide some way to view the source code of a page or save the source code of a page to a file.
- Find pages that look good to you, then view the source to see how they did it.
- Copy formatting and structure ideas. Do not copy actual text, or you will infringe on the author's copyright.
- Many books are available, but there is no need to spend money.
- There are many good introductions and tutorials online. The addresses of these documents are listed in the appendix to this talk.
- Highly recommend Eric Tilton's Web Weaving (Addison-Wesley, 1996) as a book that deals with a lot of style issues. See his Composing Good HTML web page.
- Also recommend Ian S. Graham's HTML Sourcebook (Wiley Computer Publishing, 2nd edition, 1996) for its breadth of coverage. See his HTML Tools web page.
How to create web pages
- WYSIWYG editors generate HTML directly.
- HTML Converters translate popular word-processing document formats such as Microsoft's Rich Text Format (RTF), FrameMaker's MIF and LaTeX into HTML.
- Code directly in HTML, using a text-editor like GNU-Emacs or BBEdit. Direct coding provides more control over the structure of the page.
Elements of a Financial Aid Office Web Page
- Header: School or office logo, name of school, name of office.
- Contact Information: Postal address (and address for in-person visits, if different), telephone numbers, fax numbers, TTY/TDD numbers, email addresses, Title IV Code and office hours. If lengthy, replace with a link to a page of contact information.
- Announcements: (Sometimes called "What's New" or "Bulletins".) Link to a page of current news and a list of recent changes to the page.
- Overview of Financial Aid: Cost of Attendance, Types of Aid (Grants, Loans, Employment, Merit Scholarships), Financial Aid Statistics (e.g., total aid given, percentage of students receiving aid, etc.), Answers to Frequently Asked Questions, Glossary of Financial Aid Terminology and Important Telephone Numbers and Addresses (e.g., 1-800-4-FED-AID, duplicate SARs, State Aid Commission, ...).
- How to Apply for Financial Aid: Required Documents and Application Instructions for entering freshmen, international students, transfer students and returning upperclass students.
- Financial Aid Calendar: A list of important application deadlines and a checklist of critical steps to applying for financial aid.
- Eligibility and Awarding Criteria
- Notification about Financial Aid Awards: The SAR, award letter, etc.
- Financial Aid Policies and Conditions:
Rights and Responsibilities, Satisfactory Academic Progress, Outside Scholarship Policy, Refund of Student Aid Funds, Loan Repayment Provisions, Terms and Conditions for Student Employment, Verification, Disbursement and Nondiscrimination Policy.
- Forms: Online forms for requesting application materials, etc.
- Publications: A list of print publications, preferably with links to online versions. Also, a list of books about financial aid in the library.
- Financial Aid Office Staff:
A "Meet the Staff Page", with the name, title, phone number, email address and (small) photograph of each staffperson, with a brief description of their duties.
- Links to Related University Offices: Links to the web pages of the Admissions, Student Employment and Bursar's Offices, as well as a link to the university web page.
- Links to Other Web Resources for Financial Aid
Other Financial Aid Resources on the Web
Key External Financial Aid Web Sites
When to Add a Link
- Don't link to a resource just because it exists.
- Be selective. Link only to sites you consider useful.
- By being discriminating in your choice of links, you will offer more value to your users.
Content is Key
Good Content is Expensive
- Content = information, discussion, advice and ideas.
- Good original content is the key to attracting visitors.
- There is too much emphasis on page presentation. People will visit your page because they are interested in the information you provide, not because of your "cool" graphics.
- It takes time to develop good content.
- Don't tease and frustrate your readers by promising more than you offer, or they will leave and never return. Give complete answers.
Hypertext is more than just links
- Even if your page is mainly a collection of links, try to provide content with the links. For example, every link should be evaluated, annotated and categorized, so users can know what lies at the other end of the link. This helps the users avoid wasting time. By evaluating the resources to which you link, you provide good content.
- The web is chaotic, a mixture of high and low quality pages. Sound editorial judgement, to sift the good from the bad, is almost as important as providing high quality original content.
Don't include boring content
- Content selection should depend on the needs of your visitors. Resist the urge to express yourself.
- Nobody reads the introductory letters from the Director of Financial Aid. If you must have one, design it as an overview of the contents of your page, with appropriate links to the key sections of the page.
- Generic information about the web isn't necessary.
- Don't repeat what has been done elsewhere on the web. Don't duplicate a page when a link will do.
- Add value to the web by adding to the content of the web.
The Front Door
Target the page to a specific audience
- Target a specific audience and design your pages to meet the needs of that audience. Help the user find what he or she wants quickly.
- Some sites provide customized sets of links to the same information to present different "views" of the same material to different audiences. One table of contents for students, one for parents and one for financial aid administrators.
Front door page
- The front door page should be a combination of a title page and a brief table of contents, with links to the main resources of your site.
- Publicize the front door as the main entry point to your site.
- The page should be short and concise, so that it loads quickly. Keep it only one screenful long, to prevent any need for scrolling.
- The front door page may include the seal or logo of the institution or department at the top of the page, but should otherwise minimize the use of graphics. The front door should not depend on tables or other fancy aspects of HTML.
- Don't start off with a preface or other massive text. The front door page should not be a Welcome page, unless the welcome message is a thinly-veiled overview of the resources on the page. Long-winded and pompous greeting messages belong on a separate page.
- The front door should include contact info for the site maintainer.
- There should be no more than two levels of menus, with the first level appearing on the front door page. The second level should provide more value than just an intermediate list of topics.
- Most sites should have 8 or fewer main category links. With descriptions they should fit comfortably within a single screen.
- Rule of thumb: If you have two levels, the number of main category links should be the square root of the number of local pages. My site has about 450 pages, meaning that there should be about 20 main category links on my front door.
- Without structure, people get "lost".
- Most "fully-connected" hypertext documents are disorienting and difficult to navigate.
- People need predictability and structure. Providing a well-organized sequence of pages gives them the consistency they need.
- When people read a document, even a hypertext document, they linearize it. Help them by providing a clear path through the document. There should be at least one clear path through the mess of links. Even hypertext becomes linear when it is read. Design your pages with this in mind. There should be an obvious sequence of steps through the document.
- Use a simple hierarchical tree-structure for your documents. (If it works for books, it can work for hypertext.)
- Minimize lateral links because they are confusing. Lateral links should be auxiliary to the main thrust of your document and incorporated into a See Also section at the top or bottom of the page.
Book Metaphor for Document Structuring
- The user interface should be a natural one that is easy to understand.
- This will minimize the cognitive load of users who are trying to navigate your site.
- The conventions used by most books are readily understood by most people.
- Title pages, table of contents, indexes, prefaces, chapters, all have analogues in web page design.
Keep pages small, but not too small
- Keep your pages small, but not too small.
- Long pages force people to scroll and take much longer to load.
- Tiny pages annoy users because the constant mouse action breaks up the rhythm of reading. Also, there is some overhead to retrieving even small files. This can cause frustrating delays when the network is slow and overloaded.
- Strike a reasonable balance.
- Added benefit: Short pages are easier to maintain than long pages.
Minimize Conceptual Load
- Try to minimize the effort required of your users to acquire information from your pages.
- If you create extra work for the reader, some readers will give up and visit a better-designed page instead to get the information they need. A badly designed page sends your readers to the competition.
- Reading from a computer screen is more difficult than paper (30% slower) because of the low resolution and the vertical surface.
- Web surfers tend to skim text, rather than reading it in depth.
- Keep the text short, factual and interesting. Don't distract the reader with unnecessary digressions. Write text that is easy to follow, clear and concise.
- Minimize the need to scroll. Scrolling through long pages is disorienting, causing a loss of context due to a lack of landmarks.
- No more than two or three screenfuls of information per page, with one screenful ideal. Anything more forces people to scroll too much.
- One printed page equals about one and a half screens of text.
Put key information first
- Put the most important material at the top of the page. Use the inverted pyramid style of news stories with the most important items first. Begin every page with a short paragraph that describes the content and purpose of the page.
- Reason #1: People have short attention spans on the web. If you bury the information, people may not read far enough to see it.
- Reason #2: Many search engines index documents based on just the first few paragraphs and display the first paragraph as a kind of abstract.
Provide textual cues to content
- Transition paragraphs belong as the source end of a link, not the destination end. Do not include any connective phrasing, such as "next we will talk about" or "previously we discussed".
- Provide cues to where your links will lead. Shifts in context can confuse web users, so every link should clearly identify, directly or indirectly, what will be found at the other end.
- Annotate your links. Long lists of document titles aren't as useful as descriptions of what will be found. People need to know -- before they select a link -- what they will find at the other end. Provide enough information so that users can tell what the page is about without visiting it. A brief title as anchor text is not enough.
One topic to a page
- Don't put too much information on a page. Each page should contain a single thought or idea and should be completely independent of context. Put only one topic on a page. If there are two different topics, put them on two different pages. All the information on a page should be closely and clearly related.
- Break up the content of your site into discrete pages that are completely independent of each other. Break the document at logical points, not in the middle of a section.
- Reuse pages where possible. For example, one site had three pages that described the Stafford Loan program. Each page had a slightly different description. This is a possible source of confusion. Instead, create a single page for Stafford Loans and let each of the other pages point to it.
Monolithic pages for printing purposes
- If your document is a single monolithic page that begins with a set of intradocument jumps that scroll you far down the page, it is often a sign that you need to break up the page into several smaller pages.
- Only if a document is a cohesive article (a newspaper story, a journal article, a glossary, an index) should it be kept unbroken. In such a case, you should include intradocument jumps to help users navigate through the page.
- Tradeoff between ease of printing (one long document) and ease of reading (many smaller documents).
Hide superfluous detail
- Avoid superfluous content. Use links to provide additional relevant but nonessential detail. Hide the detail, allowing the reader to skip the parts that are uninteresting to him or her and to focus on the parts that are interesting and useful to him or her. Keep extra detail in the background.
- But don't overdo the links. Use them to provide additional detail on focal subjects. Purpose of links is to elaborate, not digress to a tangent or entirely new topic. Too many links make the text hard to read and tangles up the order of reading, losing the reader due to lack of context.
- Offer consistent navigation options on every page.
- On long pages, duplicate the navigation aids at the bottom of the page.
- Just above the signature section, include a "See Also" section with links to related pages on the same web site.
- Minimize choices. Whatever can be controlled must be controlled to avoid confusing the reader. Avoid the VCR syndrome.
- Every site should have a front door page that functions as a table of contents page, organizing the site hierarchically by subject.
- An overview page may be helpful, especially if the table of contents is somewhat long.
- If the site is large and complex, it should also have an index page that organizes the page alphabetically by subject and/or name, or a search facility.
- If the site is large and changes frequently, it should have a "What's New" page for announcements of changes to the site.
- Every page should include a link to your front door page. The front door page should have a link to the university's web page.
- Some people also include a link to the university's web page on every page, but this is not strictly necessary if your front door page includes such a link.
- If the same graphical masthead appears on every page, it is conventional to link it to the front door page.
Prev and Next navigation links
- All web browsers provide Back and Forward buttons, which are tied to the sequence in which the user viewed the pages.
- Since users can enter your page from outside the structure, you should provide aids to help them readily grasp and navigate the structure of your document.
- If a set of documents have an ordered structure, they should also have "Next Page" and "Previous Page" buttons (common "NEXT" and "PREV") that are fixed links to other documents in the sequence. If the sequence is linearly ordered, there should also be a "Top" or "Up" button to return the user to the beginning of the sequence.
- PREV/NEXT/UP buttons should not simply be icons, but should include some information about what the user will find at the end of the links, such as the titles of the previous and next articles in the sequence.
Pages should function in standalone fashion
- Every web page can be accessed directly from anywhere on the Internet, without the benefit of context. For example, searchable web catalogs have an annoying tendency to ignore front door pages.
- So every page must be designed as an independent document to let it "work" in standalone fashion. Every page should read as a cohesive unit even in isolation from the parent and sister pages.
Write self-contained TITLEs
- The TITLE of a page should be comprehensible without the benefit of external context. People often decide whether to visit a page based on its title.
- "Introduction" is only meaningful within context; use "Introduction to Financial Aid at Univ. of ...." instead.
- The TITLE of the page should clearly and concisely identify the contents of the page. The TITLE should be as descriptive as possible.
- Since TITLEs are often used as the text of a bookmark, they should be short, no more than 50-60 characters long.
- Example of good and bad titles for a page of information about Stafford loans for undergraduate students: "Financial Aid" (very bad); "Loans" (bad); "Educational Loans" (good); "Student Loans" (better); "Stafford Loans for Undergraduate Students" (much better)
- Repeat the TITLE in a H1 environment.
Context Independence: Signatures
- Because pages act as independent units, every page should provide basic authorship information. Such information appears in a signature section at the bottom of the page, after a horizonal rule <HR>.
- The signature should include the author's name, affiliation, email address and contact information. Optionally include author's phone number, fax number and postal address. If different individuals were responsible for content and formatting, include both email addresses.
- The email address of the page's maintainer is essential, because it allows users to report errors such as broken links.
- Optionally include a small version of the official logo or seal of the institution or department, linked to the appropriate home page.
- Use mailto anchors for email addresses. For example,
- <link rev="made" href="mailto:author@site"> is used by Lynx for the "reply to author" feature and should appear in the head of the file.
Copyright notice and document identification
- Every page should include a minimal copyright notice. For example, "Copyright (c) 1996 by Mark Kantrowitz. All rights reserved." If necessary, link the word "Copyright" to an extended copyright notice.
- It is also good to include the URL of the document (or the front door page, if you don't want people to link directly to the page) in the signature, to help people find the document again from printed copies.
Last modification date
- Information on the Web gets stale quickly, so every page should provide a last modification date to tell users the last time the page was updated. This timestamp should be changed automatically when the content changes, since people may forget to change it manually.
- Dates should be spelled out to avoid ambiguity. 4/3/95 is read April 3 in the US but March 4 in Europe. Use April 3, 1996 or 3-APR-1996
Online vs Print
- HTML documents are unusual in that they need to be designed for both the computer screen and for printing.
- There are tradeoffs between the online and offline use of a page. For example, long monolithic pages are easier to print out, but harder to read online. Similarly, navigation aids aren't relevant to printing, while folios (page numbers) are.
- Pages should be written in a style that continues to be readable even when all the links are removed, such as happens when a page is printed.
- Some people feel that a guide to online resources should include the URL of each resource in the text, so that the document will be useful when printed out. But URLS tend to be long and ugly, making them undesirable for an online guide.
- Decide whether the document will be primarily read online or offline and design it accordingly. As a general rule, web pages should be designed to be read online. If you expect people to want to print the page, create a separate printable version.
- Every document should include either its own URL or the URL of the home page as part of the text. This allows people who are reading a printed version of the page to find the latest version on the web. It is conventional to include the URL on the bottom of the page in the signature section.
- Images should look good when printed out. This means that color graphics should be designed to look good in black and white.
- Avoid the "Click Here" syndrome. Use links, don't talk about them.
- Instead, attach links to key noun phrases that are part of a meaningful sentence about your subject.
- Use noun phrases, not single nouns, as the anchor text, since a single word may not be long enough a "target".
- Anchor text should be related to the title of the destination page.
- Anchor text should also be meaningful, to make it easier for you to build an index from your pages. Some browsers use anchor text to create bookmarks instead of the document title.
- "For information about loans, click here."
- "For information about loans, select this link."
- "More information on loans is available."
- "More information on loans is available from the Lenders and Loans Information Page."
- "The three main sources of educational financing are scholarships, loans and student employment."
When to Link
- Don't have too many links. Links disrupt the flow in a paragraph by stressing the anchor text. Only important elements should be emphasized. If all text in a paragraph is highlighted or underlined, it is difficult to read.
- Links should be auxiliary to the main thrust of the paragraph, providing additional detail that does not belong in the paragraph.
- Don't repeat the same link with different text. If the text is different, people expect the page at the end of the link to be different.
Performance vs Aesthetics
- There is a tradeoff between the time it takes to load an image and its contribution to the visual appeal of a page. For the next decade, load times should have priority.
- A picture is worth a thousand words: literally. Most images take much longer to load than the rest of the text on the page!
- Do not use large images, because they take too long to load. They frustrate your viewers, who may decide to skip your page in favor of one that takes less time to load. Even small graphics, like buttons, can cause problems if you have too many of them on a page.
- Up to 30% of web users do not see graphics because they turn off the loading of images or use a text-only browser like Lynx.
- Do not use image maps or animation, no matter how "cool".
- Don't replace bullets and horizontal rules with graphical bullets and dividers. The built-ins are much faster and will always work correctly.
- Only add images when they provide essential information that explains or illustrates (e.g., maps, pie charts, relevant documentary photographs) or act as navigation aids (e.g., simple buttons).
- Don't use random gratuitous clip art to break up the gray when headings, bulleted and itemized lists and tables will do just as well.
Maximizing Image Performance
- Reuse the same graphics throughout the site to speed up loading. Since images are cached, images load faster the next time you use them.
- There should be no more than 2-3 illustrative images and 6-7 small buttons on a page.
- If you use graphics, include the ALT modifier in IMG tags to provide text to appear in place of the image. If no text should appear, use ALT="", as otherwise the default text "[Image]" will appear.
- Provide width and height information in inline graphics to let the browser lay out the text without having to wait for the images to load.
<img src="finaid.gif" alt="Financial Aid Information Page" width=472 height=50>
Image Design Principles
- Make sure graphics don't spill off the edge of the screen.
- The default page width (window size) differs on the various browsers and platforms.
- To avoid spilling off the side of the screen, images and tables should be designed for a maximum width of 470 pixels. Being forced to scroll horizontally is much worse than scrolling vertically.
- The ideal height for a banner is no more than 50 or 60 pixels.
- Design images for 72 dpi, 256-color screen, 50 colors total and less than 50k in size.
Icon Design Principles
- There is no such thing as a "universal icon" that is unambiguously understood by all people. Icons may look nice, but are harder for people to understand than text.
- If you must have an icon as a button, include some text within the image to clearly identify the purpose of the button.
- For example, a drawing of a rolodex card is not obvious enough to tell the viewer that this button gets them to the index. Adding the word index to the icon does. Follow the lead of the Macintosh user interface, where every icon has text associated with it.
- Avoid using images as the basis for links, except for images that are obviously buttons. It is hard to tell when an image is "hot". Duplicate any links from images with links in the text of the document.
- Buttons should be no larger than one inch square. Use a black or beveled border around the icon to emphasize its button nature.
- Text included in images should preferably be anti-aliased.
- Don't violate user expectations. If something looks like a button, it had better be a button.
Images: GIFs vs JPEGs
- The most popular image file formats for web pages are GIF and JPEG. Both formats contain bitmaps of images in a compressed format.
- JPEG compresses images more than GIF, resulting in smaller image files. Some browsers, however, do not support inline JPEG images.
- Use GIFs for line art drawings, logos and screen dumps.
- Use JPEGs for photographic and continuous tone images.
- GIFs can have one color assigned as transparent, letting backgrounds show through, JPEGs can't. This makes GIFs better for slanted and non-rectangular images.
- GIFs may degrade color quality, JPEGs won't.
- JPEGs may degrade image quality, GIFs won't.
- JPEG is lossy compression, GIF isn't.
- GIFs can represent up to 8-bit color, JPEGs up to 24-bit color.
- GIFs can be interlaced. This means that adjacent data in the file contains data from nonadjacent rows of the image (such as every fifth row). In browsers like Netscape that display images incrementally, this gives the appearance of a quicker loading of the image, starting with a low resolution version and gradually refining it into a high resolution version. Mosaic doesn't display images incrementally, so users of Mosaic will not be able to appreciate the difference.
Image without a Transparent Color on a Gray Background
Image with a Transparent Color on a Gray Background
- If you provide a background, it should be subtle and light in color so that the text is readable. Pastel colors provide the best contrast for text. Gray provides the best contrast for color images.
- Don't use large images as backgrounds or they'll take too long to load. Keep backgrounds small.
- Some people include to ensure that their pages are displayed with a white (not gray) background.
- Pages with backgrounds may not print correctly.
- Avoid image maps. Image maps are large images that contain embedded hot spots. Since image maps are large images, they take a long time to load. Graphic designers love image maps; users don't.
- Only use image maps on graphics-intensive web sites, such as art and photo galleries.
- Image maps are only appropriate when the information is organized according to a spatial metaphor. For example, using a map of the United States to navigate geographical information.
- Another acceptable example of image maps is a thin navigation bar at the bottom or top of the screen.
- Do not use image maps as means to creating a pretty graphical collection of buttons. Your page may look good, but nobody will visit it because it is frustratingly slow to load.
- If you include an image map for navigation, provide a text-only alternative for non-graphical browsers and blind users.
- All the conventional design rules for printed documents still hold on the web. Don't throw away good design, composition and editorial principles because of the candy store novelty of web pages.
- Visual contrast between headings and text blocks important to good design.
- Ensure a proper balance of white space versus gray. Use headings to break up the gray where appropriate. Paragraphs should be no more than 6-7 sentences. Use bulleted or numbered lists where appropriate. If an image contributes to the message of your document, use it. But no gratuitous images, please.
- When people first got Macintosh computers, they went overboard on using fonts. A text face and a heading face was all they really needed, but they used dozens of fonts. On the web, don't go overboard with images, colors and all the neat web toys. Keep it simple and straightforward.
- BLINK tags are annoying and should only be used in genuine emergencies.
- Don't overuse HTML elements, like horizontal rules (HR), tables and images.
- Avoid gratuitous graphics, like colored bullets.
- Don't use all caps because PEOPLE HATE PEOPLE WHO SCREAM.
- Don't change the default text and link colors.
- Remember, a large percentage of the (male) population is color blind. Don't make your pages depend on color, especial red vs green. If you use colors, also distinguish items by shape and backup in text.
Use logical, not physical tags
- Aim for tags that represent a logical description of content, not details of presentation. Logical tags allow the browser to display semantic content and structure as best it can. Using logical tags will maximize the chances for a good rendering on all browsers (e.g., speech interfaces for the blind).
- Don't use physical tags, such as <I> and <B> where the logical tags <EM> and <STRONG> are more appropriate. For example, using <EM> to emphasize text will work better than <I>, since not all browsers support italics. If you use <EM>, the browser is free to choose italics, underlines, bold, reverse video highlighting, or forcing characters to uppercase, depending on its capabilities.
- Don't use logical tags to achieve physical effects. For example, using H2 and H3 to get big bold fonts or H5 and H6 to get smaller fonts will backfire, making your page look awkward on some browsers.
Common HTML Coding Errors
- Don't forget the end tags or to include the / in the end tag. Forgetting end tag in a <B> causes the rest of the document to be bold.
- Whitespace errors:
- Don't put whitespace after the <LI> tag.
- Do put whitespace after the <IMG> tag.
- Don't include extra whitespace around the anchor text (e.g., after the <A> tag or before the </A> tag) or you'll create "stubble" at the edges of the anchor text.
- Don't forget the quotes in the HREF of an achor tag.
- Don't use links to provide underlines. Use <U> tag instead. Some browsers don't display links as underlines!
- Don't use curly quotes (`` and '') on the Macintosh. They will drop out on other platforms, since they are not part of the ASCII character set. Use standard quotes (") instead.
- Markup tags are supposed to be outside the anchors, so <I><A>...</A></I> is correct, opposite isn't. Most browsers support both.
- Even though HTML tags and attributes are case-insensitive, attribute values, such as "mailto" and "checkbox", are often case-sensitive.
Maintain a professional demeanor
- If you need images for your site, hire a graphic designer. Don't give your site an amateurish look by creating the images yourself. Just as you would hire a graphic designer for a printed brochure, do the same for your web pages.
- Don't include an "Under Construction" image on a page. Every page is always under construction. If a page is not ready to be released, don't link to it. Nothing is more annoying than to jump to a page, only to find nothing there.
- An unprofessional or disorganized page is worse than no page at all.
- Develop and maintain a consistent "look" (style) across all your web pages. This will create an identity - distinctive feel - for your site, helping to distinguish it visually from other sites.
- Creating a distinctive style for your pages is critical on the web, since traversing a link can just as easily move you to external page as an internal one.
- A consistent style also helps establish continuity and cohesiveness among your pages.
- Every page should:
- have a similar-looking header/titling design (text or graphics) with unifying graphics (such as a logo) at the top of each page.
- provide the same navigation options. This also reduces the cognitive load in understanding new and complex web sites.
- use a similar structure for the content of the page.
- The style should be unobtrusive.
Proofread your pages
- Being on the web is no excuse for poor spelling and improper grammar.
- Check your spelling, grammar, punctuation, proper usage and capitalization. On the Internet, you are judged by your erudition.
- Verify every fact before including it on your page.
- Be articulate. Neatness counts on the web. Minimize extra verbiage; keep your pages short and concise.
- Use a simple direct style. It is harder to read documents online, so don't complicate the task by writing unreadable prose.
- Copyright laws still hold on the web. The sender of an email message retains the copyright on the message. The author of a web page retains a copyright on the text of the page.
- Ask permission before "borrowing" material from another web page. Don't copy material without permission.
- Don't steal other people's graphics.
- Don't scan in text and images from magazines without obtaining permission.
- Copying a page violates the page's copyright. Linking to a page does not.
- If the source is a stable site, link to it in preference to copying. If the page is stable, you have no excuse for not using a link instead of copying.
- If a page is transient, maybe copy it.
- When you copy, attribute the source. Give credit where credit is due. This allows errors to be corrected not just on your page, but on the original page as well.
- If it isn't clear whether a document was intended to be public, ask permission before linking to it.
Spelling and Capitalization
- it's/its (sometimes caused by Macintosh curly quotes "disappearing")
- Internet, not InterNet, and site, not sight.
- Be consistent in your use of numbers and numerals (e.g., ten or 10?).
- Avoid technical jargon. The purpose of the web is to hide the technical details of transfer protocols from the user. Don't refer to the mechanics of file transfer (e.g., "by anonymous ftp").
Overused and Misused Words and Phrases
- Don't use slang and vernacular, such as "cool", "hot" and "neat". Those words are signs of shallow thinking. Be articulate and say why the page is useful.
- Don't refer to "home pages" or "Mosaic pages". Use "web pages" instead. Mosaic is only one of several browsers.
- Avoid meaningless words, like "available", "current", "online" and "one-stop shop".
- Don't refer to the mechanics of page navigation. Avoid the words "click", "press" and "select". "Click" presupposes one is using a mouse.
- Provide context information when giving navigation instructions. Instead of (or in addition to) the words "previous" and "next", mention the titles of the pages.
- The word "back" is ambiguous, since users do not necessarily view a site's pages in the intended order.
- When one reads a page, one "visits" it and does not "link", "hotlink", or "surf" to it.
- Every page on the web is always "under construction".
- Avoid meta-level references, like "here is a list of ..." and "note". Talk instead about the subject directly.
- Constructions that begin with the word "provides" can almost always be replaced with more direct locutions. For example, replace "provides a description" with "describes".
Avoid long documents and large images
- A picture is worth at least a thousand words, in transfer time!
- Avoid large in-line images. Use images only where they are important and contribute information to the page.
- Graphical banners at the top of files should be small in size.
- If you use buttons, reuse them where possible, to amortize the cost over several pages.
- Keep images under 10k in size, 20k cumulative.
- If you must have a large image, use a thumbnail version in-line that is linked to the larger version.
- If you link to a large file (e.g., computer program, sound file) or external image, tell the user how big the files are before they download them.
- Avoid using server-side includes.
Testing Your Page
Avoid Browser-Specific Extensions
- Minimize the use of browser-specific extensions to the standard. Don't limit your pages to the users of a particular browser. You don't want to alienate part of your audience through browser-chauvinism.
- If two or more browsers support an extension, it is probably safe to use, but don't make your document dependent on it. Critical elements of your page should not depend on browser-specific extensions.
- Not all browsers support images and some (e.g., Lynx) never will.
- Not all browsers support tables.
- Do not use tables to control text layout. Only use tables for tabular data.
- Provide a text-only alternative to tables and images for nongraphical browsers.
- Tables can be mimicked with preformated text using the PRE tag.
- All images should provide ALT tags.
- Avoid frames and Java.
- <center> is a Netscapism. <p align="center"> works just as well for everything but tables.
- <font> and <blink> are Netscapisms.
- Don't change the default background colors, text colors, link colors and followed link colors. Users can (and do) set their browser to ignore such changes.
- Don't use image maps. Blind users can't navigate them!
- Don't make your page dependent on a particular background, color scheme, or image map. Make sure your page is readable even if images aren't loaded. Not all browsers support backgrounds and users can and do turn off the loading of images in Netscape's preferences menu.
- Some extensions are "harmless", in that they are ignored by browsers that don't support them. So long as your page doesn't depend on them for crucial aspects of the content, your page will be readable on most browsers. Other extensions, like tables and Java, are often misinterpreted by other browsers, leading to unpredictable results.
How to Test Your Pages
- Test the pages before you release them.
- Verify that all the links work. Broken links are very annoying.
- Beta-test the pages with users who weren't involved in the design.
- Solicit ongoing feedback. Include an email address or a link to a feedback form on every page. Feedback forms should include an email address for users whose browsers don't support forms.
- The acid test: View the pages under different conditions: browsers, platforms, monitors, etc.
- Tools for validating HTML:
- Tools for verifying HTML links:
Verify that your pages can be viewed by most users and look reasonable on most systems.
- View the page using the most popular browsers. Netscape, NCSA Mosaic and Lynx comprise more than 90% of the users of the web. Microsoft's Internet Explorer is gaining in popularity. Other browsers include MacWeb, WinWeb, Cello, ... No two web browsers display HTML in exactly the same fashion.
- View the page using a text-only browser, such as Lynx. (Added benefit: Lynx is very sensitive to HTML errors and will catch coding errors.) If you don't have Lynx, view the page with image loading turned off.
- View the page on different monitors. (Common errors: colors map to black text on a black background or white text on a white background when viewed on a monochrome display, or 24-bit images turn garish on a 256-color display.) Check the page on a monochrome monitor, grayscale monitor, 8-bit color monitor and a 24-bit color monitor. Most monitors can display up to 256 colors.
- Check how the page looks when printed out.
- View your page on different platforms: UNIX, PC, Macintosh, VMS. Different platforms have different fonts, different default font sizes, and so on.
- View your page using the web browsers provided by the online services (America Online, Prodigy, Compuserve). This will let you appreciate the experience of users who must access your page at modem speeds.
Maintaining Your Page
Plan for the Future
- Your web site will grow quickly. It is easy to fix mistakes when your site is small, much harder when it is large.
- A well-organized site provides room for expansion. Consider possible future directions for your site and build in outlets for growth.
Create Persistent URLs
- Do not move, delete, or rename files after they've been announced.
- Recognize that people can and do link directly to subpages, even if you only publicize the main entry points into your page.
- Keep old URLs valid. To avoid creating broken links, leave a page at the old address with the new URL to redirect users to the new location. Netscape Navigator supports transparent redirection. For example,
<meta http-equiv="Refresh" content="0; URL=http://www.finaid.org/">
- Maintain a list of the email addresses of people who have linked to your page.
File Naming Conventions
- Choose file names carefully. Set up a convention before you start.
- File names should reflect page content.
- Changing content should not require changing the file name.
- Think twice before using a date as part of a file name.
- Directory structure should mimic the page hierarchy.
- Avoid special characters and long filenames.
- Stick to MSDOS naming conventions (0-9 a-z _ - .)
- Beware of Macintosh font problems (e.g., curly quotes disappear when files viewed on other platforms).
- Use hyphens instead of underscores to increase readability when used as anchor text.
- Use lowercase for all file and directory names. Mixed case causes human error and reduces portability.
- Use relative URLs for local files to increase portability. This is safe for files in the same directory or in a subdirectory. Files in a parent directory should be referenced by their full path and file name. See
Check Your References
- Don't add a link to your page without first visiting the page.
- Revisit all the links on your site regularly, to make sure they still work. Review every page on your site at least once a month.
Comment Your Code
- Include a comment at the top of each file that lists the name of the author, the date created and other relevant information.
- All pages should be timestamped with the date they were last modified. This tells readers and maintainers the age of the information on the page.
- Anchor links should be listed on their own line, flush left margin.
- Every page should include the maintainer's email address to allow users to send comments and corrections to the maintainer.
- If different individuals are responsible for maintaining the page and responding to inquiries, include both addresses on the bottom of the page.
- If you include a link to a comment form, include the email address on the form as a backup for browsers that don't support forms.
- Conventional for signatures to appear on the bottom of the page.
- Pay attention to the feedback you receive and fix problems promptly. For every complaint you receive, 200 people experienced the same problem and didn't bother to tell you. Thank the user for reporting the error.
Monitor Site Usage
- Use the log files to monitor site usage.
- Analyzing the log files can help identify problems and suggest future directions for your site.
Attracting Visitors to Your Page
- To attract current students and prospective students who are already interested in your school, provide information about your school's financial aid policies and procedures.
- To attract new readers, stand out from the crowd by providing better content that isn't available elsewhere. Your content should be unique, timely, useful, interesting, accurate and easy to read. Carefully select the links you include on your page, evaluating them for your visitors.
- To retain readers, provide links to key resources (e.g., Financial Aid Information Page and US Department of Education's Student Guide).
- To keep visitors coming back, make your site dynamic. Provide information that is updated on a regular basis.
Publicizing your page
- Don't publicize the page until it is ready.
- No "under construction" pages. If a section is unfinished, don't link to it. Don't tease the reader. Every web page is always under construction.
- If you link to major sections that are still under construction, at least publicize a completion date on those pages (e.g., "This page is under construction and will become available on DATE.").
Advertising your page
- Submit your URL to all the major web catalogs and search engines. Most web catalogs have a form you can use to register URLs. Read the instructions before submitting. Use meaningful subject lines.
- "Submit It" allows you to register your URL in several catalogs at the same time, but permits less detail than submitting to each catalog individually.
- List your page under the appropriate keywords. Ensure that your page uses the keywords near the top of the page (e.g., university name, "financial aid", "scholarships", "fellowships", "grants", "loans").
- Prepare a standard announcement with the name of the site, the
URL, email address for contact, other contact information, a
one-sentence description, a two to four sentence description and a one-paragraph description.
Where to Announce Your Site
- University Home Page (link from site index and announce on what's new)
- Cross-references from Admissions, Student Employment and Bursar's Office.
Financial Aid Forums
- Financial Aid Information Page (email to )
- FINAID-L mailing list and soc.college.financial-aid newsgroup
- Chronicle of Higher Education
Newsgroups and Mailing Lists
"What's New" Web Pages
Web Review Sites
Web Search Engines
HTML Reference Cards
HTML Style Guides
Special Topics: Transparent and Interlaced GIFs, Counters
Web Page and Site Editors
Text Editor Add-ons and Converters