Web Services Blog

Size images for branded pages

Posted on by Carol J Usher

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.

 

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

Video Standards and Guidelines

Posted on by

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:

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

Posted in Clemson Web Style GuideTagged ,

Web page required content

Posted on by Carol J Usher

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.

Posted in Clemson Web Style GuideTagged , 1 Comment on Web page required content

Responsive Templates Available in Cascade

Posted on by Carol J Usher

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.

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

Typography

Posted on by Carol J Usher

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.

Posted in Clemson Web Style GuideTagged ,

Clemson’s Official Color Palette

Posted on by Carol J Usher

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.

Posted in Clemson Web Style GuideTagged ,

Create Panels and Borders with Color

Posted on by Carol J Usher

Have you ever wanted to add some colorful elements to your web page text? Sure, you can just change the text color but what if you want to take it up a notch and really make your text stand out? Panels and borders can be used to draw attention to special or important content. Simply add the class panel or border to your element, or to a div wrapped around many elements. Customize by also adding a brand color.

HTML with Orange Outline
<p class="border orange"><!--Your content goes here--></p>
<p class="panel orange"><!--Your content goes here--></p>
HTML with Sky Blue Panel
<h4 class="panel sky">Header</h4>
HTML with Regalia Header
<div class="panel regalia">
    <h4 class="last">Header</h4>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</div>

For examples and more information, see Web Style Guide/Panels and Borders.

 

Posted in How To...Tagged ,

Embedding a Map on the Contact Us Page

Posted on by Carol J Usher

See sample Contact Us page here.

To have a map to your address, go to Google Maps.

Enter your street address in the search box, top-left of page. For example: 201 Sikes Hall, Clemson University, Clemson SC.

Click on the Menu Drop dropdown, choose “Share or Embed.”

Choose Embed Map.

Copy map URL: https://www.google.com/maps/embed?pb=!1m16!1m12!1m3!1d6562.369538689062!2d-82.84129707279291!3d34.67528589506186!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!2m1!1s201+Sikes+Hall%2C+Clemson+University%2C+Clemson+SC!5e0!3m2!1sen!2sus!4v1492534935806

View Contact Us page in HTML.

Replace Google Map URL with the new code.

For assistance, contact ows@g.clemson.edu.

 

 

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

How to Add an RSS/News Feed

Posted on by Carol J Usher

Note: RSS feeds are included using a shortcode. Shortcodes are available to help you quickly add more complex features to your pages. To add shortcodes, open the HTML source editor in Cascade and paste the shortcode where you’d like the element to appear within your layout.

The RSS shortcode is used to incorporate an RSS feed into the page. It can accept any valid RSS URL. To add a feed, simply wrap the RSS URL in the [rss][/rss] shortcode, as shown below.

Shortcode
[rss]http://newsstand.clemson.edu/feed/[/rss]

There are two attributes available to modify the appearance of your RSS feed.

  • format – currently, the only alternative format supported is blocks, which shows a story with an image (where available) and the title in a block together
  • num – specify the maximum number of stories shown
Shortcode
[rss num=10 format=blocks]http://newsstand.clemson.edu/feed/[/rss]

For more information, see Style Guide/RSS/News Feeds.

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

Embedding Videos

Posted on by Carol J Usher

Note: Video embeds are done using a shortcode. Shortcodes are available to help you quickly add more complex features to your pages. To add shortcodes, open the HTML source editor in Cascade and paste the shortcode where you’d like the element to appear within your layout.

The video shortcode is used to embed videos from Youtube, Vimeo and ClemsonTV. To add a video, simply wrap the video’s URL in the video-shortcodeshortcode. To obtain the URL of your video, navigate to the page where the video is located as if you were going to watch it, then copy the URL from the address bar.

Learn more about embedding videos at Style Guide/Videos.

 

 

 

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