Following these best practices will help ensure you are able to design your emails to cover the vast array of email clients and devices being used to view emails today.
To summarize, here are some key best practices: (we have separate articles on each element below - if you want to dig deeper)
- Email Structure – Content width is 600px and footer contains proper links/info for SPAM compliance.
- Responsive Design – Columns stack left to right and all elements in a single row/column will stack first. Use the “Hide on” desktop/mobile feature for more complex content blocks.
- Image Optimization – Make sure your images are sized correctly for the content section, are 2x size for apple devices and have a consistent aspect ratio so they scale to the same size when side by side. They should be under 1mb in size to mitigate load time and also contain a descriptive Alt tag and a hyperlink.
- Dark Mode – Make sure your logo is visible in both light and dark modes and that your image backgrounds are consistent (solid/transparent). When adding in colors for your row and content backgrounds, fonts, buttons, make sure they will invert as intended and nothing will be hidden/difficult to view.
Additional email design best practices:
- Row Background Color - should provide contrast and aesthetic appeal to the email. Again, this will not be displayed on Mobile devices.
- Footer Background Color – Should stand out from the body of the email and typically is a different color from the row and content background colors. This typically is a primary brand color.
- Footer Content – Always add your company contact information in the footer for compliance and legitimacy. It is best practice to include an email merge tag to specify where the email is being sent. Make sure that all emails, website info, and phone numbers are active links. Any compliance language should be added at the very bottom of the footer beneath all other content.
- Font Sizes
- Headers/Titles (H1 Tags): 24px – 28px
- Sub-headers (H2 Tags): 18px – 20px
- Body text/copy: 15px
- Buttons: 15px
- Hyperlinks
- Should always be a tertiary/easy to spot branded color if in the body copy so they are noticeable and easy to find/click.
- Should always open to a new window if going to a website URL.
- All images should contain a hyperlink.
- Text Content Blocks – If copying and pasting text into a text block, it should be done from a text file or notepad rather than a Word doc.
