A Brief Introduction to Email Design

Almost no one gets out of school and decides they’re going into email design. If you’ve suddenly found yourself volunteered for email duty, here’s a handful of beginner tips for smoothing out some of the bumps.

Like the Pirate’s Code, these are more guidelines than rules, but following them will help you build a bulletproof email campaign.

Rule # 1: Pixel Perfection is a Myth

Different email clients and browsers render type differently. That means you have little control over how your text will reflow across various clients. The Photoshop comp isn’t a realistic expression of how it will look in an inbox, unless the only thing you send is an image, which is considered a bad practice.

Furthermore, email code still uses table cells, so you’re stuck with layout options from 1999, even though you’ve got responsive screens to worry about.

Letting go of whether there’s a widow in Outlook 2016 will save you some serious stress.

Rule # 2: Go Easy on the Images

Every image is another request from the server, so do everyone with a limited data plan a favor: use them sparingly to make an impact. Also, some clients still block images by default, and the last thing you want is your CTA to just have a broken image icon. Try to design as much as you can with HTML instead.

But if you must go the image route, remember this:

Rule # 3: We’re All Just Temporarily Abled

Even if a client automatically loads your images in, not everyone can see them. Alt tags are really, really important for making your campaign accessible. Make sure every image has an appropriate description, and design backup styles if they don’t load right away.

You’ll also want to make sure you follow best practices for color contrasts. This is different onscreen than in print. While some users may be legally blind, many have varying degrees of sight or color blindness.

Integrating color accessibility checks into your work is a good idea.

Rule # 4: Websafe Fonts are Your Friend

Not only do fonts render differently across the board, you’re limited to a select few.

Unlike the web, where you can load in custom fonts, email clients are still pretty fickle about what they let through. If you know your audience and have enough data, you can start to target certain clients, design for that experience, and gracefully degrade for other apps. Or you can design for the lowest common denominator (Outlook) and progressively enhance the experience for Apple Mail.

You can use Google Fonts in more progressive clients, but know that they will have to fall back to a safe font in all others, which can change the visual weight of your type.

Try to avoid using specialty fonts and placing them in images as much as possible. An email with less than 500 characters is likely to be delivered straight to spam. So in the design process, text on images is not only bad practice for accessibility, but you may be losing an opportunity to actually deliver the content to the user overall.

Rule # 5: Keep it Short & Sweet

You have 8 seconds to keep someone’s attention on an email. If it’s too long, they’ll ignore it and move on with their day. Keep your offer close to the top of the email, and don’t bury your CTA. Which is not an image anymore, remember?

Rule # 6: 600px Wide

When designing emails in Photoshop or Sketch, keep all your content within 600px. Well, 540px to 560px-ish + some padding. Then expand the canvas to 800-900px to show the background color. In clients where you can adjust the width of the preview pane, it’s important to have a plan for what they’ll see.

Rule # 7: Mobile First

53% of all email is opened on a mobile device, and that number is only going to go up. The Apple iPhone has the highest share of email opens, at 28%. Keep your fonts at a decent size (minimum 14px, but 16px is really better), and try to stay within a single column format. If you can’t send a responsive email, this is the next best bet.

Also, remember to keep your link targets in line with mobile HCI guidelines. We’ve got fat thumbs. You want a minimum size target of 44px.

Rule # 8: Test, test, test. Then test some more.

Litmus screenshots are a great resource, but nothing will surpass testing on an actual device. Send tests to a variety of devices (Apple/Android, Retina/Non-Retina), and interact with them. Holding it in your hand is better than looking at a picture on a large screen. They’re different experiences.

It’s not all bad though.

Some of the best ideas come from working with contraints. I’ve seen some clever, interactive, and progressive campaigns through this medium. Check out Really Good Emails if you need inspiration.