Overall Design Standards - Web Style Guide

Refer to the Web Center for tutorials, articles, and other resources about web technologies, especially those used on the Ohlone College domain. If you have any questions, please contact the Web Team.

  • Target Computer Configuration - Not all site visitors have the latest and greatest computer or monitor. Each page of your website should be designed for the following minimum computer configuration:

    • Monitor set to a 800x600 screen resolution
      • All pages should be printable in Portrait orientation without important information on the right edge of the page being cut off. Therefore, the recommended maximum width of a static-width page is 665 pixels.
    • 56K modem
    • Internet Explorer and Netscape browser versions 4.0 and higher. Learn more in About Browsers.
    • Use web-safe colors for large, flat areas of color to ensure those areas hold the intended color for monitors set to 256 colors. More about Color on the Web.
  • HTML or XHTML DOCTYPE - Use properly formatted HTML 4.01 or XHTML 1.0 markup on each page, including the HTML 4.01 Transitional DTD or the XHTML 1.0 Transitional DTD in the <!DOCTYPE> tag . More about the standard Markup Languages (including DOCTYPEs) for Ohlone College web pages and XHTML and HTML Resources.

  • Validate each (X)HTML page using the W3 Validator. More about Validation.

  • Typography - Font Styles, Sizes, and Colors - The <font> tag is deprecated tag and will be removed from future versions of XHTML and from future browsers that meet web standards. This means that web standards-based browsers released in the future will probably not understand the <font> tag so your font colors, sizes and styles will not be viewable in those browsers.

    Instead of the <font> tag, use an external style sheet to create styles for background colors etc. that are unique to your website. More about Style Sheets.

  • Ohlone College Logo or Banner Image - The official Ohlone College logo must be used in the upper left corner or one of the Ohlone College Banner Images must be used at the top of each web page on your website. Alternatively, faculty and staff may use one of the small versions of the official logo in the standard footer of each page.

    The logo image must link to the Ohlone College homepage, and must not open a new browser window; the correct URL is:

    http://www.ohlone.edu/

    More about the Official Ohlone College Logo, Ohlone College Banner Images, and the Standard Footer.

  • Standard Footer - Each web page must include a standard footer. More about the Standard Footer.

  • Always Use a Meaningful <title> Tag - The <title> tag for each web page should contain a unique title for that page. In addition to being searchable by web search engines (such our own site search program or Google) and web directories (such as Yahoo), the content of the <title> tag is displayed in the search results page as the link to that page. The format should be:

    Page Title - Division/Department/Group/Faculty/Staff Name - Ohlone College

    Examples:

    1. <title>LAB Program Introduction, Video - Biotechnology - Ohlone College</title>

    2. <title>President Gari Browning Biography - President's Office - Ohlone College</title>

    More about META Tags and Search Engines.

  • Always Use the Description and Keywords <meta> Tags - These tags should be unique for each page. They may be used by search engines. The Description <meta> tag is displayed in the search results for some search engines as a summary of the page. The contents of the Keywords <meta> tag are matched against the keywords entered by the search engine user. Some search engines use both the Description and Keywords <meta> tags, some will index the contents of the web page, some will index the alt attribute of images on the page, some will do a combination, some will do all. More about META Tags and Search Engines.

  • Use the Web-safe Color Palette for large areas of color in graphics and as background colors. More about Color on the Web.

  • All <img> Tags Must Use the Width, Height and Alt Attributes - The width and height for each image must be the image's actual size in pixels. Do not resize an image by changing the height or width attributes - you should properly resize an image using an image editing software program, such as Photoshop or Paint Shop Pro. Using width and height attributes helps to minimize the time it takes a page to load in the visitor's browser. This is an example of a properly coded <img> tag:

    HTML example:
    <img src="smiley.gif" width="100" height="120" alt="Smiley face">

    XHTML example:
    <img src="smiley.gif" width="100" height="120" alt="Smiley face" />

    The alt (alternative text) attribute aids in accessibility and is useful for people who view web pages with graphics turned off in their browser. In addition, many browsers will display a "tool tip" near the mouse cursor when the mouse cursor is positioned over an image having an alt attribute; this is useful for providing a short description about the image. Recently-released browsers such as Netscape 6.x and Mozilla 1.0 do not display the tool tip unless a title attribute has been used in the image tag; for example:

    XHTML example:
    <img src="smiley.gif" width="100" height="120" alt="Smiley face" title="Smiley face" />

    The alt attribute is required. The title attribute is optional.

    Use an empty "alt" attribute (example: alt="") for images that have no particular meaning (such as horizontal bars or spacer images). More about Accessibility.

  • Keep page sizes small to minimize page-loading time. The actual size of a page is the total of the size of the page's code and the size of all images and other embedded content for the page.

  • Minimized download time by keeping file sizes for multimedia elements (images, video, audio, etc.) as small as possible while maintaining a usable quality of appearance.

  • Instead of using multiple graphic files of a similar image, use the same graphic file on multiple pages to minimize page load time. When a graphic file is viewed the first time, it is downloaded to and "cached" (stored) on the visitor's computer. Cached graphics display faster than graphics requiring download.

  • The navigation scheme should be consistent throughout the website. Navigation bars should contain the same options in the same order. Navigation bars should not switch position, such as from the left side of the browser window to the right side of the browser window.

    Text navigation links are preferred over images in navigation bars because text links provide faster download, better usability, and better accessibility. Text links (including visited, hover, and active links) can be styled (font face, color, size) using style sheets.

  • Estimated download times at common connection speeds; actual download times may vary:

    Download Times at Various Connection Speeds
    Content Type File Size 14.4 kbps 28.8 kbps 64 kbps 1.5 mbps
    Small graphics and animation 30 KB 30 seconds 10 seconds 6 seconds 1 second
    Small movie 100-200 KB 100-200 seconds 50-100 seconds 20-40 seconds 1 second
    Short video clip 500 KB 500 seconds 120-240 seconds 90 seconds 3 seconds
    Large movie 1 MB 13 minutes 8 minutes 3 minutes 6 seconds
    MPEG video stream n/a not feasible not feasible not feasible continuous