Begin site navigation:
End site navigation.
TTY text-based telephone. When designing the layout of your page, it is important to ensure that the content is well organized. It can help to think of your page as belonging in a newspaper. Headlines, graphics and blocks of text are arranged so that the page is easy to scan. Related information is grouped together, and supplemental information is set aside by itself for further exploration. Stories may be short or long, but the text is typically concise and presented clearly.
Now, think of your newspaper page as also belonging to a book that has a table of contents. When people come to your page, do they receive the information expected? How easy is it to find? Important information should be obvious and near the top of the page. The content should always follow a logical order when read from top to bottom. Include subsections and headings so that the reader can quickly determine if this is the correct "chapter" in the book.
By examining your content objectively, you can easily create a usable page layout. Following these guidelines below can help you develop your inner critic.
Always put the most important items at the top of your page. Structure your content into an inverted pyramid, with a summary at the top and detailed information following down the page. Creating a logical hierarchy for each page makes it easier for people to quickly find what they are looking for without having to scroll through a lot of text.
All information related to one topic should be grouped together, including related links, text, form fields and controls, navigational elements, etc. This decreases the time that the reader needs to spend searching or scanning your page to find the information that he or she needs.
Related W3C WCAG 1.0 checkpoint: 13.6
Breaking up your text into "chunks" or sections of information with headings helps facilitate scanning. Ensure that your headings are descriptive and that they relate to the content they introduce. Use proper HTML markup to identify your headings (<H1>, <H2>, <H3>, etc.), and use them in the proper sequence according to the hierarchy of the page. Doing so ensures that the content of your page can be scanned more easily by those using assistive technology devices. Use Cascading Style Sheet (CSS) references to format the display of your headings.
Related W3C WCAG 1.0 checkpoints: 3.5, 12.3
Facilitate the readability of your pages by following these writing tips.
Related W3C WCAG 1.0 checkpoint: 14.1
Ensure that the content on your page is presented with sufficient white space so that sections of text are clearly separated from one another. It is much harder to read a Web page than a regular page of text. White space breaks up the density of the text on a page, which helps facilitate scanning while preventing reader fatigue. However, do not provide so much white space that users must scroll excessively to read through sections of text.
Mouse-users can benefit from having groups of related links positioned on the right-hand side of the page so that they are near the mouse pointer. However, if this is done as local navigation, then it should be done consistently throughout the Web site. Screen-reader users are unaffected by this layout as long as the page is structured so that the items appear correctly in the hierarchy of the page. For example, local navigation links should appear before the main content on the page. Supplemental "action items," such as printer-friendly and "top of page" links, should appear toward the end of the content when it is read in a linear manner.
Provide consistent alignment for items such as text blocks, table data, check boxes, form controls, etc., and use the same alignment across all of your Web pages. Typically, it is best to left-align the content on your page. Text that is centered is usually harder for web users to process. One exception is navigational elements, which may be centered across the top of the page, or right-aligned. Also, brief, one-line messages may be centered to convey importance. However, any block of text that comprises more than one line should always be left-aligned.
Limit the information on your page to that which is needed by users while on that page. If you display too much information, you may confuse users and hinder their ability to process the information. When designing forms and applications, present only brief information and allow the user to focus on the task at hand. Detailed instructions can be presented toward the bottom of the page, or as a link to another page.
The primary measure of page length should be its content. In general, use shorter pages for homepages and navigation pages, and pages that need to be quickly browsed or read online. Use longer pages to facilitate uninterrupted reading and to make pages more convenient to download and print. Create logical divisions and subdivisions based on the structure of your information. Do not arbitrarily divide your content just to keep pages at a pre-designated length.
Do not distract the reader by overusing text formatting to convey your point. Reserve the use of bold or colored text for section or table headings. Limit the types of font styles in a document. Keep the font use consistent, for example, one font style for section headings and another for text. Limit your use of italics and all-capital letters. These slow the reader down. Also avoid underlining your text because this can make it appear to be a clickable link. Rather than relying on formatting, display important text by itself in a separate sentence, paragraph or section on the page. Consider using CSS references to provide a shaded background to "highlight" the text.
When markup is used to clarify natural language changes in a document, speech synthesizers and some assistive technology devices can automatically switch to the new language, which makes the document more accessible to multilingual users. Use the LANG attribute (i.e. <html lang="en">) to identify the primary natural language of the document. Also identify any changes in the natural language of a document's text (i.e. <p lang="fr">).
Related W3C WCAG 1.0 checkpoints: 4.1, 4.2, 4.3, 11.3,
Links are the fundamental building blocks of the Web. However, sometimes links can add too much visual clutter, making it hard to read text on a page. Refrain from adding too many links. When used poorly, they disrupt the narrative flow of the text. Instead, consider separating them out as a "related links" section. Always make it obvious what items are clickable and what are not, and use link styles consistently throughout your pages. Remember to clearly identify visited links to help orient the visitor.
