|
|
|
 |
| Introduction |
|
May 2007
DAS uses a content management system to produce and maintain the DAS Web site. Templates in the system create a consistent look and feel for all Oregon.gov Web pages.
The following guidelines reinforce these consistencies in the DAS Web site. Please use them to design, develop and maintain all sections of the DAS Web site. 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. Unfortunately, our customers are not as intimately acquainted with us as we’d like them to be. They may not understand our structure, acronyms or terms. It’s important to approach Web site contribution and maintenance with an eye toward simplicity and ease of use.
Contact the DAS Web site Single Point of Contact (SPOC), Raelynn Henson for questions about this guide.
This document is also available in Word.
|
|
|
| Directory Structure |
|
Each minisite within the Oregon.gov directory structure contains nine mandatory directories.
The site developers maintain four of these directories. TeamSite users are not to manipulate the following directories:
- css
- includes
- js
- menu files
The following directories are hard-coded to specific pages or popularity boxes:
- jobs (stores files created in the jobs template)
- news (stores files created in the news template)
- popularity boxes (stores popularity boxes)
Subdirectories are not allowed in the jobs or news directories, but may be added to the popularity boxes directory*.
The following 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 in the images directory. You will notice a subdirectory in the images directory named “rotating images.” Do not remove this directory.
Subdirectories can be saved within the docs and images directories*.
*Instructions to add a subdirectory to any directory:
Hints
- Don’t copy files belonging to other agencies into your directories. Instead, link directly to the file on the agency’s site. Example: PEBB, PERS
- Understand the difference between folders and subdirectories: Use folders in the docs or images directories. Use subdirectories for templated pages.
- Do not duplicate files on your Internet and intranet sites. If a file requires accessibility from both 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, you will notice in the DAS/OP/docs/PDF folder that the PDF files are all named with a document number.
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. TeamSite will override the old file with the updated file if the file name is the same. When overriding an existing file, TeamSite keeps existing metadata, saving the user the task of re-metatagging.
Do not use spaces in file names. Replace spaces with hyphens or underscores, e.g., my_file.shtml
|
|
|
| Layout |
|
Accessibility Issues
DAS designed the Web site to meet accessibility guidelines. Review supporting documents relating to accessibility.
Fonts and Capitalization
The templates determine font style, size and color. To maintain site-wide consistency, do not override fonts with graphic images.
For consistency, capitalize only initial letters in headlines, subheads and link lists.
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 is not necessarily accurate.
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.
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 include:
- Administrative Rules
- Consumer Help
- Contact Us directories (1 and 2)
- Board templates
- Employment
- Forms and Publications
- Freeform templates:
- Use the “free_form_pictures_text” template for shorter pages with minimal body copy. Photo usage 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.
Please refer to the convenient template list found on the intranet.
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-Z
- Site Map
- About Oregon.gov
- Oregon.gov
- File Formats
- Oregon Administrative Rules
- Oregon Revised Statutes
- Privacy Policy
- Web Site Feedback
|
|
|
| Images |
|
Divisions may use two types of images on their pages: common and content.
Common Images. Use common images to enhance the visual appeal of a page.
DAS maintains a directory of common images for use within DAS pages: /DAS/DAS_images.shtml. DAS holds a license or copyright to use these images, and has sized them for consistency. Use only images from this directory as common images.
DAS also maintains a directory of common images for use statewide.
Content Images. Content images present or illustrate specific content on division Web pages. For example, Facilities may use photos of buildings available for lease; Surplus may post photos of merchandise for auction. Each division determines which content images to use on their pages. However, DAS may review, change or remove content images from a division Web page.
Using DAS Images on the Intranet. You may use any of the images mentioned above on the intranet.
Home Page Image Specifications (located on the “index” template of any minisite).
- Banner Image — Do not use
- Small Agency Logo — Do not use
The Standard Popularity Box. Use the 80 x 80 pixel images from the DAS or state images directory.
The Feature Story Popularity Box, Freeform and Agency pages. Use the 174x126 pixel images from the DAS or state images directories.
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 a common or content image to draw attention to the item.
All images must comply with ADA standards and avoid use of excessive bandwidth. Consequently, no animated graphics are allowed on the DAS Web site.
Contact the State Web Information Publisher, (503) 378-5223, if you need assistance with images.
Tips for Using Images and Clipart
You can add visual interest to your Web site easily by using photos, illustrations, clip art, etc. However, their inclusion shouldn’t be haphazard. If you choose to use photos, 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.
Contact the Statewide Web Information Publisher if you have questions about using photos, illustrations or clip art.
|
|
|
| Navigation |
|
Key User Tasks. The key user tasks (KUT) reside in the right hand navigation bar of the Oregon.gov home page. This navigation bar presents subject areas of greatest interest to Oregon citizens. Each has a drop-down menu with links to subordinate topics. Only the State E-governance Board may make changes to the KUT*. Agencies have the option of adding the KUT to their home pages (see Right Navigation Bar below).
Agency Navigation. Using drop-down menus, the Agency Navigation menu presents links to divisions, offices, boards, etc. within an agency. It is located at the top of the left navigation bar. Contact the DAS SPOC to request changes*.
Popularity Boxes. The top-level DAS home page and division home pages include popularity boxes that let visitors directly navigate to important, timely information. In a popularity box, avoid using links that already reside in the left navigation bar. All DAS minisites must include left and right popularity boxes on their home pages.
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 DAS 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). Note: DAS does not allow option three.
Link Usage. Good link text should not be overly general. Do not use "click here" or “go to.” Such statements do not indicate what the user will find by following the link. Do not use the actual URL as the link text. 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 building division Web pages. Visitors should be able to reach information within three clicks.
*Submit changes on the KUT or Agency Navigation menu to the DAS SPOC using the Change Request Form.
|
|
|
| Tables |
|
To keep tables within the DAS Web site 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
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 compliments the colors of the Oregon.gov banner.
Hints: Break large tables into smaller tables. This allows the table to cascade on loading.
|
|
|
| Editorial Style |
|
DAS TeamSite users must use the editorial conventions listed in the DAS 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; Web site; Web page
Use the DAS standard for readability of published documents, including Web pages.
|
|
|
| File Formats |
|
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
Hint: If a pdf is larger than 5mb, break it into smaller sections.
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: PEBB Benefit Booklet (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: User Manual (2.5mb pdf).
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 Web site. Page counters count the number of refreshes, not the number of visits, thus creating unreliable information. View the Oregon.gov Web Trends report (posted on the intranet) for page count information.
|
|
|
| Resources |
|
Follow any of the links below to access intranet resources (intranet use requires log in):
|
|
| |
|
|
