Dakota State University Web Style Guide

Page Layout Constraints

Web documents and printed documents share many principles. Unlike traditional print-based pages, web-based pages are designed for delivery through computer screens. The variety of screens and resolutions requires a strict adherence to certain guidelines. As a rule, all content (text and graphics) should be placed on a page so as to limit user scrolling. Although vertical scrolling is tolerated, horizontal scrolling is not. Therefore all DSU web pages will be developed and published based upon the lowest common denominator (LCD) principle.

Screen Resolution

Although many users will have screen resolutions set to 1024 X 768, 1280 X 1024 or higher, some site visitors will have their screen resolution set to 800 X 600. This is the target resolution for which all DSU pages will be designed.

To meet this recommendation, all content in web pages under the DSU umbrella should fall within a page that is a maximum of 760 pixels wide. This is easily done in Microsoft FrontPage 2003 by inserting a layout table or a standard table and making the necessary adjustments.

As an example, this page has 800 pixel-wide header and footer elements. The navigation\content table is limited to 760 pixels in width. The left-most navigation column is 150 pixels wide. The right-most secondary navigation column is also 150 pixels wide. This content area is therefore 460 pixels wide. The secondary navigation column at right could be removed if necessary.

This recommendation allows room for scroll bars and other navigational tools without exceeding the 800 pixel width limit. If using tables to constrain the width, individual columns can then be specified by exact pixel width or percentage of table to achieve desired layout. If a table is specified as 100% width, it will automatically adjust to the resolution (width) of the screen and will not require a limitation on width. However, layout may not appear exactly as specified depending on the font size required by the user. It is best to view your site on a computer using an 800 x 600 resolution to see how different methods affect your layout and design.

Page Justification

Content/Tables can be centered on the page or left-justified.

Page Background

Recommended content background should be white (or any other color that contrasts highly with black text) with black text Arial font. Menu cell background can be any high-contrast color, but must not inhibit text legibility and must contrast with the text color. It is recommended that the text be dark in color and the background light in color. This combination is most preferred and causes less eyestrain for users. Accents or highlights are acceptable but must be used sparingly.

Fonts

Text font must be Arial across the entire DSU site. This provides consistency and professionalism. All text should be at least five (5) pixels away (cell padding) from table edges to promote readability and to achieve desired white space.

Printed Web Pages

Another consideration is printed web pages. Although designed to be delivered and read on a computer screen, site visitors may want to print some pages of the DSU site for reference. The maximum width for any printable page is 560 pixels. Studies have shown that printed pages should use a serif font such as Times New Roman to promote readability, although it is not uncommon to use an Arial font for printing. If it is almost certain that users will print a web page for reference, Times New Roman may be used as a secondary font.