Website Conventions and Style Guide

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.

Site Conventions

Basic Site Conventions

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.

Lexicon

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

APPENDIX 1

Example Website Contact Form

Example Website Contact Form

Example Website Header Logo

Example Website Header Logo

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.

APPENDIX 2

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.

Page Layouts

Homepage Examples

Women's & Gender Studies Website Homepage

Women's & Gender Studies Website Homepage

Levine Scholars Website Homepage

Levine Scholars Website Homepage

Alumni Association Website Homepage

Alumni Association Website Homepage

Sub-page Example

Chancellor Emeritus Website Sub-page in Theme 2A

Chancellor Emeritus Website Sub-page in Theme 2A

Center for Teaching and Learning Sub-page in Theme 2B

Center for Teaching and Learning Sub-page in Theme 2B

Even HIgher Education Website Sub-page in Theme 2A

Even HIgher Education Website Sub-page in Theme 2A

Elements

Header

UNC Charlotte Website Header

UNC Charlotte Website Header

Belk College of Business Website Header

Belk College of Business Website Header

William States Lee College of Engineering Website Header

William States Lee College of Engineering Website Header

  • 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

UNC Charlotte Website Horizontal Navigation

Fig 4: UNC Charlotte Website Horizontal Navigation

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.

Left Navigation

Secondary Navigation in the Left Sidebar

Secondary Navigation in the Left Sidebar

Left navigation can be used as the primary navigation of a site or as the sub-navigation with a primary horizontal navigation.

Sidebar

Sidebar Example

Sidebar Example

An example of a sidebar block with a background

An example of a sidebar block with a background

An example of a sidebar block with a background

An example of a sidebar block with a background

An example of a sidebar block with a background containing videos

An example of a sidebar block with a background containing videos

An example of a sidebar block with a dynamic content

An example of a sidebar block with a dynamic content

Examples of graphic elements in sidebar blocks

Examples of graphic elements in sidebar blocks

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.

Body

Text in the body of a page

Text in the body of a page

Table used in content for formatting

Table used in content for formatting

Table with zebra-stripe styling

Table with zebra-stripe styling

The body is where the main content of the site goes. The design of the center column should be determined based on the type of content that will be presented in this area.


Tables

  • Use tables only when tabular data needs to be presented
  • Column width is adjustable
  • Font size for headers: h3 [18px], h4 [16px], h5 [14px], h6 [12px]

Technical Specifications

Faculty/Staff Directory

Example of a directory listing page - List of names and email addresses

Example of a directory listing page - List of names and email addresses

Example of a directory listing page - Three column with photo on the left

Example of a directory listing page - Three column with photo on the left

Example of a directory listing page - Stacked, photo on the right

Example of a directory listing page - Stacked, photo on the right

Example of a directory detail page - Photo on the left

Example of a directory detail page - Photo on the left

Example of a directory detail page - Photo on the right

Example of a directory detail page - Photo on the right

Many sites utilize a directory to display faculty, staff, students, interns, etc. There are various options when developing a directory for your website.


Directory Listing Page

  • There are several variations available when presenting the intial directory listings. Entries on a directory listing page can be displayed with or without a thumbnail headshot photo.
  • A ratio of 3:4 will be used when scaling images for thumbnails in a directory listing page. It is recommended the headshots for the directory details page (see next page) be no more than 150px x 200px.

Directory Detail Page

The directory detail page can be found by clicking on the name of the person from the directory listing page and will include full details about each directory entry. Entries on a directory detail page will have a full-size headshot photo displayed either on the left or right of the directory information.

Guidelines for EduConverse

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.

 

University-supported Email Options

UNC Charlotte supports the following options for sending email:

Which platform should I use?

This table describes the email platforms supported by UNC Charlotte.
 
Gmail Google Groups EduConverse
  • EduConverse is a powerful, paid, third-party platform used to create branded HTML emails.  There are several accounts managed by campus units:
    • University Advancement (including University Communications, alumni, development, the colleges, and the Chancellor’s Office)
    • Enrollment Management
    • Business Affairs
    • Continuing Education
  • EduConverse enables marketing automation via campaigns, Webforms, workflows, segmentation, analytics, and user communication preferences, and should form a part of integrated marketing campaigns for campus units.
  • Contact University Communications for guidance on purchasing a license.

 

Non-University supported email platforms include:

  • Constant Contact
  • iContact
  • Mailchimp

 

Visual Elements/Styling

Approved Website Colors

Approved Website Colors

Color

  • The approved web color palette is based on the colors developed as part of the print stanards at UNC Charlotte. The approved web colors are presented (on the right) with their corresponding hexidecimal code.
  • The lighter colors are ideal for background colors of blocks for placement in sidebars or other regions. The darker colors work best for horizontal lines, block borders, and page title embellishments such as underlines.
     
  • System messages coming directly from Drupal may display with a red, yellow, or green background.  This is the only time these colors may be used as background colors.

Fonts

  • Fonts are determined by the CSS in the template.
  • Page titles and subtitles appear in Times New Roman.
  • Page headings appear in Times New Roman.
  • Body copy will appear in Arial.
  • Avoid adding extraneous treatments to text, such as highlighting or any other type of decoration.
  • Strikethrough with fuchsia is only allowed for the Faculty Governance site to indicate changes in the Course and Curriculum Approvals section.

Grid

The UNC Charlotte website is set up on a 24 column grid with 30px wide columns and 10px wide gutters. All design element should be applied to this grid.


Elements

Header
Width: 100%
Height: 100px
Background HEX Color: #00703C

Site Title
Font: Times New Roman Font-size: 20px (1.25em) HEX Color: #FFFFFF (White)

Site Subtitle
Font: Times New Roman Italic Font-size: 11px (.7em)
HEX Color: #FFFFFF (White)

Utilities
Font: Arial
Font-size: 12px (.74em) HEX Color: #FFFFFF (White)

Horizontal Navigation
Width: 950px
Cell Width: Divided equally among the 950px Font: Arial
Font-size: 10px (.63em)
HEX Color: #555
Rollover HEX Color: #00703C

Vertical Navigation Width: 200px
Font-size: 14px (.9em) HEX Color: #555

Rollover HEX Color: #00703C

Body H2
Font-size: 24px (1.5 em)
Font: Times New Roman
Weight: Bold
HEX Color: #000000
Padding Top: 15px

 

Body H3
Font-size: 22px (1.38em)
Font: Times New Roman
Weight: Bold
HEX Color: #00703C
Padding Top: 15px

 

Body H4
Font-size: 18px (1.12em)
Font: Times New Roman
Weight: Bold
HEX Color: #00703C
Padding Top: 15px

Body H5
Font-size: 18px (1.12em)
Font: Times New Roman
Weight: Bold
HEX Color: #000000
Padding Top: 15px
Body H6
Font-size: 16px (1.0em)
Font: Times New Roman
Weight: Bold
HEX Color: #000000
Padding Top: 15px

Body H7
Font-size: 14px (.9em) Font: Times New Roman; HEX Color: #000000

 

Body Paragraph Font-size: 12px (.75em) Font: Arial
HEX Color: #333

 

Sidebar
Narrow Sidebar Width: 200px Font: Arial
Font-size: 11px (.7em)
HEX Color: #555
Header HEX Color: #00703C