DPS Website Style Guide

Style Guide Goal
The goal of this guide is to align the DPS website with current Web Standards, Compatibility Issues and to help unify the departmental websites that fall under the DPS website umbrella. Standards for Internet and Intranet web sites, as for other visual communications, reinforce the vision and identity of your school or department and help each site operate smoothly and efficiently. Compatibility allows your site to be viewed by a broader audience which in turn makes it more successful and resourceful. By unifying the look and feel of all of our sites we create a stronger presence and a professional look and feel.

Content

Staying Current
Web sites should be updated regularly. By maintaining your site on a regular basis and eliminating dated material as soon as possible, you will keep your site attractive and credible. Updating content is easy to do within the framework of Denver Public Schools' content management system. Contact Web Services to learn more about creating an easily updatable website.

Make sure the information you put on your site is relevant to your department. Facts and figures should be verified and all information should be current. Organizing your content in a clean, easy to navigate manner will help users find what they are looking for. Keep in mind that people tend to skim websites rather than read them carefully; summarize the point of a page in the first few lines and break information into smaller sections with descriptive headlines.

Accessibility

Why Make Your Web Pages Accessible?
There are more than 750 million people living with disabilities. As we become more dependent on the Internet for information and services it is critical that the web be usable by everyone. It is not only the right thing to do, it's the law! In 1998 Congress amended the Rehabilitation Act to include Section 508. Section 508 requires government agencies, and institutions receiving federal dollars, to ensure that all electronic and information technology applications are accessible to individuals with disabilities.

Although it is tempting to use the latest whiz-bang effects when designing web pages, these effects should not prevent your users from getting the information they need. Many users are not using the latest mainstream browsers because a personal disability or technical limitation requires them to use a specialized browser. Although it is impossible to create a web page that looks exactly alike on all browsers, there are steps you can take to make sure the information is accessible to everyone.

Web Accessibility Checklist

Accessibility Suggestions

Use plain text for all important information
The most accessible way to convey information on the Web is to use plain text. If important text is displayed in GIF, JPG or PDF files it will not be accessible to some users. It is best if addresses, phone numbers, links and other information you expect everyone to read is presented as actual text. Also avoid flashing or blinking text as this has been proven to cause seizures in some people as well as just being hard to read.

Plan for text-only browsers
Visually impaired users will use screen readers, people on slow connections with older systems may use text-only browsers or turn off graphics in their browser. You can make your pages easier for them to use by making sure all links are text and all images have "alt" tags. Use discriptive text for graphs, photos and other images. Look at your page and think if it will convey the same message and information if the graphics were not visible.

Use color carefully
People with color-perception problems can confuse colors of similar value. Red and green are most often the problem. Make sure that there is sufficient contrast between the foreground and background colors. Because the background color of a page or table cell can drop out when printed, avoid using light text on a dark background. Links or information should not depend on color either because of color-perception problems or black and white monitors. Screen readers also do not discern between colors. Studies have shown that text is easiest to read when it is black on a white background. When using colors be sure to use only Hexadecimal identifiers (i.e. #ff0066). Name colors such as "Brown" or "Pumpkin" can not be read by all browsers.

Provide alternative versions
If you are using frames, javascripts, or even graphics to present essential information, make sure that a text-only alternative is available. In addition to "alt" tags, some designers place "description" links near graphics which lead to in-depth descriptions on separate pages. It is better not to use frames at all because not all browsers support frames.

Use special accessibility features
There are special tags which can make it easier to use alternative browsers. Keyboard equivalents, Cascading Style Sheets, and other special navigation systems are becoming more widespread. Consider adding these features to your site.

Design

Use of the Denver Public Schools seal
All DPS web pages should use the DPS seal to highlight the school’s or department’s connection to the Denver Public Schools. The seal should be used in the upper left hand corner of the web page and should always link back to http://www.dpsk12.org. This will eliminate confusion and maintain consistency through out DPS websites. Versions of the DPS seal can be found in the Archives section of the DPS website. For help with using the DPS Seal on your site please contact web-services@dpsk12.org.

We prefer you use the seal in the colors we have provided on the Archives Logo page, but if you would like to change the colors to better blend with your site, please consult with Web Services before doing so.

Navigation
It is important to keep main navigation consistent throughout your site as well as throughout the entire DPS site. Therefore, in following the design of the main DPS website, all main navigation should appear on the left side of your site, with supplemental or highlighted navigation across the top. Try to minimize the number of links on one page to avoid crowding. You can do this with well organized sub sections. Try to avoid using image based links as they can cause confusion with screen readers if not properly handled. If you do use an image based link, you must have a text link alternative.

E-mail Links
E-mail links need to be spelled out. Instead of “e-mail” for your link or an image or icon, it should say the full address (i.e. Dots_Hotline@dpsk12.org). If you do use an image or icon to represent E-mail, you need to include the text version below or to the side of the image. The reason for this is not all users have integrated e-mail capabilities. In such a case they would need to copy and paste or type the e-mail address into their e-mail program. If such a person were to click on an e-mail link, nothing would happen leaving them without a way to e-mail you.

Color Suggestions
The main part of the DPS website has been designed with a certain color scheme. We encourage the use of these colors but do not require them. The colors used in the main sections are:

Background Color = #eeeeee
#336699 swatch = #336699
#660099 swatch = #660099
#666666 swatch = #666666
#cc99ff swatch = #cc99ff
#0033ff swatch = #0033ff

Remember to use only Hexadecimal identifiers. Name colors such as “Brown” can not be read by all browsers. The main part of the DPS website also utilizes a light colored background which helps with the readability. We do not recommend using color backgrounds especially dark backgrounds which are hard to read text on and create problems when printing.

Graphics
When using graphics and photos be sure to optimize them for web use. It is also a good idea to not use graphics extensively. Not everyone has fast internet connections and will get frustrated if your page does not load quickly. You will notice we use graphics and photos sparingly on the main part of the DPS website for this reason. Each page should be kept less the 60k in size for ease of viewing.

When using photos and graphics be sure to use "alt" tags to identify and describe them for people who have turned graphics off in their browser or for the visually impaired using a screen reader.

Text
All text should be easily legible. Large documents or important information should be dark or black text on a light or white background for ease of reading and printing. Remember to avoid blinking or flashing text which is hard to read and may cause physical problems in some people. Scrolling or moving text should also be avoided because they can cause problems with screen readers.

Browsers
All sites must be designed with older browsers in mind. We recommend that your site should be compatible with at least 4.0 browsers and newer. Most of our schools are using older technology and it is necessary not to alienate them. Also keep this older technology in mind when adding special features to your site. Your site needs to be compatible with these older browsers and the computers they run on. It is also imperative that your site view properly on both Mac and PC platforms.

Cascading Style Sheets
We strongly recommend the use of Cascading Style Sheets (CSS) for various reasons. Using CSS “lightens-up” your HTML code allowing for faster download times. It improves your site for screen readers, and CSS allows for easier style changes across your site. Old HTML methods are quickly becoming deprecated and as the adoption of Web Standard compliant code such as the new XHTML (which requires the use of CSS) grows it's just a good idea to look towards the future and create a site that will be compatible with the current and future Web Standards.

Resources

Web Services
web-services@dpsk12.org
Web Services can answer question regarding site creation and the DPS Content Management System

DoTS
Dots_Hotline@dpsk12.org
Contact the DPS Department of Technology Services to set up a website using the DPS Content Management System

Section 508
http://www.Section508.gov
Information regarding Accessibility and Section 508 compliance

PDF
http://www.adobe.com:80/products/acrobat/adobepdf.html
Explanation of what a PDF file is

XHTML
http://www.w3schools.com/xhtml/xhtml_intro.asp
Introduction to XHTML by W3 Schools

Web Standards
http://www.w3.org/
A guide to Web Standards created by the World Wide Web Consortium (W3C)

Cascading Style Sheets (CSS)
http://www.w3schools.com/css/css_intro.asp
Introduction to CSS by W3 Schools