Text Size:   A+ A- A   •   Text Only
Find     
Site Image
State Web Style Guide (TeamSite)
Introduction (March 2010)
 
The state uses a content management system to produce and maintain Oregon.gov, the state website. TeamSite templates help to create a consistent look and feel for all Oregon.gov Web pages.
 
What is TeamSite?
                                        
TeamSite is the Content Management System chosen as the tool for the migration and maintenance of the State of Oregon Oregon.gov website.
 
Templates supply all the HTML code and graphics required to create a Web page. Tools and automated features enable content development allowing agencies to manage their own content.
 
The following guidelines reinforce the importance of consistency in the state website. Please use them to design, develop and maintain all sections of your agency's Web pages. The goal of this style guide is to ensure consistent quality and clarity for Web visitors, and to maintain accurate and timely information.
 
As you manage Web content, keep in mind an important principle: Think like your customer. Be clear about structure, acronyms or terms. It’s important to approach website contribution with an eye toward simplicity and ease of use.
 
Contact the statewide web information publisher, Linda Morrell, at linda.morrell@state.or.us for questions about this guide.

Directory structure
Each minisite within the Oregon.gov directory structure of TeamSite contains nine mandatory directories.

  • css
  • docs
  • images
  • includes
  • jobs
  • js
  • menu files
  • news
  • popularity boxes
 
Site developers maintain these four directories. Please do not mainpulate them:
  • css
  • includes
  • js
  • menufiles
 
These three directories are hard-coded to specific pages or popularity boxes:
  • jobs (stores files created in the jobs template)
    • Do not add sub-directories to the jobs directory.
  • news (stores files created in the news template)
    • Do not add sub-directories to the news directory.
  • popularity boxes (stores popularity boxes)
    • Users may add sub-directories to the popularity boxes directory. (Link requires login.)

Important Note
 
Understand the difference between folders and subdirectories: 
  • To organize templated pages (i.e., .shtml pages), use "New Subdirectories."
    • This will create sub-directories in the directory and in each free form template data directory.
  • To organize non-templated pages (i.e., pdfs, docs, jpgs, etc.), use "New Folder."
    • This will create the folder only within the directory.
 
 
These directories are for the storage of documents and images:
  • docs
    • Save all documents (non-shtml files such as PDF, Word, Excel) within the docs directory.
  • images
    • save all images (.gif, .jpg, .tiff) in the images directory.
    • You will notice a subdirectory in the images directory named “rotating images.” Do not remove this directory.

Hints
  • Do not copy files belonging to other agencies into your directories. Instead, link directly to the file on the agency’s site.
  • Do not duplicate files on your Internet and intranet sites. If a file requires accessibility from both the Internet and intranet, post it on the Internet and link to it from the intranet.
 
 
 
File Naming Convention
 
Create a file naming convention and stick to it. For example, if you start naming a group of files "0001_agency," don't change midstream to "agency_0001."
 
For documents or Web pages that you will update over time, avoid using a date in the file name as this will change when the file is updated.
 
When updating an existing file or document, keep the file name exactly the same to avoid breaking existing links. The system will override the old file with the updated file if the file name is the same. When overriding an existing file, the system keeps existing metadata, saving the user the task of re-metatagging.
 
Avoid using blank spaces in file names. Replace blank spaces with hyphens or underscores, e.g., my_file.shtml

Accessibility Issues (ADA)
All Oregon.gov websites are designed to meet accessibility guidelines. (Review supporting documents relating to accessibility. For more information, review the Section 508 Web Site Accessibility standards.)
 
A Few "Quick Tips"
  1. Images: Use the alt tag to describe each image.
  2. Multimedia: Provide captioning and transcripts of audio and descriptions of video.
  3. Hypertext links: Use text that makes sense when read out of context. For example, avoid "click here." Instead, use "Click here for information about [your topic]."
  4. Page organization: Use headings, lists and consistent structure.
  5. Tables: Make line-by-line reading sensible. Summarize.
  6. Check your work: Validate. Use tools, checklists and guidelines at http://www.w3.org/.

Layout
Color, Contrast, Capitalization and More
 
(Some statements in this section are taken from "The Non-Designer's Web Book" by Robin Williams and John Tollett -- copyright 2000.)
 
Alignment. Alignment simply means that items on the page are lined up with each other. Lack of alignment is the single most prevalent problem on Web pages. How do you decide if you should use left or right alignment? This is the rule to follow:
  • Choose one alignment and use it on the entire page.
Capitalization. For consistency, capitalize only initial letters in headlines, subheads and link lists.
 
Color. Do not overdo the use of color or choose background colors that make the text difficult for your viewer to read. Stick to a limited color palette, or color scheme, that is appealing and adds a feeling of sophistication and organization. Ultimately, the colors you choose should create an overall feeling for the site. Do not use neon bright colors.
  • RGB. RGB stands for Red, Green and Blue. Computer monitors all create their images on the screen by emitting red, green, and blue light. In RGB, red mixed with green makes yellow. Every image you create for a Web page should be saved in the RGB mode.
  • CMYK. CMYK stands for Cyan (a blue), Magenta (the closest thing to red), Yellow, and BlacK. This color model is used when printing in full color. In CMYK, red mixed with green makes brown. Do not save images in CMYK for the Web.
Contrast. Contrast is what draws your viewer's eye into the page. Contrasting elements guide your eyes around the page, create a hierarchy of information, and enable you to skim through the vast array of information and pick out what you need. Different colors, graphic signposts, or  spatial arrangements (good use of white space) all provide contrast.
 
Links are a form of contrast by virtue of their color, their underline, and their interruptive status.


 
Hint
 
To be effective, contrast must be strong. If two elements, such as type, lines, graphics, color, texture, etc., are not the same, make them very different -- don't make them almost the same!
 
 
 
 
 
 
 
 
 
Fonts. The TeamSite templates determine font style, size and color. To maintain consistency, do not override fonts with graphic images.
  • Serif vs. Sans Serif. In printed pages that are text heavy, a clean serif face is the most readable. However, on the computer monitor, some sans serif faces are more readable because the letters have to fit into the pixels on the screen, and the missing serifs make cleaner letterforms.
    • Times New Roman is an example of a serif font.
    • Arial is an example of a sans serif font.

 
 
 
 
 
When creating text in a word processor, for use on the Web, follow these guidelines.
  • Font types.
    • Restrict font types to the following:
      • Sans Serif:  Arial, Verdana, Helvetica
      • Serif: Times, Times New Roman, Georgia
  • Font sizes.
    • Restrict font sizes to the following:
      • Page titles: 16 point, bold
      • Section headers: 12 point, bold
      • Sub-section headers: 11 point, bold
      • Body text: 11 point
Page Length. Be aware of the length of your page. Text heavy pages where the viewer must scroll to continue reading will cause them to lose interest. Do your best to keep your pages short and easy to read. If they must be long, insert images to enhance the text and use templates with bookmarks at the top to help your reader navigate through the page.
 
Paragraph Spacing. Watch paragraph spacing when creating content within the body of a template (in the Visual Format Editor). Make sure each paragraph is divided with a line space (paragraph break) for readability. Be sure to preview the page. The way the text appears in the Visual Format Editor (VFE) is not necessarily accurate.
 
Spell Check. Use your spellchecker! Both bad spelling and bad grammar can destroy the professional effect of your website just as easily as bad design.
 
Underlining. Avoid underlining text; underlining denotes a link.

Window Usage
  • When linking to a page or document within Oregon.gov, open the new page in the same browser window.
  • When linking to a page or document outside of Oregon.gov, open the new page in a new browser window.
 
 
          Hyperlink pop-up box displays "Target Frame." Since the "Link" is an Oregon.gov
          Web page, the target is "Same Window."

Template Usage
Carefully evaluate templates before creating a new page. If possible, when creating a new page, use a template designed specifically for the intended purpose.
  • Examples of "Agency Pages" include:
    • Administrative Rules
    • Consumer Help
    • Agency Contact Us directories (1 and 2)
    • Board templates (3)
    • Employment
    • Forms
    • Publications
  • Freeform templates:
    • Use the “free_form_pictures_text” template for shorter pages with minimal body copy. Using images is optional.
    • Use the “free_form_linked_section” or “free_form_linked_section2” template for pages with a large body of content divided by subheads. The template creates anchor links at the top of the page based on the subtitles you generate. Do not use this template if you have less than two subhead titles. Please see example.
    • Use the “free_form_pictures_text_banner” template when the content calls for a right navigation bar (“banner”). Please see example.
For a more detailed listing of the TeamSite templates, refer to the template list (requires login) found on the intranet.

Images
DAS maintains a directory on the internet of images for statewide use.
 
DAS users only: DAS reserves the right to review, change or remove images from a department's Web page.
 
Home Page Image Specifications (located on the “index” template of any minisite).
  • Banner Image
    • DAS users: Do not use.
    • Agencies: DAS recommends that you do not use
  • Small Agency Logo
    • DAS users: Do not use.
    • Agencies: DAS recommends that you do not use.
The Standard Popularity Box. 
  • Use the 80x80 pixel images.
The Feature Story Popularity Box, Freeform and Agency pages. 
  • Use the 174x126 pixel images.
Graphic Icons. 
 
Do not use graphic icons, such as “new” or “revised.” To highlight a particular item, you may:
  • Use text to indicate timeliness.
  • Elevate the information to one of your agency’s popularity boxes.
  • Add an image to draw attention to the item.
All images must comply with Americans with Disabilities Act (ADA) standards (see "Accessibility" above).
 
Tips for Using Images and Clipart.
 
You can add visual interest to your website by using photos, illustrations, clip art, etc.  However, their inclusion shouldn’t be haphazard. If you choose to use illustrations or clip art, please forward the items to the State Web Information Publisher for approval.
                                             
The following tips can help you avoid making simple mistakes.                             
  • Be sure that the image illustrates a point you’re trying to convey, enhances the overall look of your site and serves a specific purpose.
  • Consider providing a few clues, such as captions, labels or descriptive titles to connect the image to your text.
  • Use appropriately sized images. Whether too small or too large, an incorrectly sized image can make your page look unbalanced and may detract from its overall effectiveness.
  • Don’t include too many images. This can make your site look cluttered and unorganized. Try to include only those images that convey key pieces of information or serve a specific purpose.
  • Because so many images are easily accessible on the Internet, you may be tempted to use any image you see. Most are copyright protected. You need to obtain permission before using them.
  • When creating graphics for the Web, reduce the pixels per inch to 72 ppi -- your files will be much smaller and the lower image resolution will not affect how it displays on the screen.
  • GIFs, JPGs and TIFFs
    • GIFs - These are best used for images with large areas of solid, flat color, such as simple illustrations, logos, text as graphics, etc.
    • JPGs - These are best used for photographs, watercolors, pencil or charcoal illustrations. If there are subtle changes in colors, as happens in photos or certain illustrations, it's usually best to use JPGs.
    • TIFFs - Always save scanned images in the TIFF file format. The TIFF format was invented for scanning.
Contact the Statewide Web Information Publisher if you need an image resized or have questions about using photos, illustrations or clip art.

Modification Date
The Modification Date populates on every TeamSite page except the index.shtml page.
 

The Footer Section
A footer resides at the bottom of all Oregon.gov Web pages. The footer is maintained by the DAS E-government Program. It contains the following links:
  • Text Only
  • State Directories
  • Agencies A to Z
  • Site Map
  • About Oregon.gov
  • Oregon.gov
  • File Formats
  • Oregon Administrative Rules
  • Oregon Revised Statutes
  • Privacy Policy
  • Website Feedback

Navigation
Organize your content in an efficient and intuitive manner so it will be easy for users to find what they are looking for, quickly!  When people navigate through websites, they expect the same structure of the categories when they go to the next page.  If you have several categories, consider placing them in alphabetical order or put them in order of user importance, with frequently used links on top. The general rule for links is that users should not have to click more than three times to obtain information. 

Tips for navigation labels:
  • Remember the audience(s)
  • Keep it simple ("Jobs" instead of "Career Opportunities")
  • Avoid jargon and acronyms - spell it out!
  • Use "trigger words"
  • Avoid getting cute, just be clear
  • Follow conventions
  • It should be "obvious"
 
Key User Tasks. The key user tasks (KUTs) reside in the right hand navigation bar of the Oregon.gov home page. This navigation bar includes subject areas of greatest interest to Oregon citizens. Each has a drop-down menu with links to subordinate topics. The State E-governance Board authorizes changes to the KUTs*. Agencies have the option of adding the KUTs to their home pages (see Right Navigation Bar below).
 
           Key User Tasks (KUTs) in the right navigation bar on Oregon.gov

 
Agency Navigation (Government Navigation Bar or GNB). Using drop-down menus, the Agency Navigation menu provides links to divisions, offices, boards, etc., within an agency. It is located at the top of the left navigation bar on agency level pages. Agencies can customize their GNB. For information on how to do this, click here. (Requires login.)
 
          Agency Navigation (GNB) is in the left navigation bar.

 
Popularity Boxes. The top-level agency home page (click here for an example of a top-level agency home page) and division home pages or minisites (click here for an example of a minisite) include popularity boxes that let visitors navigate directly to important, timely information. In a popularity box, avoid using links that already reside in the left navigation bar. All agency minisites must include left and right popularity boxes on their home pages.
 
          Left and right popularity (pop) boxes on a minisite

 
Left Navigation Bar. The left navigation bar helps visitors navigate through a division’s pages. The left navigation bar includes mandatory, custom and preset links.
 
Keep the left navigation bar simple, predominantly using alpha or priority order. Avoid frequent changes to links on the left navigation bar. Consistency helps returning visitors navigate confidently.
 
If your division site includes minisites, you must have a custom link in the left navigation bar to link to minisites. Likewise, minisites must have a link to the division’s home page on the left navigation bar.
 
Right Navigation Bar. The right navigation bar provides an additional means to promote important links. The right navigation bar is mandatory on all minisite home pages. Three options exist:
 
(1) minisite maintains its own right navigation bar;
(2) minisite links to the right navigation bar of its parent agency; or
(3) minisite links to the KUT (the Oregon.gov right navigation bar)*.
 
*Some agencies do not allow option three.
 
Link Usage. Good link text should not be overly general. Make them as descriptive as possible, especially for accessibility issues (see "Accessibility" above). Try to imagine a talking browser (as used by blind people) going through your page reading out only the links. If the result would make sense, you've got it right. The same applies to Alt Tags. Make the text descriptive.
  • Do not use language like "click here" or “go to” or "learn more" by themselves. Such statements do not indicate what the user will find by following the link. Instead, write "click here for more information on [your topic]."
  • Do not use the actual URL as the link text. Search engines search bold text and hyperlinks for key words. When you use words like "click here" or "more," the search engine is not reporting back anything useful to the user. Instead, create link text that indicates the nature of the link target, as in "Board Meetings" or "2006 Annual Report (pdf)."
  • Avoid acronyms whenever possible. Instead, use a descriptive, customer-friendly phrase. 
  • Avoid linking from the Internet to a page or document on the intranet. For the occasions where this is necessary, add “Statewide Intranet Only” or “Requires Login.”

Hint
 
Combine information to avoid building layers of pages and extra links when creating division Web pages. Visitors should be able to reach information within three clicks.
 
 
 
 
 
 
 
*Submit changes on the KUTs menu to your agency SPOC using the Change Request Form. (both links require login)

Tables
To keep tables within your website consistent, set table borders as follows:
 
In the “Table” tool under “Table Properties,” set the “Borders” to:
  • Border Size = 1
  • Cell padding = 5
  • Cell Spacing = 0
 
          "Table" / "Table Properties"
 
 
         Set the "Borders"
 

When a table background color is needed, use the lightest possible version of the color. This creates visual interest without diminishing readability. Generally, if the table background color and the Oregon.gov banner are visible on the same screen, use a color that blends with or complements the colors of the Oregon.gov banner.
 

 
                       Two examples of tables. Example 1 is a poor example of color usage.
                       Example 2 is a better example of color usage.
 

Hint
 
Break large tables into smaller tables. This allows the table to cascade on loading.
 

Editorial Style
DAS TeamSite Users Only:
 
Please follow the editorial conventions listed in the State Editorial Style Sheet. When you encounter editorial issues not covered by the style sheet, please refer to The Associated Press Stylebook, Merriam-Webster Online, or contact DAS Public Affairs.
 
Use the following forms for Internet terms:
  • e-mail, e-government, e-commerce and other compounds in which e stands for electronic. Uppercase E only in titles or at the beginning of a sentence.
  • home page
  • intranet
  • Internet, the Net
  • log in; log on (v.)
  • login; logon (n.)
  • online
  • user ID
  • World Wide Web; the Web; website; Web page
Refer to the standard for readability of published documents, including Web pages.
 
All other Agency TeamSite Users:
 
Refer to your agency's communications department for editorial style guidelines.

RSS Feeds and File Formats
RSS Feeds
What is an RSS Feed?
 
RSS (Really Simple Syndication) is an easy way to keep automatically updated on the news of the day. Instead of continually checking the various news sites for the latest article or feature story, RSS can notify you every time something new is added.
 
RSS feeds, when viewed through a news reader, provide a list of specfic updates. Each item within the list will include a link to information and may include a headline and a brief summary.
 
How to Use RSS
 
To use RSS, you will need an RSS news reader to link to and display RSS feeds. RSS news readers allow you to view many different RSS feeds (from many different websites) in one browser window and, by automatically retrieving updates, stay current with new content soon after it is published.
 
There are a range of different news readers available. If you do not already have one, try using your favorite "search" website to find links to the most popular products, many of which are free to install, or visit about.com for a list of news readers categorized by operating system.
 
RSS and podcast image icons are available at the state image page in the 80x80 section under "Web."
 
View what other agencies are doing
  • Department of Revenue
          http://www.oregon.gov/DOR/NEWS/releases.shtml
  • Department of Employment
          http://www.oregon.gov/EMPLOY/COMM/index.shtml 
         Click on "RSS Feed" in the left navigation bar.
 
RSS readers
More information
 
Wikipedia for RSS 
BBC News RSS Help 
RSS in Government

Portable Document Files (pdf)
Create a portable document file (pdf) only if:
  • You need to maintain the document’s format
  • The document is longer than three pages
  • The user will probably want to print the document

Hints
  • If a pdf is larger than 5mb, break it into smaller sections.
  • If you have Adobe Acrobat Professional (not Reader), you can convert a large .pdf to a lower resolution, follow these instructions:
    • Open the .pdf
    • Click File > Print
    • In the "Name" field, choose Adobe.pdf
    • Click the "Advanced" button at the bottom of the pop-up box
    • In the "Transparency Flattener Preset," choose "Low Resolution"
    • Click OK
    • Save it
 
 
 
 
 
 

Specifying File Types
When you include a link from a Web page to a non-shtml file, add the file extension (pdf, xls, doc, ppt, etc.) in parenthesis in the link text. This helps visitors know which plug-in or software will open the file.
Example: What the ARRA means for Oregon (pdf) 

Note: If a file is large, it may take some time to open. In this case, include the file size for the benefit of the user.
  • Example: Accomplishments of DAS (ppt, 21.8 MB, approx. length 14 minutes) 

File Formats
Do not use “how to get Acrobat” statements in your page content. A link to Adobe is provided in the footer of each Oregon.gov Web page.
 
A file format Web page provides information on downloading the required plug-in or software to access alternative file formats. A link to the file format page appears on each page in the footer section (http://oregon.gov/DAS/fileformats.shtml).

Additional Information
Page Counters
DAS does not permit page counters on its website and we request agencies refrain from doing this, as well. Page counters count the number of refreshes, not the number of visits, thus creating unreliable information.
 
Go to Google Analytics for page count information. If you have questions about setting up a Google Analytics account for your website, contact the e-Government helpdesk.

Resources
 Follow any of the links below to access intranet resources (requires login):

 
GovSpace is Oregon’s online enterprise collaboration solution.
This is a place where state agencies, employees and their partners work together to create and review documents, hold online discussions, post blogs, track projects, and much more. This online tool helps reduce e-mails and increase productivity in meetings by providing a central location for individuals to collaborate.
 
If you're not already registered as a user, go to GovSpace and click on "Create Account."
 

Need Help?
For TeamSite technical support, e-mail the E-Government help desk or call (503) 378-2126.

Contact Us!
 
If you would like to propose changes or additions to the State Web Style Guide, please send an e-mail to the State Web Information Publisher, Linda Morrell or call (503) 378-5223.