Web Style Guide
The Style of Your Content
Want to know more about 'visually' styling content?
Visit the web team's web-style library for a complete collection of the styles available.
- Use simple, direct sentences.
- Provide factual and content-rich information. Avoid anything that can be perceived as advertising copy or fluff.
- Start a web page with the conclusion first, as well as a short summary of the remaining content, instead of leading up to the main point (as is typical in a paragraph).
- Write in the active voice. For example, "The ability to jump-start their careers with an internship" becomes "Jumpstart your career with an internship."
- Update your site's content often.
Use An Appropriate Tone
- Refer to the college in the first person plural (when pronouns are used at all), such as "We know that nobody learns exactly the same way and there's no place to learn exactly like Evergreen."
- Refer to the reader in the second person, as in "...we think you'll see that our difference not only sets us apart..."
- Write for your audience - not for yourself.
- If your content needs instructions or you have to explain it, there's room for improvement. The length of your instructional text is almost always inversely proportionate to the usability of your product.
Divide Text Into Small, Easy-to-Read Chunks
- Use section titles, headings, and sub-heads (h2, h3, h4, h5). They are signposts that help readers find content they are interested in and also help develop semantic structure for screen readers and search engines. The heading 1 tag has been used for the Page Title so do not use h1 in the content area as it should only be used once per page.
- Present lists as bulleted items, not as prose. Avoid lists of more than seven items (if you have long lists think of ways to break them up logically).
- Use clear section titles and liberally include headings and sub-headings where they help users to quickly find information.
- Avoid ambiguity. Avoid incomplete teasers. Give your readers the information as soon as possible and as succinctly as possible.
- Be sure to spell check your content.
- "Website" is one word.
- Use American spelling throughout.
Abbreviations and Acronyms
- Avoid abbreviations, even for commonly abbreviated words. Abbreviations usually don't make any sense when they are read aloud by screen reading software (used by people with visual disabilities).
- Spell out acronyms the first time they are used on a page - A Very Long Title (AVLT.)
- Refer to the college as The Evergreen State College or Evergreen, not TESC (It's taken: Thomas Edison State College)
Structuring Your Document
- An effective HTML page is one that is structured. Dave Raggett (of the World Wide Web Consortium) has posted some tips for Getting Started with HTML.
- Content on Evergreen web pages is aligned to the left (by default, including headers, paragraphs and images).
- Use bullets or blockquotes, never spaces, to indent text.
Do's and Don'ts
- Do use bold to highlight words as phrases when appropriate.
- Do not use underlines in file or folder names.
- Do not use all caps. This is the online equivalent of SHOUTING.
- Do not underline. Underlining words suggests a hyperlink.
- Do not rely on variations of font size or color. Font size and color are all defined by the college's core style sheet.
- Do not combine text styles (ie: do not use italic plus bold, or, heading classes combined with bold).
Dealing With Links
- Link in context. Avoid self-referential terms like "Click here " and "follow this link. "
- An example of linking in context is: "We have put together a web development checklist to help you develop an effective web presence."
- Email links should use the email script. For example, an email link to Mr. Example's email at firstname.lastname@example.org, that is sent from the Web Resources page, would be written out like this:
<a xhref="http://www.evergreen.edu/scripts/contact.php?sm=example&sub=Email from Web Resources Site&title=Contact Mr. Example">
If the email is not an @evergreen.edu address, you must include the entire address.
- The name of the page file, page title, left nav link name, and page heading should be consistent when possible. (i.e. studentsupport.htm, Student Support Services, Student Support Services)
- Do not use "return to top" or "top" links.
- Whenever a link takes the visitor to a Word Document or PDF file, make that clear in the link name. For example: 10-Year Capital Plan (Word) or IT Strategic Plan (PDF). If there's both, it should look like (Word | PDF).
Content Delivery Format
- When submitting content to the Web Team, please send the content in Word or plain text.
Use of Images
- Avoid using complex graphics and photo collages that can take a long amount of time to download for visitors with slower connections (30kb+ for a photo is pretty big)
- Multimedia effects should only be used when they truly add to the reader's understanding of the information.
- Resize images in an image editing program (or forward them to the Web Team) to decrease their file size.
- Images can be aligned left or right (using the style or class="right" or "left").
- Images should not have borders, frames or background colors.
- All images must have a relevant and descriptive alt tag.
A Guide to Using "block" Elements in Your Site
Your Site Navigation 'block' in the Content Management System
The majority of Evergreen's web templates use a left-side navigation block as the standard. Your navigation block should be categorized, simple and intuitive. Appropriate treatment of the navigation block makes the user experience consistent and predictable, and helps avoid technical issues associated with customized elements.
The lists items within sub-sections or categories of the navigation block must be displayed in alphabetical order. We allow an exception for one item that, for a specific reason, needs to be highlighted at the top of the first list. Consult the web team for more information before implementing this yourself.
No other content (images, graphics or icons) may be used in your navigation block without consulting first with the Web Manager or Information and Media Designer.
Contact, Related and Hours 'blocks' in the Content Management System
The Related block is for links that are relevant to your site, but not contained within it — generally (and preferably), links to other sites at Evergreen. If you're looking for a place to put additional links to content contained within your site, it may be an indication that you should re-think your site structure and / or main navigation. Ask us for help any time.
The Contact block should contain location and contact information for primary ways to connect with the organization your site represents. If you find that your contact block is getting very lengthy or you have a multiple contacts in your work group, devote a page in your site to more detailed and expanded contact information, and link to it from the Contact block. Staff in the Web Team would be glad to help you with this.
Use this block for the hours your offices are open, or when you can be contacted. If your hours are complex or lengthy or represent several offices, devote a page in your site to more detailed and expanded Hours information, and link to it from the Hours block. We'd be glad to help you organize this.
Although the visual styling shown here doesn't apply to current pages in the Content Management System, the examples below represent ways to organize your information, and are our recommended standards for the consistent display of content. Note that we do not separate 'am' and 'pm' with periods.
Location: Library Building, Room 2153
Phone: (360) 867-6312
|Prime Time Advising (A-Dorm, 205)
Sunday – Wednesday: 6 pm - 9 pm
Monday – Wednesday 6 pm - 9 pm