Visual Consistency and Aesthetics
To retain a professional look, formatting must stay consistent throughout the WSU Spokane website. The new design has a mechanism to achieve this—called “cascading style sheets” or CSS—but it does require attention on the content manager’s end.
Please note that these design guidelines are based on best practices and exist to make web pages easier to read and to use.
Fonts
CSS automatically switches the default font in FrontPage to the correct font for the website. If you assign a font other than the default Times New Roman, it will mess things up.
Here’s how to avoid problems:
- When copying text from another program (such as MS Word) into FrontPage, follow these steps:
- In the “Edit” menu, choose “Paste Special.”
- When you choose “Paste Special,” a “Convert Text” box appears and gives a number of choices. Choose “Normal paragraphs with line breaks.”
- After pasting the text, you’ll need to go through it to add formatting (such as spaces between paragraphs, headings, and hyperlinks).
Font Guidelines
- We ask that you absolutely do not use fonts other than the default.
- Avoid bolding hyperlinks. Use boldface sparingly.
- CSS automatically makes hyperlinks blue.
- Use font colors sparingly.
Headings
CSS also switches plain Times New Roman into an attractive, colored heading that matches the rest of the WSU Spokane website.
Apply header fonts by going to the drop-down box on the far left side of the tool bar and choosing your heading size.
Heading Guidelines
- Do not use anything larger than Heading 3. Generally, a page’s main title should be in Heading 3, with subtitles in Heading 4.
- Do not italicize, bold, underline, size, or color the heading.
- Do not add hyperlinks to headings.
- Do not center or right justify headings.
- Do use headings—they brighten pages.
Paragraph
- Do not full justify text.
- Do not indent the first line of each paragraph.
- Use a single space following the end of sentences.
Graphics
Don’t make pictures too big! Try cropping out unnecessary information in order to focus on the most important part of the picture.
- Resolution: 72 dpi
- For narrow column of web page: no larger than 180 pixels wide
- For main column of web page: no larger than 365 pixels wide
- Save as .JPG or .GIF
Never scale a picture up from its source. In other words, if the original size is 235 pixels wide and 300 pixels high, do not size it up to 400x500—it will be a fuzzy, “pixilated” mess.
If you have access to it, use Adobe Photoshop rather than FrontPage to edit images.
Photoshop
Follow these steps to get pictures down to a size appropriate for the Internet:
- Choose “Save for Web” in the File menu.
- In “Save for Web,” make certain
- The file type is either JPEG (JPG) or GIF.
- The file is no larger than 30K.
- For file quality, choose low, medium, or high—just as long as the file doesn’t get too big.
Microsoft FrontPage
- After you scale an image down (not up!) a little picture icon appears.
- Click on it and choose “Resample Picture to Match Size.” Otherwise, your image will be jagged.
Use images wisely
While they are crucial to the visual attractiveness of your site, photos and other graphics increase the time it takes to load each page. This is especially true for users with slow modems or Internet connections (including many prospective students).
- Be selective—pick only high-quality images that relate to and enhance your page content. With the exception of photo gallery pages, you should include no more than two images on any page.
- Refrain from using clip art and prefabricated graphics. This will help maintain the clean, professional feel of our Web site. Never use emoticons.
Links
- Always check your links to see if they work. It’s very easy for a typo to slip in when you are creating a new link. Also, links may break, so it is good practice to periodically check links on your site.
- Do not underline text that is not a link. Users expected underlined text to link to something. When it doesn't, they become frustrated.
- Do not add links to headings.