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.

“Click here” and “read more” links should be updated immediately! Link text should be meaningful and make sense out of context. It should describe the purpose of a link and if linking to a download, also include the file type and file size, especially when it’s a large file that will require time to download.

• The best approach is to write link text that describes the purpose of the link without the help of surrounding text wherever possible (level AAA requirement).  Otherwise, write link text that describes the purposes of the link with surrounding elements and including the information needed to clarify the link before the link.
• Ensure link text is as short and concise as possible.
• Avoid using “click here” or “read more” or any other phrases that are ambiguous or unclear. Also avoid using URLs for link text.
• For links to email addresses, use the email address as the link text.
• For links to documents and files, include the file type (e.g. PDF, Word) and the file size within the link text.
• Meaningful links improves search engine ranking.
• Ensure that links to the same location have are referred to consistently, or use the same link text.
• Ensure that links to different locations do not use the same link text.

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.

Creating a text file called “htaccess.txt” (all lowercase and no quotes) is a simple way to password protect certain Web pages.

Create a new file in any text editor such as Notepad (Windows) or Text Edit (Mac) and name it htaccess.txt. Copy the following text in red into your htaccess.txt file.

AuthType shibboleth
ShibRequireSession On

require valid-user

The example  above will allow access to anyone with a valid Clemson userid and password (more options below).

Save the file and upload it to the same folder as the page want to password protect. If you are using Cascade, you will need to publish it to the server to enable the protection. Please note that if you have already logged in recently you may need to restart your browser before it will ask you to re-login.

Note: every asset in the same folder as the htaccess.txt file will be password protected.

The level of security varies with the options outlined in the file.

If you want to limit access to specific userids, then you would replace the valid-user variable with the specific valid userids:

require userid1
require userid2
require userid3

This will allow only the users userid1, userid2 and userid3 to have access.

Maybe you want to restrict access to just employees?

require primary-affiliation employee

Or perhaps only users of a specific blackboard workgroup?

require edirgroup .workgrouptest.workgroups.sitesets.clemsonu

For more information, visit CCIT’s page on Htaccess Controls.

You can float images by adding the class right or left. Optionally, pair this with the code data-size="" to specify an image’s size.

• full – image will fill 100% of its container
• medium – image will fill 60% of its container
• small – image will fill 40% of its container

HTML

<img src="" alt="image alt text" data-size="full">
<img src="" alt="image alt text" data-size="medium" class="right">
<img src="" alt="image alt text" data-size="small" class="left">

Image Sizes for Responsive Templates:

Page with left navigation, full width top of page: 1001 pixels by 350 pixels
Spotlights: 400 pixels by 300 pixels

For more information, see: Style Guide/Images.

See sample layout pages here.

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.

Web Template

The 1889 template is a theme to help Clemson’s marketers and web developers quickly create websites that are responsive, dynamic, and on-brand.

It was built with the foundation framework and utilizes the university’s content management system and hand-coded magic.

Foundation provides a responsive grid and HTML and CSS components, including typography, forms, buttons, navigation and other interface components, as well as optional JavaScript extensions. It was designed for and tested on numerous browsers and devices. It is a mobile first responsive framework built with Sass/SCSS giving us best practices for rapid development. The framework includes most common patterns needed to rapidly develop a responsive site, a flexible grid layout adjusting the width of the columns automatically.

For more information, see Style Guide.

See sample pages using this template here.

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.