Jefferson Lab > Public Affairs > Electronic Media
Privacy and Security Notice

Web Style Guide

This document is intended to serve as a style guide for people who publish information on the Jefferson Lab web servers using the lab template. Following this guide will maintain the lab's professional identity and assist user navigation. As always, any questions/concerns should be directed to the web staff in Electronic Media.

Our newest redesign incorporates advances in web standards to make our pages accessible and usable: XHTML and CSS. The pages should be usable with most standard browsers.

[ Page Design Components | CSS Customization | Validation ]

Vocabulary

JLab site (website):
The Jefferson Lab website on the www server that is maintained by the Electronic Media office.
Subsite:
A section of the JLab site that is maintained by a content manager/maintainer local to that office or department. Examples of subsites: Visitor's Center, 12 GeV, FM.
Personal site:
A personal site is maintained by a staff member or user and is not an official site of the lab. It, however, is required to follow the Web Usage Policy.
Content manager/maintainer:
Someone that provides the content and/or maintains the page. His or her contact information should be at the bottom of the page.

Page components
Screen Shot with Components

Subsite component descriptions

Component numberNameDescription
1Breadcrumb NavigationShows a hierarchy of the current page within the JLab site
2Privacy NoticeThe Privacy and Security notice link must be in the top section of each page
3TitleThe graphic header that is the subsite name (department, conference, office, program, etc.)
4Search BoxSearch form box that uses the lab's Google search engine/index
5Main MenuMenu tabs for the subsite
6SubmenuCollection of links belonging to selected menu tabs. Can be used to highlight something or can be filled with an image
7HeadingThe heading of the page contained in <h1>
8BodyThe content body of the page which is the main thing viewed when "print version" is clicked. Includes the Heading.
9PullquoteThe pullquote is an optional feature that is 250 pixels (px) wide by default but can be customized. Recommended for images with captions. The image should be flush with the pullquote's width as illustrated here.
10FooterThe contact and when the page updated information should be here. The default contact is webmaster@jlab.org which is read by Electronic Media staff.

Page Design Components (top ^)

The page design components that form a page can be broken down into three groups: the "header," the "main body," and the "footer." The header is comprised of the Breadcrumb Navigation, Privacy Notice, Title, Search Box and Main Menu. The main body is made up of the Heading, Submenu, Body and Pullquote. The last component is the Footer.

Breadcrumb Navigation
The breadcrumb is a location trail that shows the visitor where the current page is in the overall structure of the Jefferson Lab website. It also offers a way to navigate upward in the site's hierarchy.

Privacy Notice
The Privacy and Security Notice must be on every page by DOE mandate. It also should be located in the upper right of the topmost section of the page so that visitors see it without scrolling down.

Title
The title is a jpg image that has dimensions of 445 px width and 85 px height. Graphics are created in Photoshop with 40 pt Impact font, and an interesting relevant image. EM will provide title graphics to developers upon request. By default, there is a Jefferson Lab graphic in the common directory (/site/www/html/common).

Search Box
The search box queries the main JLab site collection using Google. To deviate from that might be confusing for the site's visitors. However, that is up to the content manager/maintainer. Individual subsite collections can be generated upon request.

Main Menu
This tab-like menu should be used to separate large sections of content. The tab colors change to indicate the currently selected menu item. Not all subsites require a main menu, such as a one-page conference, and in those instances it is recommended to use only a submenu.

Submenu
A submenu is a collection of links on the left. If there is a main menu, this list of links coincides with the currently selected tab. A picture or information can be used here instead of or in conjunction with a set of links. See examples below.

Examples (picture, information):
Picture Information

Heading
The heading is the title of the current page set off in <h1>. <h2> and <h3> are also formatted different from normal body text. It is recommended that the use of these be semantically correct. That is, you would use a <h1> tag for the most important heading, <h2> for a second level heading.

Example of the heading (<h1>) and a subheading (<h2>)
Heading and Subheading

Body
The body contains the content. The heading of the page is different from the subsite title graphic. This heading is set in <h1> and is a heading for the particular page. It usually sums up what is in the main content. For example, "Wrestling the Strongest Force" is the heading of one of the pages of the 12GeV subsite.

Pullquote
In a magazine, a pullquote is where a bit of text from the body of an article or story is pulled from the content and highlighted in some way to catch your eye. In this web design, this optional component is an image with a caption that "floats" to the right of the main content's text. The image is the same width as the pullquote element. By default, this is 250px wide. It is not recommended to go above this width since not everyone has high resolution and browser size.

Examples (with, without):
With pullquote Without pullquote

In the above example, the left web page uses a pullquote to help break up the text. By using a relevant image and caption, it brings emphasis to the main body. There is no pullquote in the example on the right because it adds no value to the content in the body, but rather, would detract from the visual appeal.

Footer
All pages are required to have contact information in the footer. If a visitor has questions about the page's information, she or he can contact the person responsible for the content. To make sure the pages are current, the last updated date should be visible and accurate.

The address to the left and phone number can be either the default Jefferson Lab's or the contact person's. If there is concern about spambots getting the contact person's information, there are ways to deter that.

CSS Customization (top ^)

There are many customization options already built into the web template through CSS (Cascading Style Sheets). Below is a breakdown of the most common elements and examples of their use within the JLab template. There are also many good general CSS Resources on the Web.

ElementCustmizationsDescription
DIVnonenew section of information
class="lefth"aligns information to the left
class="right"
aligns information to the right
class="pullquote"
aligns information to the right with a tan background and italics. to be used for an image and caption that correspond to the page content.
SPANnonenew section of information
class="left"aligns information to the left
Pnone

new paragraph

class="first"

new paragraph with an extra line break above it

class="hide"hides information from older browsers
LInone
  • bulleted item.
  • to be used within a list (UL)
id="main_navigation_current"
ULnone
  • a list
  • to be filled with bulleted items (LI)
class="nav_sub"
H4class="nav_heading"
H1none

large heading with tan background. to be used as the main title bar.

H2none

large blue heading with tan underline

H3none

large blue heading

Validation (top ^)

Every page should be valid CSS and XHTML. There are tools for the browser as well. Most problems that are encountered with the new template are from errors in code. There are many embedded comments in the template's code that should help the developer with the new design which uses web standards.

If there are still questions, please contact web developer webmaster@jlab.org.