College of Education Web Style Guide

Style Guide Mission:

The purpose of our website is to increase access to information about the College of Education programs, departments, offices, resources, and news. Every decision we make with regard to content and design should be made with the goal of adding value to our audience. The primary audience of the College of Education website is our students–both current and prospective. Secondary audiences of the website include alumni, faculty, staff, accreditation boards, and donors.

All web content should be conceived, created, and edited first for the students, and then for one of the secondary audience groups as necessary. The rules set forth in this style guide are intended to create a uniform design strategy across all College of Education web pages, thereby establishing a consistent and easily navigable browsing experience for all website visitors.

For questions or advice regarding the College of Education web style guide, please contact Josh Boldt.


Abbreviations

Degree Titles

Use periods when abbreviating degree titles.

Example: M.S., M.A. Ph.D., Ed.D., Ed.S., M.Ed.

When writing out degree names, the proper format is Master of Arts or master’s degree.

Acronyms

Minimize the use of acronyms when possible. When an acronym is first introduced on a page, always include the full name to which it refers.

Example: Educational Leadership (EDL)


Contact Information

Phone Numbers

Use parentheses for the area code and a hyphen.

(859) 257-3791

Email

Hyperlink all email addresses. To do this, add “mailto:” before the email address in the hyperlink field of the text editor. For example, mailto:example@nulluky.edu.


Dates, Numbers, & Time

Dates

If referring to the current year, do not include the year. For past or future years, include the year.

Example date formats: June 21, 2013 or October 4.

*One exception to this rule includes references to important deadlines like scholarship applications. To avoid confusion, always include the year with important deadlines (unless the deadline is the same date every year).

Numbers

Write out numbers one to nine. Use numerals for 10 and up, except when that number begins a sentence.

Time

Example time formats: 3 p.m., 3:45 p.m., or three o’clock in the afternoon.


Emphasizing Text

Avoid underlining, bolding, or using all caps or exclamation points for emphasis. When emphasis is absolutely necessary, use bullet points or white space instead. Placing a sentence on its own line is a great way to highlight its importance on a webpage.

The eye is immediately drawn to unexpected negative space. However, use this technique sparingly.


Files

Types & Names

Always use Portable Document Format (PDF). As the name suggests, PDFs are portable and display the same way on every device, screen, or browser. Microsoft Word documents are unpredictable across devices and also require proprietary software to read.

College of Education files must be stored on the same server that hosts the website. To do this, insert all files into the webpage and use a descriptive name that clearly tells the visitor what she will find in the PDF.

For example, use the title “2015 Student Teaching Calendar”, rather than “Calendar 05222015”. Make it clear what the link will lead to. In web design, this practice is referred to as leaving an information scent.

Updating Files

Regularly cull the site’s media library and identify outdated files. Replace new CVs, applications, and forms as needed, and always be sure to delete old files from the media library.

For help inserting and naming files, please contact Josh Boldt.


Headings

One of the easiest and most important ways to organize information on a web page is to use headings to break up the text. The nature of our university website often requires us to create information-heavy pages. Because of this, it is crucial that we organize all of this information with subheadings.

A good guideline for subheading frequency is that a heading should be inserted every few paragraphs.

Headings should be simple and specific, but not overly specialized or wordy. A few good examples of appropriate subheadings are: Overview, Program Description, Advising, How to Apply, and Contact.

The preferred subheading html tag is <h3>. The categories on this page, for example, use H3 headings.

Never use two consecutive headings without text between them.


Images

Faculty and Staff Photos

The College of Education has a designated format for all faculty and staff photos. The format requires an exact size crop and a drop shadow. Please email all new photos to Josh Boldt for formatting.

Featured Images

Our WordPress theme contains certain page templates that allow us to set featured images. Some of the default settings for featured images establish a custom border around the image automatically, some don’t. Some require custom image sizes, some don’t.

If don’t you feel comfortable working with featured images, please contact Josh Boldt for help.

Choosing Images

Picking the best images for the College of Education website can be a difficult undertaking. The goal is to choose an image that is at least somewhat representative of the page on which it appears. Here are a few guidelines to keep in mind when choosing images:

  1. Avoid generic stock graphics.
  2. Never use GIFs or any kind of animation.
  3. Avoid using images that are blurry or low resolution.
  4. If you need to resize an image, it’s probably better to just pick a different one. It’s difficult to maintain proper resolution when resizing.
  5. Be careful not to use photos of minors without parental permission.
  6. The College of Education web team is building a database of photos that will eventually be accessible to all site publishers. This will help all of us when it comes to image selection for the website.

Alt Tags

Alt tags are used to help make the web more accessible to users with special needs. Always add text to the alt field when adding new images. The alt tag should describe what is in the photo. This way all site visitors can understand what is represented on the page.

Example alt tag: “photo of the Taylor Education Building”


Links

Anchor Text

When creating a hyperlink, the text to which the link is attached is called the anchor text. Anchor text should be descriptive and clearly indicate where the link will lead. Avoid using phrases like “click here” or “follow this link” as anchor text. Anchor text should have a clear information scent that tips off visitors as to where the link will send them.

For example:

Link Format

All links should be attached to appropriate anchor text. Never paste a raw url on the page.

Also, when creating links, consider whether or not it is appropriate to set the link to open in a new tab. Usually the answer is yes. A basic guideline for answering this question is: Will the visitor want to remain on the current page after exploring the link? If yes, then set the link to open in a new tab. This will keep the site visitor from having to use the back button and she also won’t lose her place on the page.


Navigation

Navigation structure is one of the most important elements of the College of Education website. If students can’t find the content, they can’t read it.

Our WordPress theme contains one primary College of Education menu across the top of the screen. This menu is the same on every page of the website. This uniformity is crucial for site visitors to be able to navigate the website with a familiar information architecture on all pages.

In addition to the primary COE menu, the individual departments also have unique navigation structures. These department-specific navigation menus are contained within widgets on the right sidebar.

Following are guidelines for organizing widget menus in order to maximize their usefulness to site visitors.

  1. Every department and office should have one main widget menu which contains all of the most important pages. These pages will vary by department but they might include: Home, Programs, Resources, Faculty & Staff, etc.
  2. This main widget menu should appear on the sidebar of every single page on the department site, so that site users can always navigate to key pages regardless of the page they’re currently on.
  3. Remember that not every visit starts with the home page, so every page must have a clear and consistent navigation structure.
  4. Some departments have more information than others, and will therefore require more pages than can fit on the primary widget menu.
  5. When a department has more pages than those listed on the primary widget menu, the web specialist should create additional widget menus specific to the category currently being explored by the site visitor. These additional widget menus should appear above the primary widget menu only on relevant pages. For example, notice how the Principal Preparation Program page has a secondary widget menu that appears on top of the sidebar for all pages related to that program only (Overview, Ed.D. in Principalship, Ed.S. in Education).
  6. Create all widget menus via the menu function in WordPress and then insert these custom menus into the sidebar, rather than building widget menus with html in a text widget.
  7. Contact Josh Boldt for help building menus and creating a uniform navigation structure on your department website.

Paragraphs

When organizing information for the web, use paragraph breaks more frequently than you might in print. Website users consume content faster and more dynamically than they do in print.  Each paragraph should be no more than 5 or 6 lines long.

Because of this more dynamic reading style, web standards suggest paying less attention to “natural” paragraph breaks and instead simply inserting occasional text breaks into the page in order to hold the attention of the reader and maximize user experience.


Punctuation & Capitalization

Refer to AP style on other questions of punctuation and capitalization.

Back to Top ↑