OFT emails, part 3: info for creatives
New to OFT emails? Start here! OFT emails, part 1: the worst format in the universe
Creative specs for OFT emails are similar to those for typical marketing emails. We mostly just remove the responsiveness for mobile. Here's my cheat sheet for designing OFT emails.
- Desktop only! Standard is 600* pixels wide, 72 dpi.
- All HTML text must use a web-friendly font, e.g. Arial or Verdana.
- Recommended font size for body copy: >17 pixels.
- Minimum recommended font size for references/footnotes/etc: 14 px.
- The overall background should be white, and the main content area of the email should be white as well. (This is due to an OFT-specific bug — long story; feel free to ask.) It's okay to have some sections or elements with different color backgrounds.
- All links and CTAs should be a dark color on a light background — this is due to the link styling bug that I explain in part 1.
- Avoid tight leading (line height) for text elements; Outlook has a minimum leading that's fairly large.
- Background images, gradients, shadows, rounded corners, etc are not supported in email. (That's not an OFT-specific thing; that's emails in general.)
- Do not include a preheader, unsubscribe link, or a "click here to view a web-based version" link — these are not supported in OFT emails. I've seen a lot of horror stories with these; the team designs the email, gets client approval, and then they find out that none of these work in OFTs. Not good.
- Jump links are not supported in OFT emails — we can't have a link in the content that jumps down to a section below. Links to external websites are fine.
- Follow WCAG rules for minimum color contrast (for ADA compliance).
- The simpler the layout, the safer it will be for non-Windows/non-Outlook platforms.
*600 pixels has always been the standard width when designing the desktop view of any email. Some teams I've worked with have chosen to design OFT emails at 480 pixels wide, rather than 600. This means that when the email shrinks down for mobile, it doesn't need to shrink as much — so there's a greater chance it will be readable and look good on mobile. On desktop, the email will occupy a narrower space than what we see in most marketing emails, but not drastically so. I think this is a great approach for creating something that's not responsive but still looks decent on both mobile and desktop.
– Manning
Questions/comments? Feel free to contact me at manning@manningkrull.com. I update these articles pretty frequently — best practices evolve over time as the world of digital quickly changes, and I always welcome insights from others.