The following guidelines are intended to provide Website developers with current information on Website organization, navigation, layout, graphics, technology, and content. Websites that adhere to these guidelines should be easier to maintain and redesign, and will have a more uniform look across platforms and browsers. To submit comments or for assistance with these guidelines, please contact Information Technology, ext. 5404
RECOMMENDED SEVEN ELEMENTS FOR OFFICIAL UNIVERSITY WEBSITES
Official Ashland University Websites are those connected with a distinct unit of Ashland University. To list your Website with the Ashland University Website Directory, please contact the Information Technology Helpdesk.
1. ASHLAND UNIVERSITY NAME
Ashland University Websites should display the Ashland University name on the home page, and on as many succeeding pages as possible. Size, location, font, and color of the Ashland University name will depend on individual Web design.2. ASHLAND UNIVERSITY SEAL
Websites should display the Ashland University seal on their home page.3. LINK TO ASHLAND UNIVERSITY HOME PAGE
Websites should include a link to the Ashland University home page, http://www.ashland.edu/, on their navigation. Alternatively, if current Website navigation precludes adding a new navigation button, a prominent text link to the Ashland home page should be included.4. LAST MODIFIED DATE
Pages on which the latest information is essential should include the phrase "Last modified:" or "Last updated:" and the date the page was updated. Websites that are not updated on a regular basis should not include a last modified date.5. CONTACT INFORMATION
Websites should display contact information at the bottom of each page (file). E-mail addresses should be written as johnsmith@ashland.edu instead of John Smith.6. COPYRIGHT POLICY
A copyright notice should appear on the home page of each Ashland University Website. A running copyright date can also be used to cover content on your site from previous years, as well as current material.Ex. Copyright 2002 Ashland University. All rights reserved.
7. PRIVACY POLICY
The Federal Trade Commission (FTC) recommends that consumer-oriented commercial Websites follow Fair Information Practices. University Websites are not considered consumer-oriented commercial Websites.Consumer-oriented commercial Websites should provide their consumers with:
See Privacy Online, FTC Report to Congress (pdf).
EXTERNAL ORGANIZATION GUIDELINES
Web sites for entities other than Ashland University organizations, Ashland University affiliates, or officially registered student organizations may be hosted on Ashland University servers only when the entity has a relationship with the University that supports the University's mission.
EXTERNAL ORGANIZATION CRITERIA
A specific relationship may be demonstrated by one or more of the following:
1. The entity is an organization of which Ashland University itself is a member.
2. The entity is an organization of which a faculty or staff member is a member, and the relevant department chair, director, or vice president approves the hosting as being in support of Ashland University's mission.
3. The Web Advisory Council determines that the entity has another relationship to the University sufficient to support the University's teaching, research, or service missions.MINIMUM REQUIREMENTS
University organizations that link to the University homepage or reside on a University central server must meet the following requirements:
1. The information provided on Web page(s), and any links to it (includes links from the site to other sites), are directly related to the fulfillment of the organizations mission in support of Ashland University.
2. The organization head provides written approval of the link or Website and accepts responsibility for the content of the site and any links that may be made to it.
3. All criteria in the Ashland University Website Guidelines are followed.
4. The Web Project Request System at http://eagleweb.ashland.edu/ must be used to request a link to the Ashland University server, or to request space on the server.BANDWIDTH USE AND RESTRICTIONS
Internet traffic between Ashland University and the outside world flows through a connection for which the University contracts on a yearly basis. The capability of this connection is carefully monitored to support the Ashland University community as a whole and External Organizations Websites would be limited to no more than 8000 megabytes of monthly data transfer bandwidth. In order to reduce the strain on available technical and financial resources, University Website hosts and developers should consider the following guidelines:
1. Websites with significant audiences both within and outside the University community may best be served through the use of redundant or mirrored sites both within the University network and on the public Internet.
2. Websites whose primary audience is within the University community should be hosted on servers within the University network.
3. Websites whose primary audience is outside the University community and could expect a large amount of traffic may best be hosted on servers outside the University network.LICENSED RESOURCES
Some information and software resources available through the Ashland University network are licensed solely for use of the Ashland University community. Redistribution of licensed resources to external users is not permitted.
PHASES OF WEBSITE DEVELOPMENT
Developers of Websites should incorporate the user's perspective into every aspect of Website development: content, design, navigation, technology, and site management
Define audience(s), goals, look and feel
Perform competitive analysis of comparable sites; look at functionality and design components that may be appropriate for your site
Develop and organize content topics
Develop information flowchart (blueprint of Website)
Apply appropriate cascading style sheet and/or include files
Test Website in Netscape 4.7 and Internet Explorer 4.x on both PC and Mac
Insert content
ORGANIZATION OF FILES AND DIRECTORIES
Directory structure should be kept as simple as possible for easy site maintenance. Main pages of the Website should not be put into directories; these files should be saved directly in the top directory or "root directory" for easy access. Images can be kept in a separate images directory. Directories should be created only when there is more than one related file.REDESIGNING DIRECTORY STRUCTURE
The best time to change a complex directory structure is when a site is being redesigned. To simplify the directory structure, you can rename files and directories using descriptive names and move related files into corresponding directories. Place the directories on the root, if possible. Site maintenance will be easier with a "shallow" directory structure that contains fewer levels (nested directories).
To redirect users who have bookmarked your main pages, consider adding a redirect page that sends them to the new URL.
It may be helpful to add an error page with "We're sorry, but the url you requested has been changed." Larger Websites may want to include a site map on the error page.
LOOK AND FEEL
Page layout and graphics should be consistent on all pages.
The top graphical banner and navigation should make up about 25% of your Web page, leaving the rest of your page for content. White space can help separate the sections of your page and make searching easier.
The top banner should contain the site identity and may also contain the name of the section
Keep in mind that exceptionally large graphics allow less space for content and can increase download time.
Large top banners can be sliced into 3 images to decrease download time.
Some users find animated gifs, scrolling headlines, and blinking text distracting.GRAPHICS AND IMAGES
All original graphics containing layers (Photoshop psd or Illustrator eps files) should be kept in a secure place and available for site modifications.
Generally, gif files should be used for artwork and jpg files for photographs.
Compress gifs to decrease load time. Include the width and height of the image in the image tag to speed up loading of the image. Larger images can be sliced and then displayed together in HTML tables. Alternatively, a large image can be displayed as a small thumbnail image that is linked to another page with the full-sized graphic.
Images should be relevant to content on the page.PAGE SIZE
Pages that are under 40K will load quickly. Generally, each page and its associated graphics should be no larger than 70-80K.COLOR
The browser-safe color palette, consisting of 216 colors out of a possible 256 (40 colors are left out due to color variations between the Mac and PC), is recommended for all navigation and large graphics. Browser-safe colors will appear nearly the same on a PC or Mac; graphics developed on a Mac will be slightly darker on a PC.
The browser-safe color palette can be viewed at http://www.lynda.com/hexh.html.FONTS
Designate a font and a relative font size for a consistent look to your pages. View pages in both Netscape and Internet Explorer - each browser displays font sizes differently.
Recommended fonts for body text are:
Sans Serif: Arial, Helvetica * Arial is one of the most readable fonts on a Web page
Serif: Times New Roman, Times
If you are using Cascading Style Sheets consider using relative font sizes (em or a percentage) to increase accessibility. A relative font size will accommodate a variety of monitor resolutions and visual acuities.
http://www.w3.org/TR/WCAG10-CSS-TECHS/#units
http://www.w3.org/TR/WAI-WEBCONTENT-TECHS/#tech-relative-unitsH1 {font-size: 2em} relative font
H1 {font-size: 12pt} fixed font
Note that future browsers will not support <font> tags but will support CSS.PRINTING
If you want your users to be able to print your pages from the browser file menu, limit the fixed width of your tables to approximately 660-680 pixels. Run a test to ensure that your page prints correctly. Alternatively, provide a link to a "printer-friendly version," a text only page. Include your site name and Ashland University on the top of your printer-friendly page.FRAMES
Frames are not recommended for Ashland University Websites because they present issues with search engines, screen/text readers, and bookmarks.USABILITY STUDIES
Conduct usability studies to determine the needs of your audiences as early as possible in the Website development process. This involves determining target audiences, developing real user scenarios, and observing how test groups navigate through your site. Note what pathways they take and any problems incurred. Examples of users/audiences are prospective students and faculty, current students and faculty, staff, alumni, and community members.
NAVIGATION
GENERAL NAVIGATION
Use a consistent method of navigation on every page. Keep the following questions in mind when developing navigation for each page: Where am I? Where have I been? Where can I go?
Good navigation is critical and can increase the user's ability to find information on your Website. Navigation should be based on how users navigate through your site. Usability studies can provide information on each audience to determine what information they are searching for and how they search for it. See the above section on usability studies.
An increasing number of Websites feature main navigation on the left side of the page. When designing a left navigation menu, keep in mind that some users are using older 13-inch monitors and may only see the top portion of the navigation. The navigation for the main sections of the Website should at the top of the navigation menu and should be visible without scrolling.
Primary navigation usually consists of 5 - 9 main sections (buttons). Submenus can be added to display subsections. A relatively small Website might have an open navigation menu on the left that displays all sections and subsections.
Site utilities (home, about us, site map, contact us) can be grouped together and have a smaller font.
Always provide a link on every page to your site's home page (in addition to the link to the Ashland University home page) so that users don't get stranded.SITE MAP AND SITE INDEX
Larger sites should include a site map. The site map should contain a comprehensive list of links to all sections and subsections. The link to the site map should be clearly visible.
Site indexes are starting to replace site maps. Each department or unit is listed in an A-Z listing for the entire site.SITE SEARCH
For large or complex Websites, you may wish to include a site search so that users can quickly find what they are looking for. Contact Information Technology for assistance with adding a free Google search to your site.SECONDARY BROWSER WINDOWS
Opening a second browser window is appropriate in some situations, for example, if you want the user to go to the Adobe Website to download Acrobat Reader to read pdf files. The user can download the reader without leaving your site.
Set the second browser window to a smaller size and to the right of the main window.
If you open a second window within your site, provide a close button on your second window because the back button will be disabled. See the following javascript source code.<a href="#" onclick="window.close('substep')"><img src="images/closewindow.gif" width="120" height="32" alt="Click to Close Window" border="0"></a>
ORGANIZATION OF CONTENT
INFORMATION FLOWCHART
Develop a flowchart for the information flow of the site taking into account how the user will navigate through the site. Determine the organizational structure that will best meet the needs of all your audiences and allows them to find information quickly. Information should be easily accessible and not buried. In general, information should be accessible within four mouse clicks.LINKS
Users often scan a page for links instead of reading the content. Write descriptive links that consist of two-word or three-word phrases. Short or one-word links are often unnoticeable. Replace "more" and "click here" links with descriptive text links.
Consider adding (pdf) after a link to a pdf file to inform users that they are clicking on a pdf file
EX. Financial Aid Estimator (pdf)
Some e-mail programs do not link properly with a mailto. E-mail addresses should be written out in full, e.g., yourname@ashland.edu, so they can be easily copied.CONTENT AND TEXT
The most important information should be on the main pages of your site. Additionally, on each individual page, the most important information should be at the top. State the conclusion in the topic sentence and then add details to support it.
To orient users, provide background information about your site on your home page. Avoid welcome statements that do not contain important information about your site.
Assemble the site content that already exists (e.g., print publications) and determine what needs to be added or excluded. Print information should be rewritten for the Web. Consider breaking text into short, easily understandable segments. Information can be organized from the "bottom up." "Chunk" content into categories and organize the categories into larger groups. Look for natural divisions and logical groupings. It is not necessary to categorize content for research and long-archived documents.
Content should be concise, scannable, and clearly understandable to an international audience. Avoid using Ashland University acronyms and jargon that are unfamiliar to people outside the University or your field of study.
To increase the scannability of your pages, use bulleted lists and emphasize key words by using colored text, highlighting, and hypertext. Subheadings can be broken down into sub-subheadings.*** Organization of information and information flow should not be based on department structure. ***
Page headings should be identical to the link titles. Page headings should accurately describe the content and should be located above the content. Subheadings can be emphasized using bold or colored font or a larger font than the content.
Content should be single-spaced with double spaces between paragraphs. Paragraphs do not need to be indented.
All information displayed should be appropriate for public disclosure.
Use full names of University departments and committees.
The text on the navigation buttons and in the content should be large enough for the average reader to read easily. A 12-pixel font in cascading style sheets displays well in Internet Explorer and Netscape.
Tables will give you more control over how your text is displayed in Internet Explorer and Netscape.
Underlined font should be used only for bibliography and links.
Include links in your text to pages within your site containing related or more detailed information.
TECHNOLOGY
HTMLONLINE RESOURCES
Due to variation in individual Web browsers, use of the standard HTML and Cascading Style Sheets (CSS) is recommended. The World Wide Web Consortium (W3C), the organization that develops international HTML standards, has a free HTML validation service that checks HTML pages, http://validator.w3.org/.
XHTML 1.0, Extensible HyperText Markup Language consists of HTML and Cascading Style Sheets. XHTML is expected to replace HTML in the future and the W3C is currently developing additional tags for XHTML.HTML EDITORS
Vendor-specific HTML editors, such as Microsoft Front Page or Netscape Composer, can add unnecessary and proprietary code. Use notepad or an editor like Macromedia Dreamweaver, Namo, or Homesite (free at http://download.com.com/3150-2048-0-6-1.html) that does not add extra code. Please contact Information Technology to obtain a copy of the Namo editor.TITLE TAGS
Title tags are important for search engine indexing and bookmarks. When indexing a page, search engines search title tags before meta tags. Each title tag should be unique from the other title tags in the Website and should include a descriptive name of the page content first, followed by your department name and Ashland University. A title tag can be relatively short or as long as 60 characters. Avoid special characters, ampersands, question marks, "a," "as," and "the" in your titles.
Avoid using "Welcome to the Department..." the title tag should start with specific information and end with the most general information.Example:
<title>Graduate Programs - Doctor of Education - Ashland University</title>META TAGS
Keyword and Description meta tags can help increase search results for your Website. Each page should have unique keyword and description meta tags based on the content of the page.The Keywords meta tag describes the content of your page. Use one-, two-, or three-word phrases separated by commas. Tag size should be between 300 and 500 characters for optimal search engine results. The content of the Description meta tag is displayed on a results page of a search engine. If the description tag is too long some search engines may not display it. The recommended limit is 200 characters.
Example:
<meta name="keywords" content="ashland, information technology, computer training, Website administrator, project management, it project management, it skills, certificate, certifications, certified instructors, computer labs, online course training, video conference, lab assistance ">
<meta name="description" content="The Center for Information Technologies at Ashland University is a computer training center for information technology professionals.">Check your meta description and keywords tags with Northern Webs Meta Medic. Input your url at the bottom of this page, http://www.northernwebs.com/set/setsimjr.html.
Free meta tag generators are available at http://kresch.com/metatags/ and http://www.siteup.com/meta.html.
BROWSERS
Design your site for Netscape 4.7x and Internet Explorer 4.0 and higher. Test your Website on both a PC and Mac.
Internet Explorer 5.0 and up available for free at: http://www.microsoft.com/windows/ie/previous/default.asp
Internet Explorer 4.01 available free at: ftp://browsers.evolt.org/ie/32bit/4.01/ie4install.exe
Netscape 4.7x available for free at: http://wp.netscape.com/download/archive.html?cp=dowarc
You can also check your site on AOL or Lynx, a text browser.DOWNLOAD TIME
Off-campus visitors to your site may be using relatively slow modems (28.8K) to access the Internet; test your Website using a slow modem. Try to keep download time as short as possible. If it takes more than 10-15 seconds to view the site, check your image sizes. Additionally, adding the width and height attributes to your image tag will decrease download time. Problems with HTML or JavaScript can also increase your download time.SEARCH ENGINES
Consider registering your site with commercial search engines such as Google and Alta Vista. Most search engines have information on their home page about listing sites with their search engine. Typically, search engines will list your site at no charge (Yahoo does charge).FORMS
Display a confirmation page to the user after a form has been submitted.
The size of text boxes on forms varies according to which browser the form is displayed on. Text boxes displayed in Netscape Communicator will be longer than those displayed in Internet Explorer.
Contact the Information Technology Helpdesk if you need help storing or e-mailing your form data.INCLUDE FILES
Include files can contain the navigation and graphic files for a Website. The content of a page is saved in a separate file and "calls" the include file to display the navigation. Include files allow you to quickly modify or replace the navigation and graphics for a Website without changing any of the content pages.ACCESSIBILITY
All electronic publications should be accessible to people with disabilities.
Always try to provide a text description of the content.
Use individual navigation buttons as an alternative to image map navigation.
Avoid using non-standard HTML features such as "BLINK" to make your pages more accessible.Recommended Resources:
W3C Web content accessiblity guidelines
Web Accessibility Initiative (WAI)
WAI Quick Tips Reference Card
Checkpoints from the Web Content Accessibility
Architectural and Transportation Barriers Compliance Board
Web Accessibility Facts & Figures, Wright State University
Simplified Web Accessibility Guide
Online course on accessibility
Accessability Detailed tips
Color-blind Simulation
Color-blindness resource
Check your site for accessibility at Bobby
CASCADING STYLE SHEETS
If you are using Cascading Style Sheets consider using relative font sizes (em or a percentage) to increase accessibility. A relative font size will accommodate a variety of monitor resolutions.
http://www.w3.org/TR/WCAG10-CSS-TECHS/#units
http://www.w3.org/TR/WAI-WEBCONTENT-TECHS/#tech-relative-units
H1 {font-size: 2em} relative font
H1 {font-size: 12pt} fixed fontTABLES AND NESTED TABLES
Tables that contain data should be understandable when linearized by a text reader. The content of cells is displayed as sequential paragraphs according to the table layout, see linearized tables. Alternatively, a summary of the table data or a non-table version of the data can be provided.
When using nested tables, keep in mind that text readers have difficulty reading them. The nested table should apply to only one cell in the table and not to the entire column of the table.
You can check the accessibility of your tables and get detailed information on how to make your tables more accessible by submitting your url to Bobby, http://www.cast.org/bobby/ .ALT DESCRIPTIONS
All image tags should contain an ALT attribute with a clear description of the image.BACKGROUND AND TEXT COLOR
The background color and text color should have enough contrast for easy reading.
Black text on a white background offers the greatest contrast.E-MAIL AND CONTACT US INQUIRIES
E-mail and contact us inquiries should be answered promptly with the most current information available.
Encourage error reporting by including the statement, "If you are experiencing technical difficulties please contact yourname@ashland.edu". Promptly acknowledge any feedback you receive.
Alternatively, you can provide an HTML, ASP, or ColdFusion feedback form for your user to fill out.CURRENT INFORMATION
Information on your Website should be current. Users become frustrated by outdated information.
Use "last modified: date" or "last updated: date" on pages where current information is critical.
Keep links updated. For larger sites, consider using a link alarm report that documents all broken external and internal links, http://www.linkalarm.com/.USER FRIENDLY
Routinely check your site with new users for user-friendliness and ease of navigation.BACKUP
Back up your Website files and directories on a regular basis. Always save a copy of a file to a backup location before you update it. This makes it easy to restore a page if necessary.SITE REDESIGN
Keep your site current. Expect to redesign your site about every two years. Consider using include files to expedite redesigns.
Revised 080802
Approved by:
Curtis D. White
Vice President of Information Technology