Email design

ACLU emails should have a uniform, clearly identifiable style and format across all types and teams. The logo should be displayed prominently and the look should be clean, professional, and compatible for all devices. Colors, fonts, and overall layout should reflect ACLU branding and template structure. Refer to the ACLU Design Handbook for more details on color, logos, and design. See the Coding Guide for details on how to produce each design element.

How to choose design elements

When planning an email, you’ll choose from a variety of template modifications including:

• Hero image
• Inline image
• Sidebox
• Button
• Topper

To decide which variation works best for the email at hand, always consider style and the user experience. Some emails lend themselves to having a graphic element if there are already assets in the works, or if it helps support the main CTA. And if you do use a graphic, make sure it works for the format and size involved – for example, a graphic with small text it wouldn’t be readable as a hero image. A button works for high-urgency asks, like call actions, but somewhat limits CTA language since they are kept to only a few words maximum. It’s good practice to QA test the template first to see if the chosen design element works with the content.

In addition to ensuring the look adheres to our overall email style, always think of the user: Will they be able to get the message quickly and easily? Does it convey a level of urgency to match to ask? Is it clear what the user should do?

You can always look into past emails to see the way we’ve presented design elements before.

Here are some examples:

Hero image
Inline image
Sidebox
Button
Topper

Standard email conventions

Emails are designed in letter form, with paragraphs no longer than five lines and at least two CTA links within the main body. Typically, there is one CTA link above the fold, and another below.

We sometimes include headshots for senders to lend a personal touch and allow supporters to get to know the ACLU. Headshots should be sized according to our Coding Guidelines and should be an official staff portrait whenever possible. When the signer is institutional (e.g. ACLU), we don’t use a headshot.

Each email will also feature the ACLU logo in the upper left-hand corner. The logo should always link to an aclu.org site, such as the ACLU action page, the homepage, or the aclu.org-hosted link for the main CTA. Exception: Forwards or toppers, which position the new message above the original template.

Occasionally, we will use an inline image. The inline image should be positioned above the fold or in the middle of the copy, unless you’re running an A/B test on the position of the graphic. Sizing is flexible when it comes to height, but check the Coding Guidelines for more information.

In best practice, there should be one ask per email in order to drive the highest amount of conversions. Including secondary asks will divide clicks and actions and decrease engagement. However, we sometimes include a P.S. at the end of the email to present a secondary ask when there is related content, a next step, or relevant information.

In-body ACLU email links appear in two general forms: the HTML link, or hyperlink in the coded template, and the naked URL that appears in plain text versions.

In HTML, the link is hidden behind language except when redirecting to an external site. Links are identified by font style: bolded, underlined, and blue.

In plain text, the link appears as the original URL. Make sure the text preceding the link makes clear what the link is for. Sometimes this is achieved by simply changing a period to a colon, and other times, it’s necessary to introduce the link with a brief action verb such as “WATCH: [link].” Place the link in its own paragraph, neatly spaced and delineated from surrounding paragraphs.

Since we want the highest engagement possible, we will almost always use the same exact links for the logo, text links, and image links. An exception is when the CTA links to an external site, like Facebook or PeoplePower.org. In those cases, we’ll link the logo to the ACLU homepage or action page in the logo only. In those cases, we’ll also need to mention the external destination in the link text. (Please note that we should not include external links in ACLU emails unless they are sourced for our uses.)

Always include punctuation in the linked copy.

Example: In emails that link to MoveOn.org, we write out the destination URL within the CTA copy.

GIFs are a fun way to bring emails to life with animation. But we should note the limitations: they can be overused, causing readers to become complacent with the animation; they’re not supported in all email clients, so the first frame should include all necessary information you want to convey (see example below); and they raise accessibility concerns for some readers (like those with photosensitive epilepsy). For these reasons, and the fact that they’re more time-consuming to produce, we use them sparingly and only when it makes sense.

For example, our Get Out The Vote emails used a checklist GIF throughout the series, culminating with the GIF below. We wanted to draw attention to our emails at a time when our subscribers’ inboxes were likely full of similar content.

Check the Coding Guidelines for more information on GIFs.

We also need to account for different platforms, like Outlook, that aren’t compatible with GIFs. In Outlook, only the first frame of a GIF is shown, so we need to make sure that first frame contains everything we’d like the GIF to convey.

For example, our Vote Smart Justice GIF displayed a scrolling “user experience” of the website. To ensure Outlook users weren’t seeing a random image, we made sure that the first frame of the GIF displayed the information needed.

Buttons are a good way to draw attention to a short and punchy CTA, like CALL NOW or RSVP. They’re typically centered and placed in the middle of the email copy, above the fold if possible.

• Make sure your buttons are bulletproof, which means they are based on code and not images. This way, the button will display in all email clients – even those that don’t support images – hence making them “bulletproof.”
• Follow color, font, and overall style guidelines when using buttons
• Button copy is similar to text CTA copy: actionable, concise language – but limited to only a few words.
• Font size should be large and legible on all devices (mobile included).

BEST PRACTICES: BUTTONS

• Use concise, action-oriented language: RSVP, TAKE ACTION, DONATE NOW, RENEW TODAY, GIVE MONTHLY, CALL NOW, ACT NOW. We don’t yet have definitive testing results on the most engaging language, but concision generally works for CTAs and keeps our visual style consistent.
• Always make sure buttons are bulletproof
• Hew close to the standard button size of 200 x 45 pixels
• Use one of three colors: blue (#0055aa), red (#EF404E), or orange (#FFAC00)