WebsiteFaculty/Staff/Departments

   

• Home
• My Group
  • My Two Column
  • My Three Column
  • Audio and Video
  • My Pretty Tables
  • Amazon
  • Lorem Ipsum
• Technical Guidelines
  • Complete Guidelines
  • Content Management
  • Supported Browsers
  • File Naming
  • Images
  • Overview
  • My Link
• Videos
  • Complete Training
  • Umbraco Review
• Register for Training
• Umbraco CMS
• Hide Show Example
• Joost
  • John Doe
  • Test
• Tim Roe
  • John Doe
• MK Page
• Steve Bruno
  • Testing 1.2.3.

   

Web Services Technical Guidelines

Supported Browsers

Web Services strives to ensure that University web pages are compatible with the following Web browsers:

Mac

• Safari 3 (and above)
• Firefox 3 (and above)

PC

• Internet Explorer 6 (and above)
• Safari 3 (and above)
• Firefox 3 (and above)
• Chrome 1.0

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"

Images

Images are permitted and encouraged on Web pages, 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 Web page should contain "alt" attribute information that briefly describes the contents of the image
• Ideally, most images placed on a Web page should not be any wider than 250 pixels. When resizing images for the Web using image editing software (Photoshop, etc.), it is important to adjust the width only and allow the height to automatically adjust itself according to 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.

Multimedia (Audio/Video)

The use of audio and video on Butler websites is encouraged and supported. Methods for placing audio and video on the Web may vary, depending on purpose. In most cases, your Web video will be uploaded to the Butler University Web Marketing YouTube channel and embedded in your departmental pages as required.

However, if you are embedding video that is not hosted on YouTube, Web Services recommends the following technologies and specifications:

• JW Player (http://www.longtailvideo.com/players/jw-flv-player)
• SWFObject (http://code.google.com/p/swfobject)
• Flash Video, encoded with the following specifications:
  • 4:3 (standard ratio), 320 x 240 pixels
  • 16:9 (wide ratio), 320 x 180 pixels or 640 x 360 (if necessary for visual impact)
  • 15 - 25 frames per second
  • On2 VP6 video codec (Sorenson video codec, if necessary)
  • 300 - 700 Kbps video bit rate
  • MP3 stereo audio, 64 - 128 Kbps (mono, if appropriate)
• Video files should be limited to approximately 5 minutes in length, if possible

In addition to playing video, JW Player can be used to play MP3 files in a playlist. Please contact Web Services if you need help creating an MP3 playlist for your site.

Please make sure you have permission to use any copyrighted material that may exist in the audio or video files you wish to place on the website. If in doubt, please consult with Web Services or Web Marketing before placing material on the University website that may violate copyright law.

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. Umbraco is easier to use than previous content management systems. As Web Marketing and Web Services migrate each University department website into the new system, members of each department will be notified and engaged in the process. "Content Managers" from each department will be identified and trained to use the CMS. More information regarding Umbraco CMS training will be provided as it becomes available. Questions concerning Umbraco CMS training may be directed to Nancy Lyzun in Web Marketing or Tim Roe in Web Services.

Templates

One of the advantages of using a content management system like Umbraco 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:

• Home ("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 (CSS). 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. Staff members of Information Resources and Student Disability Services are working hard to ensure that Butler University's website remain compliant with guidelines outlined by the Americans with Disabilities Act (ADA) and other regulatory guidelines for accessible design.

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 the CMS toolbar dropdown menu 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)

Other custom CSS styles will be made available over time. 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.

Help

Web Services and Web Marketing will update these standards occasionally as new information and features become available. If at any time you need assistance with University web pages or the Umbraco CMS, please contact Nancy Lyzun in Web Marketing or Tim Roe in Web Services.