Web Style Guidelines

In this guide:

Important tips for writing for the web

People don't read for pleasure on the website. They are looking for a specific piece of information, and they don't want extraneous junk to get in their way.

People scan, rather than reading every word, so they need short paragraphs and good headings. Headings are also good for Search Engine Optimization (SEO) because the search engines scan pages for content with an emphasis on the headings.

Formal text is harder to read, so it's important to choose an eighth grade reading age and friendly conversational tone. Visitors look for information-rich content and lose interest quickly, so put the key facts up front.

People respect authoritative sources, so it's good to link out to other web content when applicable. People look for supporting evidence, which means providing detailed information, testimonials and useful images that help them make a decision.

Readers are wary of out of date content, so it's important to actively manage the information you publish.

People scan - they don't read

Website audiences typically only read 20 percent of the content on an average page. They are skimming for information they think is relevant to the problem they're trying to solve. Web readers skim across most text and can miss information if it isn't apparent.

Start each paragraph with the key idea, using words that will tell the story for the rest of the paragraph. These words are the ones that people's eyes rest on when they're skimming, so they should really indicate what the rest of that paragraph is about.

If your paragraphs run on too long, or contain more than one concept, then readers might completely miss the subsequent ideas that you've buried in the paragraph. The best way to avoid this problem is to use short words, short sentences and short paragraphs.

Use the simplest, cleanest and shortest way to get your message across. Often the best way to accomplish this is to convert part of your content into a list. Lists are easier to scan, are written telegraphically, and break up text and help people to quickly find the relevant information that is easy to digest.

Bulleted lists are used when the items have no set order. Use numbered lists only when the items have a determined order, like steps to enroll in classes.

Remove words that don't add to the story. Writers often use 10 words where one would do, or use long, complicated words where a short, simple one would be better. When you remove all the extra text, readers are much more likely to find the key concepts.

Remember, you're writing to get information across to our students or prospective students as quickly and painlessly as possible by making use of their natural scanning behavior.

For an example of how a DVC webpage should be written and formatted, see sample web styles.

return to top


Overall page look

  • Some graphics are updated by marketing/graphic staff
  • Marketing office will provide image support as requested
  • Use frequent headings to break up long blocks of text whenever possible using the "heading" pull- down menu. (See headings )
  • Do not use bold text to create a heading
  • It is best practice for all the information about a single topic is contained on a single page
  • A jump menu to a new heading on the same page is preferred to opening to a new page in a single topic. (Also easier for reader to print the page for future )

return to top



Headings

  • Title case is used for page titles and page navigation only - Use Heading 2 for the page title
  • Bolding text is for emphasis only, not for headings
  • Use frequent sub-headings to break up long blocks of text using the "heading" pull-down (ADA and SEO issue)
  • The first sub-heading should always be a Heading 3 followed by Heading 4 if it is within the same topic
  • If sub-headings are not properly nested, it is an ADA violation
  • Use sentence case for all headings except page titles
  • Never use ALL CAPS for headings
  • Do not use colons after headings (unless otherwise required)

return to top



Text color

  • All body text is black
  • Page title and sub-headings are currently set, and can only be globally changed in the style sheets
  • NO other color may be used for type unless there is an emergency message, in which case red is used. (Changes in dates, hours and phone numbers are not considered and emergency)
  • Active links are in green

return to top



Capitalization

  • Proper names and places are capitalized
  • DVC departments, programs, areas, and divisions are capitalized
  • In most cases, the word "Office" is part of the department name and is capitalized
  • Title Case is used on page titles and page side navigation only
  • All other headings are treated as sub-headings and are sentence case
  • When in doubt use lowercase (or contact the marketing office)
  • Refer to the DVC Print Style Guide for additional capitalization questions

return to top



Page layout

  • All content should be flush left including headings (no centering)
  • Centering is allowed only in tables, for column headings.
  • Skip a line between paragraphs (press enter key twice)
  • Do not indent paragraphs
  • Tables should be used only for tabular data, not to control page layout
  • Office hours, list of services, etc. is considered tabular data, and may be contained in a table
  • Okay to center tabular data

return to top



Symbols

  • Do not use "&" - spell out "and"
  • Do not use "%" - spell out "percent"
  • Do not use "@" except in email addresses, otherwise “at”

return to top



Telephone

  • Spell out “Telephone”
  • Do not use “phone”
  • Do not use “Tel.”
  • For telephone numbers, use hyphens, not parentheses 925-685-1230
  • Extensions are: ext. 24253 (lower case abbreviation, no # 's)

return to top



Days, dates and months

  • Do not abbreviate the days of the week
  • Do not abbreviate the month unless it is used in a date
      • The party was in January (not abbreviated)
      • Jan. 1, 2010 (abbreviation okay)
  • The months March, April, May, June and July are never abbreviated
  • Do not use “st”, “nd”, or “rd” following the day in a date
    • Use Jan. 1, Feb. 2, March 3
  • Indicate a series of years with the full first year and last two numerals of the second year
    • 2010-11 academic year

return to top



Time

  • Do not use periods for am and pm
  • Leave a space between the numeral and am or pm
  • Do not use colons or 00's when the time is on the hour
      • 11 am -1:30 pm
      • 9-10 am
      • 9-10:30 pm
  • No not use the word "noon"
    • 11 am -12 pm (not 11 pm - noon)
    • 12-3 pm (not noon-3 pm)

return to top



Emphasis

  • To emphasize a word or phrase:
    • bold is preferred
    • italics is acceptable
    • underlining, highlighting or CAPS is not acceptable
  • Italics are used for emphasis or titles of published works, not for headings
  • CAPS are used for acronyms (EOPS), and not for emphasis
  • Do not use colored type for emphasis

return to top



Web links

  • Links to external websites (outside the DVC site) should open in a new window (target= New Window)
  • Associated sites, including Insite, Portal, sister colleges, and district office, are considered external websites
  • Links to a pdf always open in a new window
  • All links within the DVC website open in the same window (except pdfs)
  • Include links (within the DVC website) to content referenced on your pages as often as possible to make it easier for the reader
  • Links outside the DVC website should be used only when appropriate and must be maintained
  • The text used for a link must be descriptive of where the link refers. Never use "click here" for a link.(ADA and SEO)
  • Links should be created purposefully. The text for the link should be understandable within the context of the topic. Never use 'Click here', 'Learn more', or 'More' as these are ambiguous phrases.
    • An example of a bad link is: For more information about our products, click here.
    • A better link would be: Read information about our products.

return to top



Content directories

  • All new content areas (directory folders) must contain at least two pages.

return to top



Tables

  • Tables should only be used to organize tabular data on a webpage
  • Tables are not used to control the layout of the page

return to top



Images

  • Banner images are created by the graphic designer. Please contact them for updates or requests.
  • Image placement depends on the text. When placing images of people the general rule is to have the subject looking towards the center of the page or area. You want to draw the eye in towards the text not what is on the photo
  • Screen readers cannot read mages, so images cannot contain text  unless that text is clearly described in the image description. A flier image cannot be used in the place of the text. All flier content needs to be repeated below the flier.
  • Add a left or right margin to the spacing around the image. 10px is a good margin. This is added under the 'Appearance' tab in the 'Style' box when inserting an image
    • Use 'margin-left: 10px;' to add space on the left side of the
    • Use 'margin-right: 10px;' to add space on the right side of the
  • Please ask for assistance/training before inserting any images

return to top



Filenames (created by the web admin)

  • Filenames should never contain spaces. Please uses dashes (-) or underscores (_) instead
  • Filenames should be descriptive but brief
  • Consider readability when requesting a new page or directory
  • Filenames, including PDF filenames, may not contain spaces
  • Filenames are all lowercase and use hyphens in the place of spaces

return to top


 

PDFs

PDF documents posted on the web must include a "last updated" label with date in the footer

return to top


 

Special ADA consideration

  • The link words must describe where the web visitor will go when they click that link
  • The same link text cannot be used for multiple links on the same page but go to different destinations  
  • Links with the same descriptive words, must always go to the same place.
  • The following are examples of typical non-descriptive and non-distinguishable links:
    • Read more…
    • Click here
    • For more information…
  • Screen readers cannot read mages, so images cannot contain text  unless that text is clearly described in the image description. A flier image cannot be used in the place of the text. All flier content needs to be repeated below the flier.

return to top


 

Miscellaneous 

This guide is an ongoing work in progress and is updated as questions arise and decisions are made.

For questions, clarifications, or style guide additions, please contact the Marketing Office at: DVCWebWorkGroup@dvc.edu

If a page is checked out or in workflow for more than 48 hours (two days), the Marketing Office will check in the page if needed. If the page was in workflow, the Marketing Office will publish and notify the approver.