SF State Web Template Guidelines { University Communications }

Image: Photos of SF State students and scenes from around campus

Content Area Layout

The Content Area comprises three layout components: Navigation (left column), Main Content (middle column), and Sidebar (right column). The consistent and proper use of these components improves the user's ability to navigate not only within one site, but also among all SF State sites. The HTML tags used in the relative sections are shown next to the section name.

Content Area layout

1. Navigation

Purpose

  • Provides consistent local access to pages and subpages within both your site and SF State‚Äôs family of sites.

Components

  • Areas <ul> <li>
  • Sections <ul> <li> <ul> <li>

Usage

  • Links should point to your site pages and subpages. Any links to pages on other sites should appear in the sidebar (see below).
  • Links in this column should not point directly to PDF downloads.
  • Section links under area links can either be displayed under their corresponding areas at all times or revealed only when their associated area is accessed. The use of flyout menus is discouraged due to accessibility issues.
  • Area links can either result in a landing page that serves as an introduction to the area and contains prompts for continuing to sections, or they can result in a landing page that displays the first section for that area by default.

2. Main Content

Purpose

  • Holds primary content of each site page

Components

  • Page title <h1>
  • Content heads <h2> <h3> <h4>
  • Paragraphs <p>
  • Ordered and unordered lists <ol> <ul>
  • Images <img>
  • In-text links <a>
  • Tables <table>
  • Submit forms <form>

Usage

  • Page title <h1> should be the same as the corresponding link in the navigation column.
  • There is only one <h1> per page.
  • Content heads should be used to convey information hierarchy.
  • Tables should be used for tabular data only.

3. Sidebar

Purpose

  • Holds useful information related to the site or page.
  • Contains links to areas not associated with site navigation.

Components

  • Content heads <h2> <h3> <h4>
  • Paragraphs <p>
  • Links <a> including quick links, related sites including parent or child sites, resources, shortcuts to relevant University-wide resources, and downloadable content such as PDF documents.
  • Images <img> including photographs, icons, and banner ads.
  • Small submit forms <form> including localized search, e-mail signup, polls, and jump page url redirects.

Usage

  • Sidebar content may be localized for each site page or remain consistent for all site pages.
  • Quick links or jump page URL redirects can include section within the site if they are not offered at the top level in the navigation column.
  • Any links that generate a download prompt should include a notation in the link [example: 2007 Newsletter (PDF)] and should include a link to the application required to open the linked document.
  • Images should be no more than 160 pixels wide to fit in the column. The recommend width is 150 pixels wide.
  • Select menu options should have short names, otherwise the menu will break out of the column.
  • For accessibility purposes, select menus require a submit (go) button to activate.
SF State Home