Make Awesome Email

Email Design

Laying out written content

Be mindful of your audience’s time — what can people get out of your email if they spend 2 or 3 seconds reading it? Some people might have more time, and that’s great - but consider breaking up text, using subheadings and bullet points for example, so that your email is both easy to scan, but has more content for people who want to dig in.

What should the maximum width of my email be?

Work towards 600-700px as the maximum width. 640px and 660px are good numbers because the maths work: 640/2 is 320, which is roughly the smallest mobile width to consider, and 660 divides by 2, 3, 4 and 5 (and 6 and 10, but you’re unlikely to be doing that many columns in email). If you want to take up the full width of the page, you can add a full width background colour, that will collapse in if a user doesn’t have the space.

Clear actions

What action do you want people to take once they get your email? Call to action buttons and clear links (underlines are universal for saying “this is a link” on your body text) help make it obvious for users. Be mindful of not to overwhelm the user with too many buttons.

Staying on brand

It’s important to stay on brand and have some kind of visual consistency with other channels. It helps build trust and reassurance with your audience. You might also need to consider what works in email - sometimes brand standards need to be adapted so they also work in digital, and then specifically for email.

Images & Photos

Using images in email is great for illustrating your point. But sometimes images will be turned off, or won’t download, so make sure you get the message across without them (and for accessibility reasons, which we’ll look at shortly). For that reason, it’s not a great idea to put text inside your images (it might be tempting to do this as a shortcut making your email, or because you have to use a brand font).

Fonts

There will be some email clients where only the web-safe fonts can be used — so it’s good to use those as a base level. Helvetica, Arial, Georgia, Times New Roman are your friends here. You can dig into using web-fonts, but they’re not supported everywhere and they make your code a bit more complex.