Style Guidelines and Policies
Visual Guidelines and Usability Tips
In order to have consistency throughout the IU South Bend website, all the departments must follow similar styles of layout.
Optional right nav boxes are meant to serve as a place for short link lists, or text, not photos or graphics
It is not necessary to welcome viewers to your site. Your department or unit is identified by the banner.
Simplify titles, this will aid in navigation.
Do not use punctuation in titles including: colons, parenthesis, commas, exclamation points, and question marks.
Do not alter titles with an underline, alternative color, or italic font.
Do not use H1, this is reserved for banner text and will appear with a strikethrough to discourage its use. Use H2 for colored titles, H3 for black titles, H4 for subtitles, and H5 for smaller subheaders.
Do Not Use H1 Headers
Do not use visible tables. Tables can be hidden by setting the table border = 0 in the wysiwig editor.
Reduce the multiple use of a single image.
Align all text including titles and navigation bars to the left side of the page.
For long lists of information try to avoid the use of bullets as they will sometimes cause problems. An alternative to bullets is to use the html code for a paragraph; < p> and using breaks < br> to separate lines.
Do not alter the header or footer.
Websites should be built for 1024X 768 resolution.
Do not use animated images or blinking or scrolling text. These features present difficulties for individuals with visual impairments or cognitive disabilities that interfere with concentration.
Do not change the background color of the left or right navigation or the center content area.
Do not use background elements. They detract from the readability of text.
Use the default WCMS fonts. Do not use other fonts.
Graphics should be optimized for web delivery. Long download time is a major deterrent.
View your page from more than one browser. Go to both a PC lab and a Macintosh lab to view your pages.
Whenever possible, the link name and page name should be the same.
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.
PDF links should be noted in the link name.
Use the alt attribute in image tags so users who have image readers will know what is in the picture you have placed. Be descriptive with alt attribuutes i.e., "a woman is playing a piano on stage".
Heading Text Guidelines:
|Paragraph text is for general body copy use.|
|Address||Address text is used for address tags (rarely used).|
|Preformatted text is used to preserve formatting.|
|H1 text is for departments/units banners only.|
|H2 text is meant for color palette titles.|
|H3 text is an optional H2 title in black.|
|H4 is meant for subheadings|
|H5 is smaller optional subhead|
|H6 is smaller optional subhead|
Never refer to the university as "IUSB". Please refer to it as Indiana University South Bend or IU South Bend.
Keep your links within body copy to a minimum.
All pages should be free of jargon and undefined acronyms.
All content should be carefully proofread, spell-checked, and grammar-checked.
Technical language usage and terminology must conform to the UITS Standard Terms List found at https://kbhandbook.indiana.edu/stlf.htmlFurther Suggestions
State your most compelling message on 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.
Present your information over several pages. Long narratives with excessive information and links are confusing and difficult to navigate.
Use file names with NO spaces and NO capital letter. File names with no spaces might show when tested locally but will not show on the web.
Use proper capitalization. Writing in all upper case is hard to read and is perceived as yelling. Use of proper upper and lower cases makes the text flow and is easier to read.
Link selected words. Web readers scan pages for hypertext. Using key words to link is better than linking a whole sentence.
Use default text and headings. Our web pages all use the same style so that each page will, by default use the proper fonts, colors, sizes etc.
Use header formatting for headings (i.e. h2, h3, h4 for paragraph headings).
Keep images at less than 5MB.
Make sure links actually go somewhere. Don't use links that don't have a destination. Remove links that have become obsolete.
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.
Ask a few simple questions when creating content. What do you hope to accomplish with your pages? What information will you be providing? Who is your audience? Does the first view to my page have links that interest the viewer?
Remember the end user when developing pages. Is your site intuitive? 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?
Please see information concerning copyright and other links to areas discussing copyright by clicking on the Copyright Management Center at http://copyright.iu.edu/
All Indiana University publications, including web pages, are to follow the IU Style Guide which can be found at http://creativeservices.iu.edu/resources/guide/