[ skip to content ]

Web Style Guide & Best Practices"P" Topics

Page Layouts

Most pages should follow one of the following layout pageframes:

Main Layout - Type 1Main Layout - Type 1
Main Layout - AlternateMain Layout - Alternate
Main Layout - Type 2Main Layout - Type 2

(left) This layout should only be used in rare circumstances, where the main three cannot be used.


(right) This layout choice should only be used for hub-style pages where the only purpose is to direct the user to other parts of the site.

Main Layout - Type 3Main Layout - Type 3
Major Router LayoutMajor Router Layout

  • Flexibility and creativity in displaying your content are encouraged, but within the context of providing consistency in user experience.
  • When laying out a new page or changing the layout of an existing page, look to pages that were created by the University Web Team for acceptable layouts.
  • New York University's website (www.nyu.edu) is a good example of being flexible yet consistent.
  • When in doubt, ask the University Web Communications (webcomm@odu.edu).

Page Length

  • Avoid long, scrolling pages. Exceptions are for policies and handbooks.
  • Be concise in verbiage.
  • Break up large blocks of text by:
    • Employing the Heading component and anchors.
    • Using the Tabs component to organize large quantities of information.
    • Requesting separate pages for each major section of content.
  • Your page should be easily skimmable so users can quickly find the content they're seeking.

Page Themes/Colors

Page themes for the major sections of the site are defined in triads, with the primary section theme and then two supporting themes (see table below). Other page theme sets are academic college and vice presidential area. Page themes are set by section and may not be changed without permission from University Web & Electronic Communications.

Page theme triads by site section

themes-color-triads-table

Page theme by academic college

Arts & Letters Red (3)
Business & Public Administration Steel (7)
Education Purple (8)
Engineering & Technology Orange (4)
Health Sciences Green (6)
Sciences Yellow (5)

Page theme by VP area

President's Office Blue (1)
Academic Affairs Red (3)
Administration & Finance Orange (4)
Human Resources Steel (7)
Office of Research Purple (8)
SEES Green (6)
University Advancement Yellow (5)