Introduction
The Office of University Web Communications is responsible for the look and feel of the Vanderbilt Web site and therefore is involved in helping others at Vanderbilt develop Web sites that best represent the University.
The Office of University Web Communications provides this document to the Vanderbilt community for the purpose of enhancing Vanderbilt University's Web presence. The guidelines within this document are intended as a reference for the look and feel, content quality and technical aspects of Web pages representing Vanderbilt University.
The Office of University Web Communications may be contacted by email at www@vanderbilt.edu.
Contents:Look and Feel | Site Ownership | Standards, Tools, and Tips
Web Site Look and Feel:
Appropriateness
Site Life Cycle
Information on Web pages should be updated as regularly as necessary for each office’s needs, whether that is daily, weekly, monthly, quarterly, etc. Every office is encouraged to update or refresh the content and design of their pages twice a year, preferably every fall and every spring.
On average, the Vanderbilt homepage and templates are scheduled for redesign every two years. It is encouraged that every office with a Web site routinely checks for updated templates and apply any changes as needed. The templates can be found on the Web Communications Web site.
Design Quality
Graphic design is the first and last part of the site observed by online visitors. Effectively designed Web sites grab viewer attention and offer clear, consistent navigation. The Office of University Web Communications provides templates to help design sites that are consistent with the look and feel of the University’s homepage and second-level pages.
For templates, view: http://www.vanderbilt.edu/publicaffairs/webcomm/templates.html
If a template is not preferable, there are some simple steps that can be followed to create a well-designed site:
Define Content- Decide on the purpose and goals of your site
- Identify what the needs of your site visitors would be
- Determine your audience's skill and Internet connection levels
- Create a flowchart that organizes and lays out your site
- Prioritize and categorize information
- Identify links within and outside the site
- Consider the download capabilities of your site visitors
- Develop look and feel with color, type and illustration
- Design using simplicity, contrast and consistent alignment
- Be consistent when you position the navigation links
- Ensure that your site designs are consistent with the University’s homepage
- HTML and CSS code your copy
- Compress graphics
- Test your site on a sample audience
- Test your site on various monitors, platforms and browsers
For more detailed Web design tips, refer to the following sites:
Project Cool Developer Zone -- http://www.devx.com/projectcool/Door/7051
Web Page Design for Designers -- http://www.wpdfd.com/wpdhome.htm
Web Design from About.com -- http://webdesign.about.com/compute/webdesign/index.htm?rnk=c2&terms=web+design
Content Quality
For Vanderbilt-specific style standards, please refer to the Division of Public Affairs style manual (pdf). For Web-related words, keep in mind the following:
- homepage is one word;
- Web is uppercase when it stands alone; lowercase when combined with another word (e.g. Web site; World Wide Web; webmaster);
- download and upload are spelled as one word
- online is one word, no hyphen
Be mindful of posting sensitive information online. Though you may be posting it for a small, select audience (your employees, students, etc.) unless it is password protected, it is available for viewing by the world.
There are many examples of less than high quality content on the Web. A good way to help you make decisions about your content is to browse Web sites. You will find everything from the superlative to the unacceptable. Many Web sites that discuss style standards focus largely on design and coding with little information about actual content. Quality writing is quality writing regardless of the medium. However, the Web medium puts a premium on getting to the point and presenting content in an unambiguous manner; therefore, it is important to take your time when drafting text. Long pages of text can be a problem for viewers of Web pages. As an alternative to long sections of uninterrupted text you might consider bullet list.
- People read differently on the Web than on paper. For an example, read: How Users Read on the Web
- Consider that the Web version may need to be very different then the print version.
- In some cases, providing a print version, as a downloadable option is another approach to consider.
- PDF files may be a good choice as they are platform independent. Indicate when a link is a PDF.
Commonality
Creativity is always encouraged when designing a University Web site. When considering what information the site should contain and how it should look, it is always recommended that the site reflect the character of office, organization or school it is promoting. By doing so, the site orientates the viewer immediately.
Equally, the site should also reflect Vanderbilt University. In today’s Internet world, it is not uncommon for a user to bypass a main directory homepage and link directly to a specific site. This is due largely to the use of Internet search engines. This type of direct linking can also cause users to question whether or not they are on an official or affiliated University site. Therefore, all University affiliated sites need to identify themselves as belonging to Vanderbilt University.
There main identifiers, which are recommended by Web Communications:
- A variation of the logos used currently on the University’s homepage or 2nd level pages
- A link to the Vanderbilt homepage. All Vanderbilt Web sites should have a link to the VU homepage
You may use a template, or you can download the logos from the Graphics Standards guide.
Use of University Marks & Branding
Vanderbilt logos and word marks used on official University Web sites such as University departments, approved student groups and schools, are permitted as long as the logos are used correctly.
In addition:
1. Web sites not affiliated with the University but using Vanderbilt insignia require authorization from the University Trademark and Licensing office.
2. Web sites that have a chat room are not allowed to use University insignia. Merchandise sites may use Vanderbilt insignia for the express purpose of advertising licensed products for sale.
3. News sites that provide information about Vanderbilt University are permitted to display University insignia.
To obtain authorization and the correct artwork, please contact the University Trademark and Licensing office at 343-7292 or maggie.huckaba@vanderbilt.edu.
Navigation
A clear, easy navigation through every page of the Vanderbilt Web site is a necessity. A site and its pages should not be a maze where visitors must guess their next move or try the "Back" button to get out. Every page should, at the very minimum, include
- (a) a link to the Vanderbilt University homepage and
- (b) a link to the appropriate department/division/school/etc. that the page originates from.
URL links should be tested routinely to ensure that they are still correct. If your site is redesigned and given a new URL, please create a bounce page from the old site to the new one.
The Vanderbilt templates include navigation to frequently used sites within Vanderbilt and quick links to the University’s second-level pages. If an office chooses not to use a template, it is encouraged to include links to the University’s selected URLs.
Templates
Vanderbilt University does not requires Web pages to look the same or to contain the same design elements; however, some may wish to incorporate the design of the Vanderbilt homepage and other upper level pages when creating their Web pages. To simplify this process, University approved templates are available for use at:
http://www.vanderbilt.edu/publicaffairs/webcomm/templates.html
Site Expectations
Every page of the Vanderbilt University Web site has at least one thing in common — it bears the Vanderbilt name. Keeping that in mind, every page is to be held to a certain standard of content and design. Using University approved templates is encouraged but not required — individuality is just as important as consistency of look and feel. However, every page, particularly top-level pages, are held to a standard worthy of bearing the Vanderbilt name. If a page does not meet that standard, the responsible office will be contacted by the Office of University Web Communications to discuss improvement options.
Site Master
Every site must be owned and maintained by a staff or faculty member -- not a student or external company. Using an external vendor to create, and in some instances to help maintain a site, is acceptable; however, at least one faculty or staff member from the responsible office must own and be accountable for the site, including having basic knowledge of how to update, remove or change information on the site. Student interns may help create or update sites; however, a student cannot be the owner of the site and cannot be the only person in the responsible office who knows how to update and manipulate the site.
Ownership by staff or faculty is essential in order to maintain continuity of a Web site. Student workers are a marvelous resource but when the student leaves the Web site still needs to be maintained, updated and even redesigned at some point in time. Without ownership by staff or faculty, material on the Web can easily become outdated. Outdated and inaccurate information on a Web site is often worse than no information at all.
Departmental vs. Central Site Control
Every office, organization and school with a University site is responsible for the look and content presented on its site, as well as keeping the site updated, fresh and consistent with the overall look of the Vanderbilt University homepage and second-level pages. The Office of University Web Communications has overall oversight not only of the University’s homepage and second-level pages, but also of all pages on the Vanderbilt Web site.
"Shutting Down a Site"
Every office, organization and school is responsible for the look and content of their site. When there are egregious errors or problems with a site, the Office of University Web Communications will contact the person responsible for the page and discuss ways to fix the problem. If the problem persists or if it is an emergency situation that requires immediate attention, University Web Communications maintains the right and responsibility to shut down a site either on a temporary or permanent basis.
E-commerce
Unless approved through appropriate channels, no University site may sell items on the Internet. Students are not allowed to sell any items on personal Web pages if the pages are on University servers. If an office, organization or school wishes to sell items, it must contact the Office of University Trademark Licensing: 343-7292 or maggie.huckaba@vanderbilt.edu to receive approval.
External Vendors
Working with an external Web design vendor is an acceptable solution when developing a University Web site or page. Though an external vendor may handle the original production of a Web site, at least one faculty or staff member from the responsible office must own and be accountable for the site, including having basic knowledge of how to update, remove or change information on the site. Student interns may help update a site; however, a student cannot be the only person in the responsible office who knows how to update and manipulate the site.
Unless there are extenuating circumstances, the following policies should be understood and shared when working with external vendors:
- All code and images belong to Vanderbilt University, and
- The created Web site should whenever possible reside on a Vanderbilt Web server, not that of the external vendor.
Should an office, organization or school be unsure on how to select and deal with an external vendor, the Office of University Web Communications can assist.
Many Web sites offer guides to styles and standards. Below is a selection of some of the guides:
The Yale Web Style Guide may also be purchased in hard copy. This is a comprehensive reference.
Web Page Design for Designers offers advice on how to best put together Web sites; however, it assumes a knowledge of HTML. This site takes the users beyond just the basics.
The HTML Writers Guild provides online courses, mailing lists and other references for learning more about Web development.
Creating Killer Web Sites offers design tips, example sites and other information on Web design. This site will provide you with lots of creative input as well as technical information.
WebMonkey offers a variety of resources for the web developer including many online tutorials.
HTML/CSS Standards
The authority is the World Wide Wed Consortium (W3C). We strongly endorse and support the development of Web pages that meet the standards of the W3C. For detailed information see the W3C Web site .
Another Web site that is particularly useful is Jakob Nielsen's Web site . The content of this Web site relates to making Web sites easy to read and navigate.
CGI, JavaScript, PHP, etc.
Web developers are free to use any of the tools such as Perl Scripts, Java, PHP, etc. that are at their disposal. In conjunction with Information Technology Services, the Office of University Web Communications strives to make the Web development environment at Vanderbilt as open as possible. Many tools are provided either on the main campus Web server or through site licensing of software. Due to other demands placed on staff time, support for these tools is very limited; therefore, it is encouraged that Web developers help each other through personal contacts, as well as the Spiders Web developers group and listserv, which is hosted by University Web Communications. For more information, visit the Spiders Web site.
When using advanced tools, such as scripts, attention must be paid to security. Mistakes in scripting make Web servers more vulnerable to hackers. The following site may answer some security questions:
http://www.w3.org/Security/Faq/
Downloading
Download times are dependent on many factors ranging from connection speed and the user's computer to the size of files the Web developer creates. Since a developer cannot control what hardware and software users have, it is important to be sensitive to the differences in user capabilities when placing items on a site for user download.
Keeping graphics files as small as possible while still maintaining quality is the main goal. Newer versions of Abode Photoshop include tools that make this a simpler process than in the past. Be aware that though code may not show up on the developer’s screen, it may still add to the user’s load time.
Features like Flash or JavaScript add to the load time since it must be interpreted before the page loads. Therefore, to ensure quicker load times, avoid any unnecessary code. Developers frequently make the mistake of creating a template, which includes JavaScript, and then uses the same template on all the site pages whether the JavaScript is needed or not.
Software/Server Compatibility
Since there are more than 150 Web servers operating on campus, the first step for any developer is to find out which server will be housing the Web pages. If the developer rigorously follows the W3C standards, basic Web pages will never be a problem regardless of the server. When using forms with scripts, database connections and other advanced features the server setup becomes a concern to the Web developer. The main campus Web server runs under the Linux operating system with an Apache server. Additional features on the main server include the availability of PHP, MySQL and CGI for use in developing interactive pages with databases.
The main campus Web server does not support the Microsoft FrontPage extensions, so developers using FrontPage will need to avoid use of WebBots and other features unique to FrontPage. There are some servers on campus that use Microsoft IIS and have the FrontPage extensions available. For more information on Microsoft IIS and FrontPage extensions and their server compatibility, contact Jim Parker in the Office of University Web Communications. Bear in mind that if IIS design pages do work under a particular server, they may not work if transported to a different server system.
Training Opportunities
Training is available locally by firms such as New Horizons and HOTT. Many training opportunities are available at other locations. For example Thunder Lizard offers conferences with training across a variety of Web development topics as does the Nielsen Norman Group. More specialized training is available from Lynda.com and Molly.com in such areas a Photoshop, Dreamweaver, Illustrator, Cascading Style Sheets, Adobe Live Motion, etc. MySQL.com offers training in PHP and the MySQL database.
Contact Information
Every University Web page should have contact information that is clearly shown. If there are questions concerning a particular page, a viewer should be able to easily contact someone to clear up the problem. The "homepage" for each responsible office’s Web site should contain complete contact information for the office, organization or school including mailing address, phone number and e-mail address. Subsequent pages should contain at least an email contact preferably in the form of a link. This should not be www@vanderbilt.edu. Instead, it should be someone with direct knowledge of the page who can provide relevant information to the user.
Security
Remember any information you put out on the Web is essentially available for anyone, anywhere to read and copy. Therefore, most Web information is not secure. Any information you do not want made public should be placed on a secure server and password protected. Once you post information to an unsecured Web site that information is available to anyone who has access to the Internet. Think twice before posting personal information, photos, research data or any other type of information that might be misused by someone.
Other more technical security concerns such as hackers breaking into a server or manipulating a Web site are not as clear cut and easy to handle. For most developers, the main precaution that can be taken is safeguarding usernames and passwords associated with connecting and transferring pages to and from the Web server. Please review the section CGI, JavaScript, PHP, etc. for more on security using forms. For general security information, please see:
Browser and Platform Considerations
A developer's life would be much simpler if every user saw sites on the same type of computer and used the same type of browser. Unfortunately, life doesn't work that way. Visitors may view your site using Safari on an Intel Macintosh, or they may view your site using Internet Explorer 7.0 with Windows Vista on a PC. The Office of University Web Communications strongly encourages Web developers to design their pages for all audiences. This means keeping accessibility in mind as you are coding and designing your site. For example, the latest version of the Vanderbilt homepage and top level pages were designed to degrade legibly in older browsers, meaning they are usable and navigable in that browser, but the formatting does not show up. While nothing ensures that your design will be the same under all browsers on all platforms because of differing display characteristics of systems as well as different screen resolutions and settings on monitors, the best option is to follow the W3C standards as mentioned earlier. Additionally, taking into consideration accessibility for all users will help insure a more uniform appearance. For more on accessibility see the following section.
Accessible Web Pages
Given that Web accessibility is desirable, University Web Communications also recognizes that the newest technologies and design considerations sometimes make the goal of total accessibility difficult to attain. In the case of Web pages, which are not accessible to the visually impaired, providing a text-only page with the same content is an alternative. The specific federal regulation that covers this is Sec 508B of the WORKFORCE INVESTMENT ACT OF 1998 and maybe seen at: http://www.usdoj.gov/crt/508/508law.html. Which Web sites are covered by this regulation is yet to be definitively determined.
For more information on making your Web site accessible, VUMC provides a Web site . This site includes links to tools for checking accessibility, as well as information about building accessible sites.