Epsilon Theme 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

Theme Use By Group

 

Tier 1
Division websites

Tier 2
College-level websites

Tier 3
Departmental, office, and center websites

Hero Images
(Banners)

Coast-to-coast Hero Images are available
on the homepage for Tier 1 websites.

Sub-page banners HAVE to be 1200w x 400h

Coast-to-coast Hero Images are available
on the homepage for Tier 2 websites.

Sub-page banners HAVE to be 1200w x 400h

Homepage banners need to be 1200w x 400h

Coast-to-coast is turned off in the theme for departmental sites.

Green Overlay Button
(Events and Calendar link)

Available on Tier 1 websites.

Not available on Tier 2 websites.

Not available on Tier 3 websites.

Gold Overlay Buttons
(Side gold links)

Available on Tier 1 websites.

Not available on Tier 2 websites.

Not available on Tier 3 websites.

Directory

MUST USE Basic Version - Running List

Any version allowed

Any version allowed

Factoids

MUST HAVE factoids

MUST HAVE factoids

Factoids optional

Exceptions

Admissions website CAN HAVE fingers and thumb

Inside UNC Charlotte website CAN HAVE coast-to-coast

   

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.

APPENDIX 1

Example Website Contact Form

Example Website Contact Form

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

Blog


Events



Faces and Stories



Factoids

Factoids

Factoids

Factoids provide high-level, story-telling data in a visual way.

Teir 1 websites MUST HAVE factoids on their site.

Factoids must appear as numeric, percentage, or dollar amounts.

It is imperative to keep the favtoid numbers updated as data changes within the University.

 

 

Faculty/Staff Directory

Epsilon Theme - Standard Directory Listing

Epsilon Theme - Standard Directory Listing

Epsilon Theme - Directory Listing in a Table

Epsilon Theme - Directory Listing in a Table

Epsilon Theme - Directory Listing Cards

Epsilon Theme - Directory Listing Cards

Epsilon Theme - Directory Listing Cards With Flip

Epsilon Theme - Directory Listing Cards With Flip

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.
  • The Standard Directory Listing is avaiable to all website tiers, but it is the ONLY option for Tier 1 websites.
  • 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.

FAQs




Image and Video Galleries




News



Quick Links


Spotlights


Elements

Header

Epsilon Theme - Header

Epsilon Theme - Header

Epsilon Theme - Campus Resources

Epsilon Theme - Campus Resources

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

Gateway Links

There are five standard gateway links in the thin green bar at the top of the header, which the Site Manage are allowed to change.

If the Site Manager chooses not to change the Gateway Links, the default links must remain in the header.


Social Media Icons

The social media icons in the header link to the main UNC Charlotte social accounts, and there is also a link to the campus map.


Campus Resources

Clicking the Campus Resources link in the header opens a resources drawer.

Horizontal Navigation

Epsilon Theme Navigation with Dropdowns

Epsilon Theme Navigation with Dropdowns

Horizontal navigation should be used when there are four to six items in the navigation.

The items in the primary navigation will be sized automatically by the template.

Dropdown navigation items are are the default, though Site Managers may choose not to display menu items with dropdowns.

Tier 1 Coast-to-Coast Homepage Hero Images

Coast-to-coast Hero Image with Overlay Buttons

Coast-to-coast Hero Image with Overlay Buttons

Coast-to-coast Hero overlay buttons

Coast-to-coast Hero overlay buttons

Coast-to-coast Hero images are available to Tier 1 websites, and may have slider functionality and overlay text.

Coast-to-coast Hero images MUST have dark gradient ovelay built-in to the display.

Button overlays are to the right of the image available on Tier 1 websites.

 

Site Managers are encouraged to include the beautiful facilities at UNC Charlotte in their photography, but Hero images MUST have people in the shot.

Tips for taking a great hero image:

  • Images should be taken in a landscape orientation.
  • Image dimensions are 1800 pixels x 750 pixels.
  • To account for the text overlay, the subject should appear in the right, ⅓ of the shot.

 

Tier 2 Coast-to-Coast Homepage Hero Images

Coast-to-coast Hero Image

Coast-to-coast Hero Image

Coast-to-coast Hero images are available to Tier 2 websites, and may have slider functionality and overlay text.

Coast-to-coast Hero images MUST have dark gradient ovelay built-in to the display.

 

Site Managers are encouraged to include the beautiful facilities at UNC Charlotte in their photography, but Hero images MUST have people in the shot.

Tips for taking a great hero image:

  • Images should be taken in a landscape orientation.
  • Image dimensions are 1800 pixels x 750 pixels.
  • To account for the text overlay, the subject should appear in the right, ⅓ of the shot.

Footer

Epsilon Theme - Footer

Epsilon Theme - Footer

The footer is closed by deafult on University websites, and can be expanded by clicking the Click For More link.

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

The footer on University websites includes:

  • Two lists of links to helpful campus resources
  • Links to University social media accounts
  • A link to the campus map
  • University contact information
  • Links to Terms of Use and Unversity Policies

Users cannot change any content in the footer.

Technical Specifications

Visual Elements/Styling

Approved Website Colors

Approved Website Colors

Headings

Headings

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.