Best Practices: Email Templates - Wed, May 12, 2021
The struggle is real: Designing emails that look identical on each email client (desktop, web and mobile apps)
Email CSS Support Guide
The Ultimate Guide to CSS on Emails
General rule of thumb
Your email is not going to look identical in every client.
And that’s OK.
Container
Container 600px wide.
That’s because the majority of email clients have a preview pane that is around 550-700 pixels.
Font Size
Text should never be smaller than 11 pixels. For comparison, the body style in Foundation uses a font size of 16 pixels at the large size, which is the default text-size setting.
Apple suggests 17px for mobile devices and Google recommends up to 21px for body copy.
Button Size and Touch Targets
Apple’s iPhone Human Interface Guidelines recommends a minimum target size of 44 pixels wide 44 pixels tall.
Microsoft’s Windows Phone UI Design and Interaction Guide suggests a touch target size of 34px with a minimum touch target size of 26px.
Nokia’s developer guidelines suggest that the target size should be no smaller than 1cm x 1cm square or 28 x 28 pixels.
While these guidelines give a general measurement for touch targets, they’re not consistent with each other, nor are they consistent with the actual size of the human finger. In fact, their suggested sizes are much smaller than the average finger, which can lead to touch target problems for users on mobile devices.
Gif support
Animated GIFs have surprisingly good support. As usual, there are caveats. Outlook only shows the first frame of the animation. Make sure your call to action is visible in the first frame.
Progressive Enhancement
ZURB and Foundation for Emails builds Outlook-first. Meaning, design for the most constrained platform you support, then add features.