Web Site Resources

St. Lawrence University Web Page Style Guide
Mark Mende, Director of Web Services
November 21, 2006

This style guide is meant to help guide design, navigation and coding decisions for pages. The Web Team, and the Department of Web Services in particular, wish to help all web designers and managers on campus to design better websites and make them easier to maintain, while at the same time making them more pleasant to look at, easier to use and representative of the values the University is attempting to portray in the website and all recruitment materials it produces.

Colors
While the choice of color is generally a subjective and aesthetic decision made by the designer, usability needs to be considered. Generally, dark colors on light backgrounds are the easiest to read. Black text on a white background is usually best for areas of content that might be printed by the user.

Fonts
Fonts used on web pages should be easy to read and commonplace. While the default font might be boring, it is among the fonts most likely to be installed on computers. If you use an unusual or rare font and the viewer doesn’t have that font installed, he or she will not see the page as it was meant to be seen. The Arial, Helvetica family of fonts is easily readable. You can use Cascading Style Sheets (CSS) to set fonts, allowing you to specify a descending order of fonts to use in case a user doesn’t have the specific font you want.

While it is possible to choose a font size that is too small, it is also possible to select a size that is too large and just as unreadable. Good judgment is needed when making these decisions. Text that is too large takes up a great deal of real estate on a page, often pushing more important information down and sometimes off the first screen unnecessarily.

Font Styles
Font styles are the attributes applied to text that change its appearance, such as boldface, italics and underline. Try to avoid using underlined text that is not also a link; this can confuse users who have become accustomed to underlined text being used in that manner.

 Links
It is not a necessity to have all links underlined, as long as there are other obvious ways of determining whether an item is meant to be a link or not, such as using different colors, or mouseovers. It is possible to have a link open a new browser window with that information. Doing so can be very useful, but also can be very confusing to some users who are used to having access to a “Back” button to return to previous content. Some uses for new browser windows include a link that is going to a different website, or one that opens a page that serves as an augmentation to the other page, but then would be logically closed when the user is done with it.

Text
The popular sentiment among experts is that people don’t go to the web to read, but it is clear that the decision to read content on a page is directly related to the expectations of what the user will find on the page. Homepages and main pages of sections should usually be treated as a combination of the cover and the table of contents of a book. The focus should be on navigation, as well as presenting a sense of the priorities and nature of the institution, department, program, etc. As a user delves deeper into the site, some pages will be heavier on the text side, based on the content of the pages. For example, a prospective student investigating our academic offerings would likely assume upon clicking on a link for Majors, Minors and Programs that the next page will be mainly a list of links. But when a user clicks on a link to a specific program or department, there is an expectation that more in-depth content related to that program or department will be presented.

So the moral of the story is to keep text brief and limited on the main page, and to use larger blocks of text in areas where users would expect it.

It is also possible to make the experience of reading larger blocks more enjoyable. Try to separate out content by topic onto individual pages when there are more than one or two paragraphs of content involved. Use anchor links at the top of a page when appropriate, as in a FAQ, or a single body of content with multiple sections of content. It is also helpful to write in more of a newspaper style, following the inverted pyramid format with the most important information at the beginning of the content.
           

Images
Using images, photographic or iconic, can help to dress up a website, as well as communicate a sense of the mission of a department or program. Appropriate use of images can be effective, but poor use of them can detract from a page.

While more and more people are accessing the Internet with high-speed connections, file size should still be a consideration for images. It is best to make high-resolution images smaller, using some kind of image editing software, prior to placing them on the page. Using HTML to make high-resolution images appear smaller on the screen does not reduce the size of the file. In general, it is best to attempt to scale images to the size you wish them to reproduce at before embedding them on a page. And while it is possible to make larger images smaller by scaling them down on the page, it is not possible to make smaller ones larger without causing significant problems with appearance. Using images to break up large blocks of text can be effective as well, but keep in mind that content likely to be printed is best left image-free.

The choice of the kinds of images to use is also important. For example, while images of buildings can be appropriate in certain areas, it is usually more effective, and more attractive, to show people in images. Students and faculty/staff interacting can be especially effective.

All images should have accompanying alt tags that are descriptive of what the image is or does, to help with viewers using browsers that don’t allow for graphics, or have graphics turned off.

Backgrounds

One of the biggest challenges of using graphics or varied colors for page backgrounds is readability. The choice of a background color or pattern/image should be related to the content that will sit on it. In addition, the background can also serve as subtle navigation feature. Keeping a consistent background from page to page within a site helps to reinforce the brand of the site, and lets the user know where he or she is. Conversely, using different backgrounds on pages within a site can cause confusion for users and is not good web design.

Navigation
While there are a number of standards on the Web for placement of navigation, most sites have three-tiered navigation that generally is organized as site-wide navigation and/or help functions (search, contact, etc.) at the top of a page, navigation relative to the specific section of the site and/or site-wide navigation on the left, and internal navigation for the specific page or a sub-section of the section on the right and/or the top of the content section of the page.

For example, main University pages have help functions at the top of the page, as well as links to complementary information, often located in a different section of the website. For sites that have many pages, like the alumni and admissions sites, navigation on the left of the page appears on each page of that area of the site, allowing users to navigate throughout the section. Then, if sub-navigation is needed for a page in the form of anchor links, they appear at the top of the block of content. You might also see a floating navigation box to the right for very specific navigation.

Most users scan web pages for the information they are looking for, and appropriate links to find that information. Links should be easy to read and brief, but not so large that they overwhelm content or make continued navigation difficult. Some sites begin navigation on a homepage in a prominent place with larger text, and then carry the same navigation to the left or top of internal pages, in a somewhat smaller size.

For sites that have potentially numerous links, it is important that they be organized topically under headings that will help guide the user. Departments will want to determine a hierarchy of these headings. To help in that exercise, the department should first determine who comprises the main audience or audiences of the site and organize the info in a manner that best serves those groups. Research, as simple as discussions with members of those groups as to what they use the site for, can help inform those decisions.

It is best to use plain text, stylized with CSS if desired, for navigational features. Using images or graphics makes long-term maintenance of a site more challenging. CSS can be used to create boxes around text or a mouseover effect on text that can serve to reinforce that the text is a link.

Remember that the prevalence of search engines, including our own search appliance, means that users often enter sites other than from the main page. Therefore, having navigation to other places within the site is required.