Getting started with email newsletter design isn’t hard if you know what the pros do. In this post, we’ll discuss five essential email newsletter design practices that will make you feel confident about starting your first projects. Unlike web design or UI design, emails have a few constraints due to the technology powering it. If you are aware of these limitations, it’ll be easier to design fantastic, highly converting email newsletters.
Besides the technological constraints, email designs follow the same line of thinking as any other web-based design project. You will still need to consider things like:
- Screen and window sizes
- Responsive design
- User experience
- Quality control
- A/B testing
Because, after all, receiving and reading an email is an online interaction between a company and audience. These best practices will get you in the right headspace to create your first email newsletter design with confidence!
1. Keep the Width at 600px
Back in the day, many monitor screens had a 1024px resolution. And, we didn’t have lovely full-width UI designs for many mail apps like we do today with Gmail. Back then, developers had to choose an email width that fitted the technology and display capabilities of the 1024px resolutions. A 550-600px width seemed like a good choice.
That’s still true.
Why still use 600px today? You cannot guarantee your emails will be viewed at full width. Outlook has been the standard email desktop app for many years; even today, email display can take up less than 50% of the screen.
Campaign Monitor ran a poll among email designers and developers and found that most of them use an email width of 550px to 650px. Whereas 2% of people surveyed used a fluid layout, which is also great because it’s flexible, no matter the window’s width. However, unless you plan to create a fluid email, you’re better off sticking to 600px as a time tested convention.
The good news is, most industry leaders for email marketing such as MailChimp, Campaign Monitor, and Litmus use a default 600px width in their responsive email templates. Designmodo’s Postcards uses a 600px width for desktop emails, too.
2. Keep the Design Simple, Clean and Easy
When it comes to visual design for the web, such as a landing page or a web-app, simple and clean is vital for improved user experiences. The same is true for email newsletter design. Busy emails can be intimidating and hard to scan or comprehend. Keeping an email visually simple – no matter how short or long it is – will go a long way in improving comprehension, increasing clickthrough rates, and improve time spent reading the email. It can also help improve open rates over time as people won’t be turned off by the types of emails they get from your company.
“Visual design is the mechanism through which we interact with subscribers.” — Jason Rodriguez
Visually simplified emails improve the reading experience and also influence subscriber retention rates and open rates over time. Just like any other online interaction, you only have milliseconds to grab and keep a subscriber’s attention. A busy email doesn’t make the best first impression. It intimidates and makes people leave quickly. If someone has a negative experience the first time around, they are significantly more likely to unsubscribe instantly or never open another email from you.
Tips for improving the email user experience:
- Limit the number of words, copy, and content as best as possible.
- Showcase your email’s value points right away.
- Aim for a smooth flow and readability.
- An email’s optimal line length is 50-80 characters for body copy.
- Make sure the contract is high. This is especially helpful for visually impaired subscribers, as well as anyone viewing your email on their phone in direct sunlight.
- Avoid background images. Many email providers, such as Outlook, don’t support them.
- Use web-safe typefaces and play it safe with the font-sizes too. 14px for body copy and 22px for titles are good minimum font-sizes.
“The average adult reader can read 250 to 300 words per minute. If the average reading time for an email is 11 seconds, then the ideal length of an email is around 50 words.” — Tom Tate, AWeber
3. Design for Accessibility
When we design for accessibility, we include many more users within our design’s experience; this includes emails. Creating accessible emails enables you to reach more people you otherwise wouldn’t, which will make the email campaign a lot more effective.
What can you do to improve your email newsletter design’s accessibility?
Avoid large file sizes for images because they can take forever to load, which isn’t great if you only have milliseconds with a viewer. You don’t want to turn off your subscribers by making them wait to view your emails nor having them pay for the data your large image just wasted for them.
Many email users have images turned off by default. This is another excellent reason to always include a text backup for all images you’d use – including logos or social icons.
When we design with accessibility-first, rather than as an after through, the overall experience of the design is improved. That’s because it forces us to design with inclusively in mind from the very beginning. Just watch your metrics and KPIs improve as you’re providing a great user experience for all of your subscribers, no matter if they have low bandwidth, visual impairments, or any other kind of disability.
4. Optimized Mobile Experience
With responsive emails, there are a couple of options available to you, such as using media queries and responsive designs or a fluid email newsletter design. However, have you considered creating two separate emails? One aimed explicitly for an optimized mobile experience and one for an optimized desktop experience? With technologies like AMP, it’s becoming easier to customize email experiences.
More often then not, we’ll take the copy and content of the desktop email and stack it on top of each other for the mobile version. That’s the default responsive email design method. It may seem like double the work, but it can be streamlined once you can get the hang of it. The reason I’m suggesting this method is because mobile is, in fact, a whole other experience than using a computer. With a highly optimized mobile email experience, there is significant potential to positively affect your mobile email metrics.
5. Don’t Forget to Test
Additionally, you should conduct regular A/B testing for metric optimization. Test the layouts against each other to find one that suits your audience and subscribers the best. Test your offers, subject lines, promotions, or any other copy, content, or visual design. Just because you designed a fantastic email doesn’t mean it cannot be improved and optimized!
After going through this list of five email newsletter design best practices, you’re probably feeling confident about jumping into your next email design project. If you’ve ever worked on UX, UI, or product design projects, you can see that the ideas about creating fantastic email newsletters are pretty similar. It all boils down to getting the email user experience right and making sure you test emails often.