Content Area Layout

The Content Area comprises two layout components: Navigation (left column) and Main Content, and Sidebar (right column) which consists of various grid options that can combined and arranged to best suit a site’s content display.

It is strongly recommended that any one site use no more than three grid options within its site in order to enhance usability.

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.

Layouts

Three column layout

Site Structure screenshot for a three column layout. More description below.

 

Consists of three regions. Navigation (left column), Main Content (middle column) and Sidebar (right column).

Full width layout

Site Structure screenshot for full width layout. More description below.

 

Consists of one region Main Content which takes the full width of the screen.

Two column layout

Site Structure screenshot for two column layout. More description below.

 

Consists of two regions. Navigation (left column) and Main Content (right column).

Two column sub-layout

Site Structure screenshot for two column sub layout. More description below.

 

Consists of two regions. Navigation (left column) and Main Content (right column). But the Main Content is further divided into two columns.

1. Navigation

Purpose

  • Provides consistent local access to pages and subpages within both your site and SF State’s family of sites.
  • Must appear in far left column.
  • Not allowed: horizontal navigation schemes, breadcrumb schemes and other navigational locations.

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 a sidebar, box or "Related Links" section.
  • 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.
  • The total number of navigation headings should not exceed ten
  • No sub-navigation should be open/shown 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.
  • Headings should not be links (with very few exceptions)
  • All new introduced colors for text or text background, needs to pass color contrast requirements. Please use the Color Contrast Analyzer to determine.
  • Sample usage for alternate layout options:
    • Full width layout
      • Main page of site
    • Two column layout
      • Tabular data
      • Calendar
      • Contact/staff listing
      • Images/Videos
    • Two column sub-layout
      • Slideshow
      • Events
      • Images/Videos

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 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.

4. Wallpaper

Contact the Web Team for permission to display a custom wallpaper. Note that wallpapers will display in laptop/desktop renderings only, not on tablets and mobiles.

Wallpaper of the College of Liberal and Creative Arts website.

5. Typography

The standard template renders in the Lato typefont. Sizes and colors are displayed at: Preview Template

Customization Options

Alternate typography may be approved pending approval for accessibility, readability and usability issues. Once an alternate type family has been tested and approved, it will added to the standard-issue list.

Alternate typography must be used consistently within pages and within a site—mixing of type families is not allowed.

Alternate typography approved as of October 2014:
Open Sans