In our time at MAC, we have created a fair number of branded, beautifully responsive Marketo emails in many layouts. After 14 years of creating event invites, newsletters, and product announcements we’ve created a guide to take the guesswork out of designing exciting and creative emails.
Custom fonts
Back in the early days of email marketing, you were confined to a handful of web-safe fonts (such as Arial, Verdana, and Times New Roman.) These are the default fonts that are found on most computers and devices but are generally not the fonts designers wanted to use.
Then web fonts entered the picture, a couple of web fonts you may be familiar with are Lato and Open Sans. While web fonts don’t have universal support, here are the email clients where they are supported:
- Apple Mail
- iOS Mail
- Gmail
- Google Android
- Samsung Mail (Android 8.0)
- Outlook Mail
But if custom fonts aren’t compatible with all browsers, why do we recommend using them? In a recent email client market share survey done by Litmus reveals that three out of the top five most popular email clients support web fonts.
Web fonts allow web designers to be more creative with their typography since you aren’t limited to choosing a font that comes pre-installed on a computer. Think of web fonts as a little added bonus for those subscribers who are able to see them, and a way of pushing your email into the future, one word at a time.
Design for Mobile
Remember, mobile is now leading the way. 54% of emails are opened on mobile devices now. That said emails should be designed optimally for small screens sizes, keeping the email content width between 600-700px wide. Additionally, making use of Marketo’s analytics feature can help asses which mobile devices are used to view your emails and webpages over a period of time. These results can be used to improve and optimize email designs.
Width Flexibility
Conventional wisdom says emails shouldn’t be wider than 600px, but can a case be made to design emails that are 700px or even 900px wide? Yes! (and no)
600-700px is still considered the standard, mostly due to reader fatigue. A number of eye-tracking studies have found the average user scans rather than word-for-word reading. This means if your email is designed too wide, content on the right may get missed. That being said, when emails are particularly word-heavy, such as newsletters, there are benefits of creating a layout that is two or three columns with a larger width. This reduces the amount of scrolling the user has to do, while still being skimmable because of the multiple columns.
It’s important to adjust media queries for those who may have a browser size smaller than your email content width.
Background Images
Don’t choose a background image with too much pattern, you’ll want to ensure that the text is readable. Another consideration is how the image will look on mobile devices. In emails, you aren’t able to change the background image depending on the device so it’s important that key parts of the image won’t be cut off and lose context when scaled. What may look great on a desktop can also look terrible on a phone.
Testing
And lastly, always test your email design. It is strongly recommended to invest in tools, such as Litmus, or Email on Acid, to test if your design looks good on all email clients and devices. Litmus testing allows you to test on 70+ email clients and devices in a matter of seconds, checking for broken links, images, or other bugs in a matter of seconds.
