Style Guide - Introduction :: Georgia Perimeter College
Text Only
  • Skip to Content
    •  Style Guide - Introduction

    World-Wide Web Style Guide

    General Style Guidelines GPC Colors ADA Compliance
    HTML Validator Adding Images Page Backgrounds

    This document is intended to serve as a style guide for people who publish information on the World-Wide Web at Georgia Perimeter College.  

    This document is not intended to teach the basics of publishing such as HTML (Hypertext Markup Language) on the World-Wide Web, or how to create your own pages on the web server at GPC.  However, the GPC Office of Information Technology does offer classes for web publishers.  Before starting or editing web pages, it is highly recommended that you take the FrontPage Beginning and Intermediate Web Design classes for faculty and staff.  You may register for the classes and view the handouts at http://www.gpc.edu/~training/ .

    GPC Policy and the Law

    All World-Wide Web publishers must follow the guidelines set forth in GPC Policy 1100 on Information Technology.  In particular, the Georgia Perimeter College World Wide Web Policy Procedure B – Web Structure and Basic Rules, as well as all applicable state and federal laws.

    Copyright

    Of particular concern is copyright law. Contrary to what you may see other people do on the World-Wide Web, it is not legal to publish the work of others online without their permission. For more information, see Copyright issues for WWW publishers in the University System of Georgia.

    Proprietary Information

    In addition, every web publisher at GPC must take care not to permit site-licensed information to "leak" off the GPC campus. An important example is the information in proprietary databases licensed by the college and the passwords used to access them.

    General Style Guidelines

    Good web style is a complex subject, incorporating general principles of good writing style and good visual design as well as technical matters specific to the World-Wide Web. Here are a few of the most important (and most often overlooked) recommendations.

    GPC Colors

    These are the colors that are used throughout the GPC web pages:

    Maroon: #990033
    Blue: #000099
    Gold: #FFCC33

    Sign and date your pages

    Users need to know whether a web page is up to date and where to send corrections and questions. Be sure to include other pertinent e-mail addresses as well: a departmental web page should include not only the author's e-mail address, but also contact information for key staff in the department.  This will go in your <HEAD> section of your page.

    Example: <META NAME="AUTHOR" content="Pamela Joseph">

    Also, see the section on Meta Tags. 

    Insure that your pages are ADA (American Disabilities Act) Compliant

    One important step to insure that your pages are ADA compliant is to make sure that all your graphics contain ALT tags. This tag will be read by the screen reader.  

    Example: <img border="0" src="logo.jpg" alt="Link to Georgia Perimeter College's Home Page" width="65" height="75">

    Pages should all be checked at http://www.contentquality.com/mynewtester/cynthia.exe

    Other tips on how to make your pages disability friendly can be found at the Web Developer's Virtual Library. 

    Use widely established page layout and navigation designs

    Although you may want your page to stand out and look different, it is best to use the widely established page layouts found on the web. Users of the web are accustomed to navigating from the left side of the page (a side menu) or from the top.  If you put your links on the right side, these links may be overlooked in small screens, or not given a priority to the user.  Users are accustomed to looking on the right side for additional or optional information.  Users also look for the main contact for questions at the bottom of the document. An unusual layout can make reading of the page disruptive, information hard to find, and even frustrate the user to leaving your page.  A great web design guide can be found at: http://info.med.yale.edu/caim/manual/.

    Be sensitive to users of different web browsers

    Make sure that you don't unintentionally cut off your audience by using new HTML features or other formats which can't be handled by all browser software. The degree to which you need to stick to lowest-common-denominator HTML may be determined by your audience: if you only intend to reach users at GPC, you may choose to use new features associated with a particular browser, but if you intend to reach a worldwide audience, it may be best to conform to a more widely accepted standard.  It is of utmost importance to check your pages on multiple browsers such as Internet Explorer and FireFox..

    Standards and software on the web are constantly changing, so specific recommendations may quickly go out of date Here are a few:

    • Most users at GPC can view Acrobat, Flash, and Shockwave plugins, but many off-campus users (especially subscribers to online services such as AOL) do not.
    • The most current graphical browsers support PNG, JPG and GIFs. Almost all of the browsers being used support JPG and GIF formats. Unfortunately, a few older browsers still only support inline GIFS.

    Examine your web pages on a variety of platforms

    A page which looks great using the computer on your desk may look terrible in another environment. If you wish to reach a wide audience, be sure that your pages can be viewed under a variety of circumstances.

    Some examples are:

    • Larger & smaller screen sizes than your home or office PC.
    • Text-only WWW Browsers such as lynx.
    • Other types of computers, such as Apple Macintoshes.
    • A variety of web browsers: (FireFox, Internet Explorer, & AOL)

    Check your HTML with an HTML validator

    The standard HTML Validation service is located at http://validator.w3.org.

    Be careful about your image size and number of colors

    Don't use large images. Downloading large images makes the page slow to download especially for dialup users and may mean the browser will time-out and your page will not be shown at all. Also, the size of your image on your web page must be the actual size of the image or the image will be displayed blurry or disproportionate. To find the actual size of an image, double click on the image in Windows Explorer, it will be shown in your browser. Right-click on the picture and choose Properties, this will show the dimensions and size of your image. See an example image tag that includes dimensions above.

    Don't use distracting or illegible backgrounds.

    Almost any background image will make your text illegible on some monitors. Solid colors with highly contrasting text are better, and the standard gray or white is best of all. Aside from degrading the legibility of your text, a busy background may make the user weary of reading your page.

    Use descriptive titles.

    Users may come to a page from anywhere, especially those who use a search engine. Search engines often use the title as their link text. This will also help our search engine to properly find your page.  For instance, if a title is called "Campuses" that may contain maps to the campuses, the search engine may not find the page when a user searches for "maps".  Meta tags will also help the search engine find your page.

    Provide links among related pages.

    If you maintain several pages as a group, each subsidiary page should include a link back to the main page.

    Don't say "click here".

    Highlight the titles of documents to which you link or other key words in your text instead.

    Use a spell checker.

    Always spell check your pages! Microsoft FrontPage as well as Macromedia Dreamweaver have built-in spell checkers.

    Don't use spaces in your file names

    Using spaces in your file names may cause problems on different browsers. Keep your file names simple and descriptive. You may use the underscore "_" character to simulate a space in your file name.

    Don't abandon your web pages.

    People turn to the World-Wide Web for current information. Don't think of producing a web page as a one-time task but as an ongoing project.

    When in doubt, keep it simple.

    Part of the interest in the World-Wide Web is certainly its "gee whiz" appeal, but last year's exciting gimmick may be next year's yawner. If your purpose in putting information on the web is to communicate factual information, you may wish to choose a straightforward, sober style rather than the latest fad.

    The "GPC Look & Feel"

     

    What are the advantages of using the GPC Look and Feel?

    The GPC Look and Feel template is designed to provide a unified look for all web pages that seek to represent the college in some official way. By presenting official college web pages with consistent layout and navigation features, we create a professional presence on the web and make finding information easier for our viewers.

    The GPC Look and Feel template also eases the process of getting a departmental website up and running. The template provides most of the design and navigation features you need. This allows you to concentrate on the content of your site without having to worry about text formatting, navigation between pages and other design considerations.

    Any future changes or modifications to the GPC Look and Feel will automatically be applied to web pages that are constructed using this template. So, if the graphics being used are changed, the graphics on sites using this template will be updated automatically without having to do any edits.

    Things you should know about the GPC Look and Feel

    You will be need with two files to get you going. One file is named “sidemenu.htm” and the other is named “template.htm”. The “template” file will be used as you generate the content for the pages for your site. Once those files are created, you will edit the “sidemenu” file. These files will do a lot of the work for you in terms of setting up the basic architecture needed for your site.
    The template and side menu file are available for download:

    For information on using the GPC Look and Feel, view the training handouts or attend a training class.

    Most of the GPC Look and Feel design elements will not appear when you preview your pages from the hard drive The design elements that make up the GPC Look and Feel will show up once your pages are published onto the GPC server and you view them using the full web address.

    The "GPC Look & Feel" is required for official pages of the GPC Web Site (see description of an official page in the policy).  It is not encouraged for unofficial pages such as personal web pages. If you don't speak for GPC or one of its departments, please don't use this style.