Web Team: CAES Web Style Guide
Web Dos and Dont's
Basic tips and a few best practices for good Web design.
Graphics
- Do use ALT tags on all images.
ALT tags are a must for 508 compliance. And, quite a few people disable the automatic load of pictures in their browser. Don't blame them, some images take a lifetime to load. ALT tags should be descriptive. (i.e. for a photograph, don’t just use “Photo” – instead use “Photo: 4-H children enjoy a field trip to pick strawberries in Tift County”). In addition, if an image contains text, the ALT tag must include an equivalent of the text. (i.e. the ALT tag for an image of the letters UGA would be ALT="UGA") - Do choose colors carefully.
You have access to 16 million Web safe colors. Be selective - don't try to use them all. Too many colors distract from what you're trying to say. When you are selecting colors, choose colors that complement each other. Draw inspiration from nature. - Do limit the number of images.
Too many images slows down your site (especially for Dial-up users!). A site that loads too slowly will be quickly passed over by the user. - Do use photos or graphics that are relevant.
Images should support the content of your website. Irrelevant images distract from your content and may leave your visitor wondering about the relevance and/or reliability of the information on your site.
Accessiblity, Usability and Navigation
- Do use a consistent look and feel.
Your site should stand out as a whole. Use the same look and feel for all the pages in your site (header, navigational elements, color, fonts). This way your visitors have a sense of recognition when they visit any page within your site. - Do supply a link to the home page on every page.
This will be accomplished if you include standard navigation on every page within your site. Note about navigation: Standard design includes a navigation bar horizontally across the top of the page (under the header) or vertically on the left side of the page. You should also include text navigation at the bottom of all your pages – this eliminates the users need to scroll back to the top of the page and it also helps to make your pages 508 compliant. Exception to this rule: You do not need a link to the home page on the HOME page! - Do identify yourself.
Your website header and footer MUST include your county name as well as: The University of Georgia (http://www.uga.edu)
College of Agricultural and Environmental Sciences (http://www.caes.uga.edu)
and Cooperative Extension Service (http://www.ces.uga.edu) - Do make your site 508 compliant.
508 compliance has recently been mandated by the University of Georgia. Therefore, all sites produced by our college must meet University guidelines. Review our list of resources on 508 Compliance, Accessibility & Usability for Web Site Design. - Do use ALT tags on all images.
ALT tags are a must for 508 compliance. And, quite a few people disable the automatic load of pictures in their browser. Don't blame them, some images take a lifetime to load. ALT tags should be descriptive. (i.e. for a photograph, don’t just use “Photo” – instead use “Photo: 4-H children enjoy a field trip to pick strawberries in Tift County”). In addition, if an image contains text, the ALT tag must include an equivalent of the text. (i.e. the ALT tag for an image of the letters UGA would be ALT="UGA") - Do take advantage of existing UGA/CAES websites.
Link within content or create a sidebar of related links. Don’t use phrases like “click here” because they distract from the content and fail to provide a meaningful context for people using alternative browsers. Try to write your text in such a way that a link is a natural part of the sentence. - Do check your links.
Check your links frequently. Don't just check them to avoid 404 (page not found) errors. You might find that an external link still works but that its content has changed. - Do update your pages and show the date of update.
Be sure to check your pages on a regular basis and update them if necessary. Make it clear to your visitors how recent or dated your information is. Provide the date of the last update. - Don’t create dead end pages.
A dead end page is a page that is linked to by other pages but itself has no links. A visitor gets trapped in a dead end page and needs his back button to get away.
Content
- Do present the issues right away.
Your visitor wants to know immediately what can be found on your website. - Do use short sentences and short pages.
The World Wide Web is fast. Your visitors want to get your info in a snap. So read and reread your text. Then cut out as many unnecessary words as possible. - Do use correct spelling.
All county websites are a reflection of our extension service, our college and the University of Georgia. Proofread all content for spelling and accuracy. - Do put contact info on your pages.
Give your visitors a way to get in touch with you. Their feedback is invaluable. - Do use a single font family and font sizes that are readable.
Your content is very, very important! Choose one font for your text (Arial or Verdana are easiest to read on screen) and make it a size that is easy to read. - Do type your page content using both upper and lower case letters.
Using all caps is the online equivalent of shouting and takes much longer to read. Also, Don’t Capitalize The First Letter Of Every Word Like This Because It Is Also Hard to Read. - Do only underline text when it is a link.
It is an established Web standard that ALL underlined text is a link. Don’t use underlining for emphasis on the Web, use all caps or a larger, bolder font and use italics for publication titles. - Do use italics or bold text for special emphasis only.
Italics can become distorted on the monitor screen and make the text hard to read. Bold text is meant to give some focus to a part of your text. Don't put whole paragraphs in bold. It has the same effect as shouting. - Do avoid using sounds or blinking images.
If you must use these elements, use them VERY sparingly. They slow down the loading time for your site and generally cause an irritating distraction for the user. - Don’t just plop content from printed materials up on your site.
Make the information more valuable to the user by adding links, frequently asked questions, and related resources. - Do avoid putting a hit counter on your site.
People use counters thinking it will give them an idea of how much traffic their website is getting. In a way, it does, but the information you get (and which you're sharing with your visitors) is almost entirely useless. You don't know how many of the "hits" were by repeat visits, where they went once they were there, how they got there, or anything else of any real statistical value. If you get a lot of traffic, it looks like you're boasting, and if you get little traffic, it just looks lame. - Do keep you pages current and up to date.
Keep the information on your website current. Don’t leave a calendar from 2002 up on your website!!! Don’t leave pictures of eighth grade 4-H kids up on your site if those kids actually graduated from high school two years ago!!!
Marketing
- Do know your audience.
Who are you designing for? Kids? Adults? Education level? Abilities/disabilities? - Do market your Web site.
Include your URL on all printed materials that are associated with your office – newsletters, brochures, articles, signs, etc. Also include your URL on your email signature. - Don't show any page under construction.
If the page isn't finished, it's not ready to be published. In a sense all pages are always under construction since the Web is a constantly evolving medium. -
Make your Web site a top priority! It is an outreach tool that you can’t afford to take for granted. The Web gives Georgia citizens 24/7 access to your office, so make it work for you!!!