The
standardization guidelines are organized into seven categories:
1.
Guidelines
2. Design & User
Interface
3. Designing
for the Visually Impaired
4. Typography
5. Existing Web
Standards
6. Conventions
7. Directory
Layout and Server Privileges
1. Guidelines
SSU WEB LEADER GUIDELINES
The following guidelines have been created in order to provide a consistent look and feel for the www.shawnee.edu web site.
Table of Contents for the
Guidelines:
*
All web pages should utilize a white background. If a table is used, it should
not be so large as to change the basic look and color of the background/page.
* Standard headers and footers should be used on all SSU web pages. Graphics should not be located above or beside the standard header and below or beside the footer.
* At this time individual or personal web pages
are not permitted on university servers. Pages or portions of pages or links,
which are person-specific, should not be included on any SSU web page. This
includes links which advertise or endorse items for personal gain or services.
The www.shawnee.edu web site does not
officially endorse any commercial product or service.
*
Any officially
recognized student organization is permitted to have a web presence on the
university web server. However, such organizations must have a faculty or
administrative sponsor who is responsible for the content on the organization's
web page(s). This content must be generalized, adhere to the Standardization
Guidelines listed on this page, and reflect the university's mission and
strategic plan. The sponsor is responsible for reviewing the content and
sending the email notification (see
General Development Information). Page content or links to external sites
which are deemed to be of an offensive nature are subject to removal without
notice.
*
Hotlinks should be relevant to the topic of a given page.
*
Minor modifications will be made to web pages, such as grammar, spelling, or
obvious errors. If there are major errors in the page, the web leader will be
notified so that he/she may correct the problem. Pages will be checked for
technical accuracy and edited if necessary.
*
Pages and/or links that do not adhere to the university standards for web pages,
are not accurate, or are not current, are subject to removal.
*
Music should not be used on any page.
*
Photographs and graphics need be of a good quality. Photos should be resized in
a photo editor, not in FrontPage.
*
Site design is property of Shawnee State University, not of the individual web
leader. A page should not state that it has been designed by an individual web
leader. However, a web leader may indicate that he/she maintains the content of
the page(s). All pages have a "Page maintained by XXX" in the footer section of
the page. Web leaders should place their name (linked with their email address)
in this section so that a user can contact them directly if needed.
*
It is important to maintain the integrity of the SSU site, particularly the home
page. The links placed on the home page reflect categories, not specific items
(see
General Development Information: Design). We receive many requests to link
to pages directly from the homepage. However, in most cases it is not possible
to place a link on the homepage. We do try to accommodate a web leaders request
and place links to his/her page appropriately throughout the site.
DESIGN TOOLS:
Our web server has been set up with Front Page Extensions, our preferable method of page development. FrontPage can be loaded on staff machines at no charge and training is provided by the department of Internet Development. Dream Weaver may also be used as a design tool, but training is not provided and each individual department must purchase this product. Please do not edit university web pages with Word.
ACCESS TO SERVER:
Once access to the development server is requested and processed, we will assist the web leader in mapping his/her drive.
TRAINING:
FrontPage training is provided to web leaders either in groups or on an individual basis. For additional information, please call extension 3138 or 3230.
GENERAL DEVELOPMENT INFORMATION:
* Page templates are placed in all of the web folders. The appropriate template should be used to create new pages. To edit an existing page, just open the page with your HTML editor, make the changes and resave your page. Once the page(s) have been edited and saved, all changes can be viewed on the development site at http://dev2.shawnee.edu. This is an internal site, and cannot be viewed outside of the Shawnee domain.
* If development assistance is required, send an email to
HELP_DESK@shawnee.edu and CC
webupdates@shawnee.edu. This email should contain detailed information
regarding the request. Or, call extension 3138 or 3230 for assistance.
* When the web leader is satisfied that his/her page is correct and is ready to
be uploaded to the server, he/she should send an email to
HELP_DESK@shawnee.edu and CC
webupdates@shawnee.edu requesting that the pages be uploaded to the
production server. The email should include the folder name, page(s) name, and
the name of any graphics or files that need to be moved over as well.
2. Design is
communication of concepts and ideas. Good design simultaneously challenges and
fulfills expectations. The purpose of graphic design is to make it as easy as
possible for readers/viewers/users to understand your message. Success is
measured by how quickly and effectively you communicate your ideas to the end
user. Designers should strive for clarity and impact - visual design is a
tool for relaying a message. It is not the message.
Good design does not occur suddenly or without work. It is an evolution of
successes and failures. Don't ever be so attached to a design element that you
can't throw it away and start over.
Using a dominant visual or an element provides a focal point. Avoid static
balance but be consistent (standardize obvious elements). Tensions can add
interest to a page. Unequal/unpredictable left/right or top/bottom balance helps
provide movement. Use white space around the work to add emphasis.
The user interface of Shawnee.edu provides well-designed interactions that
give users what they need - clearly and naturally. When planning additions, you
should focus on usability, functionality, availability, reliability and
usefulness. Make the organization intuitive and appropriate to give the user a
sense of control. Think of your site's goal, its
content and its audience.
- Why is the user there?
- Is the content visual or editorial?
- How old is the audience? Where are they from?
The navigation scheme
uses:
- A consistent interface
- An easy-to-learn structure
- Mechanisms that give users feedback
- Understandable nomenclature
- Intuitive icons paired with text
- Reliable means of getting users from one point to another. It does not
rely on the "back" button
When planning new
sections, you should establish a hierarchy of information. Do you want to
present related information on the same level or organize it using drill-down
techniques? This established, you could then design according to the site's
content (appropriate, logical, intuitive), establishing a convention consistent
relationship between main and sub navigation. Provide both redundant text
navigation and ALT Image tags for users surfing in text mode only.
- Be brief, but descriptive: page titles should repeat the site name and distinguish that page from the others and describe the page contents in under 10 words, e.g., Shawnee.edu - Admission requirements
- Create growth plans: schedule for maintenance.
According to Forrester
Research, these factors are most important in driving repeat visitors to
their favorite web sites:
1. High quality
content - 75%
2. Ease of use - 66%
3. Quick to download - 58%
4. Updated frequently - 54%
5. Coupons and incentives - 14%
6. Favorite brands - 13%
7. Cutting edge technology - 12%
8. Games - 12%
9. Purchasing capabilities - 11%
10. Customizable content - 10%
11. Chat - 10%
12. Other - 6%
From this list, it is obvious that outdated content does not provide a reason for users to return to the site with any frequency. The success of the site is directly related to the effort that goes into providing current and relevant content. Daily changes should not be uncommon and should be in the hands of the web leaders. Efforts to limit access to the site files, although certainly understandable, create bottlenecks that thwart the ability of web leaders to keep their sections current. They should have direct FTP access to their directories and should be held responsible for the conditions of the content.
3. Visually Impaired:
This site has been designed for use by the visually impaired who use specialized
"screen reader" software. As part of an amendment to the Rehabilitation Act of
1973, the US government recently passed regulations requiring that federal web
sites be accessible to people with disabilities by the end of the year (2000).
Screen readers use voice
synthesis to read aloud the contents of windows, menus and other interface
elements. Screen readers interpret HTML tags, particularly those dealing with
hyperlinks, web forms, and graphics. Users tab from one link to the next, thus
it is important to write links that mean something when interpreted.
Providing a high degree of
accessibility is relatively easy:
- Describe graphics with an ALT tag
- Label image maps to denote clickable hotspots
- Write meaningful links - View the schedule works better than - click here for the schedule. Under no circumstances should the words "Click here" be used as a link
- Provide text-based navigation
- Label form elements properly
- Put the most likely choice first in menus
- Simplify tables
4. Typography issues deal primarily with legibility and style.
General classes of
typefaces:
- Serif or antique - has "feet" that create a horizontal movement the eye tends to follow. The original writing instrument used to create letters was cumbersome and was held like a dagger. This led to the uneven weights and the unavoidable creation of "feet" (Times, Bodoni, Century Schoolbook).
- Sans Serif or grotesque - originally developed because the serifs were causing the letter blocks to split on printing presses. Modern sans serif fonts are usually computer-generated. They are characterized by their equal balance and lack of serifs (Helvetica, Futura, Kabel).
In HTML, you should
generally use sans serif fonts. Each character is made up of pixels and the
simpler the shape, the more clearly it rends on-screen. Serif fonts don't retain
their shapes at smaller sizes and the distinguishing character shapes blur.
Specify typefaces that users have installed on their computers and that will
look consistent regardless of viewing on MAC or PC. Remember that Macs render 72
dpi on screen and print the same size as you see, PCs display at 96 dpi and
print smaller than you see.
When specifying a typeface
for a web page, be sure to add alternative typefaces in case the user doesn't
have your first choice installed on their machine. You should also avoid using
more than two different typefaces on one page. When you mix fonts, try to use
both serif and sans serif (Times and Helvetica) rather than two of the same
class (Helvetica and Arial).
Important note about
words: People read the shapes of words not the individual letters. It is
therefore easier to quickly read a word with upper and lower case THAN A WORD IN
ALL UPPER CASE, THIS IS BECAUSE THE SHAPE OF THE WORD NOW BECOMES A RECTANGLE
AND FORCES THE READER TO PICK YOU INDIVIDUAL LETTERS. The unique shape the word
creates is what a person recognizes. All uppercase is also considered poor
typography.
Shawnee.edu incorporates
several typefaces of the sans serif family:
| Body text is in the Arial, Helvetica, sans serif family, size 2, color #000000 | Many tables use the Arial, Helvetica, sans serif family, size 2, various colors |
| Page name headings are in the Arial, Helvetica, sans serif family, size 3, color #003366 | Body text headings are in the Arial, Helvetica, sans serif family, size 2, #003366 |
| Navigation menu text is in the Arial, Helvetica, sans serif family, size 2, color #808080 | Links appear as underlined blue text |
5. Existing web
standards are what help people travel from one site to the next without
relearning how common elements react to their input. Shawnee.edu has been
designed with these standards in mind.
- Avoid underlining words that aren't links
- Avoid using the standard link "blue" (hex value #0000FF) on words that aren't links
- Newer browsers let the coder add a VLINK (visited link) color to let users know if they have already accessed a link (text="#000000" link="#0000FF" vlink="#999999" alink="#FF0000"). The ALINK is for active link. Choose different colors for your LINK, VLINK, and ALINK values.
- Use .JPG format for photographs and artwork with graduated tones · Use .GIF for flat colored artwork · Always make your graphics 72 dpi · If a link points to a .PDF or some other type of file that requires a download, you should say so. You should also tell them how big the file is and what they need to view it, e.g., "View our schedule Schedule.PDF [106k] You will need Adobe Acrobat Reader to view this file." This works much better than "View our schedule."
- Never rely on the back button as a form of navigation, always give the user a way to "get back" in the form of a link.
6. Conventions used
in Shawnee.edu will help University Information Services and web leaders create
a consistent interface.
Naming and Titling
conventions
Page Names are
distinguished from page titles by their length and location. The page titles
appear on the top line or title bar of the web browser. The page name, in most
templates, is a short (generally three words of fewer) phrase describing the
contents of the page. It is displayed in a box on screen left. In the templates
it is represented by the words "templateXX." This text should be replaced with a
relevant name before the page is put into production.
Directory Structure
- Each directory contains a default page named index.html. These are the section
"gateway" pages and should provide links to all subsections or pages within the
section. In some cases, the amount of content has dictated that the index page
is the only page in the directory. In that case, use either another template.
Templates are provided in your web folder, and can be customized according to
your needs. Call extension 3138 for more details.
Each directory also has a graphics folder to hold all images (photographs and graphics) used on pages within the directory. This arrangement allows web leaders maximum control over their sections and provides easy maintenance of the site by consolidating content into logical groupings.
Navigational
Conventions
There are certain global navigational elements in use throughout the site. In the header graphic, the top navigation always takes the user back to the parent directory (shawnee.edu). Under the header graphic, are links called bread crumbs. These navigational aids help the user identify their location and serve as links to take the user back to index pages.
7. The directory layout
and server privileges will help the Internet Development Office and the
University Information Services personnel maintain the server. This will be
achieved by designating each department and/or section its own directory on the
web server.
It is also recommended
that only persons responsible for their department's web content have access to
the department directory.