Website Style Guide

Web Guidelines

Use headers

Headers should always be nested and consecutive. Never skip a header level for styling reasons. Avoid excessive nesting.

Use descriptive links

Links should provide information on the associated action or destination. Try to avoid “click here” or “learn more.”

Use plain language

Write short sentences and use familiar words. Avoid jargon and slang. If you need to use an abbreviation or acronym that people may not understand, explain what it means on first reference.

Lists

Make true lists instead of using a paragraph or line breaks. Use lists to present steps, groups, or sets of information. Give context for the list with a brief introduction. Number lists when the order is important, like when you’re describing steps of a process. Don’t use numbers when the list’s order doesn’t matter.

If one of the list items is a complete sentence, use proper punctuation and capitalization on all of the items. If list items are not complete sentences, don’t use punctuation, but do capitalize the first word of each item.

Avoid directional language

Avoid directional instructions and any language that requires the reader to see the layout or design of the page. This is helpful for many reasons, including layout changes on mobile.

Images

Clip art and stock photos are discouraged.
As a rule of thumb, use JPGs for photographs.
Use the GIFs or PNGs for line art and plain color graphs. File size can generally be reduced significantly by reducing the color palette to only the required colors.
Text on images should be avoided if possible. Remember that images might be smaller in some contexts such as mobile devices. This could make the text unreadable to some users.
Photos typically look best when aligned to the right within the body copy.
Use alternative text. Alternative text is the most basic form of image description, and it should be included on all images. The language will depend on the purpose of the image:
- If the image is serving a specific function, describe what’s inside the image in detail. People who don’t see the image should come away with the same information as if they had.
- If you’re sharing a chart or graph, include the data in the alt text so people have all the important information.

Other Considerations

Don’t format with spaces.
Don’t force a line break just for the way it looks.
Underline formatting is only used for hyperlinks. Works of art should be italicized.
Avoid using tables for things other than tabular data if at all possible.
Use table headings to identify the different rows or columns of data.
Page titles should be concise. In general, the name of a menu link should be the page title.
Do not fully justify, right-align, or center large blocks of text.

Writing Conventions

When writing out an email address, website URL, or filename use all lowercase. · Avoid spelling out URLs, but when you need to, leave off the http://www.
Use numerals and am or pm without a space. Use a hyphen between times to indicate a time period.  E.g. 7am-10:30pm
When referring generally to a file extension type, use all uppercase without a period. Add a lowercase s to make plural. E.g. JPG and PDFs
Separate the parts of phone numbers with hyphens. The area code should be in parenthesis. E.g. (555) 555-5555
Don't use all caps except when writing out an acronym.
The words “city," "county," or "town" should not be capitalized unless they are a part of a proper name. E.g. “the City of Columbia” and “the city”
Don't capitalize job titles unless they precede a name. E.g. "Town Manager Jane Doe" and "The town manager updated the website"
Use ampersands (&) in headings and subheadings, but spell out the word "and" in the body copy.
When writing a list, use the serial comma (also known as the Oxford comma). E.g. apples, oranges, and lemons
Use the percent symbol (%) when referring to a specific percentage figure.
Use "site map" instead of "sitemap."

Sources

Some of these guidelines were taken with permission from the MailChimp Style Guide.

Search form