Email Marketing Style Guide for MailChimp
Here’s how to create your header image:
- Reference the two header image layout options illustrated below
- Create your header image at 1200x300px and save it at 72 dpi
- Plug in the header image at the top of your template.
- Link your header to your department’s web page.
- Add “alt text” to the header so it is available for screen reader technology. Learn more about alt text.
Header image layout 1—for internal audience
When communicating with a mixed audience—both external and internal—use the “external audience” layout.
The e-mail newsletter background should be white and full width. Select a template that uses this format.
All MailChimp newsletter text is Arial—an approved NAU institutional font. This includes header and body text.
All header text and hyperlinks are NAU True Blue: R0 G51 B102 | HEX 003466
All headers are bold, sized at 24 pt, and consistent throughout the newsletter.
Sub header text (if necessary) is 16 pt, bold, and NAU True Blue.
Body text is black.
- 14 pt should be used for in-depth writing (more than one short paragraph), including anything with sub headers.
- 16 pt can be used for short paragraphs.
All newsletter text is left aligned.
- MailChimp recommends keeping file sizes less than 1MB. Larger files load slowly in your subscribers’ inboxes.
- Save images using PNG or JPG format.
- Make sure to add alt text to the photos for screen reader technology. In some cases, it is helpful to add a link to your photos. For example, if you’d like to take the subscriber to an article on your website that is related to the photo, add a link to your photo.
- MailChimp requires different photo sizes for different templates, but the maximum width for any photo is 600 px.
- NAU Marketing has established an online photo gallery, Libris, as a good source for photography that meets brand requirements. Go to nau.edu/libris and login with your NAU credentials.
Social media icons
Social media icons are presented without text but with an outline and icon in black. You have the option of adding or removing any icons and linking them to your social media, web pages, or e-mail. You can update and link the icons in the “Social Follow” content block.
This area is an exception to the rule on text, allowing you to use the default setting to add your college/department information. Do not remove the unsubscribe information in the footer.
This Style Guide has been designed to ensure you create an accessibility compliant e-newsletter. Key aspects of accessibility include: presenting your information in a logical reading order, including text alternatives for images, ensuring contrast between text and background, and including a descriptive subject line.
MailChimp’s “Help” search includes many useful pages. To get started, use these productive searches:
- Content blocks
- Add alt text to images
- Use text content blocks
- Social follow content blocks
MailChimp: Image Requirements for Templates
MailChimp: Upload, Add, and Edit Images in Campaigns
NAU Photo Gallery nau.edu/libris
- color palette
- photographic style
- design references
Lynda.com: MailChimp tutorials