The BU Core Design features a Content Area that can accommodate several page layouts. The Content Area begins immediately below the Image Bar/Primary Navigation Bar and ends at the top of the BU logo in the BU Help Bar.

The vast majority of pages in the BU Core Design will use a two-column format in the Content Area, where the left-side column (like the one you are now reading) is used for text and graphical content specific to the page, while the right-side column will be used for Content Navigation. The standard template features a left-side content column that is 530 pixels wide and a right-side column for navigation that can accommodate Content Navigation menus from 150 to 180 pixels wide (these vary depending on the length of text in the heading graphic). Padding and margins added to these column widths will always add up to 760 pixels -- the full page width.

Variations

1) Wide Content Area - A variant of the Content Area will accommodate wide content regions -- content that needs the entire width of the page. This type of layout should be used for large graphical items (such as the Core Design Components page), special sections that would feature multi-column layouts, and for table data. The full page width far exceeds the optimal line length for text, so a wide content area should never be used strictly for text content.

2) Home Pages, Primarily Content - Some Core Design sites feature a home page with a two- or three-column format that doesn't follow the standard layout. This is most common on home pages with a combination of timely events and features, where multiple columns of content command equal importance on the page. Examples of these include home pages at Student Central, Visitor Center, Staff Central and Faculty Central.

3) Home Pages, Primarily Graphical - Some Core Design sites feature a home page that is primarily graphical. These sites usually contain a relatively small number of navigation items, and the sites themselves are often of a seasonal or special event nature. A very strong and compelling photo/image is essential to using this variant successfully. An example of this is the home page for Commencement.

• Title Bar
• Image Bar
• Primary Navigation Bar
• Secondary Navigation Bar
• Content Navigation
• Content Area
• BU Help Bar
• Page Signature

NIS  |  OIT  |   August 22, 2006