Styleguide and Graphic Identity

USER GUIDE

Introduction
The University does allow a great degree of creativity in fashioning your own design. However, the degree of that creativity is not unlimited, and this document details the specific design codes that must be satisfied. This styleguide exists for reasons beyond the aesthetic, however - it also establishes important standards for accessibility.

The Internet Committee, a sub-committee of the University Marketing Council, has established the following Web style guidelines for Old Dominion University Web sites, and has published these guidelines to assist individuals who are involved in Web page development and maintenance.

As the University Web site increasingly becomes an important role in the University's efforts to communicate with the public, these guidelines should be considered standard and mandatory. It is important that we maintain a consistent navigational scheme, appropriate University brand, and comply with legal requirements for all Web pages.

These guidelines will address the following:

• Accessibility
• Branding
• Content
• Information architecture
• Navigation
• Proper HTML
• Usability
• Visual design

The Old Dominion community praises independence, initiative, and creativity. A large majority of departments and faculty members have established a Web site that they are proud of, and each Web content provider has his or her own priorities and objectives. But every University Web site has one thing in common, no matter who maintains it: it can perform more effectively if it reflects consistency and clarity in both its message and image of the University.

Officially Supported Web Development Software
The University uses the following software products to support Web development, which are available through the Site License Program:

• Macromedia® Dreamweaver®
• Adobe® Photoshop®
• Adobe® Acrobat®
• ODUEditPro
• WebDrive

Web Site Hosting and URL Classifications
The following four classifications of Uniform Resource Locators (URLs, or Web addresses) have been developed:

• Class I - intended for the University's "front door" or home page
• Class II - intended for University Web sites that are considered "high traffic areas" that also serve as alternative entry points to the University Web site
• Class III - intended to maintain University branding for academic and administrative department Web sites
• Class IV - for Old Dominion University instructional faculty and staff, both full-time or part-time
• Class V - intended to provide for a great level of design flexibility for faculty Web sites, faculty organizations, and hosted academic and research organizations

Old Dominion University provides Web server space and support for departments, programs, courses, faculty groups within the University, and student groups sponsored by the University. To separate official University Web sites from sponsored organizations and faculty Web sites the following standard URL and Web site naming policy has been established.

URL classification disputes If your department or organizational entity has been assigned a URL that is objectionable, there is a process by which that classification can be adjusted. The Internet Committee, a sub-committee of the Marketing Council, will make the final determination in granting change of classification in assigned URLs.

Non-standard URLs Non-standard URLs are defined as those which fall outside of the scope of www.odu.edu.

Examples of non-standard URLs include:

• www.experienceodu.com, Office of Admissions
• www.maceandcrown.com, student newspaper
• www.givetoodu.com, ODU Development Office

Non-standard URLs are not advised in most circumstances. There is some degree of debate over whether they are effective marketing tools, or if they contribute to dilution of the Old Dominion University brand. Each request for a non-standard URL will be addressed by the University Web administrators on a case-by-case basis.

Non-standard URLs can be hosted on servers at ODU, but this requires approval and proper coordination between the requesting party, Web Administration, and the Server Group. Non-standard issue URLs - regardless of weather they're hosted on-campus or not - must adhere to Class II design criteria.

Subdomains
The ODU Web site consists of a top-level domain (TLD) odu.edu. Entities can be located beneath the TLD by using a suffix (www.odu.edu/something) or also a prefix (www.something.odu.edu), which is also called a subdomain. Directories organized by subdomains offer a number of advantages over directories organized by a suffix - both from the information architecture point of view and the management perspective. However, the effectiveness of subdomains does reach a saturation point. Overuse of subdomains confuses information architecture and grows unwieldy for Web managers. As such, a standard is hereby established to deal with information architecture as it relates to the usage of subdomains.

Subdomains are allowed, but they must be kept standard from the owner (usually a Class II URL) down. For example, if the College of Engineering chooses www.engineering.odu.edu, then all departments within that college must also use engineering in their respective URLs. Continuing the Engineering example, the Womengineers would use the URL www.engineering.odu.edu/womengineers. Additionally, this policy means that Civil and Environmental Engineering could not use www.cee.odu.edu, but would rather be correctly organized and located at www.engineering.odu.edu/cee.

Departments and programs are discouraged from using subdomains on their own, but are instead encouraged to use subdomains of their parental organizational unit. This may seem stifling, but in developing a truly sound information architecture hierarchy, it is encouraged.

Furthermore, within a department if an abbreviation is used on a higher-level Web page, then it must be used from that point down. For example, if the College of Health Sciences decides to abbreviate its name cohs, then all pages below it on the Web must follow suit. For example, Dental Health would use www.cohs.odu.edu/dnth, and not www.dnth.odu.edu.

Abbreviation in URLs
There are two primary types of abbreviations. There are abbreviations of acronym - in which a single letter(s) represents an entire word or more - and abbreviations of convenience - for example, sci instead of sciences. While acronyms cannot be avoided in some cases, abbreviations of convenience are generally not good practice. Remember that Web audiences are not only domestic; what makes perfect sense to you or I might make no logical sense to a prospective student viewing the page from China, who may not understand sci as meaning sciences. Some may not make much sense to those outside the scope of a department, for example engr for engineering. Finally, some abbreviations of convenience are meaningless outside of the higher education circle, like prereq's (shorthand for prerequisites). For these reasons, abbreviations of convenience should be avoided if possible.

Regarding abbreviation in a URL, it must not be based on first-come first-served basis, but rather on an "is this logical" one. For example, using the convenience abbreviation eng for engineering might seem logical, but on closer examination one might understand how such an abbreviation might be confused as belonging to English. By "confused" it is not meant that a person viewing a site www.eng.odu.edu that belonged to engineering might think he or she is looking at an English department Web page, but rather that if the person did not see the site, but only the address, it could be logically confused as belonging to the English department rather than the engineering department. In such cases where an acceptable abbreviation cannot be found, it is encouraged not to abbreviate for convenience.

ODU Standard Template
The Office of Computing and Communications Services has developed a template to assist in the creation of Web sites. The template has been developed for Web sites that are in the Class II, III and IV areas. The template provided to the University comply with standards set forth in this document, to include accessibility, visual standards, and required information standards.

Why Use Template?
There are many reasons to use templates, including convenience, compliance, continuity, and to reduce SPAM. There is even evidence that suggests that universities with a uniform look on the Web fare better in US News & World Report rankings. However, the use of templates is optional; they are provided as a turnkey solution to those who wish to use them, but at this time it is not required that any entity at Old Dominion University use them. Read more about why you should use templates.

ODU Rankings in US News & World Report
Improving Old Dominion University's ranking in US News & World Report has been a goal of President Runte. Because the judges for the rankings base their decision solely on a Web site and not a physical visit to the University, the Web has a remarkable impact on the judges' impressions of ODU, and hence the ranking they ultimately award our institution. By using templates, we help to minimize inconsistencies and build a stronger, more accurate picture of Old Dominion's superiority.

Convenience
University templates offer convenience where Web development budgets, expertise, or resources are limited. Also, because templates are simple to download, customize, and publish to the Web, they offer unsurpassed levels of convenience.

Compliance
Templates offer a way to be certain pages are 100 percent compliant with current Web regulations, including those set forth by the ADA and Section 508. Templates meet requirements on all levels: usability design, University branding/identity, graphic design, and linking. The templates are also visually appealing, but are optimized to download fast.

Continuity
By using templates, parties inadvertently build continuity within the odu.edu Web site, by offering visitors common user interfaces (UI). This visual continuity is also referred to in marketing as integrated communication, and it leads to a greater brand awareness and solidifies the image of Old Dominion University, as well as contributing to a positive user experience.

Not a Magazine
Books, magazines, newspapers, television programs, lectures or speeches, audio tapes, and video tapes are all forms or types of linear communication. Linear communication media are characterized by having a static message and a very predictable and consistent flow. In a book, by chapter 3 it is assumed that chapters 1 and 2 have been read already; similarly it is also assumed that a person would not jump to chapter 16 without having read 1-15. The same is true for magazines and newspapers - people reading them are assumed to read from left to right, front to back. When watching a television program (assuming it is not a re-run) it is reasonable to assume that a viewer would not know what is about to happen until it does, signaling linear communication. The same is true for audio and video tapes. None of these models represents the Web, however.

The Web is a non-linear communication medium.1 A Web site has been characterized as being a house with 1,000 front doors. A Web site is non-linear in a sense that it is part of a web, a word which itself implies intricate and elaborate interconnections. As such, it is never safe to assume that a user has arrived at ANY page in a Web site by following the natural "normal" progression or drill-down. If your site has information on spectrometers buried 100 pages deep, and someone searches for spectrometers on Google and finds your page, then congratulations a visitor has just entered your house from the 25th door on the 4th floor.

Typically, the deeper into a site one gets, the less attention is paid to continuity or image. More often than not those pages are swept under the carpet assuming that they are so deep no one could possibly get there without having gone in the "normal" progression. In reality, this could not be farther from the truth.

The implications of employing non-linear communication modeled information architecture on a site are many. First, there should be a clear and consistent graphic identity on all pages that identifies above all that the page belongs to Old Dominion University, and also a particular department or program. All pages should include a concrete navigational structure and should offer a link to the unit home page, ODU home, and so on (see Class IV Web page guidelines).

ODUEdit Pro and WebDrive
Old Dominion University is now offering two methods for University Web developers to build and maintain Web sites. The technologies are not mutually exclusive, meaning that while in most cases a choice of one or the other will be made, both can be used to make changes to the same Web site.

Accessibility Standards
Although the styleguide is primarily one document, the section on accessibility is an exception. Accessibility is discussed in depth on another page. Please see ODU and accessible Web design.

University Branding and Visual Standards

	The Monarch DISCONTINUED. Please note that the Monarch has been phased out, and is no longer acceptable in any design.
	The Paw DISCONTINUED. Please note that the Paw has been phased out, and is no longer acceptable in any design.
	University Seal Restricted use. Should only be used by the President or on official University materials. Not appropriate for most Web applications. The Office of University Publications must be contacted prior to using the University Seal in any document, electronic or otherwise.
	Identifier Unrestricted use. Do not distort to "make fit."
	ODU 1-line logo Unrestricted use. Do not distort to "make fit."
	ODU 2-line logo Unrestricted use. Do not distort to "make fit."
	ODU and Crown logo Unrestricted use. Do not distort to "make fit."
	Crown logo Unrestricted use. Do not distort to "make fit."

Proper Use of University Logos
The University Seal is reserved for special signage or document applications, such as official documents from the Office of the President. The Office of University Publications should be contacted prior to using the University Seal in any document.

In the Identifier, the prestige of the crown paired with the name of the University communicates a message of strength and integrity for Old Dominion. The Word Mark provides an opportunity to present the University's name in a consistent manner. The use of the ODU & Crown and the Crown adds creativity and flexibility to the visual presentation and offers more opportunities for marketing and branding Old Dominion University's image. The ODU & Crown and Crown may be used as long as the full name of Old Dominion University appears somewhere on the publication or product. The logos are for official University use only. Please note that the Monarch has been phased out.

Misshapen Logos
In order to ensure a professional appearance, special care should be taken when resizing University logos. Often, by holding shift or CTRL while resizing logos, it is possible to adjust both dimensions proportionally. However, sometimes in the spirit of "making it fit" it is easy to mistakenly adjust the width or height of a logo without proportionally resizing the other dimension. Misshapen logos will be actively sought after, and departments responsible for pages containing misshapen logos will be expected to immediately make corrections.

Colors
When designing Web pages to represent Old Dominion University, please refer to this color chart when choosing colors for your site:

Fonts
At this time, font usage on Old Dominion University Web pages is not strictly governed. However, good taste should be observed when choosing fonts, and careful attention should be paid to readability.

Most people report that sans-serif fonts (examples: Arial, Helvetica) are easier to read on the Web. However, Serif fonts (like Times New Roman) are more comfortable to read for extended periods of time. Studies conducted by Wilson Internet, an e-marketing and e-commerce authority, found that users prefer sans-serif fonts 2 to 1 over serif fonts on the Web.

• "Safe" sans-serif fonts for the Web
  • Classic Arial (a Windows font that's increasingly available on Macintosh)
  • Helvetica (a Macintosh version of Arial that's increasingly present on PCs) 
  • Standard sans-serif font
  • Verdana, increasing popularity
• "Safe" serif fonts for the Web
  • Classic Times New Roman (a Windows font that's increasingly available on Macintosh)
  • Times (a Macintosh version of Times New Roman that's increasingly present on PCs)
  • Georgia, equally present on PC and Macintosh
  • Plain serif, the browser's default font

Regardless of which family you choose, serif or sans-serif, it is important to stay consistent throughout your site.

Getting fancy with typefaces Avoid temptation to use non-standard fonts, as they will NOT display unless they happen to be installed on the person's computer looking at a page. If you must use a font other than the ones on the "safe" list above, do so with an understanding that if a browser does not have a particular font face available it will substitute serif.

Suggestions For Good Site 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 that compete with or obscure the page's information elements. Even a subtle background graphic can make the content information difficult to read, so the use of a graphic element as a background should be undertaken with discretion, if at all. The reading combination most comfortable and satisfying for users is black text on a white background.
• 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 a site (remember, that includes logos, buttons, rollovers, backgrounds, photographs, and embedded-linked files) to less than 100K, if possible. Long download time is a major deterrent to continued use of a Web page. However, if giving a user an option to download a particular image in detail, it is acceptable - and in most cases, expected - to have a version that is larger and higher quality. In those situations, because the user is requesting the larger view, longer download times may be deemed acceptable.
• Ensure text legibility by testing the page on various platforms, browsers, resolution settings, and monitor sizes. Keep in mind that many users must be able to view Web pages no larger than 800 x 600 pixels. University Web pages should work reasonably well in a range of browsers, including Netscape 4.x - 7.x, and Internet Explorer 5.x - 6.x.

Home Everywhere
Anyone who has used a Web site at this University has undoubtedly at some point hit a "Home" link that took them to a "home" they did not expect. For example, if you are on a departmental sub-page, and hit a link to "home" that sends you to odu.edu and not the department's home page. If you have ever fallen victim to such a thing, be assured that users have, too.

To alleviate this "home" navigational paradox, this document suggests that University Webmasters use a more descriptive word than "home" when defining links. For example, to say "Department Home" or "ODU Home" instead of just "home" is infinitely more descriptive to the user.

Don't Click Here
Imagine you are strolling down an aisle in your favorite store, and the items on the shelf were all calling out "Buy me!" "Buy me!" "No! Buy me!" If you think that would be frustrating or confusing, then imagine what users who visit a Web site are going through when inundated with "click here" links. Or, perhaps you thought that the store scenario wouldn't bother you because you would choose to tune out the chants to "Buy me!". Well, since the inception of the Web, users have been trained that "click here" is associated with advertising or leads to nothing of value, so they simply tune it out. It is plain to see using those examples why it is important to use descriptive names for hyperlinks.

Or imagine if television commercials for stores ended with "Drive here." That would be silly, right? So is "click here" on the Web.

Do not tell a user to "click here," as on the Web, it is implied that a user must click. Instead, offer the user a descriptive link, and it is a safe bet the user will know what to do. To Web usability engineers, the words "click here" on the Web is like the sound of fingernails down a chalkboard. And, it also constitutes poor accessibility design, because the site will be too confusing to visitors using screen readers.

Which one: web.odu.edu vs www.odu.edu
The proper University Web address is www.odu.edu. The 'web.odu.edu' address that commonly floats around will soon (perhaps by the time this guide becomes available) be phased out. The 'web.odu.edu' address was originally introduced as a Y2K precaution. Immediately update bookmarks, links, and do not order items imprinted with web.odu.edu.

Frames
Frames are generally a bad practice. Respected HTML developer's sites have actually used far more harsh words, like "frames are evil." Jacob Neilsen, renowned Web Usability author, has said flat-out "frames suck." Why are they so frowned upon, and subject to such harsh words? There are many reasons.

Not only are they often visually unattractive, but frames conceal a user's true location within a site. In other words, if odu.edu used frames, then right now the address in your "address" field atop your browser would read "www.odu.edu" even though you're not on the Old Dominion University home page. Furthermore, if a user wishes to bookmark a page within your site, that is not possible if the site uses frames because only the homepage will be bookmark-able. For those wishing to link to a page inside your site, that will not be possible, either, again because the URL (address) will only show the home page.

As if the addressing woes are not bad enough, frames destroy a user's experience with a Web site even more when a page is printed - many browsers do no print framed pages well (if at all). Ever tried printing a page from the Web and the printer started putting little pieces of it on separate sheets of paper? That's frames.

Users are not the only ones who have difficulty with frames. Pages using frames pose especially difficult for search engines to index, which seriously impairs robotic visitors from doing their jobs. Typically, a user sees only the main page in the frameset without the navigation, which is known as a black hole page. Denying search engines to index your site is the same as denying bees to pollinate flowers.

Frames are confusing to create and maintain, and difficult to troubleshoot. We can not stress enough that frames should NOT be considered for your Web design.

Reasons not to use frames

• Users cannot bookmark the exact page they need, only the unit homepage
• Links that point to your site can only link to the home page
• Users do not know where they are inside the site because the address never changes
• Difficult and confusing to create, maintain, and troubleshoot
• Many browsers do not print framed pages properly
• Search engines cannot properly index framed pages

Flash
Flash is glitz and show. At this University, we should focus not on glitz and show, but rather the core services we offer to our students and each other. Efforts spent developing Flash special effects that age quicker than milk outside a refrigerator could be better invested in making the content fresher or more presentable. To be developed "right" ("right" defined as Flash applications which are accessible and dynamically tied to XML source documents that permit changes to be made instantaneously) Flash applications require professional time and attention. According to Neilsen: "Although multimedia has its role on the Web, current Flash technology tends to discourage usability for three reasons: it makes bad design more likely, it breaks with the Web's fundamental interaction style, and it consumes resources that would be better spent enhancing a site's core value."

Content Guidelines
The University does not and will not act as a censor of information available on our campus network but will investigate properly identified incidents and will comply with applicable federal and state laws. Old Dominion will make every practical attempt to comply with both the spirit and the substance of the law.

Updating Schedule
In addition, it is important that the content of a Web page be accurate, up-to-date, and has proper grammar and spelling. 

Essential Information
Essential information is defined as information which should be not only available, but prominently displayed on all University Web pages. This document attempts to define some very specific criteria for information that must be present on (or accessible from) every page built by an entity of this University.

Footer Information
Every Web page must have the following specific information in the footer section of the Web page (note that for users of templates, a majority of this is already taken care of):

• Copyright statement - either with "Copyright 200n by Old Dominion University" or "© 200n by Old Dominion University" (200n = equals appropriate year)
• Name and email address for the individual who is responsible for the Web site.
• Date the Web page was last updated

Contact Information
As contrary to common sense as this may sound, contact information is often missing from (or worse, inaccurate) University Web pages. Do not make contact information into a graphic, because if the graphic is absent or not viewable, then the user has no means to see that information. Furthermore, contact information of some degree (at a minimum who is responsible for maintaining the particular page and an email address) should be visible on every page in the whole site. Users should not have to look to find contact information.

Search Optimization
Building a Web site is one thing, and making sure that people searching can find it is another. The university search engine uses several components of a Web page when determining relevance ranking, listed below in order of importance.

Top factors in determining relevance ranking by odu.edu search engine:

1. Page title
2. META Keywords tag
3. META Description tag
4. Page text

Using descriptive page titles can go a long way to ensuring that people using the search engine on odu.edu can find your page. Titles are, however, just one important element in the mix matrix when it comes to search engine rankings on odu.edu.META tags are also important players. META tags are special hidden HTML tags that are invisible to people looking at a Web page. META tags come in many varieties, and can be a bit confusing for people not familiar with HTML. They contain specific, concise information about the HTML document - sort of like a Cliffs Notes summary, and are used quite extensively by search engines, odu.edu included.

Lastly, page text is indexed by search engines, but as a page author you should not rely on this happening. Because there are so many pages on the ODU Web, the search spider will update changes in the page title and/or META data quicker than it will note changes in page text.

PDF vs No PDF
Adobe, Inc.'s Portable Document Format, commonly known as PDF or Acrobat, is popular for a number of reasons. PDFs are a convenient method to distribute read-only documents intended to be printed. Making them is fast and easy, and they are reasonably reliable across platforms (more on this in the disadvantages section). Advantages noted however, PDF files have also received a fair dose of criticism.

According to Adobe, Inc.'s own Web page explaining PDF's purpose, "Adobe PDF is a reliable format for electronic document exchange that preserves document integrity so files can be viewed and printed on a variety of platforms." Note that it says "viewed AND printed" not "viewed OR printed." PDF files are extremely unwieldy on a computer screen, making a comfortable user experience nearly impossible. The type is often microscopic, forcing users to zoom to 400-500% to produce legible type, only to then have approximately 1/8 of the page viewable, causing all types of scrolling. When asking the eternal question "to PDF or not PDF," please heed this advice: documents distributed by PDF should only be those which you would expect a user to print out (i.e. application for admission). In any case, PDF files should be used sparingly, and should be used as an alternative to presenting material in plain HTML format, and not as a means of presenting material on the Web.

PDF Advantages

• Great for printingMaking them is fast and easy
• Ability to produce "locked" read-only documents
• Documents keep a fairly standard look across platforms (Windows, Macintosh, etc.)
• PDF Reader is distributed free of charge

PDF Disadvantages

• Because PDF is ideal for printing, their resolution is far greater than Web pages and so file sizes swell
• Despite best effort to maintain document consistency, no guarantee can be made that document will open as intended on a user's machine (most common is font substitution, which can dramatically affect readability, layout, and even functionality)
• PDF application is more likely than HTML to crash a user's browser or computer
• Making PDF files that are accessible to people with disabilities requires expert-level skill and huge time investments
• Compatibility issues do exist between most recent and previous versions
• Even on fast computers, opening the Adobe Acrobat Reader application can be time-consuming and processor intensive
• "Hidden" PDF links - links a user expects to be a regular Web page that when clicked unexpectedly launch the Adobe Acrobat Reader application - are a sign of poor usability/user interface design

File Naming
When naming your file, it is important to use only "safe" characters. The following is a list of safe characters:

• Alphabetic a b c d e f g h i j k l m n o p q r s t u v w x y z
• Numeric 0 1 2 3 4 5 6 7 8 9
• Hyphen -
• Underscore _
• Use of other characters can cause to make your Web page inaccessible by some Web browsers. These "unsafe" characters include the space, plus sign, question mark, exclamation mark, slash, period, ampersand, and others.It is also recommended that the file name be kept in lower case.

The home page of the Web site should be called either "index.html" or "index.htm"