Web Style Guide

The materials below are not optional but express EMU's legal obligation to fulfill web accessibility requirements. Modern Campus CMS users who repeatedly violate these guidelines may have their Modern Campus CMS access revoked until further training can be obtained. Please see our accessibility page for more information on web accessibility.

  • ABC

    Expand dropdown

    Academic Degrees
    BS, MA or Ph.D.
    associates, bachelor’s, master’s

    Academic Program Information
    All academic departments must link to the official EMU Catalog for course descriptions and degree requirements. Page editors should not link to course description PDFs or any information source other than the EMU Catalog.

    Alignment
    Always left-aligned, not center or right.

    Alumni
    Alumna/ae (female graduate/plural)
    Alumnus/i (male graduate/plural)
    Alum (informal)

    And
    No ampersands (&) unless in a trademarked name.

    Bullets
    If content is not sequential, use bullets.

    Capitals
    Never use all capital letters.

    Colored Text
    Colored text, including gray, cannot be used according to web accessibility standards.

    Commas
    No commas before “and” unless the items in the list are several words long.

    Examples: I went to the store to buy chocolate, coconut and milk. I thought I saw a dog covered
    in chocolate, three little girls in dresses juggling cherries, and a cat wearing glasses drinking tea

    Cut/Paste
    When you are placing new content, always choose the “paste plain text” option or re-type the content

  • DEF

    Expand dropdown

    Dates
    January 13 or Jan. 13–20

    Email

    Emphasis
    Do not use underlining or italics. Use bold, but sparingly, no more than a few words.

    • The only appropriate way add emphasis to content is using the bold option. It is recommended to only bold the most important content you would like to emphasize. The more you bold, the less likely users are to read your content.
    • You may also use the float box snippet to bring attention to content. (Find out how to add a snippet to a page.)
    • Buttons are a good way to add emphasis to a link or action step.
    • It is inappropriate to use headers to emphasize information. Headers are only to be used in creating proper hierarchy.
    • We also ​do not​ use italics or underlining.
    • Do not use color or color fonts, especially red, for emphasis. Instead use bold font or place the content into a float box snippet to bring attention to the content.
    • Do not indent content.
    • Do not use all capitals.
  • GHI

    Expand dropdown

    Hierarchy/Headers
    The topic of your page should be made into a header 2 by choosing the third drop down from the left on the second row of the tool bar (It will default to “paragraph”). If you have a topic under that, you will make it a header 3 and so on. It follows a basic online form.

    Example:

    H2: Lion

    Lions are the King of the Jungle.

    H3: Famous Lions

    There are many famous lions who have frightened and delighted us through history.

    H4: Simba

    Simba, although orphaned at a young age, rose to great prominence in the pride.

    H5: Characteristics of Simba

    Son of Mufasa and Sabari, husband of Nala.

    H4: Mufasa

    Mufasa was a great lion-king who died in a tragic, terrible wildebeest stampede.

    H3: Types of Lions

    While there is technically only one species of lion, the term “lion” is used for many creatures.

    H4: African Lion

    The African lion is the most famous of all those who hold the name “lion”.

    H4: North American Mountain Lion

    Known by many names including puma, cougar and panther, the North American Mountain Lion once roamed up to 40 miles in search of territory.

    Images
    Please do not add images to content areas. Images should only be added to areas set aside for images or adding using a snippet.

    Images cannot include text. Please do not post flyers on your site. 

    Get more information on images.

    Graphical images or images that include text violate ADA guidelines and are prohibited on emich.edu sites. (See our Accessibility site.)

    Image Guidelines

    Here’s an example of what is not allowed:

    A picture of a postcard

    The text laid on top of this image is not accessible because the screen readers that assist users with sight disabilities cannot interpret the text within the image. Images should be related to the accompanying text or the content of the page. Images posted must be at the permission of the owner. Images obtained by google image search are copyrighted and not allowed.

    An example of the same space as above with proper imaging:


    An image of canoes on the water
     
    An image of canoes on the water

     

    Join Us at Our Event!

    We are having a cat party on canoes. Register now! R.S.V.P. before it's too late. 

    Our party will take place on October 28, 2020 at 10 a.m. Please be sure to bring your own cat and your own canoe. You can rent a canoe, but only if you bring proper identification and a fresh loaf of bread.

    This event benefits the Cat Foundation of Greater Huron County. This non-profit animal shelter takes in cats of all shapes and sizes: from queens to kittens and all the ages in between.


    Instead of adding an image with your information, add the text and then use a snippet (e.g. captioned image snippet) to add a complimentary image. See our Adding a Snippet tutorial.

    When you add the image to the page, be sure to fill out the "description" section. Not only will this appear if the image does not render, but it is what the screen reader will read. The description should give the user an idea of what the image portrays. Example: "A group of students pose with an Eagle mascot in the bleachers at a football game."

    An image of the widget to add an image

    Images added should be cropped according to the requirements listed in the image space. Do not place vertical images in horizontal image spaces and vice versa. 

    Here’s an example of where to find the parameters in a faculty page: 

    faculty profile screenshot

    This is an example from a typical multi-edit page, (note: your site may have different dimensions. Be sure to check in your site before you crop your photo.)

  • JKL

    Expand dropdown

    Links
    Never type out a url in text. Also don’t use “here” or “click here”. Always link descriptive text.

    Example: Go to the Office of Financial Aid website for more information.

    When making a link, highlight the text then click the chain icon. A box will pop up. Add the URL in the top box. Then, in the “Title” box, add a sentence (using proper punctuation) telling the user where the link is taking them.

    For instance, in the example above, you might use “Go to the Office of Financial Aid site.” Also, use “site”, “page” or “PDF” at the end, depending on the situation.

    If you are linking to an external site—meaning outside of the site you are currently on, change the “Target” to “new window”.

    Example: If you are on the Admissions site and you are linking to Financial Aid, you would use the “new window” function. If it’s an internal link, leave that field as is.

    Any links you create are required to follow the guidelines expressed in the Web Style Guide, but here are some tips:

    • Do not link URLs on your site. Highlight a word or phrase inside a full sentence that describes where the link will take the user. Example: Go to the ​Office of Financial Aid site​.
    • Do not link "click here." or "here" Reword your sentence so you can link from text (see example above).
    • If the link you are adding takes the user away from your site, please change the “target” drop-down to “new window”.
    • You do not need to add underlining. It will automatically appear.
    • All links are ​required​ to have a title in the title field. The title must be a full sentence with proper grammar and spelling telling the user what is going to happen when they click on the link.
      • Example: Go to the Admissions site.
      • Example: Visit the wikipedia site.
      • Example: Download the registration [PDF]. 
    • If you are uploading a PDF, you must add [PDF] to the end of the link. Example: Download the ​links [PDF].
    • It should also appear in the link title. Example: Download the links [PDF]. PDFs should always be set to open in a new window. 

    Linking to a PDF
    See PDFs

  • MNO

    Expand dropdown

    Naming Conventions
    Numbers one to nine are spelled out. 10 and up, use numerals.

    Online

  • PQR

    Expand dropdown

    PDFs
    When linking to a PDF, end the link with [PDF]. Example: Download the dance flyer [PDF].

    This is also an instance where you would use the “new window” feature.

    Phone Numbers
    No hyphens or parentheses.
    Example: 734.555.1234

    Prerequisites

  • STU

    Expand dropdown

    Tables
    Because of accessibility standards, tables cannot be used. Bulleted lists are a good work around.

    Times
    3 p.m.
    3:45 a.m.
    Use noon (not 12 p.m.)

    Titles

    Book Titles
    Capitalize all words of four letters or more and the first and last word of the title. Title in quotation marks.

    Course Titles
    Course topics are lowercased, unless it’s preceded by the course number. Also, no hyphens or colons after the course number. Just one space.

    Example: Dr. Chung teaches courses in database management and IT. COB 200 Introduction to Business.

    Job Titles
    Lowercase titles unless they come before a name.

    Uploading Content (PDFs, docs, images, etc)
    Store content in the designated areas – images in the images folder; PDFs in documents.
    When uploading new content (i.e. photos, PDFs), the title must be all lowercase with no spaces. Use hyphens instead of underscores. Leave out references to dates/years. Make the title as generic as possible while still making it clear what the document is.

    Example:
    USE: annual-budget-report.pdf
    NOT: 2017_Annual_budget_report_Nov.pdf

  • VWXYZ

    Expand dropdown

    Website

    Work study

Need help?

Use our web ticketing system.

Request Web Services

When to use the ticketing system:

  • Adding a new program to the degrees and programs search.
  • New, large images or a navigation change is needed.
  • You need to edit something but don’t have access to it.