Web Style Guide

Overview

The goal of this Style Guide is to present basic information on planning and designing web documents, tips for using graphics, and other suggestions which may be helpful to those who are constructing Mercer University associated web pages. This guide will not attempt to re-invent the wheel by providing detailed instructions for HTML syntax and formatting available elsewhere on the WWW. However, it will reference some very helpful on-line guides for creating web pages consistent with Mercer University style standards.

These are guidelines, not rules. Creativity in page design is encouraged. However, if Mercer's various schools, departments, offices, services, and programs apply these guidelines to web pages:

• Users will more likely find the information they seek.
• It will contribute a sense of continuity that users will appreciate as they explore the Mercer University web.
• A positive, unified (not necessarily uniform) visual identity to the millions of electronic eyes who visit MU through the gateways of the World Wide Web will be established.

Back to the top

Getting Started

Mercer University academic departments or organizations interested in publishing homepages on the MU web may choose to set up their own Web server or obtain an account on http://www.mercer.edu. For information about server software and hardware, contact the Office of Computer and Information Services. For detailed procedures or more information on obtaining an account on www.mercer.edu, send a request via e-mail to Mercer's Webmaster (webmaster@mercer.edu).

Once you have found a place to publish your pages, you will need to learn how to write and maintain your pages. Writing pages is not difficult. Web pages are simply text files that have been tagged using "Hypertext Markup Language" (HTML). Whether you are a beginner or an accomplished HTML author, you can find all the help you need at Mercer's WWW Reference Library.

To help departments start publishing their information on the web, we have developed a template file. This template is designed to help departments put information on-line quickly. It is not intended as the one, approved, prescription for web design at Mercer. However, as you modify the template, keep in mind the principles outlined in this style guide. The template and directions for downloading it off of the web are located at Mercer's Graphics Library.

Before a departmental page is approved for linking to the Mercer University home page, the group represented must select an individual who is responsible for maintaining that information. It is important that one person be responsible for web documents. However, some departments may choose to have that person coordinate the electronic publishing effort rather than doing it all himself or herself. Specifically, we recommend that the individual perform the following functions:

• Gather information for Internet publication.
• Decide how the information will be organized.
• Create and maintain the department's web pages.
• Respond to inquiries about the information.
• Integrate Internet publishing into their group's publication cycle.
• Decide how often their information is going to change and how often their information will be updated.
• Verify that the information on departmental web documents is up-to-date.

Back to the top

Begin with a Plan

Before you write your first HTML tag, you should:

• Identify all your audiences.

  Some web documents may be the first point of contact with Mercer University.

  Other web documents are most meaningful to the campus community.

• Identify the purposes of your pages.

  What are you going to publish, why are you going to publish it, and how are you going to present it so that it addresses the needs of your audience and accomplishes your purpose.
  

Back to the top

The Ideal Web Document

Most would agree that well designed web pages:

• Use a consistent design.
• Communicate effectively.
• Are designed for interactivity.
• Lead easily to related information.
• Are sensitive to non-graphical browsers.
• Use graphics wisely (aid the reader without getting in the way).
• Are carefully checked for grammar, spelling, accuracy and broken links.
• Are kept current (Most Important!).

To achieve this ideal stay simple and consistently apply a few basic design and organizational principles to related web pages. Consider page content and structure, the wording of your page, the links you create, the graphics you use, and proofread-edit carefully.

Back to the top

Tips for Using Text and Graphics

Text:

• The text on a document should be no more than three or four 640x480 screens long. Longer documents (such as this one) should have a table of contents at the top of the page linking to areas within the document. If the latter approach is taken, be sure to provide a "back to the top" link in various places within the document so that users do not have to scroll to the top. Feel free to copy the source code on this document in setting up large pages.

Graphics:

• Since many people use browsers that are text-based, do not make web documents totally image-dependent.
• End users should not have to scroll the page to see the entire image. If they have to scroll, the desired effect of the image is often lost. Therefore, limit graphics to a maximum of 470 pixels wide by 260 pixels long in order to display on 13- to 15-inch monitors.
• Scan images for Web use at 72 pixels (dots) per inch. Computer monitors typically display at 72 dpi, making it unnecessary to save images at higher resolutions. The higher the resolution, the larger the file size.
• It's easy to go overboard with graphics so try to use graphics and other media files sparingly. While excellent graphics can add great value to a page, too many ambiguous buttons and icons can obscure your message.
• Try to keep your small graphics -- buttons, icons, thumbnails of photos etc.-- under 20K.
• When it comes to large graphics, the number-one rule is to keep the file size as small as possible. Many people access the Web via modem or service provider, dramatically slowing the speed in which pages load. So you do not lose the viewer's interest it is important to keep these images under 130k if possible.
• Try not to use more than one large graphic per page. If you have a collection of graphics you'd like to display, shrink the graphic to thumbnail size and link it to a full-sized version. For example, the following tags would make "small_bear.gif" be a link to another file that might contain a larger picture:

       <a href="large_bear.html">
       <img src="small_bear.gif"
       alt="Picture of a Mercer Bear" border=0></a> 
  

Back to the top

Headers and Footers

Headers:

• The design of a web page header should serve to identify the document, provide a description of the information and set forth the relationship of the page with other pages in the document or at a site.The header will generally consist of a title and a graphic. The heading should include a department title or a section title.

Footers:

• Remember to stamp all your documents with the Mercer University footer. The standard footer should be included on all Mercer web documents. The footer is an easy way to date, address, and link your web documents. The footer may be centered or flush left and it generally should be set off from the body of the page with a hard rule or paragraph separator above the footer text. See the sample below and at the end of this document. Substitute your own information for generic elements, such as the date and comment fields.

Send questions or comments to someone@mercer.edu
©Copyright Month Day Year--Mercer University.
All rights reserved.
Revised: Month Day Year

 

• Comments: Users who want to send comments or ask questions about the information on a web page need to know whom to contact. Include in the footer the name of someone who will field questions and comments, and directions for contacting him or her (phone number, address, etc.). The easy way to do this is to link the contact person's name to an e-mail form by using the HTML "mailto" command.
• Date: Change the revision date in the footer whenever you update your page.
  

Back to the top

---

Creating Links

The Mercer University Web hierarchy begins at the Mercer home page, located at "http://www.mercer.edu". Be sure that your home page includes a link to this page, as well as related pages in your web site. Pages that include links to Mercer University's Home Page contribute a sense of continuity, while links to related pages provide context for the information.

• If your web documents have links to pages that you do not maintain, check those links from time to time for validity.
• If you want your pages read in sequence, include links to help the end user find the next or previous document.
• It is important to include links that return a user to the starting point of major sections.

Back to the top

Copyright Issues

Many web documents do not include a statement about copyright. Although it is fairly easy to copy text or images for use elsewhere on the World Wide Web, this should not be done without permission. Unless rights of use are clearly stated with respect to an individual item, an assumption should be made that all text and images appearing on the WWW are protected by the U.S. Copyright Act and should not be reproduced without written permission from the copyright holder.

Back to the top

Before You Post it, Test it

Before you post your documents ask yourself these questions:

• Do the pages provide a positive image of Mercer University?
• Do the pages invite end users to further explore what our campus has to offer?
• Do the pages provide information that addresses questions of prospective students, as well as meet the needs of students, faculty, and staff who are already on campus?

Don't assume that all your readers will use the same browser and defaults that you do. Try to stick with standard HTML 2.0- and 3.0-tags that are supported by major browsers. The use of Netscape or Explorer extensions can enhance image display and download time, but one must always keep in mind the effect those extensions may have in other browsers. If it is possible, test all of your web pages using various platforms, monitors, and web browsers to be sure your HTML tags are interpreted as you intend. It is easy to design pages that are impressive when viewed on speedy computers with fancy monitors. The challenge is to write HTML code that is equally functional with the text-only Lynx software, with Netscape, Explorer and Mosaic, or with the ever-growing selection of web software available for general and commercial use. Here are some specific things to look for when you test:

• Using graphics alone to convey a message: If you want your graphics to be understood by all web software, include an "alt" attribute for inline images, and test your graphics with various platforms, monitors, and web software. It should look good, or at least coherent, on any monitor or browser.
• Image maps: If you use image maps, ask others to test your map for reliability.
• Textured backgrounds: On some monitors, text will dissolve into heavily textured backgrounds that render it unreadable.
• Load time for graphics: Test your page over a 14,400 modem. Do pages load quickly or is it taking too long? Keep in mind that many viewers use modems or Internet providers...so keep it short!
• Print your pages and inspect them: This is a good way to proofread and edit your documents.
• Test your links: Do the links work? Is navigation easy? Are the links rewarding?
  

Back to the top

Send questions or comments to the Web Administrator
©Copyright September 7, 1996--Mercer University.
All rights reserved.
Revised: March 30, 1998