University Marketing and Communications

Butler University Web Guidelines and Standards

These guidelines and standards are intended to help Butler University affiliates and organizations create and/or maintain their presence on the Butler University website.

This document is sponsored by University Marketing and Communications in cooperation with Butler's Information Technology department. For assistance, please contact a member of the Office of Web Marketing and Communications staff.

Content Management System (CMS)

The University has adopted a content management system (CMS) called Umbraco. A CMS enables organizations like Butler to edit and update a large number of Web pages that are managed by multiple groups and departments on campus.

"Content Managers" from each department within the University are trained to use the CMS. Questions concerning Umbraco CMS training may be directed to Nancy Lyzun in Web Marketing or Tim Roe in Web Services.

Templates

The University uses a content management system called Umbraco (see "Content Management System (CMS)" above). One of the advantages of using such a system is the ability to quickly and easily publish new websites by applying standard template layouts to newly created (or existing) pages. Although website templates contain some common University graphic elements and treatment, each department is able to customize certain elements of these templates.

In most cases, the following templates are available for use with website pages created in the Umbraco CMS:

  • Landing Page Template:
    • Typically used on the top-level page of a department website.
  • Interior Page Template (Two Column Layout):
    • Provides space for site navigation on the left side, while leaving the rest of the page layout available for site content.
    • Best choice for verbose pages.
  • Interior Page Template (Three Column Layout):
    • Provides space for site navigation on the left, body content in the middle and additional website elements (or "widgets") on the right.
    • Best choice for pages with minimal content and/or pages requiring additional functionality offered by right-side elements ("widgets").

In unique cases, Web Marketing and Web Services may be able to accommodate special requests for template layouts that differ from these three basic choices. Please consult with Web Marketing or Web Services if you feel this exception applies to pages you are managing.

Cascading Style Sheets (CSS)

All University website templates take advantage of external cascading style sheets. These are simple text files that contain style "classes" and "ids" that define attributes such as color, font, size, and position of HTML page elements. Web Marketing and Web Services use CSS to simplify website maintenance and adhere to professional Web standards outlined by the World Wide Web Consortium and other governing organizations of professional Web standards and accessibility guidelines. For more information regarding professional Web standards, accessibility, compliance, and law, please attend one of the Umbraco CMS training sessions.

Basic HTML styles are made available to University content managers through simple dropdown menus in the system. Some of these include:

  • h1 (style for page titles).
  • h2 - h6 (styles for page subtitles).
  • p (style for basic paragraph formatting).

In addition to basic HTML styles, custom CSS styles are available via dropdown menus as well. Some of these include:

  • borderedTable (style applied to tables for a bordered effect).
  • unBorderedTable (style applied to tables for a non-bordered effect).
  • imageAlignLeft (style applied to images to "float" them to the left side of a page).
  • imageAlignRight (style applied to images to "float" them to the right side of a page).

Please consult with Web Marketing or Web Services if the need for a custom style arises while creating new pages. Cascading style sheets will be discussed in detail during Umbraco CMS training.

Most of the time, content managers will not need to concern themselves with HTML code or the details of CSS styles. The text editor included with the Umbraco CMS, called TinyMCE, is configured to automatically generate the proper HTML code, allowing content managers to focus on content, not code. However, a basic understanding of HTML and CSS is always helpful.

Images

Images are permitted and encouraged on webpages, as long as they provide value to the page and follow certain recommended guidelines:

  • Images required for University templates will be chosen and prepared with the assistance of the Web Marketing and Web Services departments to ensure compliance with all University website standards.
  • Images should not include any unnecessary treatment such as bordering, feathering, movement, animation, gradients, etc.
  • Ideally, all images should be output in the format most technically suited for the image type:
    • Images with limited color palettes or solid colors should be GIF images.
    • Images with multiple colors (e.g., digital photographs) should be JPG images.
    • All images on a webpage should contain "alt" attribute information that briefly describes the contents of the image.
    • Most images placed on a webpage should not be any wider than 250 pixels. When resizing images for the Web using Photoshop, etc., it is important to adjust the width only and allow the height to automatically adjust itself according the locked aspect ratio of the image.
    • When optimizing images for the Web, minimal file sizes are preferred. In most cases, standard images should not exceed 35-50 KB. In unique circumstances, larger file sizes (50-100 KB) may be acceptable.

Please consult with Web Marketing or Web Services if you have concerns about image use.

File Names

Please follow these guidelines when naming and saving files that will be accessed via the Web:

  • Do NOT include any spaces in the file name:
    • Correct: "MyNewDocument.doc"
    • Incorrect: "My New Document.doc"
  • Avoid using date and/or time references in the file name:
    • Correct: "StudentFeeSchedule.pdf"
    • Incorrect: "studentFeeScheduleAugust2010.pdf"
  • Shorten the file name as much as possible:
    • Correct: "StudentAgenda.xls"
    • Incorrect: "the2010FallAgendaforStudentsVersion15.xls"

Assistance

The Office of Web Marketing and Communications staff will update these standards occasionally as new information and features become available. If at any time you need assistance with University webpages or the Umbraco CMS, please contact a member of the Web Marketing staff.