• Height must remain consistent
• Layout, typography and background must remain consistent

Campaign Branding

• A 950 x 100 pixel wide banner between the header and navigation may be used for specific, time-defined campaign branding

Exceptions to Header Treatment

Two exceptions have been granted to the way site titles may be displayed in the header of the new University template. These exceptions are for the Belk College of Business and The William States Lee College of Engineering.

When a new University branding initiative was launched in 2008, these colleges were the only two units with a slightly different font treatment for their logos. In order to allow their websites to continue to leverage this branding effort, they are allowed to use caps and italics in their header to be consistent with their marketing materials.

Currently, these are the only two exceptions allowed. For more information, please email the Marketing Department.

Horizontal navigation is an option for primary navigation.

Option 2 (With a “Give Now” Button)

• A “Give Now” call-to-action button is optional. The button is not customizable and measures 110 x 45 pixels.

Option 2 (Without “Give Now” Button)

• Horizontal navigation should be used when there are four to eight items in the navigation. For sites with less than four or more than eight primary navigation items, left navigation should be used as primary navigation.
• The “tabs” in the primary navigation will be sized automatically by the template.
• Menu items can include a maximum of two lines of text.
• Menu items should be written using title case, and never ALL CAPS.

The sidebars are used to pull out secondary content, such as related links, calls to action, promos, etc.

Width

Sidebar (200 px) – Both left and right sidebars can be used to add static or dynamic content to your website. Sidebars may have special CSS styling while still adhering to approved colors, fonts, and treatments.

Image Usage

• The left sidebar can contain the following: left navigation, established departmental graphics, contact information, dynamic content, and external links.
• The right sidebar can contain the following: right navigation, approved sub-brand logos or legacy marks used as graphics, contact information, dynamic content, and external links.

Sidebar Examples
Each of these examples shows the different types of content allowed in the sidebar.

Sidebar Backgrounds

• Graphics may be used for sidebar backgrounds.
• It is safe to include background colors from the approved web color palette.
• Background treatments can be simple shapes and gradients using and/or coordinating with the approved web color palette.
• There are other options for sidebar graphics available as customized elements. View Appendix B for further details.

Sidebar Background Examples
Each of these examples shows the different options available using standard colors, background images, treatments, and styles.  For more information, please see Appendix B.

Dynamic Content in Sidebar

The sidebar is often used to display dynamic content such as news or events, Twitter feeds, FAQs, login information or other types of long form copy and listings.

Graphic Elements in Sidebars

Promos and calls to action are the other types of sidebar items. These are not dynamic and may be full-color images. The left or right sidebar is a good place to add approved sub-brand or legacy logos, or established departmental graphics.

General

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 should comply with these standards. Units may retroactively make changes to legacy content as is appropriate.

• Login Credentials - All websites in the centrally-supported Drupal offering require NinerNET credentials in order to log in, and permissions are granted by the Web Communications team. Do not share your login credentials with any other staff member.
• Link Formatting - Words in links are to be separated by a dash, which has benefits for SEO. Please refer to Matt Cutts' 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 search- es 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.

Web Communications, in collaboration with other campus teams, has developed the following lexicon to standardize certain terms when used on University websites.  Please bookmark this section as it will continue to evolve over time.

• University Name
  • UNC Charlotte (preferred short form)
  • The University of North Carolina at Charlotte (preferred long form)
  • Never use UNCC, UNC-Charlotte
• Phone Number Formats
  • External Phone Numbers: 704-687-1234
  • Internal Phone Numbers: 7-1234
• Individual College Names
  • Belk College of Business
  • College of Arts + Architecture
  • College of Computing and Informatics
  • College of Education
  • College of Health and Human Services
  • College of Liberal Arts & Sciences
  • William States Lee College of Engineering
  • University College
  • Honors College
  • The Graduate School
• Vocabulary
  • Use periods in advanced and professional degrees; i.e. M.B.A., Ph.D.
  • Use "website" not "web site"
  • Use "web form" not "webform"
  • Use "flier" not "flyer" (for handbills)
  • Use "online" not "on-line" or "on line"
  • Use "offline" not "off-line" or "off line"
  • Use "buses" not "busses"
  • Use "canceled" not "cancelled"
  • Use "Internet" not "internet"
  • Use "login," "logon," or "logout" as nouns; use "log in" as a verb 
  • Use "NinerNET" not other permutations
  • Use "ZIP Code" not other permutations
  • Use "Kennedy 123A" for building locations, not other permutations
  • Use "1:23 PM" (no military, no dots in AM/PM, use uppercase AM/PM) not other permutations

Links - Other Guidelines

1. 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!”
2. 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.
3. 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.
4. “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
5. Menu Links - Links to other websites are not permitted from either the primary or secondary navigation.  Instead, create a page on your website that describes the content, and then you may link to another website from that page.  Remember that links on the *uncc.edu domain must open in the same window; links outside of the *uncc.edu domain must open in a new window (see #3 above).

Audio/Video

The use of audio and video content is encouraged on UNC Charlotte websites; embed code from YouTube is supported and content from the University YouTube channel is preferred. Please contact Cindy Tribucher if you wish to have your video uploaded to the University’s YouTube channel. 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.

Contact Form

Contact Us - 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 contex- tual 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.

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, which 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. See example below of how proper alt text should be display when hovering over an image.
• Tool Tip - When using an image for a link, be sure to include a tool tip by using the “title” attribute.
• Approved sub-brand logos can be displayed in either the left or right sidebar and treated as a graphic element on the page.
• 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.
• Uploaded images should be a minimum of 72 dots per inch (dpi) in resolution
• Please be knowledgeable of the sizing chart below prior to uploading images to your site
• Type of Image
  • 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

Files, Folders and 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.
• 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.
• 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.
• The maximum file size for an uploaded image should be no more than 2 MB and documents should be no more than 24 MB.

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 Tribucher if you’d like additional tips and resources about setting up your directory structure.

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 cam- pus, 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: Monday[comma][space]December[space]Day[comma][space],Year Monday, December 24, 2011
• Short dates should be formatted as follows: Mon[comma][space]Dec[space]Day[comma][space],Year Mon, Dec 24, 2011
• No flyout menus in navigation.
• All sites are subject to review by the Marketing Services department to ensure compliance with the above standards.

Dos

• Use an official university header for ALL EduConverse emails.
• Include a link from the official university header to the sponsoring division, college, or business unit's website.
• Ensure that hero images are sized to 600px wide by 300px high.
• In-text images should be sized to 300px wide by 300px high.
• Add relevant alternative text so images are appropriately described or skipped by screen readers.
• Resize all images using an editing software such as Photoshop prior to uploading images to the platform.  
• Use compelling subject lines.
• Add personalization with the "first name" field tag.
• Encode special characters.
• Test messages on desktop and mobile email clients.
• Seek approval from University Communications prior to sending out messages.
• Use a button to present a clear call to action for email recipients.
• Ensure that the preview is text only and appears in black font.

Don'ts

• Do NOT make any modifications to official university headers.
• Do NOT use the image resizing features of the platform.
• Do NOT use colors that are not part of the official color palette.
• Do NOT use any JavaScript, Flash, or embedded videos.
• Do NOT place important written information in images WITHOUT providing relevant alt text.
• Do NOT include a colored background with the preview text.

UNC Charlotte supports the following options for sending email:

• Gmail (supported by ITS; contact help@uncc.edu with questions)
• Google Groups (supported by ITS; contact help@uncc.edu with questions)
• EduConverse/Bronto (supported by University Communications; contact educonverse@uncc.edu with questions)

Which platform should I use?

Non-University supported email platforms include:

• Constant Contact
• iContact
• Mailchimp