Web Services Blog

Web Site Design and Editorial Guidelines

Posted on by

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.

Posted in Clemson Web Style GuideTagged ,

Online Advertising Policy

Posted on by

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

Posted in Clemson Web Style GuideTagged ,

Naming Conventions

Posted on by

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!

Posted in Clemson Web Style GuideTagged ,

Image Standards and Photography

Posted on by

Image Standards:
Images should be used at 100% of their size at 72 dpi for best loading time for the page.

JPEG:
The better format for posting photography online. JPEG images can contain millions of colors and can be compressed to your desired size. We recommend:
Photoshop Quality level 80 — small images
Photoshop Quality level 60 — large images

GIF:
Generally used for non-photographic images of 256 colors or less, such as buttons, icons and arrows.

Photography:
When using photography, make sure to follow copyright regulations. When appropriate, give credit to photographers.

The images owned by Clemson University may be used on Clemson University Web sites. Photos are available for download from Photo Services . If you need further photography assistance, you may contact Creative Services or fill out the request form for Photo Services.

For more information, see: Brand Guidelines/Photography.

Posted in Clemson Web Style GuideTagged ,

Video Podcasts

Posted on by

Recommendations for Formatting Video Podcasts:

If you’re encoding your video podcast at 320×240, please increase the resolution to either 640×480 or 640×360 (depending on the aspect ratio of your source files). Why? Because video podcasts at this resolution look great on Apple TV and still port to video iPods. Lower resolution podcasts might also work on both platforms, but they don’t look nearly as good on a widescreen TV. As always, make sure to test any encoding changes you make to ensure device compatibility. QuickTime 7.1’s “Export to iPod” function will ensure that a video file is encoded at a width of 640 and is iPod-compatible.

It’s best not to create two different podcast feeds for different resolutions. By doing so, you dilute the popularity of your podcast and reduce exposure in our charts. It’s better to have one feed high in the charts than two that are lower.

If your source files are 16:9, stick with that aspect ratio. Don’t add letterboxing to make them 4:3. By doing so, you prevent the video from expanding to fill a 16:9 widescreen TV and instead end up with black space on all four sides. Also, your original source files should be at least 640 pixels wide.

Of course these are just recommendations. We understand that there are good reasons for 320×240 (bandwidth bills) and 720p (looks fantastic).

Do whatever makes the most sense for your show. For more information on formatting video, see the recently updated spec: http://www.apple.com/itunes/store/podcaststechspecs.html

To see a sample of excellent podcasts that also look great with Apple TV, check out the Apple TV Podcast Showcase.

Created by iTunes Podcasting Team, April 2007

Posted in Clemson Web Style GuideTagged , ,

Request a MySQL database

Posted on by

There are now two types of MySQL databases available. If you need a database for a production application for a university department one will be assigned to you. This is a version 5 MySQL database resource. It is backed up at the database level (not the record level).

Request a departmental or organizational MySQL database:
http://www.clemson.edu/ccit/request_resources/webmaster/mysql_request/dept_mysql/index.html

If you are interested in having a MySQL database for a personal website for you to use to learn to code database applications in PHP you can request one, however this is strictly a “sandbox” and is NOT a production server. It may not be available at any given instant and could be pulled completely without prior notice. So, you should never put any mission-critical data in your database. This is a version 5 MySQL database resource.

Request a personal MySQL database
http://www.clemson.edu/ccit/request_resources/webmaster/mysql_request/personal_mysql/index.html

Posted in Webmaster Tools ResourcesTagged , ,

Request Web space

Posted on by

CASCADE USERS
Your site currently gets published to a Web server with large file space allocation. Request space only for Web applications used in your site. Newly created space, if approved, will go on a server separate from the rest of your site. If you are requesting space on the media server to house images, pdfs and documents only, please complete the Web Service at ows@g.clemson.edu.

NON-CASCADE USERS
This is to request space for departments and organizations other than recognized student organizations only. All individuals with userids on the Clemson system have personal Web space automatically created for them in the public.www directory of their U: drive. Student organizations also all have Web space created for them through Student Affairs/Student Clubs and Organizations.

Request space here: http://www.clemson.edu/ccit/request_resources/webmaster/web_space_request/index.html

Posted in Webmaster Tools ResourcesTagged ,

Test your Web site in multiple browsers

Posted on by

Browsershots is a free service that tests your Web design in different Web browsers. The resulting screen shots will allow Web designers to make changes and correct any problems with their site.

How Browsershots Works
Browsershots takes screenshots of your Web site the way it looks when viewed in a variety of Web browsers. When you submit your Web address, it will be added to the job queue. A number of distributed computers will open your Web site in their browser. Then they will make screenshots and upload them to Browsershots.

http://browsershots.org/

Posted in How To...Tagged ,

Build a simple email feedback form

Posted on by

This code will build a simple form requesting Name, Email and Feedback information. The code must be entered into Cascade from the html editor, not from the WYSIWYG editor. Open the html editor by selecting the html button on the WYSIWYG toolbar. Copy the following text in red into the “body” or “content” section of your form page, where you want the form fields to go.

<form action=”http://www.clemson.edu/cgi-bin/formail.cgi” method=”POST”>

<label><strong>Name: </strong>
<input id=”realname” maxlength=”50″ name=”realname” size=”40″ /> </label>
<label><strong>Email:</strong> <input id=”email” name=”email” size=”50″ /> </label> <label><strong>Feedback</strong></label>
<textarea id=”feedback” cols=”45″ rows=”4″ name=”feedback”></textarea>

<!– CONFIGURATION AREA –>

<input name=”subject” type=”hidden” value=”Subject Line of Email” />
<input name=”redirect” type=”hidden” value=”http://www.clemson.edu/xxx” />
<input name=”recipient” type=”hidden” value=”Your Email Address Here” />
<input name=”required” type=”hidden” value=”email,realname,feedback” />

<!– END CONFIGURATION AREA –>

<input name=”submit” type=”submit” />

</form>

Once the form code is copied into the html editor, edit the values located in the “Configuration Area” to customize the form results you will receive via email when the form is completed and submitted.

The value=”Subject Line of Email” refers to the text that will be displayed in the Subject: field in the email messages you receive when the form is submitted. Edit this code to customize the subject line.

The value=”http://www.clemson.edu/xxx” refers to a web page, such as a thank you page, that will load automatically when the form page is submitted. Edit this code and replace the xxx with the system name of the thank you page.

The value=”Your Email Address Here” refers to the email address of the person who will receive the form results. Edit this code and replace with a valid email address.

The value=”email,realname,feedback” refers to the fields in the form that must be filled in order to submit. These values must match the values of the field names

For more information about additional optional fields to configure the form, please see the content under the heading “Optional Form Fields:” at http://www.scriptarchive.com/download.cgi?s=formmail&c=txt&f=README

Posted in Cascade Server How-To...Tagged ,