standardization guidelines are organized into seven categories:
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
|Background||Page headers and footers|
|Personal web pages (personal information)||Student Organizations|
|Removal of pages||Music|
|Photographs and graphics||Copyright|
|Links on homepage|
* 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.
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.
FrontPage training is provided to web leaders either in groups or on an individual basis. For additional information, please call extension 3138 or 3230.
* 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 firstname.lastname@example.org. 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 email@example.com 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
- 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.
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.