Updated, 7/21/2011: Click here to download Version 2 of UNC Charlotte's Website Guidelines (PDF). Please be aware that formatting changes will be rolled out in the centrally-supported Drupal template in early August.

Also note: a change log has been provided so that users know what changed in Version 2.

Drupal's CMS will divide content from design by maintaining the look and feel through separate Cascading Style Sheet (CSS) files. This means that content authors and editors won't have to worry about the presentation of their pages and can focus on delivering appropriate content for their audience. However, we have prepared this page to present some common site conventions for you to bear in mind as you dig in and start using Drupal.

Table of Contents

1. General
2. Links
3. Audio/Video
4. Contact Form
5. Images
6. Files, Folders and Documents
7. Directory Structure
8. Common Page Elements

General

• Site Names - Site names in the header and the title tag should be written using proper case. Call the site "Department of Chemistry", not "DEPARTMENT OF CHEMISTRY" or "DEPARTMENT of CHEMISTRY".
• Horizontal Navigation for Departmental Pages - Items in the horizontal navigation must be written using title case. For example, do not use "ALL CAPS"; instead, use "All Caps." Menu items should be a maximum of two lines of text. Horizontal navigation should only be used on sites with four to eight tabs. Sites with less than four links or more than eight should use the left navigation.

Back to top

Links

When creating pages and links, we recommend using dashes and not underscores in the URLs to separate words or numbers. The rationale behind this guideline is purposeful and outlined below:

1. Readability: As part of the template's CSS, links have text decoration set to green and underlined in body copy, which means that a line is placed under the links. Links that are displayed in a bulleted list should appear in green text, with an underline on hover. From the end user's perspective, if underscores are used in the URL, it would look like a space since the entire link is already underlined. For example: http://staff_directory
2. Search Engine Optimization (SEO): Matt Cutts, a senior software engineer at Google, recommends using dashes instead of underscores in URLS. As he explains in his blog from 2005, if a URL contains "keyword1_keyword2", Google will only return that page if the user searches for "keyword1_keyword2" (which almost never happens). However, if you use dashes in your URLs (i.e., "keyword1-keyword2"), that page can be returned if the user searches for "keyword1", "keyword2", and even "keyword1 keyword2". Though this point has been argued over the years, as of March 2011 the consensus is to use dashes to improve SEO. If you'd like to learn more, click here to view a video from Cutts.

We also recommend that all links should be written using lower case letters and should not include any spaces.

Note: documents being moved as part of migration will retain their file name formatting to minimize broken links. New documents uploaded after migration must comply with these standards. Units may retroactively make changes to legacy content as appropriate.

Other Guidelines for Links

• Link Text - Embed links in your sentences and avoid copying and pasting the URL into your text. For example, if you are advertising the alumni events schedule, you might say: "Our Alumni events schedule is consistently updated; we hope to see you at a future event!"
• Email Links - Email links must be labeled as “email” and/or use the email address as the link text. If used in a narrative, then you may use the person’s name as the link text, provided it is clear that you are supplying a contact resource.
• Internal vs. External Links - All links to any site in the *.uncc.edu subdomain, including links to another page within your site, should open in the same window. Links to University websites should use the non-www URL as per the subdomain standards. Links to external, 3rd party sites should open in a new window. Remember to check your external links periodically to make sure that the pages you are linking to are still live; this helps you avoid frustrating your users by taking him or her to a broken link.
• "Back to Top" Links - When creating "Back to Top" anchor links for pages with longer content, use "#" as your link. For example: Back to Top

Back to top

Audio/Video

The use of audio and video content is encouraged on UNC Charlotte websites; embed code from YouTube is supported. Please contact Cindy Jones if you wish to have your video uploaded to the University's YouTube channel, and content from the University YouTube channel is preferred.

The use of auto-play audio and/or video is not allowed; content authors must also provide player buttons to allow users to pause or stop content from playing. QuickTime files can be used for Virtual Tours in lieu of YouTube.

Back to top

Contact Form

Individual contacts should be listed on all departmental-level sites. In addition, all departmental-level sites should include a Contact Us form. This form should be located at http://example.uncc.edu/contact and must be accessible via the utilities links at the upper right of the page in the green header (just underneath the contextual home link). The following components should be included in the form:

1. To (multiple categories may be used)
2. Your name
3. Your email address
4. Subject
5. Message (Text box with 500 character limit)
6. Send a copy of this message to yourself (optional checkbox)
7. CAPTCHA (prevents spam)

All fields above, with the exception of "send a copy of this message to yourself", should be required. Instructions for configuring the Contact Us form may be obtained by emailing marketing@uncc.edu.

Back to top

Images

• Logos - The appropriate University logo must be used at all times. To view our logo standards, please visit the Marketing website.
• Images - All images should be resized before uploading them to the server. Don't rely on HTML width and height attributes.
• Alternative Text (alt text) - The use of alt text is required.  Alt text describes the content of the image whenever you use images on your page. Alt text is required for ADA compliance (this text will be read aloud to site visitors who use screen readers) and will be displayed if a user has images turned off in their browser. Including alt text is an accepted standard among Web developers. To learn more about alt text, visit the Web Accessibility Initiative website. Additional suggestions for writing useful alt text can be found here.
• Tool Tip - When using an image for a link, be sure to include a tool tip by using the "title" attribute.
• Sub-brand Logos - Approved sub-brand logos can be displayed in either the left or right sidebar and treated as a graphic element on the page.
• Photo Release - Remember to have a photo release signed if you plan on using a photo of someone under the age of 18 on your website.  Contact marketing@uncc.edu if you need a copy of the release form.
• Image Resolution - Uploaded images should be a minimum of 72 dots per inch (DPI) in resolution.
• Sizing Chart - Please be knowledgeable of the sizing chart below prior to uploading images on your site:
  
  

  Type of Image	Dimensions
  Image Gallery	640px x 480px max
  Banner Top	950px x 100px
  Banner Bottom	950px x 200px
  Horizontal Top	710px x 200px
  Directory Details	150px x 200px
  Directory Listing	100px x 133px
  Small Thumbnails	90px x 90px
  Medium Thumbnails	120px x 120px
  Large Thumbnails	180px x 180px

Back to top

Files, Folders and Documents

• Documents - Documents can be uploaded via the WYSIWYG editor or via file attachment and should open in a new window. Open format (PDF, txt, rtf, csv) files are preferred. However, you may wish to create a page in Drupal to house simple documents. For example, if you want to publish a meeting agenda or meeting minutes, you can create a simple HTML page using Drupal instead of uploading an attachment. If you do wish to upload an attachment, make sure your file name is written in all lower case letters, and spaces are separated with a hyphen. All online content must meet ADA guidelines.
• Preferred File Format - PDF is the preferred document type for all documents you upload in Drupal.  File names should not contain any special characters or spaces.  File names with multiple words should be separated with a dash.
• Migrated Documents - All documents moved during the web migration process will remain intact in both name and file type to ensure linkage is not broken for other sites linking to those files.  Moving forward, please adhere to the proper file type and naming conventions noted above.
• Maximum File Size - The maximum file size for an uploaded image should be no more than 2 MB and documents should be no more than 24 MB.

Back to top

Directory Structure

A directory structure helps you organize similar content in common areas. It also allows you to enter keywords directly into your URL. This assists with search engine optimization and allows your site to be spidered and re-indexed by search engines.

• Avoid Flat Directories - A flat directory is one in which each page can be found directly off of the root. Flat directories make it difficult for users to find relevant content and understand what is most important in the site's hierarchy. An example of a flat directory might look like this:
  http://www.uncc.edu/page1
  http://www.uncc.edu/page2
  http://www.uncc.edu/page3
• Group Like Content - Creating subdirectories allows you to group like content into similar "buckets". The subdirectory acts like a keyword or tag that search engines respond to when a query is made. It also helps users understand the relationship between the different pages in a section. Here's an example:
  http://www.uncc.edu/about/history
  http://www.uncc.edu/about/administration
  http://www.uncc.edu/about/tour
  http://www.uncc.edu/about/directory
• The Three Click "Rule" - When creating your subdirectories, bear in mind the three click "rule." Many Web developers will tell you to keep your content within three clicks of your home page. This not only makes it easier for users to find what they need on your site, but also avoids burying the content too deeply in your directory structure. The key is to find the right balance between logical organization and subdirectory overload.

Please contact Cindy Jones if you'd like additional tips and resources about setting up your directory structure.

Back to top

Common Page Elements

All pages should include the following elements:

• Link to the home page from the logo; this link should open in the same window
• Informative title (helps when users create bookmarks). Page titles should follow the following format: Unit Name | UNC Charlotte. Example: Department of Chemistry | UNC Charlotte
• Avoid referring to the University as UNCC or UNC-C. "UNC Charlotte" (no hyphen) or "(The) University of North Carolina at Charlotte" are preferred.
• Always include the area code for all phone numbers. Use the following format: 123-456-7890. Do not use the long distance prefix (i.e. "1-") or the USA country code for domestic phone numbers. When abbreviating on-campus phone numbers on websites dedicated to internal audiences only, you may use the following format: 7-1234. Do not abbreviate phone numbers on your Contact Us page or in your staff directory.
• Room locations are identified using the following format:
  [Building Name] [space] [Room or Suite Number][Suite Letter]
  For example: Cone 110; Denny 220A
  Do not use the word "Hall" when identifying a room location. Do not use a space or any other delimiter between the room and suite number.
• Email addresses must be clickable.
• A link to a revised maps/directions page has been built into the footer. This page, which currently resides at http://search.uncc.edu/maps/, incorporates Google Maps and allows site visitors to generate custom driving directions to the main campus, the uptown campus, the Ben Craig Center, and the Levine Museum of the New South. Visitor parking decks are plotted on the map, and users can zoom in to find specific buildings on the main campus. Links to the Campus Map PDFs maintained by Facilities are also included on this site.
• Time should be formatted as follows:
  8:00[space]AM[space][dash][space]5:00[space]PM
  8:00 AM - 5:00 PM
• Long dates should be formatted as follows:
  Day[comma][space]Month[space]Date[comma][space]Year
  Monday, December 24, 2011
• Short dates should be formatted as follows
  Day[comma][space]Month[space]Date[comma][space]Year
  Mon, Dec 24, 2011
• Flyout menus are not permitted in the navigation.

Back to top

All sites are subject to review by the Marketing Services department to ensure compliance with the above standards.

Last Updated: 7/21/2011. See change log above for detailed information about what has been changed.