Category: Clemson Web Style Guide

People who are color blind, vision impaired  or who have an age-related impairment often struggle to read text when there isn’t enough contrast between the color of the text and its background. There are two levels of requirements for color contrast, depending on the level of conformance your website is aiming to achieve.

• Ensure that information conveyed by color differences is also communicated in text or via other visual cues.
• Check that the contrast between text (or images of text) and background color meets the color contrast requirements that are applicable to your website’s level of conformance (WCAG 2.0 Level AA or Level AAA). Logos, decorative text and incidental text are exempt.
• Use a larger font size or higher contrast ratio for lightweight fonts or fancy fonts.

Minimum contrast requirements (Level AA):

• For text (and images of text) that is less than 18 points or less than 14pt bold, check that the contrast ratio between text and its background is at least 4.5:1.
• For text (and images of text) that is 18 points or 14pt bold or larger, check that the contrast ratio between text and its background is at least 3:1.

Enhanced contrast requirements (Level AAA):

• For text (and images of text) that is less than 18 points or less than 14pt bold, check that the contrast ratio between text and its background is at least 7:1.
• For text (and images of text) that is 18 points or 14pt bold or larger, check that the contrast ratio between text and its background is at least 4.5:1.

Check your color/contract here: Clemson’s Palette

Check your color/contrast here: Color Contrast Checker

For more information, see 272: Color Accessibility with Geri Coady

It is important to use headings to structuring a page into sections and provide the user with an idea of what content will follow.

They are even more important for blind and vision impaired users as they allow content to be easily navigated – this means using heading levels rather than styling text with large or bold fonts. Headings are also good for search engine ranking.

• Organise your content into sections.
• Ensure that each section of content is identified by a heading.
• Ensure that each heading describes and identifies its section of content.
• Keep headings short and succinct.
• Ensure headings are properly nested within each section of the document. For example, a Heading 2 must follow a Heading 1; a Heading 3 must following a Heading 2 and so on within each section.
• Mark headings using HTML heading elements <h1> … <h6>. Increasing text size or using styles (e.g. emphasis or strong emphasis) is not the same as using heading elements.
• Avoid use of abbreviations and jargon in headings.

Charitable Contributions to or on behalf of the CU Foundation or any other 501c3 organization whose mission is to support Clemson University, cannot be solicited, nor can they be accepted, unless approved in advance by the CU Foundation. For information on obtaining appropriate approval for such contributions, please contact Gift Receiving Office.

Video Standards:
The standard file format for video is MPEG-4.

Sizes:
Format: Small (talking head)
size: ~240 x 180 3:4 16:9
Data Rate: 400
Frames: 10 fps
On2 VP 6

Format: Medium
size: ~360 x 240 3:4 16:9
Data Rate: 200
Frames: 10 fps
On2 VP 6

Formatting standards for special occasion files that do not fall under the “small” or “medium” formats may be available upon request.

Other Video Requirements:
Video will not pop-up as a standalone browser window.
Media player skin design will not be user configurable.
Media player will be embedded into template design.

We highly encourage you to use descriptive copy with your video.

Note: Captions are required on all video content placed on any Clemson University Web site. This is to ensure Section 508 Accessibility compliance as mandated by the state of South Carolina. This guide is being further developed by the Web Leadership Team and will soon update the information here.

Video Guidelines:
Videos for the Web should contain either closed captions or a link to a transcript. If these options are not available, the individual posting the video must make a transcript available upon demand. The contact information for the person responsible for providing the transcript must be included with the video.

Video for the Web must comply with all applicable state and federal laws for intellectual property rights, including copyright and trademarks.

If you are posting audio and/or video available to the public on the Clemson University domain, you must notify University Relations, Robbie Fitzwater at rfitzwa@clemson.edu. When non-compliant videos/pages are identified by OWS or the New Media Team, they will contact the responsible department or individual to resolve the issue.

Archiving: A copy of the video must be on tape, DVD or server as long as the video is on the Web for legal purposes and to replace any corrupted files. The owner of the video is responsible for contacting Clemson University Archive/Records Management to determine whether or not a copy needs to be in the University Archives as well.

Video on YouTube:
Clemson University’s YouTube channel has been reorganized to help give you access to all the latest Clemson-related videos. The channel is managed by the Clemson Marketing Services Department, with the goal of including all University, college, departmental and alumni-related videos. In order to continue to build an expansive library, we need your help in gathering all existing and future Clemson videos.

Only official and approved Clemson University, college, departmental and administrative unit videos, or select videos approved by the CNMT, will be posted to Clemson’s YouTube Channel.

The channel will serve as a key promotional tool for your college or department, receiving thousands of views every month. Additionally, once videos are uploaded, they can be embedded on Clemson Web sites and Facebook pages.

Learn more about Video on YouTube here.

Resources:

• Video Broadcase Productions, Clemson University
• Copyrighted Materials, Clemson University
• Copyright and Video
• Copyright Infringement

Approved by the Web Leadership Team, March 10, 2008
Under review by the Office of General Counsel, April 7, 2008

While content will vary from site to site, the presentation of the content should be consistent and support Clemson’s position as one of the top public universities in the country. Proper use of visual identity elements such as colors, logos and type fonts ensures that you are enhancing the Clemson brand. If you have questions about identity or branding and how it is to be implemented on the Web, please contact ows@g.clemson.edu.

Web pages created outside of Cascade are required to contain the following:

1. Include the official masthead with a link to the Clemson University homepage and its other University-wide links (Map, Phonebook and hidden link Text Only) and optional A-Z Index, Calendar, University or Department Search.
2. Include the official footer and its University-wide links (Website Information, Contact Clemson, University Index).
3. Include contact information about who maintains the site, including name and email, department mailing information and phone number.
4. Meet Section 508 accessibility compliance. For more information see the WebAIM Section 508 Checklist.
5. Follow all copyright and intellectual property laws.
6. If your site doesn’t meet these minimum requirements, a properly-branded landing page will be created for your www.clemson.edu/xxx URL. A link on this page will then point people to your site.

Clemson’s Web site will be employing a style sheet using the following fonts:

Goudy
Trade Gothic
Trade Gothic Light
Trade Gothic Condensed
Zapfino
FG Saga

Be conscious of font size on your Web pages. While visitors can change the font size on their monitors, you don’t want to make a visitor change his/her settings due to extra small fonts. Also, avoid extra large fonts. This will give your site an unprofessional look.

Avoid more than two fonts on the same page. Operating systems (Unix, Mac and Windows) all work differently, and browsers display fonts differently and often are incompatible. Fonts have to be installed on your visitor’s system for your type to appear as you intend. Providing a choice of one or two fonts in your code is strongly advised.

Read more about Clemson’s fonts.

Clemson University’s authorized academic colors are:

Clemson Orange – orange, Hex F66733 (PMS 165 for print)
Regalia – regalia, Hex 522D80 (PMS 268 for print)
Fort Hill – white, Hex FFFFFF (White for print)
Bengal Stripe – black, Hex 000000 (Black for print)
Anna’s Lace – lace, Hex F9E498 (PMS 1205 for print)
Hartwell Moon – moon, Hex D4C99E (PMS 4535 for print)
Blue Ridge – blueridge, Hex 3A4958 (PMS 7546 for print)
Tillman Brick – brick, Hex A25016 (PMS 160 for print)
Centennial Oak – oak, Hex 562E19 (PMS 1545 for print)
Innovation – innovation, Hex 86898C (PMS 877 for print)
Bowman Field – bowman, Hex 566127 (PMS 378 for print)
Howard’s Rock – rock, Hex 685C53 (PMS Warm Gray 11 for print)
Calhoun Fields – fields, Hex B5C327 (PMS 583 C for print)
Gameday Blue – gameday, Hex 109DC0 (PMS 7459 C for print)

The color strategy for the new brand is to extend the palette beyond the primary orange, purple and white to include secondary colors. The inspiration for these colors is drawn from the natural beauty of the campus — the blue-gray waters of Hartwell Lake, the pale yellow of sunrise over Tillman Hall, and the rich green and brown of the forests and fields that surround the campus.

These secondary colors provide a depth to the brand that will allow more variety and versatility in the development of marketing media while maintaining a coordinated, integrated look.

For more information visit the Clemson University Brand Guidelines/Color Web site and Style Guide/Color.

Use of Wordmark in Header

The top left corner of a Web page header is the most prominent element of a page; therefore, it should carry a strong Clemson University brand identity.

The official Clemson University wordmark should be placed in the top left corner of the header unless a unit has another authorized unit or departmental wordmark, in which case that mark should be placed there. No other graphic element may be used in that location. The “alt tag” for the wordmark should include the words “Clemson University South Carolina.” Logo image files should be named “clemson-university-south-carolina-logo.png.” Creative Services is responsible for the development of all wordmarks for print and Web. More information see Brand Guidelines/Logos.

Contact the director of Creative Services at 864-656-2467 with questions about the authorization of a wordmark.

Design Tips

• Avoid using tables and frames. These make meeting Section 508 compliance difficult and pose usability problems. Omitting tables and frames will also make for easier transition into Cascade.
• Avoid more than two fonts on the same page. Operating systems (Unix, Mac and Windows) all work differently, and browsers display fonts differently and often are incompatible. Fonts have to be installed on your visitor’s system for your type to appear as you intend. Providing a choice of one or two fonts in your code is advisable.
• Keep it simple. Web pages should be easy to navigate and direct the visitor to the information as clearly and quickly as possible.
• Page titles use the SEO neutral pipe (” | ” with a space either side) as the word separator. This symbol is considered to be “or” in a regular expression string. Page titles should end with “Clemson University South Carolina.”
• Avoid “Under Construction” pages. Technically, Web pages are always under construction. If you don’t have information available, avoid posting a link.
• Be sure your dates make sense. For example, 01/02/01 means January 2, 2001, in the United States but February 1, 2001, in many European countries. If you write a time, indicate the time zone.
• Include your area code on the phone number, using this format: XXX-XXX-XXXX. Specify country if appropriate.
• Use the word “and” instead of the ampersand (&) symbol.
• Test your pages. Check each link to be sure it goes where you planned. Check each page in the major browsers: Internet Explorer, Firefox, Safari, Netscape and Opera.

Read more about Clemson’s Web site design guidelines.

Read more about Clemson’s Editorial guidelines.

This policy applies to all Clemson University Web pages signified by the address “clemson.edu” or within the range of Internet and Intranet protocol addresses assigned to Clemson University. University departments or units with Web sites based on non-University servers must comply with the terms of this policy in order to be linked from the University’s home page structure.

Policy

Consistent with University and state policy on the appropriate use of University-owned equipment, the University’s Web page must not be used for commercial, non mission-related purposes.

Implementation

In practice, this means that advertising space cannot be sold at any level of the Web page. “Advertising” refers to any situation in which the University, or one of its units, receives payment or in-kind gifts in exchange for a link or brand placement on a University Web page. Please see definitions below.

While advertising cannot be sold at any level, links to commercial vendors may be made in the following specific situations:

• Licensed software required for Web viewing:
  • The logo or graphic represents licensed software on which a core function of the page is based, e.g., Netscape, Adobe Acrobat Reader, RealAudio, VeriSign.

• Links to separately contracted vendor:
  • The logo or link is to a vendor or other entity separately contracted to provide services to the University, e.g., ARAmark, Bank of America, Nike.

• Sponsorship recognition:
  • Within a unit’s Web page, a logo or link can be displayed at that unit’s second level page or below to acknowledge support of the unit’s mission-related activities through sponsorship. Such logos or links are deemed to be recognition of corporate or other external sponsorship; payment may not be accepted for that link or logo. Please see definitions below.

• Educational Purposes:
  • The text link provides information for educational or other mission-related purposes and the University has received no consideration for incorporating that link.
  • This policy does not prohibit Web-based sale of non-commercial university products and materials related to Clemson’s educational, research and service mission.

Definitions

The following definitions should be considered general and applicable to this policy only.

Clemson University Web page: A page created or maintained by or on behalf of Clemson University or an office, department or division of Clemson University and located within Clemson University’s information technology environment, i.e., signified by the address “clemson.edu” or within the range of Internet protocol addresses assigned to Clemson University. [Note: Web page and Web site may be used interchangeably.]

Hyperlink or hypertext link: A logo, text or other identifier incorporating a link to a Web site external to Clemson University, placed on a Clemson University Web page without compensation.

Advertising: A logo, text or other identifier incorporating a link to a Web site external to Clemson University, placed on a Clemson University Web page in exchange for remuneration or gifts in kind, where that placement is intended to promote or market a service, facility or product offered by the entity’s Web site for a commercial purpose. Advertising includes messages containing qualitative or comparative language, price information or other indications of savings or value, an endorsement, or an inducement to purchase, sell, or use any company, service, facility or product.

Qualified sponsorship: A logo, text or other identifier incorporating a link to a Web site external to Clemson University, placed on a Clemson University Web page to acknowledge donation of services, products or financial or research support to Clemson University or an office, unit, center, department or division of Clemson University to support mission-related activities. The IRS defines sponsorship as “a payment for which there is no expectation that the sponsor will receive a ‘substantial return benefit.’ The income received by the sponsored organization is not subject to tax as unrelated business income.”

Banner ad: A typically rectangular advertisement placed on a Web site, above, below or to the side of the site’s main content area.

Guidelines for linking and presentation

In all of these cases, a link should provide information for educational or other mission-related purposes and the University cannot have received consideration for incorporating that link.

Such links should in no way imply endorsement of products or services offered by the external entity. Any descriptive text accompanying the link should be value-neutral. Acceptable language might include: “For more information: [link].” Unacceptable language: “Check out this great Web site [link].”

Such links should go to the home page of the entity’s Web site and, wherever possible, links should not go to pages on which products or commercial services are offered for sale. The logo, text or graphic should not include any qualitative or comparative language or descriptions of the non-University party’s products, services, facilities or company, including but not limited to price information, inducement to purchase, endorsements, savings or value.

Particularly in cases where a group of external hyperlinks is included, the following language is recommended for inclusion: Links to Web sites external to Clemson University should not be considered endorsement of those Web sites or any information contained therein.

In all cases, the design of departmental or unit pages that incorporate commercial links must be consistent with established graphic and placement standards for University Web pages. For example, commercial or text logos or display material may not be placed in the “banner” area, roughly the top of a page and pop-up notice of sponsorship will not be allowed under any circumstances.

Links to sponsors or other corporate recognition on a unit’s home page will not be allowed except under special circumstances considered on a case-by-case basis by the University’s Office for Web Services.

For more information, contact Creative Services Web team at 864-656-2467. The office is located at 114 Daniel Drive, Clemson, SC 29631.

Approved by the Administrative Council, June 30, 2008

All new academic University URLs and sites created in Cascade will begin with http://www.clemson.edu/ followed by the college and department. From this root, you can determine what name to use. For example, http://www.clemson.edu/college/yournamehere. URLs are case sensitive and should be created with all lower-case letters.

To see existing URLs or to request a URL, see Redirect Services.

Requests for particular URLs are granted on a first-come, first-served basis, so check to see if the URL you desire is already in use. Only one URL will be created for any given website. Clemson University reserves the right to refuse requests for URLs.

Redirects on servers and aliases will be used to ensure that long-standing, published URLs point to the new location of sites. Departments housing sites outside of Cascade, and on their own servers, may choose to follow the same standardization of URLs. Within Cascade, managers of sites can create redirects for pages within their site. For help with this, contact Web Services at ows@g.clemson.edu.

Things to remember when naming a Web site:

• Create a URL that will make sense to your users and will be easy to remember.
• Use all lowercase letters for the file name.
• Use dashes to separate multiple words.
• Do not use spaces or non-alphabet symbols in your URL. (Numbers are okay to use.)
• Keep it short!