UMBC logo

UMBC Web Style Guide

The first phase of UMBC's Web site redesign in fall 2006 refocused the homepage on the needs of external users, while making myUMBC more useful to internal users.

Emedia, UMBC's collaborative Web team, is now extending the redesign to provide a consistent university identity across the UMBC Web site. In user research, the team heard from prospective students that they have a better experience navigating university Web sites when it is clear that they are within the same site.

In response, Emedia created a standard university template with minimal required features to be used by UMBC departments and programs. The template provides a consistent university identification, while allowing departments/programs the flexibility to design their sites according to their needs and content.

The template is currently being incorporated into major sites (such as the Graduate School, Undergraduate Admissions, About UMBC and the "Resources for" pages on the UMBC homepage). We ask that department and program webmasters incorporate the UMBC template when they redesign their sites. This guide and the Emedia team can help webmasters incorporate the UMBC Web style.

If you need additional assistance, please contact the Emedia team at webteam@umbc.edu.
Here are some examples of how schools, departments and programs are currently using the official university template:

* About UMBC
* Alex. Brown Center for Entrepreneurship
* College of Arts, Humanities and Social Sciences
* Department of Public Policy
* Graduate School
* Media and Communication Studies
* The Honors College at UMBC
* Undergraduate Admissions

TEMPLATE
This is the standard UMBC template. This template will establish consistency across the UMBC web site. The university logo will always appear in the upper left and the site utilities and search function in the upper right. This upper section should not be changed. For example, the site utilities (The six UMBC links in the upper right) should always be A-Z Index, my UMBC, Calendar, Computing, Directory and Maps. The template also has a consistent background image and page width. In addition, this template offers a great deal of flexibility, allowing the end user the freedom to design the content area to their client's/department's specification.

screen shot of template
Click the image to download template

TYPE
The font family of Arial/Helvetica, sans-serif offers excellent online readability and is most complementary to the overall UMBC Web site.

Secondary pages on UMBC's Web site have titles, headers, tool bar links and side bar links. When considering type for the web, the font-family of arial, helvetica, sans-serif are most complementary to the UMBC Web site.

Titles appear at the top of the Web browser and should follow this format: "UMBC: An Honors University in Maryland - Page Title"

Headers appear in the body of the page. For example the header on this page is UMBC's Web Style Guide. The format of the headers is determined by a Cascading Style Sheet(CSS) using an H2 tag (see example below).
h2 {font-size:24px; font-family: arial, helvetica, sans-serif; font-weight: normal; color:#f00}

Tool bar links have some flexibility. In this case, the top bar links were generated in photoshop and utilize drop down menus. Tool bars should measure 880 pixels width x 25 pixels hieght when generating them in photoshop.

Side bar links also have some flexibility. In this case, the side bar links utilize CSS and follow the format of other UMBC secondary webpages.

COLOR
UMBC web style encourages prominent use of official UMBC colors. The school colors for UMBC (and all University System of Maryland [USM] institutions) are the colors of the state flag: red, gold, black and white. UMBC's traditional spirit colors are black and gold.

The UMBC Web site was created using browser-safe colors, the 216 colors used by most browsers. Using the browser-safe palette helps to ensure colors will appear the same between browsers, across multiple platforms and with different operating systems. The university color palette is Black (Hexidecimal Code #ffffff), Gold (Hexidecimal Code #ffcc00), and Red (Hexidecimal Code #ff0000).

GRAPHICS
Graphics were created in Adobe Photoshop at 72dpi in RGB mode, converted to Index color and exported as .gif files if they are line art or contain text and saved as .jpg if they are photographic images.

TECHNICAL NOTES
  • Template PHP Includes
    The university template uses PHP includes to simplify the HTML "clutter" in the template and to provide a mechanism by which the template can be updated globally should a change need to be made. When creating your own site, be sure to preserve all template PHP as is. If you remove or modify any of the template PHP, your page will display incorrectly. The template PHP code can be identified by the unique tags '<?php' and '?>' wrapped around it.
  • Style Sheets
    The university template makes use of Cascading Style Sheets (CSS) to provide all formatting and layout for the UMBC website. Website maintainers in departments are strongly encouraged to use CSS as they develop their sites.
  • Page Width
    The university template has been designed with a page width of 900 pixels and a content width of 880 pixels in order to fit on screens running at a minimum resolution of 1024x768. According to our statistics, 95% of all people who use the UMBC website use a resolution of 1024x768 or higher.
  • HTML Version
    HTML 4.01 TRANSITIONAL
  • Accessibility
    To ensure that UMBC's online content and services are available to as many people as possible, please review this Web Accessibility Tutorial for information on how to structure the HTML of your site.
  • Access Statistics
    To help us better maintain and improve the university web presence, we are using Google Analytics to provide information about the content most used on our site. To gather this information, we are using a small piece of JavaScript embeded at the bottom of the university template to collect any relevant information. No personally identifiable data is gathered at any time.
RESOURCES
If you would like to develop a UMBC-related web site, the following resources are available:
  • Guide to Web Publishing @ UMBC
    http://www.umbc.edu/oit/webdev
    The Office of Information Technology (OIT) maintains this site, which can walk you through the steps and tips for creating your own personal, course or organization web sites. The site includes links to online help sheets and tutorials as well as face-to-face workshops or informal "brown bag" sessions.
  • OIT New Media Studio
    http://www.umbc.edu/studio
    If you don't want to develop your own site, you can contract with OIT's New Media Studio, which will develop and/or maintain it for a fee. A portfolio of the Studio's past Web projects and current rate card are available on the site above.
  • UMBC "Emedia" Web Team
    http://www.umbc.edu/emedia
    The Offices of Institutional Advancement (OIA) and Information Technology (OIT) work collaboratively to design and maintain the top-level structure, navigation, content, design and maintenance of the UMBC home page and secondary links (except Library and Athletics).
  • Office of Institutional Advancement (OIA)
    OIA works primarily on institutional-level sites, but will occasionally accept more focused projects of strategic importance to the university. For more information, contact Jim Lord at jlord1@umbc.edu.
  • UMBC A-Z Index
    http://www.umbc.edu/siteindex
    The university maintains a master site of all official UMBC web sites. If you see something is missing or needs to be changed, please visit http://www.umbc.edu/help.
CONTACT
If you have feedback or questions about the new UMBC template, want feedback on your site, or would like more information about web development or other technical/policy issues, please contact the Emedia team at webteam@umbc.edu.