Skip to Local Navigation
Skip to Content
California State University, Long Beach
University Template Project Secondary Banner Example
Print this pageAdd this page to your favoritesSelect a font sizeSelect a small fontSelect a medium fontSelect a large font
 

Layout Variations

Layout Variations Illustration

The layout variations should be used in the context of the information they contain. The content, whether graphical or text heavy, dictates how best it is to be displayed. The absence of navigation has an impact in the user's navigation experience, yet, there is always new variations that result in new ways of presenting the information. The diverse configurations are caused by the local.css file residing in their relative directory.

Default Layout

Default Layout illustrationThe default layout configuration employs 2 columns and the navigation bar. The column widths are 370 and 175 pixels wide.

Default Layout

One Column With Nav

One Column Layout illustrationThis configuration uses only one column and and the navigation bar.

One Column With Nav

Two Columns With Nav

ThTwo Column Layout illustrationis configuration is similar to the default except its 2 visible columns are of equal width.

Two Columns With Nav

"T" Setup With Nav

Hybrid Layout illustrationThis configuration divides the layout in 4 regions, one is the full width of the 2 columns and it has a navigation bar.

"T" Setup With Nav

One Column No Nav

One Column, No Nav Layout illustrationThis configuration uses only one column and no navigation.

One Column No Nav

Two Columns No Nav

Two Column, No Nav Layout illustrationThis configuration uses 2 equal width columns without the navigation bar.

Two Columns No Nav

"T" Setup No Nav

Hybrid, No Nav Layout illustrationThe "T" configuration divides the layout in 3 regions, one is the full width of the layout and the other 2 columns are of equal width. This setup does not have a navigation bar.

"T" Setup No Nav

Typically more prominent pages could benefit from displaying both, the audience and primary navigation bars at the top, below the header.

Additional Info.

a.) Design Grid

A "Fixed width" arrangement provides greater layout design control. With the aid of a grid, stronger compositions can be achieved.