Contact Us
Web Services
Bettws-Y-Coed 206
Bryn Mawr College

610-526-7440
help@brynmawr.edu

Web Redesign - Web Standards


The following information is provided to guide you as you build and reconfigure your department sites. These guidelines are based on web standards that have been developed through research regarding technical needs as well as usability and patterns of use by people finding information on the web. See References.

General Layout

Although the templates provide some cues for laying out the page, there is still a great deal of freedom in how you arrange the content of your site.  Here are some recommended guidelines:

    • All items should be appropriately aligned on the pages.  Try to align pictures, headings, and text so that they are easy to read. 
    • Do not center text on the page.  It makes the page difficult to read.
    • Try not to clutter the page too much and make it too busy.
    • Alternatively, try not to have too much white space.  The new web templates are quite spacious and you don't want your page to look empty.  Try to fill in the space with pictures and information that you think will be attractive and important to your visitors. This is a great opportunity to be creative with the space (just don't get too cluttered!)  Feel free to ask Communications for suggestions or ideas!
    • Make the content of pages simple and straightforward when possible.

Navigation

    • To keep the page length short, limit your left-hand navigation items to 7.  Bread crumb navigation can be used for deeper navigation.  For example  Web Services-->Web Stewards-->Style Guide
    • Make sure there are no navigational "dead-ends."  The left-hand navigation that will be on every page should ensure that visitors to your site can get back to previous pages and navigate through your site from any starting point.
    • Make sure your navigation is clear and that people understand what to click on to get the information they need.  This means creating labels that make sense to people who may not be familiar with Bryn Mawr or with your site.
    • Make each navigation item unique to avoid redundancy or confusion.  For instance, don't have a link to "Cars" and to "Autos".  These are essentially the same thing and should probably be grouped under a category like "Vehicles."
    • Internal links within the page should be descriptive and clear.
    • Indicate if a link (either internal to the page or on the navigation) takes the visitor off site.
    • Indicate whether a link is to a document in another format (e.g., pdf or doc).  Whenever possible, link to html versions unless there's a real need to download the document in another format (for filling out and mailing in, for example). People shouldn't have to download a document just for basic information.

Headings, Titles, Labels

    • We have standard heading choices (h1-h6).  The h2 heading is used for the main page title. Headings should be used in order from 1-6, largest to smallest, to help convey document structure.
    • Make sure your headings are clear and descriptive so that readers can scan the page easily.
    • Make your headings unique--same as the concept for navigation above.
    • Make sure each page has a page title.  This is what shows up in the title bar of the web browser and it's also what's picked up by search engines, including Bryn Mawr's site search engine.  It's important for this to be descriptive. Please refer to the tech documentation on adding and formatting titles.
    • Try to maintain the same content structure, using headings and lists consistently throughout the site.

Images

In general, we find that the use of images helps to personalize a site, break up text or white space and generally makes a site more appealing.  Although bandwidth has increased, care must still be used when working with images.

  • Optimize images for the web.  They should be small in file size and interlaced (for gif's) or progressive (for jpg's).  Including the height and width in the html can also reduce download time.
  • Images should include "alt" text that indicates what's in the picture.  This is important both for sight impaired people, but also for people who may have graphics turned off because they have slow Internet connections.
  • Similarly, any audio or video elements should have text, or captions explaining the information within them.
  • If multiple images are used on a page they should be a consistent width (if on top of each other) or height (if adjacent to each other) and should fill the space on the page, i.e. it's not appealing to have a small image with white space around it in a wider column.
  • We recommend against the use of background images as they often make pages difficult to read and take longer to load. This is a technique that has been discontinued by designers.

Content

  • Organize content logically from the top page down to the bottom.  It should be clear to visitors what's where.
  • People tend to scan web pages rather than read them.  Use shorter sentences and paragraphs and break up text more often than you might in a written document.
  • Group related information together.
  • Tables should be used to display tabular data clearly and should have row and column headers.  They should not be used for design or layout.

Sources:

http://www.grantasticdesigns.com/5rules.html

http://www.usability.gov

http://www.w3.org/WAI/quicktips/Overview.php