Global Email Specs #
Generally, the below specs apply for all types of emails. Following these specs will ensure emails display well on all devices.
- Template width: 600-800px wide
- Header/Banner graphic: 16:9 Ratio
- Thumbnail graphic: 1:1 Ratio
- Total email file size: 100kb max
- Web Safe fonts: Arial, Helvetica, Verdana, Georgia, Times New Roman, Tahoma
- Fall back fonts: sans-serif, serif
- Custom Web Fonts: Use Google Fonts for getting more custom fonts. These must be available via Google Fonts and be able to select them to use for our own applications!
Required Copy for Emails: #
- Subject Line
- Preview Text
- Email Body Copy
- Call to Actions (CTAs)
The Subject Line is the most important piece of an email – it’s the first thing a recipient sees when they receive an email. It must be engaging and prompt the user to open the message. Subject lines directly influence open rates. Dry, non-engaging subject lines have sub-par, low open rates.
Call to actions (CTAs) are another critical element of emails. If we are sending an email, you can bet we are intending for the subscriber to do something with this email. “Check out the new blog”, “Shop this product”, “Schedule a meeting”, etc are all calls to action that may be included in an email. In general, any action you want the user to take, spell it out in a call to action that we can link too!
Image-Based Emails #
Since these emails are created by stacking together image slices, it’s important to limit 1 link per image slice. There can not be two hyperlinked texts within one image because an image can only be linked one time. We can’t have two links attached to the same image.
This may come up when using a paragraph text image slice that includes two links in the paragraph. In order to link to both links within the same paragraph, the slice must be cut to separate the individual links into individual images.
- Do not exceed template width (600-800px wide)
- Do not include more than 1 link within each image slice
Dynamic Content in Emails #
When content is “dynamic” it means it’s supposed to change based on certain properties or events that trigger the email. For example, displaying the products in an abandoned cart email would be considered dynamic content: the product name, price, image and other details change depending on the products in the abandoned cart.
Since images cannot be designed to be dynamic, it’s important to make sure any dynamic content is not too “over the top” with awesome designs.
See below for an example of GOOD dynamic content and BAD dynamic content image slices for an RSS email campaign:
Dynamic Text Content in Image-Based Emails #
If we are creating an image based email that also uses dynamic content, the design must be developed using web fonts available via Google fonts, with a Web Safe font to match, and with the Fallback font of sans-serif or serif (depending on font having a serif or not).
This will allow the final design to line up when displaying all fonts. Image slices with text will be styled with the same Google font being used to display dynamic text content.
If the email client does not support Custom Web fonts, the email will show the next font style (the matching Web Safe font) and the final fallback font (serif or sans-serif)
EXAMPLE
font-family: Roboto, Helvetica, sans-serif;
- Will display Roboto font if email client can use custom web fonts
- Will display Helvetica font if email client can’t display custom web font, but can display Web Safe Font
- Will display sans-serif default font on user’s computer in the event their email client doesn’t support the first two fonts.
Avoiding Clipping in Inboxes #
To avoid clipping in inboxes, we need to make sure the total email file size remains less than 100kb. Image based emails are more likely to run up against this limit, but it can be easily avoided by properly sizing and compressing images before using in email templates.
