University Web Services
Best Practices
Page Layout
Basic Principle
All pages should be divided into divs; no element on a page should exist outside a div. Use divs to achieve layout, not tables.
The Major Divs
There is room for other divs, but the standard set at a minimum is:
- header
- footer
- mainmenu
Additional divs are standardly named: secondmenu and insetbox. Actually, there are no standard naming conventions, so let's choose these for ourselves.
How these divs get styled is a matter of formatting and design, a topic handled elsewhere in this Best Practices document.
| BSU Logo | A-Z Index · Directories · Maps · Search |
| Dept home Main menu with standard links Optional links |
Content |
| Footer | |
header
Every page should have a header. This header is a "university wide" header, in that it contains only links, text, and graphics that relate to the university as a whole. The standard set of elements are:
- Boise State logo (linked to Boise State home)
- skip navigation to main content
- link to campus maps
- link to university A-Z index
- link to university directories
- link to university-wide search page
footer
Every page must have a footer. This footer must contain contact information for the person responsible for that web page. This is usually the person who is reponsible for the site in general.
mainmenu
This holds the primary navigation for the local site. The main menu is divided into four parts:
- an "upward" link. This lets the visitor move upward in the organizational structure. For an academic department, for example, this would be a link to the college home page. For many administrative departments, this would be a link to a VP home. There are areas where this link may not be appropriate (e.g., a center or institute).
- a "home link". There should always be a link to the site home.
- "site links": this is the main navigation for the local site and makes up the bulk of the main menu.
- "local links": that is, links that need to appear in some parts of the site but not in others. Think of this as sub-menu navigation.
secondmenu
While a second menu is not recommended it is sometimes needed. In such cases, this is its named div. Standard uses for a second menu are: Features, News Items, Highlights. The secondmenu area is often presented with a border and background color that sxets it off from the rest of the content, and is usually floated right.
insetbox
Regardless of function and placement, this is a box that can be inset into a page. It is often floated right and has in the past often been called "rightbox". It is often used for features or news, and has also been called "features".
Poster Layouts Deprecated
We recommend against layouts that are of fixed width or height. Instead, we recommend fluid layouts, that resize when the viewport is resized. Using max-width is allowed.why