|
Web Guidelines
On this page: General Policies - Target Browsers - Coding - Fonts - Graphics and Colors - Flash - Printing
- The MIT letterforms (graphic identity) should be displayed on the site’s top page, preferably every page, and should link to the MIT home page, http://web.mit.edu. Go to the MIT Graphic ID site for detailed guidelines on the use of the MIT letterforms.
- Third-party advertising or commercial promotion is not allowed on MIT web sites. They can create conflicts of interest and potentially jeopardize MIT's tax-exempt status. Sponsorship should comply with MIT's sponsorship guidelines.
- Departments and Organizations selling goods and services over the web should follow MIT e-commerce guidelines.
- If you use a copyright statement, the copyright is to "MIT" rather than a department.
- All web sites on the MIT domain should comply with MIT's legal and policy guidelines.
- Pages should load fairly quickly. Test loading on a 56KB modem.
The browsers below are the supported browsers at MIT. However, all pages should be reviewed in other common browsers no matter the market share to be sure that the information contained on the page is accessible outside of the supported browsers.
Athena
Firefox 2.0.x is the current default version available in the Athena environment running on Linux and Solaris.
Linux/UNIX
Firefox 3.0.x is the current default browser for stock (non-Athena) Red Hat Enterprise Linux 5.2.
Firefox 1.5.0.x is the current default browser for stock (non-Athena) Red Hat Enterprise Linux 4.
Note: RedHat Linux update service provides security updates to this browser.
Macintosh
Safari 3.0.x
Safari 2.0.x or higher, for Mac OS X 10.4.x or later, Intel or Power PC-based
Firefox 3.0.x
Firefox 2.0.x for Mac OS X, Intel or Power PC-based.
Windows
Internet Explorer 7
Internet Explorer 6.0.2 with SP2 for Windows XP SP2.
Note: For IE, IS&T anticipates that new releases will continue to operate within MIT's web and certificate environment.
Firefox 2.0.x for Windows Vista and XP.
Firefox 3.0.x
Use the WCS Website Compliance Review form (MS Excel, PDF) to check your code.
- We recommend you code your site with XHTML version 1.1. The World Wide Web Consortium (W3C) provides an online markup validator.
- Each file should include a doctype statement; e.g.,<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
- Cascading Style Sheets are strongly recommended for both appearance and layout. Be sure to check that the content is usable/readable across multiple browsers. The World Wide Web Consortium (W3C) provides an online CSS validator.
- Pages should be functional without Java, Javascript, CSS, Flash or browser specific tags. These features can be used to enhance functionality, but must not be required, and the page should degrade gracefully when they are not present. For example, you can use Javascript to create navigation rollovers as long as a user can access all information on the site with Javascript turned off.
- The head of each document should contain a meaningful title, followed by keyword and description meta tags for better search engine indexing.
- Tag names and attributes should be in lower case to comply with XHTML version 1.1 standards.
- All attributes should be quoted to ensure that all browsers render code correctly and to adhere to XHTML standards.
- Filenames should be lowercase, with no spaces.
- Tables should be coded with proportional widths (i.e., stretchable to accommodate a variety of monitor resolutions).
- Designs should be visually optimized for a screen resolution of 1024 X 768. However, essential elements (navigation, main content, etc.) must be no wider than 760 pixels as recent statistics show 20% of users still have a screen resolution of 800 x 600. Additional design elements and tertiary information can fall outside that width. Additionally, the page should not lose data when printed with default settings.
- Page designs should employ a flexible layout allowing them to stretch or compress to adapt to the user's window size and and resolution. Although higher resolutions and wider monitors are in use at MIT, always make sure to optimize for the majority of your target audience.
- Physical site architecture (arrangement of files & folders) should be consistent with the logical content hierarchy. In most cases you should use directories to group files that contain similar content instead of putting dissimilar content into one directory and relying on file naming conventions for content grouping (see this Jakob Nielsen Alertbox and the Yale University Web Style Guide for more information)
- Every effort should be taken to create persistent URLs for new content. When restructuring an existing site use redirect pages to prevent link rot.
- Frames should not be used. Read about why frames are not supported at MIT.
- It is recommended that you use Cascading Style Sheets to control fonts.
- Font face should degrade gracefully. Whether you're using CSS or font tags, code with alternative choices. Include a font that displays on Unix. A good example would be "arial, helvetica, lucida sans, sans-serif"
- Avoid using CSS to specify specific font sizes in body content. If font sizes are fixed users of Internet Explorer on Windows will be unable to adjust the size. It is fine to use percentages, or small/medium/large.
- As a general guideline, body text should be default size. Relative size –1 can be used for menu items, quotes, and copyright information. 12px is the minimum recommended size for body text. No text, including a footer, should be smaller than 10px.
- Design for the 216 colors in the web-safe color palette. You can find a color chart at: http://www.lynda.com/hexh.html
- Make the file size of graphics as small as possible. Use jpg format for photos and gif format for other artwork. Resolution should be 72 dpi. Total page download time should not exceed the equivalent of 9 seconds at speeds comparable to a 56K modem. Page load times can be checked with WebSiteOptimization.com's Web Page Analyzer.
- Any transparent images used to hold positioning (spacer gifs, shim gifs) should have a null alt attribute (alt="").
- Include width and height specifications in image tags. When a browser sees width and height attributes, it knows how much space to allow for the image, thereby decreasing page loading time. Do not use the width and height attributes to resize an image; this will increase your page's loading time and may cause your images to display inaccurately.
- Animated images should be kept to a minimum in occurrence and length of time.
- Flash movies should only be used as *enhancements* to a website. The site MUST be functional without Flash.
- Flash movies should be published for the lowest flash player possible to ensure that the highest number of users can enjoy your work. The latest market penetration of Flash 7, 8, and 9, are 99%, 98%, and 96% respectively. For more details, see the Adobe Flash Player Version Penetration report.
- Pages should be coded to degrade to a static image seamlessly for users without Flash players or have javascript turned off.
- You can use a modified flash detect code from Macromedia to create the seamless degradation. See the Flash Detect Example for more information.
- Pages should be able to print without loss of information, especially on pages that are text-heavy or contain reference information.
- Content areas should be able to compress below 740 pixels so text is not cut-off during printing.
