Page Layout Options

The center content area of the pages is designed to use a three- or four-column layout depending on the type of information being presented. The only content in the far left column is the navigation. For layout options that affect the framework, including the far right column, left navigation area, section title and page title, see the Framework section.

Cisco.com 3-column Layout

Cisco.com 4-column Layout

Cisco.com content falls into two broad categories: editorial and functional. Editorial content includes marketing content such as case studies, brochures, and white papers; functional content includes lists of links, contact information, and product listings. Functional content is most often contained within the light blue header bar while editorial content uses the primary header or other types of sub-headlines.

If the primary objective of the page is to provide quick access to detailed product listings, use a three-column design that employs a module of functional content (product listing) extending the length of the page. If the secondary objective of the same page is to introduce users to a new product solution or to company news, use a four-column page.

Some content types have already been matched to fit specific layouts. For example, high-level information (meant for root or category pages) requires a four-column layout.

Page Levels

The page layout and page categorization depends on where the page resides in the information hierarchy. The following descriptions are used:

Content	CSS Template	Guidelines
Homepage Main entry point to Cisco.com	L1 – n/a (owned by Cisco.com team)	Managed by the marketing team, the home page follows a highly structured design system and content control.
Root pages Main entry point into the six main site areas.	L2 – n/a (owned by Cisco.com team)	Includes a gray introduction/mission statement with a spotlight photograph that can be linked. The hi-vav is the only content residing in the left column. The center column is divided into two columns, center-left and center-right columns. Does not include the section title, page title, or area navigation. Content uses any combination of page elements to group information.
Category/Landing pages Entry point into a new topic (i.e. a Cisco product category such as "Routers").	L3	Uses the standard framework with section title and page title. Can incorporate the gray box introduction with spotlight or photograph. Uses either three- or four-column layout, depending on the type of content. Content uses any combination of page elements to group information.
Concept Pages Introduces and provides more detailed information about the concept.	L3	Uses standard framework with section title and page title. Has no gray box introduction. The three-column layout is generally used at this page level; however, the four-column layout will also work. Content uses any combination of page elements to group information except a gray box and spotlight image.
Listing Pages Provides a list of links such as datasheets or technical documents.	L3	Uses standard framework with section title and page title. Has no gray box introduction. The three-column layout is generally used at this page level; however, the four-column layout will also work. Content uses any combination of page elements to group information except a gray box and spotlight image.
End-of-tree (EOT) pages Used for content such as data sheets or other descriptive information.	EOT	Uses the standard framework and the three-column layout in which the center column is a single column. Content uses any combination of page elements to group. Be sure to use the color bars, other types of sub-headings, bulleted lists, and content boxes to break up excessively long paragraphs of text.

Hierarchical Navigation

Cisco.com User Experience Guidelines and Standards

Page Levels