The Web Standards and Guidelines supplement the Policy Governing Access To and Use of University of Kentucky Computing Resources and University of Kentucky Policy Governing Creation and Use of World-Wide Web Materials. HISTORY In September 2003, University of Kentucky Public Relations reviewed and revised this document consequent to re-issuance of the UK Web Policy Governing Creation and Use of World-Wide Web Materials. A subcommittee met in November and December 2003 to refine and finalize the efforts of UK Public Relations. In February 2001, a subcommittee of the Web Publishers Group was formed with the task of evaluating current University of Kentucky Web standards and requirements and recommending changes as needed. The committee began work by dividing the research into the following areas:
APPLYING THE UK WEB STANDARDS Official Web materials are Web Materials created by or for a unit or employee of the University carrying out the University's mission in teaching, research, service to the community, or administrative operations. Official Web materials must comply with all elements of the University of Kentucky Policy Governing Creation and Use of World-Wide Web Materials . In addition, to the Standards detailed below, the policy directs that Web sites must use official institutional unit signatures, use official notices, conform to a designated design format and meet Section 508 Accessibility Standards. The Commonwealth of Kentucky has defined "meeting accessibility standards" as compliance with all of the WCAG Level 1 and Level 2 guidelines except those pertaining to relative size and CSS for layout. Failure to follow these standards will result in the Web site creator being asked to make the necessary corrections. Failing this, notification will be sent to the person who has administrative oversight over the area the Web site represents or his/her designee and continue up the branches of management until the situation is resolved. 1. The University of Kentucky Master Navigation Bar is required at the top of ALL homepages for colleges, departments, and units and on any other page that serves as a University Web presence. This helps to create a consistent look and navigation feel to the pages as well as to identify the page and organization as part of the University of Kentucky. The Master Navigation Bar may be any of the three approved versions and must be mounted as directed at How to Mount the Master Navigation Bar. Although the navbar is required on home pages it may be placed on any UK Web page. 2. Every site's Home page and Contacts page must include the words 'An Equal Opportunity University'. These words should be linked to the EO statement page which includes a general statement about accessibility on the Web and the University's long equal opportunity statement. Sites targeted exclusively to students, prospective employees, or faculty must link to a different page with a more specific statement (Samples are available). Use of these statements reflects not only the legal obligations under state and federal law, but also this University's commitment to serving all members of the UK community and of the Commonwealth. 3. Your site should be navigable without your design elements and should be accessible for those using assistive methods and/or alternative methods to access the Web. The most convenient way to evaluate whether your site meets section 508 accessibility standards is to use the free "WebXACT" utility at Watchfire.com or download the AIS Toolbar. Contact UK Public Relations for more details.
4. Identification of the materials as being from the University of Kentucky. If the UK logo/unit signature is included on any Web material, it must be the official logo/unit signature with the correct design and color. (Copies of the official logo/unit signature are available from UK Public Relations for use in the creation of Web materials.) 5. The name of the individual or department responsible for the content must be included. Generally, this is the dean, department head, program director or unit head rather than the Webmaster/Page Maintainer for the site. 6. Contact information should include, minimally, an e-mail address of the person responsible (the Webmaster/Page Maintainer) for the site. The e-mail address should be in the form of: email_id@xxx.uky.edu (example: webmaster@www.uky.edu). This will allow someone who has a printed copy of your page or who does not have an e-mail enabled browser to e-mail you later from her/his regular e-mail application. If you don't want to use your personal e-mail address, use a listserv as outlined on the Providers page. Additionally, the department address and main phone number should be on the home page and, if appropriate, an easily accessible "contacts" page.
7. The date when the materials were last updated. It is important to keep material on the Web updated. 8. No broken "Back" buttons. No page should deliberately block the user from "backing" to a previous page. Users "often arrive at pages through search or other means that bypass the higher-level navigation pages; it is necessary to provide a path back to these higher levels. In particular, it is useful to link to a page that provides an overview of the current subsite or region." 3 9. No site should deliberately block the user from going to other sites while being caught in the frame of the home site. This is very frustrating for the user who doesn't care about your home page once they have been there. RECOMMENDATIONS The recommended guidelines are prioritized and all sites are strongly urged to meet the Priority 1 Recommendations. PRIORITY 1 PRIORITY 1 -- General 1. Validate your HTML. HTML 4.01 transitional is recommended, however 4.01 strict would be even better. 3.2 is the absolute minimal version acceptable. Use CSS to separate style from content. To verify, validate your site with W3C. 2. Review browser compatibility. Sites should be designed according to which browser(s) will be used to view them. Some sites will have specific controlled audiences and will only need to be compatible with a specific browser(s). Currently, Public Relations will review sites on PC's using Netscape 4.08 and 7, IE 5.5 and 6, Firefox, Opera 7, a Lynx text browser and a voice browser and on Mac's using Netscape 7, IE 5, and Opera 6. Sites should be functional in all target browsers, although differences in presentation may be acceptable. 3. Pop-Up Windows should be used rarely, if at all. If a new browser window is launched, the user should be notified about the new window and how to return to the page he/she left. The user should be able to turn off the Pop-Up Window immediately. "Users often don't notice that a new window has opened, especially if they are using a small monitor where the windows are maximized to fill up the screen. So a user who tries to return to the origin will be confused by a grayed out Back button."4
4. Use the default file (e.g., welcome.html) of your Web server as the ending address for your department’s or unit’s Home Page. You will need to check with your Web server administrator for this information. This saves viewers from typing extra characters (not to mention saving ink on letterhead and business cards). It looks cleaner and saves space. Please remember that some Web servers including www.uky.edu are case sensitive. When using the default file, always include a trailing slash in the hyperlink (e.g., http://www.uky.edu/PR/) for greatest efficiency.
5. When adding, redesigning or reconfiguring a site please contact University Public Relations and give them the new URL's. This will allow for proper listing in the Master Site Index. This is also courteous and protects your reputation. If someone linking from the outside is given the impression that your site has been taken down because of an old link, you suffer as much as that external site owner. A note to the UK Web Publishers Group listserv will also alert others that may need to know about the changes so they can make corrections to your links on their sites. You may find it useful to search uky.edu (link:www.uky.edu/________) for sites using your old pages then alert them that you have a new page for the site, then send a note to the UK Web Publishers listserv (WEBPUBS-L@lsv.uky.edu) 6. Each unit's home page should include the unit's address and complete phone number. This is especially true of academic units trying to attract students. Many people still want to talk directly to someone or send information through the mail. 7. Keep it simple. PRIORITY 1 -- Navigation 1. Each site should have good hierarchical organization. Users are searching for something specific most of the time they are on the Web. Organize the site for your target audience. An effective site is unlikely to mirror your organizational chart. 2. Have a meaningful title, and be sure to include it in the <title> tag of your HTML. This will not only help the user know where he/she is, it will help with off and on-campus searches, be properly titled in Favorites and Bookmarks, and increase accessibility. 3. For all URL's, use lower case and avoid spaces. In lieu of spaces, use underscores (college_of_pr). 4. Avoid broken links. They frustrate all users, causing them to give up on your site before even giving it a chance. Dreamweaver and FrontPage both include options to check broken links. If you need help, please contact Web Services. (The following was moved from PRIORITY 1 -- Databases/Programming, Priority 2, #7) PRIORITY 1 -- Layout 1. Each page should be identifiable as a stand-alone page that is a component of the University . Although you may think of your home page as your site's front door, visitors don't always cooperate. Every page in your site with a URL that can be indexed by search engines, bookmarked, or emailed is a potential entry point for visitors, so be sure they all contain links to other pages. Otherwise, stranded visitors may just click away from the site entirely. To achieve a stand-alone University identity, on each page you should have (some of these items may be required under the UK Web policy):
2. Pages should be designed to function correctly and to be aesthetically pleasing when viewed on a wide variety of screen sizes. Conventional wisdom holds that 1024 x 768 is the most commonly used display size, followed by 800 x 600, and many users may have their browser windows set smaller than a full screen. WHEN DESIGNING FOR A WIDE VARIETY OF SIZES IS NOT POSSIBLE, design for an 800 x 600 pixel screen, unless you know that your target audience is using a different resolution. 3. Pages should be designed for quick download. Avoid an excessive number of graphics or images. Avoid extremely large graphics or images. Hillman Curtis says, "After waiting eight seconds for a download. People tend to move on. As a result, we find ourselves building 20k and 30k spots with interactivity." 5 4. Pages should load properly for the largest number of users possible. Avoid the use of newer technologies that require downloading additional software (plug-ins, viewers, etc.), or use a large amount of the user's computer resources unless absolutely necessary. If additional software (plug-ins, viewers, etc.) is required, PROVIDE A LINK TO IT. 5. Avoid the use of background images unless absolutely necessary. While these images can certainly add to the aesthetics of a page, the balance should tip in favor of accessibility and quicker loading. If the graphic is overwhelming or compromises the ease of use of the page (increases the time the page takes to load, makes the text difficult to read), then do not use it. The background image should subtly enhance the aesthetic appeal of the page; if it does not do this, then avoid it. 6. Splash pages should be avoided. Splash pages add a level of complexity to the organization of a site without adding content. They actually move the user further away from his/her intended target. Instead of a splash page, one should rely on a welcome page that is laid out logically and attractively. PRIORITY 1 -- Text/Content 1. Follow the University of Kentucky Official Graphic Standards Manual. 2. Fonts, when specified, should be selected for clarity and ease of reading. Define a default set of fonts for your site and use that set consistently (Arial, Helvetica, Verdana, san serif is the most common set).
2. Web sites should be treated like any other publication. Check for errors of spelling and grammar, official titles of individuals, and official names of buildings, residence halls and programs. The Web is a limited medium so keep your text content brief and to the point. (Both Dreamweaver and FrontPage contain spellcheck features. If you need help please contact Web Services.) PRIORITY 1 -- Databases/Programming 1. Databases accessed from a Web site should have appropriate security (MS Access is NOT secure). PRIORITY 2 1. Use standard web colors for links. It is what the users expect and therefore makes navigation easier. 2. As soon as possible, make your old pages compliant with accessibility guidelines as explained under "APPLYING THE UK WEB STANDARDS." 3. Avoid frames, if at all possible.
4. Avoid orphan pages. Many users may access lower pages without going through your home page. Users should be able to browse through your site without being required to use the "Back button" but simply by following links. 5. After moving a site or page to a new URL an appropriate redirect page should be posted. Since people may have bookmarks or links to the old location it is a good practice to leave behind a pointer to the new location. There are many ways to do this, but a simple page listing the URL of the new page is very effective. Anyone viewing the page will see that it has moved and can update any links they have. Spiders -- programs that search and index the web automatically -- won't understand that the page has moved, but they will find the link to the new location. See the instructions posted at www.uky.edu/Providers/moved.html for specifics.
6. Link names should be concise and clear. The name for the link should help the user know what type of information can be accessed if the link is followed. Additionally, "less is more: having a small number of standard links on every page makes it more likely that users will notice those links they do need."6 Never use identical text as links to different pages. PRIORITY 3 1. Minimize scrolling on any page except those where it is obviously unavoidable (large data tables, policies you want available for printing, etc.). 2. Add Site Maps or search functions when needed to help users find your content quickly. 3. Create a custom error document ("404 - File Not Found" page). Your 404 page can have your Web site's look and feel. Instructions appropriate for www.uky.edu can be found at www.netmechanic.com/news/vol2/server_no6.htm. If you are using an IIS server, you will need to send the custom pages to your server administrator. 4. Images should be stored in a common folder with a name such as images or graphics. 5. Web programming should be done in a language that can be easily supported on this campus. ASP, PHP and Perl are probably the most widely used. 6. The use of breadcrumb navigation in most designs can be very useful with few downsides. 7. If you choose to open new windows from links, you should be consistent when you do it throughout the site. For example, whenever going to a non-UK site. It's very confusing if it is not clear why some links open new Windows and others do not. TIPS AND TRICKS TO ACHIEVE THE REQUIREMENTS AND STANDARDS 1. Test your design in more than one browser. Test your pages in as many different browsers as possible. Web pages appear differently depending on the user's platform, screen, font size, and more. 2. Have other people test your web site before making it public. Usability testing can be accomplished with as few as five people. 7 Give them tasks to do and watch how they accomplish them. 3. Select a font for clarity and ease of reading. Arial and Times New Roman are established reader-friendly fonts. San Serif fonts: Arial and Helvetica offer the reader a sharper screen image. Serif fonts: Times New Roman, Bookman, or Palatino are best used for headers or titles. Font size should be legible without being overwhelming; large font sizes are difficult to read. The only underlined text should be hyperlinks. Remember, the user must have the font you've chosen on their computer in order to read your page properly. 4. Keep pages clean. Do not overwhelm users with cluttered links/text/images. A clean page requires judicious use of images and scripts. Welcome pages and pages designed primarily for navigation should not scroll endlessly. Remember that the welcome page is like the cover of a brochure or a table of contents of a book-keep it clear, simple, and functional 5. Be selective about what is prioritized. "It is the job of the designer to advise the user and guide them to the most important or most promising choices (while ensuring their freedom to go anywhere they please)." 8 Highlight important information. Not everything is important. 6. The upper left-hand corner is an important position on the page. Most of your audience is accustomed to reading from left to right, top to bottom and thus look at the upper left-hand corner first. Place important, relevant information here such as significant identifying information. The user may choose not to scroll to view the rest of the page. 7. Do not obscure information with excessive images or the use of trendy scripts. Users are typically looking for specific information. 8. Be careful with your choice of colors and color combinations. Bold colors may turn off some users and may make a page difficult to view. Colors also have different meanings in different cultures. Color choices should be more conservative as the target audience becomes broader. Use contrasting colors for page background and text. Dark text on a light background is easy to read. Additionally, some colors, such as green and red, appear the same in gray scale and would be a poor choice to use together since that is a common type of color blindness. How does your page print on a monochrome printer? Plan your color family and color theme in advance and stick to it throughout your site. (See UK Web Publishers Resources) 9. "Division of threes" can be used to create a pleasing design. Dividing a page into thirds and placing elements accordingly is usually an aesthetically pleasing arrangement. 10. To aid searches, repeat your keywords and their synonyms throughout your copy, particularly in headers and subheaders. Notes 1 Nielsen, Jakob. "Prioritize: Good Content Bubbles to the Top". Alertbox October 17, 1999: http://www.useit.com/alertbox/991017.html 2 Nielsen, Jakob. "Novice vs. Expert Users". Alertbox, February 6, 2000: http://www.useit.com/alertbox/20000206.html. 3 Nielsen, Jakob. "Is Navigation Useful?". Alertbox, January 9, 2000: http://www.useit.com/alertbox/20000109.html 4 Nielsen, Jakob. “The Top Ten New Mistakes of Web Design”. Alertbox, May 30, 1999: http://www.useit.com/alertbox/990530.html 5 Kaplan, Michael. "Minimalist to the Max, Web designer Hillman Curtis exploits the limitations of the Internet". Adobe Magazine, Nov/Dec 2000, page 30. 6 Bos, Bert. "What Are Style Sheets?" W3C, June 13, 2001, http://www.w3.org/Style/ 7 Nielsen, Jakob. “Why You Only Need to Test With 5 Users” . Alertbox, March 19, 2000: http://www.useit.com/alertbox/20000319.html 8 Nielsen, Jakob. “Prioritize: Good Content Bubbles to the Top”. Alertbox, October 17, 1999: http://www.useit.com/alertbox/991017.html Resources "Accessible web design", Royal National Institute for the Blind (RNIB), April 9, 2001, http://www.rnib.org.uk/digital/hints.htm/. Adams, Katherine. Copyright Basics for Web Course Developers and Distance Learning Projects, http://www.research.uky.edu/ip/distance.html Argus Associates. "Major Tom, Is Your Dashboard Usable?", The Web Developer's Virtual Library, http://www.wdvl.com/WebRef/Navigation/Stars.com/Dashboard.html. Bos, Bert. "What Are Style Sheets?" W3C, June 13, 2001, http://www.w3.org/Style/. Gassaway and Krampke. Accessing the Internet Using Alternative Input and Output Devices and Software, http://www.uky.edu/TLC/grants/uk_ed/webstandards/handout.html. Kaplan, Michael. "Minimalist to the Max, Web designer Hillman Curtis exploits the limitations of the Internet". Adobe Magazine, Nov/Dec 2000, page 30, http://www.adobe.com/products/adobemag/archive/pdfs/0011fehc.pdf. Kirsanov, Dmitry. "Designing Site Navigation", Dmitry's Design Lab, May 1997, http://www.webreference.com/dlab/9705/index.html. Letourneau, Chuck, Gregg Vanderheiden, et.al. "Web Content Accessibility Guidelines 1.0: W3C Recommendation 5-May-1999", W3C, http://www.w3.org/TR/WAI-WEBCONTENT/. Morris, Charlie. "Navigation 101: Basic Principles of Web Site Navigation" http://www.webdevelopersjournal.com/articles/navigation.html, Web Developer's Journal, http://www.webdevelopersjournal.com/. Muehlbauer, Jen. "The Navigation and Usability Guide", Dr. Dobb's Software Tools for the Professional Programmer, May 15, 1998, http://www.ddj.com/documents/s=2942/nam1012433979/,. NetMechanic "Splash Pages May Drown Your Site" Webmaster Tips Newsletter http://www.netmechanic.com/news/vol3/promo_no13.htm. Nielsen, Jakob. Alertbox: http://www.useit.com/alertbox. "The 3Cs of Critical Web Use: Collect, Compare, Choose", April 15, 2001; http://www.useit.com/alertbox/20010415.html. "Are Users Stupid?", February 4, 2001, http://www.useit.com/alertbox/20010204.html. "Flash: 99% Bad", October 29, 2000, http://www.useit.com/alertbox/20001029.html. "Why You Only Need to Test With 5 Users". March 19, 2000: http://www.useit.com/alertbox/20000319.html. "Novice vs. Expert Users", February 6, 2000, http://www.useit.com/alertbox/20000206.html. "Is Navigation Useful?", January 9, 2000, http://www.useit.com/alertbox/20000109.html. "Usability as Barrier to Entry," November 28, 1999, http://www.useit.com/alertbox/991128.html. "When Bad Design Elements Become the Standard," November 14, 1999, http://www.useit.com/alertbox/991114.html. "Prioritize: Good Content Bubbles to the Top", October 17, 1999, http://www.useit.com/alertbox/991017.html. "The Top Ten New Mistakes of Web Design", May 30, 1999, http://www.useit.com/alertbox/990530.html. "Search and You May Find", July 15, 1997, http://www.useit.com/alertbox/9707b.html. "Effective Use of Style Sheets", July 1, 1997, http://www.useit.com/alertbox/9707a.html. "Top Ten Mistakes in Web Design", May 1996; http://www.useit.com/alertbox/9605.html. Royal National Institute for the Blind (RNIB), Accessible web design http://www.rnib.org.uk/digital/hints.htm. Tungare, Manas. "Handy Hints for Web Designers", WebReference Update Newsletter, July 13, 2000, http://webreference.com/new/handyhints.html. W3C: List of Checkpoints for Web Content Accessibility Guidelines 1.0 http://www.w3.org/TR/WAI-WEBCONTENT/checkpoint-list.html. Web Standards and Policies of Other Universities Colorado State University (http://graphicstandards.colostate.edu/index.asp?page=web_standards_guidelines) Updated June 7, 2005 by Chuck Ham |