Website Best Practices: With great power comes great responsbility

In the spring 2015 semester, the websites hosted at Virginia Tech will be moved from the old content management system (CMS) into a new one. With this change, there will be a greater opportunity for you to manage your own webpages and content because the new CMS will be much more user-friendly!

Once you’ve learned the new CMS, it may be tempting to try all the cool stuff one can do with websites. Some people have been able to figure out how to apply different styles to text on a page, but when they do, it breaks the cohesive look and feel that a template offers.

So how do you know if you’re creating a good looking page without going off on a design tangent? By following Web best practices!

Screenshot of the CALS Communications website.

This website uses full phrases for hyperlinks and adheres to heading hierarchy.

Here are some basics to get you started:

  1. Do not change the font — Virginia Tech has set approved fonts on the template, and those were chosen based on readability.
  2. Do not change the font color — As with the font choices, the color is based on readability and cohesive style throughout the template.
  3. Hyperlink full, descriptive phrases — Don’t use “click here” or “more information” if possible. Those are generic terms that rank low in accessibility and Search Engine Optimization checks.
  4. Use heading tags (and in the correct order!) — When you have headings and subheadings, tag them as such instead of simply bolding or making the text larger. The university’s template already has H1 (heading 1) on each page, so you can start with H2 before proceeding to H3, H4, etc. The headings show hierarchy and allow for the visually impaired to understand page structure.

H1 = Heading 1

H2 = Heading 2

H3 = Heading 3

H4 = Heading 4

Things to watch out for:

  • If you’re copying and pasting from Word, there may be embedded styles that come over. After pasting, highlight all your text, and use the “clear formatting” button that’s common on most text-editing windows.
  • Inserted photos can break paragraphs and sentences badly. If you’re struggling to get a photo inserted without harming text readability, try repositioning the photo on the other side of the page or move it farther down the page.

If you’re ever uncertain about what deviates from the standards, you can dive deeper into best practices by following checklists available online.

For even more information, a consortium of web developers maintains W3C, an organization that creates agreed-upon best practices for all people involved with web development and design. The group has a standards page that can help explain what these best practices are.

Share

About Susan Gill

Web Project Manager, Office of Communications and Marketing, 133 Smyth Hall, Virginia Tech, 540-231-6630
This entry was posted in Branding, Design and tagged , . Bookmark the permalink.

Leave a Reply

Your email address will not be published. Required fields are marked *