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 (. 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
