 |
| |
|
Union's website is a large collection of documents that tell the Union story to the world. Please use this information to help you tell your part of the story to our web audience. This Web Style Guide establishes a consistent design for Union web pages.
|
|
 |
|
 |
| |
Web Style Guide
|
|
|
Union’s website is a large collection of documents that tell the Union story
to the world. The Office of University Communications develops much of its content, but
there are a variety of avenues that allow offices and departments to maintain
their own information.
University Communications maintained information
At Union University, the Web Development Agent is a member of the Office of University
Communications and has these responsibilities:
- Oversees general style, structure, content and technical concerns for the
entire www.uu.edu domain.
- Consults with Union University offices, departments, programs, and centers
regarding site creation and management.
- Develops web applications and other interactive media that meet university
needs.
The rest of the staff in University Communications handles many of the updates on
Union’s website. If you are interested in making suggestions or getting items
included on the following areas of the website, please contact the University
Communications area associated with the content below:
- Top Level Pages (web development)
- General University Information (web development)
- Calendar of Events (web development)
- UnionToday & News Releases (news & media relations)
- The Union Photo Project (visual communications)
- The Union Audio Project (web development)
- The Unionite (university communications)
- The Bulldog Shoppe (web development)
- Academic Program Sites* (web development)
- Various Event Websites (web development)
- Conference Registration (web development)
- Credit Card Payments (web development)
*Academic Program Sites - These pages utilize a consistent design that
present academic programs to the world. They contain related news releases,
photos, faculty contact info, and catalogue information. These pages are
considered the official sites for these academic programs, but departments are
encouraged to develop their own department-maintained websites that can be
developed and maintained through employee network access (see below).
Department/Office maintained information (Network
Access)
University entities like departments and programs have the option to
develop and maintain their own websites. Initial setup assistance is available
from the web development division of University Communicaitons, but it is expected
that departments will be responsible for maintaining the site after it has been
setup. Applications like Microsoft FrontPage (free - cost covered in Union’s
Microsoft site license) can be used to assist the individuals who are
maintaining the site. Sites can be accessed via our campus network through the
P: Drive (Group:Internet on the Kappa server for Mac Users).
P: Drive Access must be requested through the web development agent or
through the instructional technology coordinator. Once you have that access, you
can be given access to the following folders based upon the recommendation of
your department chairs and/or office directors.
- dept - http://www.uu.edu/dept/________/
- programs - http://www.uu.edu/programs/________/
- org – http://www.uu.edu/org/_______/
Department chairs and/or office directors are responsible for proofing their
pages, and all pages will be subject to review by University Communications. Logo
usage should follow the guidelines found in this style guide in section 5.3.
In addition to maintaining university entity pages, individuals may also
maintain their own personal website through P: Drive Access. Personal sites will
be located in the personal folder and will visible online at http://www.uu.edu/personal/(e-mail
name)/. Please see the instructional technology coordinator for help on
developing your personal website.
Content Management Systems
When deemed useful, the web development agent can develop a content management
system that will allow an office to enter information via a web browser into a
database that will then automatically update a website. These systems are
generally developed for sites that deliver content that is consistent in format
such as a calendar of events, articles, profiles, links, etc. Please see the web
development agent for more information.
Union Web Style
University Relations recognizes that delivering a consistent, professional
website is important in the digital age. But at the same time, we want to allow
each department or office some level of freedom in communicating in an
appropriate and vibrant way with their audiences. So to accomplish this, we
require two things
- that you follow the logo usage guidelines in the Communication Style Guide and
- that you adhere to the following guidelines when creating and maintaining
sites.
Guidelines for university pages
Page Size
- Utilize a resizable fluid design OR
- Do not exceed a 650 pixel page width
Browsers Supported
- Pages should look similar in Internet Explorer, Firefox or Safari (Macs) on both
PC and Mac formats
Page Names (the actual file name of the page)
- Short (one word preferred)
- All lower case
- No spaces (use underscores to separate words)
Page Titles (the title that appears in page navigation lists, on the blue
title bar in the browser and in search engine title searches)
- Short, but descriptive (a few words at most)
- All major words begin with capital letters
- Spaces between words
MetaTags – should appear in the HTML of all documents that want to be listed
on search engines
MetaTag Descriptions (an optional short summary that appears below the page
title in some search engines’ “Hit” lists)
- One or two lines (should be 150 characters or less)
- Begins with “Union University” and then a brief description of the page
- Example: <meta name="description" content="Welcome to Union University, a
four-year, liberal arts, Southern Baptist university located in Jackson,
Tennessee, USA.">
MetaTag Keywords (topic words, separated by spaces, which aid search engines
in finding certain pages on the web)
- Include in each page all possible query terms that can be used to search for
the topic of the page. List the most important terms in a keywords meta-tag
together with all common synonyms (even ones not included in the body text).
Include generic terms used by customers or competing companies to describe the
topic of the page; do not include competitors’ trademarks in the meta-tag.
- Example: <meta name="keywords" content="Union, Union, Union University,
Union University, Tennessee, Jackson, Union, Union University, Baptist, West
Tennessee, Southern Baptist Convention, Southern Baptist Convention, Jackson,
Tennessee, Union, Union, Union, Union, Union, Union, Union, Union, Union,
Union, Union">
Content Tips
- Keep it short; most people scan the page for information.
- Start the page with the conclusion and short summary (many search engines
use the first few lines of text in the description of their “hit list”).
- Use bulleted and numbered lists when possible.
- Organize your site with no more than three levels of navigation.
- Use captions that uniquely identify the illustration or table.
Graphics
- Limit the use of graphics to avoid slow download of pages.
- College, department and office logos are not permitted. (See Style
Guide)
- Use professional photographs or photos from the
Union Photo Project if possible.
- Please describe each graphic using ALT tags – this helps site accessibility
in multiple ways.
- The standard size for thumbnail faculty or staff photograph is 100 pixels
wide.
- Flashing graphics and animation are strongly discouraged.
Union Color Palette
- Black: #000000
- Red: #990000
- Light Gray: #E0E0E0
- Dark Gray: #666666
Header sizes, colors, styles (Header sizes should not exceed 20
pixels)
- H1 (20 pixels), black, Arial
- H2 (18 pixels), black, Arial
- H3 (16 pixels), black, Arial
- H4 (14 pixels), black, Arial
Font size, color, style for body text and table text
- Default: 12 pixels (10 pt.), black, Arial
- Smallest readable font in bold on Netscape 4.7 browser is 9 pixels.
- Colors: Black is the most readable. If another color is necessary, use the
darker colors from the Union color palette.
Links
- Link and active link color: #990000 (Red)
- Visited-link color: #666666 (Dark Gray)
Text and Graphic Justification
- Left-align entire page in most cases
Tables
- Border: Prefer none, but if absolutely needed, use the darker colors from
the Union color palette.
- Cell padding: Use 5 pixels padding inside cells to allow adequate spacing
between the cell border or background color and the text. This will create 10
pixels of space between two columns.
Date Format
- Use a slash between numbers of dates (example: 7/15/03)
- When presenting dates in headlines or text, abbreviate months except for
March, April, June and July.
- Samples of correct usage:
May 24, 2003
May 24
May 2003
Dec. 24
Dec. 24, 2003
December 2003
|
|
|
|