Weinberg Web Standards
Northwestern University's Web Standards, which serve as the foundation for Weinberg web standards, promote consistency, usability and standardized University branding across web sites University-wide. University branding allows visitors to recognize immediately a web page's affiliation with Northwestern University. Weinberg College of Arts and Sciences seeks compliance with the Northwestern and the Weinberg web standards across all department and program web sites associated with Weinberg.
Jump to information about:
- Standardized tools
- General standards
- Design standards
- Printing considerations
- Footer standards
- Standards for listing email addresses
- Content accessibility standards
- Content management guidelines
- Copyright guidelines
- Testing guidelines
- Resources
Standardized Tools
- Adobe Contribute CS3 (or higher version) is the preferred software tool for department and program site content editing. Weinberg IT provides Contribute to staff and faculty throughout the college without cost. Weinberg IT will also provide basic orientation and training on Contribute, as well as ongoing support.
- In the handful of cases where a department's site cannot be successfully edited using Contribute, Adobe Dreamweaver CS3 (or higher version) may be required. Because Dreamweaver is a more complex program than Contribute, and can very easily cause accidental site-wide problems if not expertly handled, please contact Weinberg web communications staff before purchasing Dreamweaver to confirm that it is necessary (web@wcas.northwestern.edu). Departments must cover the cost for Dreamweaver if they decide to purchase it. Weinberg IT provides no training, although the University currently offers basic Dreamweaver training as part of its staff development offerings. Sites managed via Dreamweaver should employ Dreamweaver Templates to control the design, Dreamweaver Library Items for the footer, navigation, and other common elements, and style sheets (CSS) to control the presentation.
- Adobe Acrobat 8.0 (or higher version) should be used to create PDF files.
Note: We understand that many web editing tools exist and that each person may have their own favorite. However, the time and effort required to decipher and correct HTML created by other tools is greater than our resources can or should handle.
General Standards
- On every web page, the following three items should be immediately apparent to site visitors:
- Their specific location within the site;
- What is the most important/relevant information on that page;
- Where they can go from there.
- The home page should include links to the Weinberg home page and Northwestern home page near the top.
- You must ensure your web content is accessible to people with disabilities. To accomplish this, you should do the following:
- Review the W3C guidelines.
- Adhere to Northwestern's Content Accessibility Standards (outlined below).
- Using frames inhibits accessibility and is strongly discouraged.
- Underlining text should be strictly avoided. Only links should appear as underlined on your site.
Design Standards
- Web pages should be no wider than 990 pixels in order to accommodate 1024x768 monitor resolution settings.
- Although page depth varies according to content, pages should not require undue scrolling. On unavoidably longer pages, provide anchor links at the top of the page or in the site subnavigation to help visitors find what they need.
- Avoid embedding scripts or code from third parties, especially ones that generate gratuitous 'special effects' or similar, non-essential functions. These may not be fully tested and could complicate a visitor's ability to view your site or, worse yet, crash your site completely. If you believe key functionality is missing from your site, please contact web@wcas.northwestern.edu to request an approved, visitor-friendly solution.
- The hexadecimal HTML color code for the Northwestern purple is #520063.
- Graphical buttons (if you use them) should be between 1 and 4K each.
- Graphics/icons/photos should not exceed 15 to 20 K in size (each).
- Total web page file size (HTML file + the file size of all the graphics on that page) should not exceed 120K.
- We recommend using a tool like Fireworks or Photoshop to optimize your graphics for the web.
- Avoid using icons or clipart for navigation in order to maximize findability of pages within our sites by internal and external search engines.
Printing Considerations
Different versions of browsers print web pages differently. Safari 1+ and Firefox 1+ will scale a printed image to the size of the paper. Internet Explorer 6 will crop a page at 670 pixels. Pages that may be printed should not exceed 670 pixels or should be able to collapse to 670 pixels (i.e., if a table's width is set to 740, the last 70 pixels will be cropped when printed).
Footer Standards
Each web page should have a footer that contains the following information:
- A link back to Northwestern's home page (logo).
- A link back to the Weinberg home page (logo).
- The name of the creating entity.
- Contact information (name, phone number, e-mail address, street address).
- Links to the Northwestern disclaimer and policy statements.
- Copyright notice.
Example of the standard Weinberg footer:
<Footer image is inserted here>
Standards for listing e-mail addresses
All staff and faculty email addresses should be listed in the proper format (i.e., a-jones@northwestern.edu). Each department or program can decide whether the email addresses will be listed as links or just text.
Content Accessibility Standards
Northwestern strives to adhere to Section 504 of the Rehabilitation Act of 1973 and the Americans with Disabilities Act. These acts ensure that Northwestern Web pages will be readable by users with disabilities, whose must rely on assistive technology (screen readers, text-to-Brail devices, etc). Northwestern also strives to adhere to the Web Content Accessibility Guidelines of the World Wide Web Consortium (W3C).
Some basic guidelines for accessibility include:
Provide text equivalents to all non-text content.
Images, movies, sound files, applets, etc., may not be accessible to all users. Providing a description of all such features in an ALT text attribute allows you to convey to all users the content and meaning of your page. For example:
<img src="university-library.jpg" alt="Northwestern University Library">
If your non-text content is dynamic, make sure that equivalents change with the non-text elements. If your page cannot contain text equivalents within it, consider create a parallel text-only version of the page.
Make sure that text and graphics are understandable without color.
People who cannot differentiate between colors or who are using devices with noncolor or nonvisual displays will not receive or understand information that relies on color for its meaning. Also take care in choosing backgrounds that contrast with page text and don't interfere with readability of content.
Do not use frames/iframes for navigation.
Frames and iframes are not universally accessible. Also, the content of frames may not be searchable by search engines.
Avoid using server-side image maps.
Navigation of pages using server-side image maps require a mouse and are therefore inaccessible to the blind. If used, provide a link to an alternate text version or summary.
Describe links.
Instead of denoting a link by the words "Click here" or a similar phrase, be descriptive when providing links; for example: "further information from the W3C on Web accessibility". Also consider allowing such links to stand on their own line or to provide an ordered or unordered list of links in HTML.
Use headings and lists to organize your page and reinforce consistent page structure.
When possible use mark-up language rather than images or visual cues to emphasize the structure of your page. Organize documents so they may be read without style sheets. For example, when an HTML document is rendered without associated style sheets, it must still be possible to read the document.
Use language that is as simple and clear as possible.
Test pages in multiple browsers, operating systems, and connection speeds.
See testing (below).
Provide alternate routes to information when using interactive technologies.
Pages that use Flash, Shockwave, or other interactive elements may not be accessible with older browsers. Provide a link to a text-only or non-interactive version of the information.
Content management guidelines
The Weinberg offices, departments, and programs hold primary responsibility for the accuracy of their information on Weinberg's websites
The Weinberg Web Communications Manager is responsible for confirming the authority of any person submitting content on behalf of a Weinberg office or department for publishing on any sites under the umbrella of Weinberg. Any office, department, or program with questions about publishing content on the Web, or needing access and/or software to edit their site, should e-mail web@wcas.northwestern.edu.
Copyright guidelines
It is a good idea to remind users that your work is protected. Therefore, the following copyright notice should be included somewhere on every Web page you publish:
Copyright © 2013 Northwestern University. All Rights Reserved.
The © copyright symbol is the standard identifier of a copyright notice and is required in many foreign countries to ensure copyright protection. In the United States, however, the word "Copyright" may be substituted for the symbol.
The year of publication must be included in the copyright notice.
The name of the copyright owner must be included in the notice. Generally, individual creators own the copyright for the original material they publish. However, employers usually hold the copyright for work done by employees in the course of employment. Therefore, unless otherwise specified by contract, the owner of the copyright for Web pages published at Northwestern should be Northwestern University (and not the individual creator, a department, or a school).
Including the phrase "All rights reserved" ensures broader international protection of your work.
Testing guidelines
Test all links on every document, as well as layout/readability on both PC and Mac platforms, both with monitors set to 1024 x 768 screen resolution.
Northwestern's supported browsers are:
- Internet Explorer 7+ (PC)
- Safari 2+ (Mac)
- Firefox 3+ (PC and Mac)
Focus groups/user testing is strongly encouraged when possible.