On this page:

• Introduction
• Procedures for Gaining Approval
• Policy for Web Pages
  • Accessibility
  • Visual Design
  • Content
  • Navigation and Coding
  • Footer
• Copyright Issues
• Further Suggestions

Introduction

All web pages in the first three tiers of the IU South Bend website must be approved by the Office of Communications and Marketing to ensure that IU South Bend's web is following the universities communication and vision goals. Our website incorporates a user-centered design.

A departmental templates have been designed for use in creating departmental pages. Departments are required to use these templates when making web pages. Instructions for getting and using these templates can be found here.

Below are suggestions for IU web pages. In addition, IU has set forth requirements in the Benchmarks for IU Web Pages.  Please also review the Policy on the Use of Indiana University Information Technology Resources which includes the use of web sites for organizations. 

All University publications, including web published pages, are to follow the Indiana University Style Guide guidelines.

Procedure for gaining Approval.

• Develop your site by using the template and and following the guidelines listed on this page.
• place the page where the Office of Communications and Marketing can view the page but is not generally accessable to the public.
• Notify the Office of Communications and Marketing that you are ready to have your page approved and where they can view it.

Policy for Web Pages

This page contains suggestions for IU South Bend web pages. In addition, IU has set forth requirements, guidelines and policy for the use of web sites and Information Technology Resources. Please read the following policies and guidelines:

• IU South Bend Guidelines and Policies for web pages (this document)
• Computer Users' Privileges and Responsibilities
• University IT Policy Office for Indiana University Appropriate Technology Use Policies which includes the use of web sites for organizations
• Indiana University Style Guide

1. Accessibility

   As a primary design principle, all portions of the Web site are required by Title 2 of the Americans with Disabilities Act to be fully accessible to everyone. For a thorough explanation of accessibility design guidelines, see W3C References on Web Accessibility. Another good resource for information about designing for accessibility is Trace Research and Development Center.

   To meet accessibility standards, all Indiana University web pages must employ at least these general accessibility strategies:

   • Provide alternative text for all images, text graphics, and image maps.
   • Provide a link to a longer description for graphics that present important information, such as charts, graphical tables, and diagrams.
   • Provide a description for each link in an image map.
   • Provide a text transcript of any audio information.
   • Provide a text transcript of any video information.
   • Ensure that the page meets at least WebXACT Priority 1 standards for accessibility. For more information, visit the Center for Applied Special Technology.
   
   
2. Visual Design
   
   • Avoid using animated images or blinking or scrolling text. These features present difficulties for individuals with visual impairments or cognitive disabilities that interfere with concentration.
     
     
   • Avoid using background elements Especially those that might detract from the readabilty of text.
     
     
   • Ensure that all textual elements (and all essential graphical elements) are printable. Users who are reading a hard copy must be able to view all essential information on the printed page. When designing, avoid placing white text on a dark background. When the page is printed, the default settings on most browsers will cause the background to be dropped meaning the white text will not appear on the hard copy.
     
     
   • Limit the total size of graphics to less than 40K, if possible. Long download time is a major deterrent to continued use of a Web page.
     
     
   • Ensure text legibility by testing the page on various platforms, browsers, resolution settings, and monitor sizes. If you want your content accessible in One Start, the pages should be built 640 x 480. Otherwise, the standard is 800 x 600.
   • Avoid using Frames - There are a number of reasons why it is strongly suggested that frames are NOT used
     1. Marketing & Communications Department requests that all pages have a similar look without frames, keeping design throughout the web similar.
     2. If someone wants to bookmark only one page of your area, they cannot. With frames, it always goes back to the main page.
     3. When printing with frames, people don't realize that the last frame you clicked in is the frame that will print.  Visitors may be frustrated that they are not printing what they expect.
     4. Pages that are designed using HTML frames can often present substantial navigation difficulties to both blind users and to those without frames-capable browsers. 
     5. Not all browsers can use frames.  Try some other means of displaying your pages.
     6. Webmasters in Bloomington and IUPUI say frames are no longer to be used for development of web pages.
   
   
3. Content

   The primary content of any page should be developed to meet the needs of its users. In keeping with established usability practices and adopted Indiana University style, Web pages must also conform to the following conventions:

   • Use the page heading as the document title. It is important that the page heading accurately describes the content of the page. This will ensure the document appears at the highest possible level on the search results page. Accurate titles will also provide clear cues to those who bookmark the page.
     
     
   • The document title of any home page should consist only of the name of the organization (i.e., campus, school, department, division), e.g., Indiana University-Purdue University Fort Wayne, IUPUI Libraries, Department of English, etc.
     
     
   • Make sure the HTML code contains appropriate metadata, particularly keywords and description. The home page’s keywords meta tag must contain the full name of the university campus (e.g., Indiana University Northwest) and the geographic location (e.g., Gary, Indiana). Metadata helps search engines find the page and provides information on authorship, copyright, and the software used to create the page.
     
     
   • All pages should be free of jargon and obscure or undefined acronyms.
     
     
   • All content should be carefully proofread, spell-checked, and grammar-checked. Technological language usage and terminology must conform to The UITS Standard Terms List.
   
   
4. Navigation and Coding
   
   
   • All campus and organizational home pages should have a clearly identifiable link back to the IUSB gateway page, and to the Department homepage and when appropriate the School homepage.
     
   • Do not use proprietary coding or features specific to a particular software package, e.g.. (Frontpage bots). Contact the IT Helpdesk (5555) if you help with forms.
   • Avoid using the font tag or setting the font type or style. the appropriate settings for these are determined by the style sheet. Try to limit yourself to header tags (H1,H2,etc.), bold, italic and emphasis.
   
   
5. Footer

   The footer on campus and other organizational home pages should be set apart from the body of the page with a hard rule and paragraph separator above the footer text. The footer should be centered and must include the following elements:

   • The Indiana University wordmark or a campus wordmark: The official Indiana University wordmark (see footer below) and the official seal are available by clicking here.
     
     
   • Mailing address: Users must have a convenient way to ascertain a street or mailing address to the organization the Web page represents.
     
     
   • Area code and phone number that connects to the appropriate operator: Users who have comments or questions may prefer to telephone rather than use e-mail or postal mail.
     
     
   • "Comments" link: A comments link is included in the footer to provide an easy method for readers to ask a question or make a comment. The link should point to a simple form such as the comments form on the gateway site (link). If you prefer to use an e-mail address, visit this site to encode the e-mail address to prevent e-mail harvesting.
     
   • Indiana University Trustee copyright statement: The word "Copyright" should serve as a link to the Indiana University copyright statement page, followed by the year the content of the page was developed and published to the Web and, if relevant, a hyphen and the current year (e.g., Copyright 2003 or Copyright 2000-2003). A link to the Indiana University gateway page should follow the year of copyright and designation of the Indiana University Trustees.
   • Copyright infringement link: The phrase "Copyright Complaints" should appear as a link to the Indiana University copyright infringement page.

Copyright Issues

Further Suggestions

1. Begin the Title of your page with IU South Bend and then anything you want to describe your page.  When people bookmark your page, it will indicate IU South Bend.  For example, see the title of this page in the blue title bar:  IU South Bend Web Design Guidelines.
2. Tell Your Message in the first screen - Most users will look at the first window and leave if it doesn't keep their interest.  You have 3 seconds to catch the viewer's attention so that they know what to expect without viewing the whole page.  Use targets and a one or two line smaller list of items so that in 3 seconds the viewer will see what is available to select. 
3. Small Pages - Many Pages - Make many small pages to get your information out there.  Point to another page.  Keep information together on ONE page that the user may want to print. For example:  Keep all dates together on one page.  Point to different sections when linking to those different dates. Should the viewer want to print dates, they would print a page that has ALL dates for your department.  Think of what the viewer may want to see and print, and design the pages so they can take what they want. It's better to print one page with the information you need than ten pages with information you need on only a few pages.
4. Print Your Pages - so you know how they will look printed. Some pages look differently in print than on the screen.
5. Use Filenames with NO spaces. This is one thing that people forget. The pages might show when tested locally, but will not show on the web.
6. Use Proper Capitalization - writing in all upper case is hard to read. Use of proper upper and lower cases makes the text flow and is easier to read.
7. Link Selected Words - less is more. Web readers scan pages for hypertext. Using key words to link is better than linking a whole sentence.
8. Use Default Text and Headings - Our web pages all use the same style sheet so that each page will, by default use the proper fonts, colors, sizes etc. Use header formatting for headings (i.e. <h3> for paragraph headings). Users will have a variety of browsers that will view our pages.  Keep the text normal instead of a special font. 
9. Keep Pages Navigable - Provide the user with the means to return to upper levels of your site. Don't let the users get lost. Lost users leave and do not come back.
10. Keep Images Small and Provide Links to Larger Images - Remember that some users are not willing to wait for that really cool image that takes up a ton of memory while they are looking for information about your department. Either keep the images small or provide thumbnails that link to  larger images. Most users will not wait longer than a minute for a page to download before they go somewhere else and miss all the wonderful information you are providing.
11. Don't Underline Items Which Are Not Links - One clue that an item is a link is the fact that it is underlined. An underlined item that is not a link will frustrate users. Use bold or italics or other such items to emphasize your words.
12. Make Sure Your Links Actually Go Somewhere - Don't use links that don't have a destination. This will frustrate the user who may not return to your site.  BUT, you can use plain text for a 'place holder'.  That will also let readers know that you will be having more information and give them a reason to look at your page again.
13. Keep links the same name as the page title they refer to- i. e. link says 'Design Guidelines' be sure it goes to a page that is titled 'Design Guidelines'. Otherwise it is confusing to users.
14. Ask a Few Simple Questions - What do you hope to accomplish with your pages?; What information will you be providing?; Who is your audience? What would the viewer want to print? Does the first view to my page have links that interest the viewer?
15. Remember the End User When Developing Pages - Will the flow of your pages make sense to someone not familiar with your department? Will your audience need special knowledge to navigate your site? Do the graphics enhance rather than detract from your site?.
16. Departmental Pages should look the same as their front page.  This is to make our web pages look like they are from the same organization.
17. View your page from more than one browser -Dial in to see how quick your page loads.  Go to both a PC lab and a Macintosh Lab to view your pages. Go to a computer with less memory than yours and see how fast your page loads.