Comparative examples

The following examples show best practices for implementing Boston College web design elements. The guide will ensure that web content is available to users on all devices and tools. Failing to adhere to this guide may prevent some content from being accessed from some devices.

Not adhering to the style guide can also cause user confusion because elements are designed for a specific use that is consistently applied across the entire Boston College website. If a site editor makes a new style, there is a risk that this custom design has not been learned by the user and therefor the user can be confused. 

Headings

The Boston College headings have been designed to help organize web content through visual and semantic hierarchy.

The default heading styles, which are available from the Format dropdown selector under the Text tab, are shown below.

Heading 2 title

Heading 3 title

Heading 4 title

 

In addition to the above default style, headings also have additional styles available in the Custom tab.

Heading 2 title callout

Heading 2 title callout 2

Heading 2 title pull-up

Incorrect

Heading styles should never be altered by making them bold, italic, or other alterations as shown below.

Heading 2 title bold

Heading 2 title italic

HEADING 2 TITLE ALL CAPS

Heading 2 title color

Heading 2 title - hyphenated

Typography

The typography has been carefully designed to be legible on all user devices with consistent presentation across all website channels. Styling options for paragraph copy are available in the WYSIWYG text editor toolbar.

If a site editor needs to give a stronger weight to a word or phrase, the bold tool is a good choice.

Workshop title: A description of the workshop

For Commencement Day, all graduates should be in the assembly areas by the assigned time.

 

Italics are commonly used for titles and often utilized in citations.

Have you read To Kill a Mockingbird?

Terry O'Neill, Professor of Practice

 

The underline style is reserved exclusively for web links only. Underlined Boston College links in the paragraph copy are visible on the cursor hover state.

Further information can be found on the Boston College home page.

The bold style should not be overused, such as for an entire sentence.

We are looking forward to your attendance at this workshop. Please make a reservation by the deadline to ensure that you are guaranteed a spot before it fills up.

 

The italic style can be challenging to read if it is used for more than a simple phrase or title.

Two referral letters are required with your application for consideration of admittance into this program. Students who fail to include two referral letters will be asked to resubmit their application by the required deadline. No extensions are available for missing application materials.

 

Underlined text in paragraph copy is not allowed due to functionality confusion.

If we underline text users are inclined to think that they can click on the text to go to a link. This is especially true if the underlined text is blue.

Changing the text color can make text fall outside the standards of legibility requirements.

If we make the paragraph copy a different color than the default color, the text can be challenging to read and fail to pass legibility requirements.

Buttons

To move users to action, buttons can be an effective tool. A clear call to action by using a limited number of buttons will help direct users to relevant content.

Using one, or a maximum of two, buttons in a horizontal row of content is an effective way to make the call to action clear.

Our program gives students options for studying full time or in the evening

If more calls to action are needed, then make the two most important items buttons and the remaining items into links.

Our program gives students options for studying full time or in the evening

Students can contact us for direct questions or learn more about the program.

Using numerous buttons will overwhelm the user, dilute what the call to action is, and is not recommended.

Our program gives students options for studying full time or in the evening

Images

The imagery used on Boston College websites helps users make a human connection.

Imagery should appear spontaneous and capture a moment. Effective photos often show people making connections with each other.

students working together at laptop
students studying outdoors
students talking in Fulton Hall

Images will typically be 100k to 200k in size, with hero images ranging in size from 200k to 400k. Files larger than this need to be reduced in size before uploading.

Images should never have text except for logos. Images that have text fail accessibility standards and can not be read by screen readers.

bad example of image

Site editors that want to repurpose an existing marketing image or PDF file should use the BC Text component to insert all text and the BC Image Content component for any relevant graphics.

Tables

Boston College has designed table class styles that are available to editors with knowledge of HTML.

Table class="datatable"

DATATABLE201520142013

Total Class Size

247273253

Employed at 10 months
(9 months for 2013)

226 (91.5%)246222

Full Time

223 (90.3%)238196

Table class="datatable noborder"

DATATABLE201520142013

Total Class Size

247273253

Employed at 10 months
(9 months for 2013)

226 (91.5%)246222

Full Time

223 (90.3%)238196

Table class="datatable courses"

DATATABLE COURSES201520142013

Total Class Size

247273253

Employed at 10 months
(9 months for 2013)

226 (91.5%)246222

Full Time

223 (90.3%)238196

Table class="datatable events"

Wednesday, June 20, 2018

PROGRAM

8:00–8:45 a.m.

Registration

Sponsored by Mintz

8:45–9:15 a.m. 

Opening Remarks

David Quickley, Provost, Boston College

8:00–8:45 a.m. 

Keynote Address

Christopher A. Wray, Director, FBI

Options to prevent time from wrapping:

<td width="140"> on any one of the first column td sets it for the entire column. You can increase the value as needed.

or
<span class="time">8:00–8:45 a.m.</span> requires user to manually add the <span class="time">...</span>

Customized table styles may present legibility and consistency issues and are discouraged.

DATATABLE201520142013

Total Class Size

247273253

Employed at 10 months
(9 months for 2013)

226 (91.5%)246222

Full Time

223 (90.3%)238196
Back To Top