Page Layout

  • Introduction
  • Design pages for linear access: Software reads the code of Web pages from top to bottom. Make sure the sequence of content is logical in the code. Put important content first, and group related content.
  • Communicate visual information to nonvisual users: Some users cannot access information communicated via visual design. Make sure all relevant information that is communicated visually—through indents, spacing, proximity, and so on—is also conveyed in the code.
  • Apply a consistent design: Users must learn how to use the Web at each site, and often within a single site, as the design and functional elements change from page to page. Adopt design conventions and a consistent navigation scheme for improved usability.
  • Balance content and navigation: Many links make for busy, overwhelming pages. Rather than overload pages with navigation options, focus on presenting content and context-sensitive navigation.
  • Provide navigation tools: Users often have difficulty finding what they are seeking. Provide tools to help users locate content, such as search, site index, site map, and quick links.
  • Design flexible page layouts: Users who enlarge type or view pages on a small display need a flexible layout that will adapt to their viewing environment. Design flexible layouts using relative measurements.
  • Use style sheets for layout whenever possible: Flexibility is best achieved when content and presentation are separate. Design pages using structural markup, and use style sheets to control page layout.
  • Provide direct access to page content: Pages that begin with nonessential content can prove cumbersome for some users. Place content close to the top of each page, marked by a heading. Alternatively, provide a visible "Skip to main content" link at the beginning of each page.