Website Guide

Description

From Shauna's brain to yours!

Text

MCA Style Cheatsheet

  • Numbers: Spelled out one–nine; numerals for 10 and up
  • Dates: Months and days abbreviated to three letters unless used in sentence
  • Tense: Always use present tense
  • Captions: Should be inline (e.g., Kenneth Josephson, Matthew again, c. 1995/80. Gelatin silver print; 12 1/32 × 8 in. © Kenneth Josephson. Photo: Nathan Keay, © MCA Chicago.)

The full style guide is available online.

Text

MCA Web Style

Less is always more

  • Repeat as little information as possible
  • Viewers judge quality copy based on accuracy and readability as opposed to length.

Remember interrogative questions

Write/edit text to guarantee viewers receive all the necessary facts about an artist, exhibition, performance, or event:

  • Who…may attend; is performing; is hosting/sponsoring the event; would be interested
  • What…is happening; refreshments are served; is the dress code; does the event cost
  • When…does the event take place; do you need to RSVP by
  • Where…is the event; is the main entrance; is the box office
  • Why…should people care; should people donate
  • How…do you buy tickets; do you get there; do you make a donation

Use the Inverted Pyramid format

  • The most important information is listed first (interrogative questions)
  • Rank the rest of the content by value to the viewer
  • The final paragraph should NOT contain the most important information about an event or exhibition. This is the place to include a quote or anecdotal fact about the artist, performer, speaker, or work.

Use present tense

Unlike future tense, present tense does not have to be changed to reflect an activity that has already taken place after the program/exhibition has ended.

  • For example: “x artwork is being made” rather than “x artwork will be made.” and “An exhibition is organized by _______.”

Use descriptive links

The purpose of descriptive links is to provide users with the proper context of where clicking the link will take them.

  • Extraneous words used as links such as "click here" or "more" should be avoided in most situations
  • Use only keywords for link text
    e.g. See a cute white cat. ("See a" does not need to be a part of the link.)

Page Style Guide

Text

Markdown Cheatsheet

Bold

Type two asterisks before and after the word or phrase you would like rendered in bold. Bold should be used on a very limited basis.

Bulleted list

  • Add an asterisk + a space before each word or phrase you would like bulleted

Email

In the link, add "mailto:" before the email address you would like people to contact [webteam@mcachicago.org](mailto:webteam@mcachicago.org)

Italics

Type either one asterisk or one underscore before and after each word or phrase you would like rendered in italics.

Phone number

  • Phone numbers should always use hyphens
  • In the link, add tel+[country code and phone number]
    [312-397-4010](tel+13123974010)

Text

User Guide

User Hints

Embedded content

Embedding Content

Jonah Hill waving his hands near his face in an excited, erratic manner

Text

Gifs

Open a text module.
Add html code: img width="100%" height="auto" alt="" src="" (with open and close carats on each side)
Fill in the source with the url of the gif (i.e. src="https://media.giphy.com/media/pa37AAGzKXoek/giphy.gif")

Two options for image source:

  1. Upload desired gif to the website via the Image module.
    Copy the url for the gif (right-click the blue file name that appears next to the thumbnail).

    Delete Image module with gif
  2. Use gif source link (like if it's hosted on dropbox). Note: This is less easy to control content, as there is no say when a gif may be deleted. Use with caution.

Text

Forms

Most forms on our website are hosted by Formstack. Under the publish section, go to Embed Form and copy the iframe html text.

  • Within the html, (iframe src="https://mcachicago.formstack.com/" title="" width="600" height="400") height should be adjusted so that the full form shows up on the page. (It's good to note that this will change based on browser used, so best to overestimate length.)