- Width of 600px for all emails on desktop + 320px version for mobile
- Note the 320px width is to help provide a great experience for users opening within framed apps (Gmail, etc.) that artifically constrain the viewport to smaller than the actual width of the device screen.
- Keep in mind font limitations + specify fallback font stacks (e.g.
font-family: 'SofiaProRegular', 'Futura', 'Helvetica Neue', Helvetica, Arial, sans-serif;) - Design inspiration: Really Good Emails and Mailcharts
- In terms of design handoff, raw design files are preferred (PSD, Figma, Sketch, etc). Devs can then slice up assets, unless there’s a gif, which we usually request is sent ready to drop in at 600px and 1200px width.
- Good overview of email design/dev limitations from Email on Acid can be found here
- Try to keep images under 50kb with a max of 100kb -- easiest way to do this is with jpgs (true PNG transparency should be reserved for small images like icons) and image compression shgould be done with a tool like tinypng / tinyjpg
- Heads up -- watch out for subtle color changes when compressing jpgs with background colors
- Media queries now have wide support among most of the major email clients, but be sure to run everything through a CSS inliner (important because styles in the
<head>are stripped for email forwards) - Watch out for HTML content too long / "clipping" -- Gmail in particular will clip anything with a message body >102 Kb.
- Braze has a great "Inbox Vision" feature where it runs your code through various VM's and takes live screenshots.
- This is also available in platforms like Iterable, Mailchimp, Klaviyo, etc.
- Available as a separate product from https://www.litmus.com/ and https://www.emailonacid.com/
- Helpful resources and blogs: Email on Acid, Really Good Emails, and Mailcharts
- Be sure to add alt tag descriptions for images. In addition to this increasing accessability for folks using screen readers, it allows the email to be readable for those who have images disabled (Google Apps disables images in emails by default from new senders).
- Should you wish to import templates that are created in a visual editor (Mailchimp, Iterable, etc.), please keep in mind that you may need to make some or all of the following changes:
- One observation is that we need to remove
background-image:noneand otherbackground-properties set tononeif we want to use a background color, as Braze inlinesbackground-coloras the legacybgcolorattr. - We should also manually override the html entity quotes around
Helvetica Neueto use single quotes. - As we move over templates, we are re-uploading all images to the Braze system. That way we can shutter Mailchimp in the future without having to worry about broken images.
- One observation is that we need to remove