Web Style Guide

The following style guidelines apply to the official Holy Cross Web pages:

General Guidelines

  • Strive for Usability and Accessibility first and foremost.  Think about who will use the site, how they will use it, why they will use it and what they won't know about the site or its content. Then design with all of that in mind.
  • Stick to good layout principles - Consistency, Repetition, Proximity, Alignment.
  • Use "white space" to make pages easier to read. Make sure your text doesn't rest up against photos, navigation areas, etc.
  • Make sure your pages are readable in grayscale for colorblind users. Test this by taking a "Print Screen" of your page and pasting it into Photoshop (Image - Mode - Grayscale).
  • Check your pages in at least 2 different browsers.
  • Check your pages on another person's computer so you can tell if you've mistakenly linked to files on your computer.
  • Give all pages a <title> Meta tag and <keyword> tags; this will help search engines (like Google) index your site.
  • Make sure your pages make sense out of context: (Institution, Department, etc.)
  • Maintain visual identity with the site for which you're building the page - including logo, colors, etc.
  • Include contact information on each page; an email link to webmaster@holycross.edu will suffice.
  • Stick to a page design that is consistent with the design on the rest of the site (so users know they haven't left the site).
  • Keep the most important information 'above the fold'.
  • Refrain from using gratuitous javascript - including things like scrolling messages.
  • Don't disable the back button.
  • Dont use visible hit counters.
  • Avoid "Under construction" signs or notices and unfinished pages. This includes blank pages and pages that are simply placeholders (e.g., "This is where something will be - check back soon!") All official pages must have useful, relevant content.
  • Commercial endorsements and advertising are forbidden. See the College's IT Policy.
  • Opening pages in new windows should be limited to off-site links, .pdf or multimedia files.


Navigation & Links

  • Always include local & global navigation on all pages.
  • Keep local links (those relating to your site) relative.
  • Keep global links (those relating to the Holy Cross site) absolute -
    use http://www.holycross.edu instead of ../../..index.html
  • Avoid frames. They break the basic navigational conventions of the Web.
  • If you use imagemaps, include redundant text navigation links for disabled users.
  • Whenever possible let users know: where they can go, where they have been and where they are in your navigation design.
  • Always use lowercase characters for filenames and in the HTML coding.
  • Don't use spaces in filenames.
  • Use a .html file extension.
  • Don't use 'Click Here' or similar "functional link" terms as the linked text.  Use text in links that makes sense out of context.


Text & Font - Typeface

  • Try to use the fewest number of words possible.
  • Chunk areas of text out using bullets, callouts, etc.
  • Don't use italics unless grammatically necessary (unreadable online).
  • Don't use all bold - it makes the material more difficult to read.
  • DON'T USE ALL UPPERCASE CHARACTERS - they make the material more difficult to read.
  • Keep width of lines (typeface) within 4" (that is all the human eye can comfortably scan at a reading).
  • Use only Arial, sans serif, serif or Times New Roman fonts in text. 
  • Don't use more than 2 fonts on a page unless they are nearly identical.
  • Data tables need "header" cells defined (for users of screen readers).
  • Use heading tags to structure your information.
  • Don't underline text that is not a link.
  • Don't center lines of text (it is harder to read than left justified).


Graphic Standards

  • To obtain a copy of the official Holy Cross logo, email Public Affairs at webmaster@holycross.edu
  • In most cases images shouldn't be more than 104 pixels on the longest side  - and try to keep the file size smaller than 10K.
  • JPG format should be used for photo realistic images. Use gifs for solid color, line art and text.
  • Always use lowercase file extensions: .jpg, .gif
  • Make sure all images have alt text; for spacer images, use empty quotes ("")
  • Optimize images as much as possible before publishing.
  • Don't resize images in Dreamweaver. Use Photoshop and reduce them to the size they should display online.
  • Leave at least 5 pixels of gutter space between photographs and page text. Don't put them right up next to each other.

Standards for External Consultants

  • External consultants' work on Holy Cross Web sites must be in accordance with the College's Web Policy, IT Policy, usability guide and accessibility guidelines, as well as the style guidelines listed above.
  • Pages must be editable in the currently supported Web editing tool, Dreamweaver.
  • Sites should be built with all images in an images folder.
  • Title tags should follow the format: Page Name | College of the Holy Cross.
  • .Psds need to be supplied with all layers intact for any images used on the site.
  • Copyright clearance must be obtained for images or media files not created by the consultant.
  • If an existing site is being redesigned the existing filenames should be retained wherever possible.
  • Design comps need to be approved by Public Affairs prior to construction.
  • Direct access to the production Web servers is prohibited. Development server access will be provided if a work area is needed. Sites may only be uploaded to production servers by Holy Cross personnel.
  • Usability testing should be performed on new designs and results discussed with Public Affairs prior to the launch of a new site.
  • Public Affairs will need to test the new site on the development server before it is put into production.

Why Maintaining Visual Identity is Important:

  • Click on the image that links to the fast food restaurant:

McDonald'sMcDonald's

How did you know which link to choose?


For more information on Web style visit:


If you need assistance with design, or have questions, please feel free to contact Public Affairs at 508.793.2419 or by email at webmaster@holycross.edu for assistance.

 

4.06 jf