HUD Web Publication Standards and Style Guide

Section 4: Rules About Web Page Design

A. Functionality:

1. Internet: All HUD Internet web pages - including web-based applications - should work across all platforms. Specifically, they must function in Internet Explorer 4.x and later, Netscape 4.x and later, and text browsers. They also must function in PC, Macintosh, and Linux platforms.
   
   
2. Intranet: Intranet pages must be accessible in the Department's standard browser, which is Internet Explorer 5.x and later.

Both hud.gov and hud@work templates have been designed to meet this standard; so as long as you don't try to alter them in any way, you will be compliant.

B. Web-Based Applications: Applications (interactive systems and services) that appear on HUD's websites must follow all of the rules and style standards in this document, as well as all application development standards issued by the CIO.

1. When developing a web-based application, be sure to coordinate with the organization Web Manager and the Departmental Web Team. They can provide guidance to ensure that your application will work properly on HUD's website, and they'll be ready to link to your application in all the appropriate places on the site.
2. If the application is designed to use "persistent cookies," the application owner must obtain permission from the Deputy Secretary to use that technology. Copies of the Deputy Secretary's approval must be provided to the Departmental Web Managers and the CIO.
3. On the first screen of an Internet application, include a link to HUD's Internet home page: http://www.hud.gov and to espanol.hud.gov. On the first screen of an intranet application, include a link to hud@work's home page: http://hudatwork.hud.gov.
4. Web-based applications should include a mail-to link or post a telephone number that users can use to ask questions and report problems.
5. Web-based applications must include standard metadata on the front page of the application. Instructions on creating metadata can be found in Appendix C.

C. Standard Colors: HUD uses a palette of standard colors to ensure the common look and feel of its websites.

1. Always use a white page background and black text (R:0 G:0 B:0, #000000).
2. For graphics and other color features, use: red (R: 153 G:0 B:0, #990000); teal (R:0 G: 102 B: 102, #006666), gold (R: 255 G: 153 B:0, #FF9900), blue (R: 51 G:0 B:0, #330066), and green (R: 51 G: 102 B:0, #336600).
3. Use approved background color (R:255, G:245, B:220, #FFF5dc) for table cells. To improve readability, alternate with a white background on every other row.

D. Standard Fonts: The standard font and size used for all basic text is Verdana size 2. The Verdana font was designed specifically for on-screen display, and it is rendered identically across all platforms and web-browsers. For the greatest cross-platform consistency, always use the following family of fonts: Verdana, Geneva, Arial, Helvetica, sans serif.

1. By default, all text entered into the content section of HUD's templates is automatically displayed in size 2.
2. Size 1 text should be used for all text in tables, lists, content boxes, and captions.

E. Standard Headings: Headings can be used to help organize information. The three predefined heading formats that may be used are:

• Heading 2 (for document subheadings),
• Heading 3 (for section headings) and
• Heading 4 (for section subheadings).

F. Case:

1. Topics and headings (page headings, sub-headings, and section dividers) should be in title case. In title case, the first word and all principal words are capitalized, e.g., HUD Homes for Sale. Title case applies to:
   
   
   • Document titles (in the <TITLE> tag)
   • Page headings (in <H1> tag)
   • Page subheadings (in <H2> tag)
   • Section headings (in <H3> tag)
   • Section subheadings (in <H4> tag)
   • Inline headings (in <B> tag)
   • Content box titles
   • Content item titles (but not delta links)
   • Topics
   
   
2. Highlights and other links should be in sentence case. In sentence case, the first word of a sentence and all proper nouns in the sentence are capitalized, e.g., HUD homes for sale. Sentence case applies to:
   • List items
   • Links
   • Table headings
   • Button text

G. Italics: As a rule, HUD does not use italics for headers, sub-headers, links, or captions. In rare cases, italics may be used to add emphasis to a word within narrative.

H. Page Headers: Page headers (not to be confused with the "page title" that appears up in the blue bar at the top of the screen) are extremely important features of each web page. They should communicate – at a glance – the subject of the page. They also will serve as the text for any links to that page. So choose the wording of your page headers carefully.

1. Page headers should be short – normally no more than 3-5 words
2. Page headers should be no more than one line
3. Page headers should use words that the target audience would be sure to understand

I. Text: Break text into short segments. Use headers or section dividers to help people get to the sections they want, quickly. Allow white space (blank areas) on your pages. White space provides eye relief, makes items easier to find, and creates a more attractive page. Put your most important information at the top of your page.

J. Front Page: The front page of a section or "home page" should be short and to the point (no more than 2 screens). For the most part, you should use it to highlight current or important developments and to help people get to other parts of the section.

K. Page Length:

1. Front pages, topic level pages, and other pages that serve primarily as navigation (ie – links to other pages) normally should be no more than two screens.
2. Document level pages may be longer; but should not exceed 5 screens.

L. Topics: Topics should be chosen carefully, with all due consideration for the audience being served.

1. When possible, choose words that are – or could be – common across federal websites.
2. Words used to describe topics must be easily understood by the audience and should not be ambiguous.
3. Topics for each major component of the websites – whether state pages, Headquarters office pages, or organization pages on hud@work - will be carried through the entire section.
4. Generally, each section should have no more than 6-10 topics. To the extent possible, all your topics should show in the first screen.
5. Topic titles should be short and punchy – normally no more than 3 words. Topic titles should fit on one line, if possible.
6. When possible, Headquarters offices should use the same wording for common topics (such as "about us").
7. Normally, a section should be no more than 4 layers deep. This means you need to think hard about how you aggregate information into topics and sub-topics. Your audience will appreciate your efforts.

M. Content Boxes: Use "content boxes" to guide users to related links, to highlight important information, or to provide additional facts. When you use the following box titles, you should follow these protocols:

• What's new - Use "what's new" to highlight new regulations or requirements, new reports, new instructions, etc. Normally, items should remain in this box for a limited period of time (probably no more than 1 month).
• More From HUD - offers links to additional information about the particular subject from another part of HUD's websites.
• Links: links users to pertinent information on outside websites.
• Did You Know? - provides answers to questions that audiences might not think to ask. For example, "Did you know…that you can apply for public housing at more than one PHA?" "Did you know…that you need to see a HUD-approved lender to get an FHA loan?"
• What's Your Opinion? This is a great way to get feedback and to involve the public in policy issues. Normally, you should keep these short and current. For example: "HUD is selling homes at half price to police officers. What's your opinion?" The link should be a "mail-to" to an email box.
• Quick Links - highlights most frequently requested or most frequently used information.

N. Anchor Tags Or "Jump To's:" In some cases, anchor tags – which allow the user to "jump" farther down on the page – can be a good design practice. However, remember that if someone hits "print," they'll print the whole page – not just the section they jumped to. A better practice is to create a series of related web pages. This may be easier for the user to handle and enable a user to print out specific pieces of content instead a large volume of information that they do not want or need.

O. Highlighting "New" Items (Internet Only): A standard "new" icon may be used to highlight information on HUD's Internet sites. That is the only "new" icon that may be used on HUD websites. It will automatically expire 2 weeks after it's posted.

P. Standard Links (Internet Only): The "Information By State," "Email A Copy To A Friend" and "Printer Friendly Version" will appear on each document level page on HUD's Internet sites.

Q. Page Title: The "page title" appears in the title bar of the visitor's browser, as the label in bookmarks to the page, and in search results lists and statistics reports. A page title should be concise and meaningful to the audience.

R. Tables: Tables are useful to create concise layouts and to create multi-column lists efficiently.

1. Tables should be used to display tabular data and lists in an organized manner.
2. Define tables with headings and with column and row labels to facilitate navigation for people with disabilities.
3. Do not use borders on tables, since borders may display differently in different browsers and platforms.
4. When possible, use the approved background colors to enhance readability.
5. Do not use tables to isolate or highlight text on a page. Use content boxes and other template features to highlight important content.

S. Frames: HUD does not use frames on any pages of its websites. Frames add unnecessary weight to a web page, making it more difficult for people with slow modems to access the page.