Search Google Appliance

IS&T Style Guide

On this page:

This style guide provides standards and guidelines for creating and publishing content on the IS&T website. These standards will be applied to any content that is submitted to the Production Team for publication.

Affiliate sites: Download type styles, header graphic assets, and the CSS stylesheet.

Before you begin

The editing interface is not fully compatible with Internet Explorer for Windows or Google Chrome for Mac/Windows. Use FireFox or Safari for best results.

Writing for the web

Writing for the web today presents authors with new challenges and considerations. Take a walk around campus, and watch all the people on their smartphones and tablets.  How do you write for that person?

Make every word count. Strip out the fluff, and give users what they need and what they want. Your job as an author is to create clear, useful content, and to help people complete tasks or find information quickly and easily. Keep in mind the user experience.

alert icon   Important: Make sure your content isn't under a Zombie Attack; if so, take drastic measures.

Editorial review process

When you create new content or update existing content, you must submit your draft or revision for review before publication. Content may be edited for clarity and conciseness, as well as adherence to the style guide. URLs and taxonomy assignments are subject to change per Production Team standards.

Page types

The IS&T website is powered by Drupal, an open source content management system (CMS). A CMS makes the job of creating and managing the content of the website more efficient, and presents customers with a consistent interface and navigation experience.

As such, unique page formats have been created for specific uses on the site. They are called content types in Drupal. The basic structure of a page, created via these content types, is fixed, and the page content should be formatted according to this IS&T Style Guide. Some content types are available for general use; others are restricted.

General use content types:

  • Basic pages
  • Software version pages

Unlike basic pages, software version pages have required sections to ensure consistency across the software grid: About, How to obtain, System requirements, Installing, Using. Version pages are "snapshots" and are not intended to provide overly-detailed information. The Knowledge Base is the appropriate location for installation instructions, FAQs, and other text-heavy documentation.

Restricted content types:

  • Service pages
  • Webforms
  • Software family pages (authors may edit these pages but may not create new ones)
  • News articles, events, and videos (this content is restricted to the News Editor)

Service pages are customer-oriented collections of information that detail services and products offered by IS&T and MIT. They reside in the Services section of the website. For this reason, the content is primarily managed by the IS&T Web Production Team in conjunction with authorized content owners.

Service pages are precisely formatted and standardized to ensure a consistent customer experience at the top-level entry points of the website and cannot be used for lower-level pages.

Fonts and text

Fonts

The primary typefaces in the IS&T visual identity system are Proxima Nova and Tisa OT. Learn more and download font files.

Usage standards

  • Email/email (not e-mail)
  • Hardware:
    • Macintosh (not Mac)
    • Windows (not Win)
    • Linux
  • Software:
    • Mac OS X
    • Windows
    • Linux
  • Mobile devices (not PDAs)
  • Website (not web site)
  • Home page (not homepage)

Formatting

  • Use e.g. for examples (exempli gratia - Latin):
    We use multiple platforms at MIT, e.g., Macintosh, Windows, Linux.
  • Use i.e. (id est - Latin) sparingly to take the place of "in other words" -- it specifies or makes a sentence more clear:
    Tyrion's siblings are the most evil members of the richest family in Casterly Rock,  i.e., the Lannisters.
  • When inserting an email address, use a hyperlink instead of spelling out an email address because of spam concerns. Link the person's (or team's) name:
    Contact the Help Desk;
    Arya Stark, V.P. of Marketing
  • Use a hyperlink instead of spelling out a URL: The King in the North
  • Avoid using "Click here" in link titles
  • Use "On this page" navigation only if there are more than five section headings

Lists

  • Use "unordered" <ul> bullets for all lists; use "ordered" <ol> lists for procedures
  • Keep list items concise
  • Do not use punctuation at the end of list items

Headings

  • Use Heading 3 for section headings to produce larger text: <h3>Section 1</h3>
  • Do not use initial caps. Use "sentence case" -- capitalize the first word and all proper nouns, only, e.g.,  How to back up your Macintosh computer
  • Do not use a colon for section headings -- you can use them in page titles: User Documentation: Style Guide

Software version AKA field
The Amazing AKA field improves searching on the Software Grid by embedding specific, title-related terms in the software version pages. These are not descriptive keywords. Refer to the AKA guidelines for tips on proper usage of this required field.

Procedures

Create any procedural-type content in The Knowledge Base (KB). If you need help getting started using the KB, contact the KB Team.

Images and color

Color

The IS&T website uses a specific color palette.

Images

Alt tags: Alternative text provides a textual alternative to non-text content in webpages and is required for ALL images on the IS&T website.

  • Every image must have an alt attribute
  • Alternative text should present the CONTENT and FUNCTION of the image and it should be succinct
  • Alternative text should not use the phrases "image of…" or "graphic of…" -- the user already knows it is an image
  • Alt text of a functional image (e.g., an image within a link) should describe the function as well as the content
  • Decorative images require a null attribute (alt="")

Note: Images inserted via the Insert/Edit Image dialog box in the content of a page will automatically be assigned the null alt attribute even if you leave the Alternative Text field blank.

Important: If you find that you are struggling with the text you should attribute to your image, consider if the image is actually necessary. We encourage authors to limit images when descriptive words suffice and will edit or remove images and tags that are not consistent with the site format or distract from the webpage's intended, helpful content.

Format: All images used on the website should be .gif, .png, or .jpg.

Size: No larger than approximately 400 x 400 pixels or 5.5 x 5.5 inches. 

Naming convention: Name image files with something descriptive or contextual. This is helpful when the site is periodically curated for unused assets like images and .pdfs that have been replaced with newer versions.

For example, rename an auto-generated filename like "image01.png" with "winterfell-logo.png".

Storage location: Upload your images into your user image directory in Drupal (this is the default directory that appears in the file list when you click the Insert Image button in the editor -- e.g., u123).The Production Team will move your new images into the correct directory as part of the publication process.

Logos: Equal Focus branding

Websites must include the MIT logo with the IS&T logo. This combination is referred to as the Equal Focus logo. Review all guidelines before adding Equal Focus logo to your website.

Notes and warnings

Use sparingly; opt for the bold format for minor notes. Use the graphics below to call out significant issues.

note icon  Note: The Khaleesi is the mother of dragons.

alert icon   Important: Winter is coming!

alert icon  Warning: IS&T no longer supports this version.
This page is no longer being updated or maintained. It is provided 'as is' for informational purposes only.

Code: <p><img alt="alert icon" src="/sites/default/files/styleguide/redalert1.png" style="cursor: default; width: 25px; height: 25px; " />&nbsp; &nbsp;<strong>Important:&nbsp;</strong>

Downloadable links

Links to downloadable documents in Drupal

All downloadable files should be converted to PDF format. Upload your PDF files into your user directory in Drupal (this is the default directory that appears in the file list when you click the Insert Link button in the editor -- e.g., u123).The Production Team will move your PDFs into the correct directory as part of the publication process.

Tables

Use tables sparingly. Do not use tables for formatting (use <div> tags instead - see next section) as they are difficult for screen readers and other accessibility devices to interpret properly. Consider whether a list would be sufficient, or simply use <p> tags. For more information on tables and accessibility, see: Web Content Accessibility Guidelines 1.0: Guideline 5: Create tables that transform gracefully.

<div> tags

Use <div> tags for formatting instead of tables, as follows.

Make two (or more) columns of text using the floating <div> tag:

Wrap both sets of text (the columns you want floating next to each other) in the following:

<div style="float: left; width: 50%;"> </div>

Be sure to use two (or more) sets of <div> commands.

See an example.

Creating URLs

URLs should conform to the IS&T website architecture.
Authors can propose URLs for their pages. However, they are subject to approval by the Production Team. If an author does not choose a URL, the page will automatically generate one in "node" format:  https://ist.mit.edu/node/3365.

If your page falls under one of the services listed on the main services page, the URL should follow that structure.

  • Service page example: email/yournewpage

For pages residing in other parts of the site, the URL should follow that structure.

  • Human Resources example: hr/employee

Contact us

We're always looking for ways to improve the IS&T website. If you find anything that doesn't conform to the standards presented in this guide, contact the Digital Communications team. Your feedback is always welcome and appreciated.