Style Guide

General Principles Colors Typography Buttons Tables Media Logos & Social Layout Elements Homepage Details Forms

General Principles

The Alumni, Parents & Friends Network website should be:

  • Concise
  • Engaging
  • Focused
  • Easy to navigate
  • Mobile friendly

The Alumni, Parents & Friends network website strictly follows the grammar and usage rules of the University of Virginia style guide.

On Writing for the Responsive Web

1. Keep it short

There's nothing that will kill someone's interest in a page faster than a large block of text. Keep paragraphs short. Avoid repetition, even over several pages. Cut out information that's not directly to the point (more details can be moved to the bottom of the page or a secondary page). Try to state each point in no more than one sentence. Keep language simple and breezy.

2. Break it up

Use lists, headers, call outs and images to break up the page, draw attention to highlighted points. On the other hand, be aware that if everything is highlighted, nothing is. Be discriminating with your use of headers and bold text.

3. Obvious calls to actions

Give people something to do, and put that call to action in a prominent place. This means at the top of the page, not the bottom of a long paragraph. Use buttons instead of text links to create a visually engaging call to action.

4. Avoid tables

Tables do not translate well on mobile devices. Don't use tables unless you are displaying numerical data in a format that requires it.

5. Preview on your mobile device

Employ a "mobile first" mentality. Before you preview on desktop or launch any page or enewsletter, be sure to check how it appears on a mobile device. It should be stellar on mobile. If it's not, edit and repeat.

↑ Top


Colors

#ff6600

#003882

↑ headers links, banner background

#002654

↑ headers, footer & nav background

#3c58ad

↑ body links, site map bar

#373735

↑ body text

↑ Top


Typography

  • Text should be left aligned
  • Text should not be within an image
  • Visual styles are dictated in the code and will appear correctly on the website's front end. Do not alter colors, fonts, font sizes in the WYSIWYG editor.

Font Stacks

'Myriad W01 Regular', Arial, sans-serif

Georgia, 'Times New Roman,' serif

Headers

Usage

Headers help define a section and break up content, making a page easily and quickly scannable. Heading 1 is reserved for the page title. You will never use Heading 1, or h1, in body content.

Heading 2 is the first header within body content. Depending on page length, you will use only a 1-4 h2 tags per page. Heading 3 (h3), Heading 4 (h4) and Heading 5 (h5) should be used as appropriate, underneath an h2 or as section headers if there are more than 4 on a single page. Using headers in the case of a long table-of-content-style list is appropriate, depending on the number of items. Select header based on size needed. See example (listed webinars are h5). Another example (section titles are h2).

  • Do not use headers for emphasis
  • Do not duplicate the title of the page
  • Determine a clear visual heirarchy of information and design accordingly
Examples

This is a Heading 2

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam dapibus turpis et nulla interdum varius. Aliquam quis bibendum tellus, eget tristique libero.

This is a Heading 3

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam dapibus turpis et nulla interdum varius. Aliquam quis bibendum tellus, eget tristique libero.

This is a Heading 4

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam dapibus turpis et nulla interdum varius. Aliquam quis bibendum tellus, eget tristique libero.

This is a Heading 5

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam dapibus turpis et nulla interdum varius. Aliquam quis bibendum tellus, eget tristique libero.

Source & Implementation
<h2>This is my header style</h2>

Style headers by selecting the appropriate header (for example, "Heading 2") from the "Format" dropdown in the WYSIWYG editor.

Blockquotes

Usage

A blockquote is good for highlighting information that comes from another source. Where possible, an appropriate citation should be made using the <cite> tag.

Examples
"Blockquotes will appear centered with margins on either side. Create a blockquote by highlighting the typed text and hitting the button with the quotation mark in the WYSIWYG editor."This is my citation
Source
							<blockquote>"Blockquotes will appear centered with margins on either side. Create a blockquote by highlighting the typed text and hitting the button with the quotation mark in the WYSIWYG editor."<cite>This is my citation</cite></blockquote>
						

Call Out / "Large" Text

Usage

The large/call out style is good for highlighting information and breaking up a page. Please limit to three lines. Example ("Join us...").

Examples

If you want to include large, attention-grabbing text on your page, use the “large” style (select “large” from the Styles dropdown menu)

Source
							<p class="large">If you want to include large, attention-grabbing text on your page, use the “large” style (select “large” from the Styles dropdown menu).</p>
						

Lists

Usage

A list is an excellent way to make your page "scannable" and friendly to users on the go. Never simply write a list, as in:

1. List item
2. List item
3. List item

Instead, always use the appropriate coding, which can be implemented by selecting the list buttons in the WYSIWYG (fourth and fifth from the left on the top row).

Example

The list below is called an “unordered list,” which means the list is bulleted instead of numbered.

  • Morbi in sem quis dui placerat ornare. Pellentesque odio nisi, euismod in, pharetra a, ultricies in, diam. Sed arcu.
  • Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor, facilisis luctus, metus.
  • Phasellus ultrices nulla quis nibh. Quisque a lectus.
  • Pellentesque fermentum dolor. Aliquam quam lectus, facilisis auctor, ultrices ut, elementum vulputate, nunc.

The list below is called an “ordered list,” which means the list is numbered.

  1. Morbi in sem quis dui placerat ornare. Pellentesque odio nisi, euismod in, pharetra a, ultricies in, diam. Sed arcu.
  2. Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue.
  3. Phasellus ultrices nulla quis nibh. Quisque a lectus. Donec consectetuer ligula vulputate sem tristique cursus. Nam nulla quam, gravida non, commodo a, sodales sit amet, nisi.
  4. Pellentesque fermentum dolor. Aliquam quam lectus.
Source
<ul>
<li>Item 1</li>
<li>Item 2</li>
</ul>

<ol>
<li>Item 1</li>
<li>Item 2</li>
</ol>

Tooltips

Usage

Tooltips are a handy way to add extra, "bonus", information that might be helpful to some visitors. Pertinent information for all users should not be hidden behind a tooltip.

extended information
Source
<span data-tooltip aria-haspopup="true" class="has-tip" title="Tooltip Example Text">Normal text which is linked to the tooltop.</span>

↑ Top


Buttons

Usage
  • Calls to action should employ the button style in most cases (as opposed to standard link)
  • Use active language, such as "Check it Out," "Register," "Learn More," "Go"
  • Never say "click here"
  • Buttons should never be images
Examples

You Can Use Any Text

Sign Up

Centered Button

Source
<a class="button" href="http://alumni.virginia.edu/styles/#">You Can Use Any Text</a>
[button link="http://example.com"]Sign Up[/button]
<p style="text-align: center;"><a class="button" href="http://alumni.virginia.edu/styles/#">Centered Button</a>

↑ Top


Tables

Static Tables

Usage

Tables should only be used to display tabular data -- never to create columns. They are created by selecting the table button on the third row of the WYSIWYG. Further table controls are located on the third row of the WYSIWYG and will enable when a table is created. If you would prefer your tables NOT be striped you can add a class of “no-stripes” to the table.

Example
Heading 1 Heading 2 Heading 3
TEST TEST TEST
TEST TEST TEST
TEST TEST TEST
TEST TEST TEST
Source
<table>
<thead>
<tr>
<th>Heading 1</th>
<th>Heading 2</th>
<th>Heading 3</th>
</tr>
</thead>
<tbody>
<tr>
<td>TEST</td>
<td>TEST</td>
<td>TEST</td>
</tr>
<tr>
<td>TEST</td>
<td>TEST</td>
<td>TEST</td>
</tr>
<tr>
<td>TEST</td>
<td>TEST</td>
<td>TEST</td>
</tr>
<tr>
<td>TEST</td>
<td>TEST</td>
<td>TEST</td>
</tr>
</tbody>
</table>

Sortable Tables

Usage

In a sortable table, the data rearranges based on columns (click the column headers below for an example). Select the “sortable” class from the class dropdown when you are creating your table in the pop up window.

Example
Heading 1 Col 2 Col 3
1 First Uno
2 Second Dos
3 Third Tres
Source
<table class="sortable" style="width:60%;"> <thead> <tr> <th>Heading 1</th> <th>Col 2</th> <th>Col 3</th> </tr> </thead> <tbody> <tr> <td>1</td><td>First</td><td>Uno</td> </tr> <tr> <td>2</td><td>Second</td><td>Dos</td> </tr> <tr> <td>3</td><td>Third</td><td>Tres</td> </tr> </tbody> </table> 

↑ Top


Media

Images

  • Images should be high quality (professional photography preferred).
  • Images draw a user's eye first, so use sparingly and deliberately. An exception to this general principle is a table-of-contents-style page that utilizes thumbnails (example).
  • Images should not contain words, with the exception of logos.
  • Images can be aligned center, left or right. All images must have a set alignment. Set alignment via the media insert function.
  • Dimensions will be set automatically by the system.
  • Where appropriate, captions should be included via the media insert function (there is no need to style them separately).
  • See the "help" page for information on how to insert an image.

Banner Images

Usage

Customize the banner image on an individual page through the featured image field on the publish form. Please choose images that are horizontally situated, with primary image content being in the lower half of the photo.

Dimensions: 1100 x 260

Video

Usage

A video is an excellent way to engage your audience. We recommend that you feature no more than 1-2 videos per page and that the videos span the width of the page.

Upload your video to YouTube or Vimeo (the Alumni Association has accounts if your department does not). Copy and paste the video URL onto its own line in the WYSIWYG editor. The video will automatically appear on the page when you publish.

Source
http://youtu.be/1l_GpvgUwTw
http://vimeo.com/100248697

Slideshows

Usage

We recommend that you feature no more than 1 slideshow per page and that it span the width of the page.

Upload your photos to a Flickr album (the Alumni Association has an account; ask Jake for access). Copy and paste the album URL onto its own line in the WYSIWYG editor. The slideshow will automatically appear on the page when you publish.

Source
https://www.flickr.com/photos/uvaalumni/albums/72157669454070615

↑ Top


Logos & Social

Logos

Individual department logos can appear on your page. It must be featured at the bottom of your sidebar. There is a special upload form on the publish page for departmental logos. See "help" page for more information.

Social Media

Usage

Social media icons and links must appear at the top of the page sidebar. There is a special upload form on the publish page for this purpose. See "help" page for more information.

↑ Top


Layout Elements

Sidebars

Sidebars are an excellent place for quick information and links, as well as social media icons and departmental logos (which can only be contained in a sidebar). Sidebars should include information that is not text-heavy and would be relevant on all pages throughout a section. They are a good way to showcase content at the top of a page that is tangential to primary body content, or offers an additional way to navigate a section.

See "help" page for more information on how to implement sidebars via the "sidebars" panel on the publish page.

Columns

Usage

Columns help make a page scannable and and get more content "above the fold." Each column should have a header. Because columns become more narrow the more you add, be mindful of the amount of text in each column. Best when used as a table of contents.

In the WYSIWYG editor, copy and paste the following code (changing for however many columns you need):

[row]
[one_half]
[/one_half]
[one_half]
[/one_half]
[/row]

Put all content in between the [one_half] shortcodes.

Example

Example 1

Example 2

one_half Quisque a lectus. Donec consectetuer ligula vulputate sem tristique cursus. Nam nulla quam, gravida non, commodo a, sodales sit amet, nisi.

one_half Phasellus ultrices nulla quis nibh. Quisque a lectus. Donec consectetuer ligula vulputate sem tristique cursus. Nam nulla quam, gravida non, commodo a, sodales sit amet, nisi.

one_third Quisque a lectus. Donec consectetuer ligula vulputate sem tristique cursus. Nam nulla quam, gravida non, commodo a, sodales sit amet, nisi.

one_third Phasellus ultrices nulla quis nibh. Quisque a lectus. Donec consectetuer ligula vulputate sem tristique cursus. Nam nulla quam, gravida non, commodo a, sodales sit amet, nisi.

one_third Donec consectetuer ligula vulputate sem tristique cursus. Nam nulla quam, gravida non, commodo a, sodales sit amet, nisi.

one_fourth Quisque a lectus. Donec consectetuer ligula vulputate sem tristique cursus. Nam nulla quam, gravida non, commodo a, sodales sit amet, nisi.

one_fourth Phasellus ultrices nulla quis nibh. Quisque a lectus. Donec consectetuer ligula vulputate sem tristique cursus. Nam nulla quam, gravida non, commodo a, sodales sit amet, nisi.

one_fourth Donec consectetuer ligula vulputate sem tristique cursus. Nam nulla quam, gravida non, commodo a, sodales sit amet, nisi.

one_fourth Donec consectetuer ligula vulputate sem tristique cursus. Nam nulla quam, gravida non, commodo a, sodales sit amet, nisi.

one_fourth Quisque a lectus. Donec consectetuer ligula vulputate sem tristique cursus. Nam nulla quam, gravida non, commodo a, sodales sit amet, nisi.

three_fourths Donec consectetuer ligula vulputate sem tristique cursus.Phasellus ultrices nulla quis nibh. Quisque a lectus. Donec consectetuer ligula vulputate sem tristique cursus. Nam nulla quam, gravida non, commodo a, sodales sit amet, nisi.

one_sixth Quisque a lectus.

five_sixths Phasellus ultrices nulla quis nibh. Quisque a lectus. Donec consectetuer ligula vulputate sem tristique cursus. Nam nulla quam, gravida non, commodo a, sodales sit amet, nisi.

Source
[row]
[one_half]...[/one_half]
[one_half]...[/one_half]
[/row]

[row]
[one_third]...[/one_third]
[one_third]...[/one_third]
[one_third]...[/one_third]
[/row]

Side Navigation

Remove Side Navigation

Every page, by default, features a section navigation (exampel seem to the left). It is populated automatically by the child pages of your main section page. To turn this off, select "No Side Menu" from the Templates drop down in the Page Attributes box on the publish page.

Remove Specific Page from Side Navigation

To exclude a page from the side navigation (which is automatically populated by default), check the box under "Exclude Pages" on the publish page.

Make a Child Page a Top-Tier Page

If you would like to make a page the top (in example on this page, replace "example sidenav" with "top level page 5"), check the box under "Run as Subsite" on the publish page (please consult with website admins before making this selection as it fundamentally alters website navigability and user interface.

Horizontal Rule

Usage

Horizontal rules are a good way to break up into easily-digestible chunks. They should only be used to divide distinct sections -- not above or below headers as a decorative element.

Example

Source
 <hr>

Callout Boxes

Usage

If you would like to call out special information in a set-apart box, use the "rightsidebox" or "panel." Background color and dimensions are preset and cann't be changed. Boxes must be implemented in HTML view (source view). Please see a site admin if you need help implementing.

Example

Example

Content in Panel

Source
							<div class="rightsidebox">
<p>Content in Right Side Box</p>
</div>
<div class="panel">
<p>Content in Panel</p>
</div>

Accordions

Usage

Accordions are a great way to condense a lot of information into a small space. Keep in mind that you are hiding information from view, so each header item should be compelling enough to garner an additional click from a user. Use accordions sparsely, particularly since users are more and more accustomed to long vertical scrolls. Traditional examples of accordion usage would be a settings page (clicking categories to reveal items you can control to avoid a long form) or FAQs.

Accordions must be implemented in HTML view (source view). Please see a site admin if you need help implementing an accordion.

Example
See example.
Panel 1
Content Panel 1
Panel 2
Content Panel 2
Panel 3
Content Panel 3

Cavalier Fan Fest

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Football vs. North Carolina

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Men’s Soccer vs. Wake Forest

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Women’s Volleyball vs. North Carolina State

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Women’s Volleyball vs. Notre Dame

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Source
[accordion]
[acc_panel title="Panel 1"]
Content Panel 1
[/acc_panel]
[acc_panel title="Panel 2"]
Content Panel 2
[/acc_panel]
[acc_panel title="Panel 3"]
Content Panel 3
[/acc_panel]
[/accordion]

<div class="accordion"> <h3>Heading of Section 1</h3> <div> <p>Paragraph inside the first section.</p> </div> <h3>Section 2 Heading</h3> <div> <p>Content in section 2.</p> </div>

↑ Top


Homepage

Submit content to appear in the homepage slideshow or feature blocks by filling out this form. Content will be approved by a moderator.

  • Keep headlines and excerpts as short as possible. Brief content packs a punch.
  • Slideshow images should be horizontally situated
  • Images should be high quality (professional, but not stock, photography preferred)
  • Images will be automatically resized, but dimensions are below in case you'd like to specify crop.
  • There are only 3 slides and 4 feature blocks at any given time. Two feature blocks are dedicated to HoosNetwork and Virginia Magazine content.
Image Dimensions

Slideshow: 1200px X 460px

Blocks: 640px X 400px

↑ Top


Details

Contact information in footer

On every page, there is the option to have a contact person listed at the bottom of each page. This information will be automatically styled for you (see the bottom of this page for an example). Fill out the information in the "Contact Information" box on the publish page and the panel will automatically appear.

↑ Top


Forms

For help creating forms, please contact the Digital Media team at Alumni Hall.

Notifications

Notifications are emails sent to one or more parties upon the submission of a form. For example, a form might send a notification to staff members alerting them of a new submission, or to the user so they know their submission was received.

In order to ensure notifications are delivered, it is essential that the From Email field be either {admin_email} or a verified sender. To confirm whether a sender is verified, or to request a new one be set up, please contact the Digital Media team at Alumni Hall.

See the image below for an example of a possible form configuration:

Annotated example of form setup

↑ Top