sayingwhatimdoing.com Style Guide

Navigation

  • Current navigation should be on the left
    • The items on the navigation should be short but descriptive, so it does not extend past the navigation width
    • Items should use colors from the color section, and follow the font guidelines
    • Should indicate where you are in the current section
  • Site navigation should be across the top
    • Should include ever major section of hte site
    • Should contain "Contact Us"
    • Should contain "About Me"
    • Should indicate which section you are in

Typography

Item Font Size
Side menu navigation Verdana 0.83 em
Headings Verdana 1.16 em bold
Links Verdana 1 em
Toolbar Text Verdana 0.83 em bold
Page title or heading (h1) Verdana 1.16 em bold
Subtitle (h2) Verdana 1.08 em bold
Paragraph text Verdana 1 em
Footer text Verdana 0.83 em

The alternate font should be sans-serif.

Color

Color Hex Value
796646
5B503E
4F3A17
BCA681
BCAC90
313E50
2A323C
101F34
778BA7
8493A7

Logos

To be created.

Graphics

Graphics need to be 80 ppi or lower in order to ensure fast page load times. As much as possible the prominent colors in the graphics should be colors included in the color section of this document.

Content Guidelines

In order to maintain a consistent, quality website the following guidelines should be observed regarding content:

  • Be consistent in spelling, acronyms (explain the acronyms on first use), capitalization
  • XHTML code should validate
  • CSS should validate
  • CSS should be in the main CSS document for the website, it should also be consistent across all pages on the website
  • Preview the document to make sure the content fits inside the width of the container (div tags or p tags, etc) if the container has a defined width

Best Practices

The following suggestions will help to maintain a good site:

  • Keep text to a minimum - enough to get the point across, yet to be understood as quickly as possible for the visitor
  • Only use flash or other animations when it strongly supports the content of the page, and even then use it sparingly
  • Use CSS to style your sheet, don't use the equivalent HTML tags/attributes

Aside