Email Newsletter Best Practices

Whether you’re a business or a developer, you may be accustomed to the back-and-forth of designing and executing an email newsletter. While all parties want the outcome to be as aesthetically pleasing as it is functional, running into issues with email development is common. Here are some tips to help make your email newsletter process go as smoothly as possible.

Understand the Difference Between Web Browsers and Email Clients

While you may be familiar with some of the limitations of HTML and CSS on your website, many are not aware that there are even more limitations to what you can accomplish with email. This is because email is rendered via an email client, which is different from your typical web browser, such as Chrome or Firefox. Email clients are often far behind web browsers in their implementation of new CSS and HTML standards, leaving developers with few options when it comes to styling and layout structure. Because there are so many different popular email clients, often with conflicting implementation of these properties, designs rendered in email clients should be created with the expectation that they will appear a little differently depending on where they are viewed (MailChimp lays out these difficulties well in this chart). So, the first step to creating a great email newsletter is to understand the limitations of email, and design accordingly.

Common issues among email clients

• Irregular spacing
• Irregular alignment
• Inconsistent column widths
• Font rendering
• Background/image rendering
• Lack of support for complex CSS selectors or newer HTML elements

Create Simple, Responsive Layouts

When creating a design for a web page, it’s expected that this design will be translated into a more mobile-friendly version as the user’s screen size decreases. This can be done with email, too! While the standard for creating a layout which will look best in all email clients is to stick with a single column layout within a 600px width, you may have users viewing your newsletter on their desktops, and should create alternate layouts accordingly. It is important to remember, however, that in this mobile age, mobile-first design is essential, and you will want to make sure you have your text and touch targets sized accordingly.

Tips

• Stick to one or two columns when possible
• Don’t be afraid to nest tables, but comment your code well so you can keep track
• Use media queries to make your layout responsive
• Don’t forget to make use of a preheader
• Use margins or cellpadding to create spacing
• Create buttons that are at least 40px x 40px (for touch targets)
• Make sure fonts are legible (between 12px and 18px) on all devices

Use Images Wisely

Images can greatly enhance the look and feel of your email newsletter, but make sure that they are being used optimally. Some users will have images in email blocked or will be unable to download them on mobile data, so make sure you use styled alt text to describe the content of every image you use, especially if it contains text. Many email clients will not render background images, but you can always include them (with a colored fallback) for those users who can view them. One older tactic that is falling out of favor (for good reason) is the method of using image maps in the body of, or replacing the body of, your email. While these can look great and recreate many design effects which can’t typically be achieved in email, these are highly frowned upon as they alienate users who cannot view the image or have trouble reading small text.

Tips

• Avoid image maps
• Use absolute URLs for your image resources
• Use background images with fallbacks (VML for Outlook)
• Use retina-ready images
• Use alt text for all images, and style for consistency

Test, Test, Test!

The most important step in creating any email template is to test it across as many clients and devices as possible and fix bugs where needed. If you’re using analytics or other tracking in your emails, you should take time to evaluate those reports and understand which clients your readers are using most frequently to view your emails, then prioritize your testing accordingly.

Code Carefully

While there will inevitably be some small differences in your email rendering across email clients, there are some things to keep in mind to ensure consistency.

Tips

• Use inline styles, or use a CSS inlining program to add them for you (certain email clients don’t support embedded styles)
• Don’t hesitate to use !important
• Avoid CSS shorthand (e.g. #fff instead of #ffffff)
• Avoid Flash or JavaScript elements – if you need animation, a .GIF is your best bet (but some clients will only show the first frame)
• Use font fallbacks – web fonts (like Google Fonts) are relatively safe to use, but make sure you always provide a web-safe font fallback so all of your users get a similar experience