Smart Email Design: In the Eye of the Recipient

Send. Whoosh! It’s a great feeling to send your email out into the world to generate clicks and conversions for you. But how does your email look when it arrives in people’s inboxes? Even if it looked fine when you sent it, it could look completely different to recipients. And the poor appearance of your email on the receiving end could be undermining your messaging to educators and how they perceive your brand.

Desktop vs. mobile, image suppression, different email clients…this is your landscape today. Making sure recipients have the experience you want them to have is the objective of smart email design. And smart design begins by knowing the lay of the land and evaluating your emails from the outside in.

Cross Device Best Practices

There are email design best practices that need to be followed for all devices. Skip following best practices and you risk your message not displaying correctly, or being unreadable on any device.

HTML Basics – By following a couple of simple rules when creating your emails, you can increase your chance that the largest audience possible experiences your message the same way. Simple rules include leveraging simple tables to structure the email content for HTML email clients and using web-safe or system fonts. These are just a couple ways to control how messages are displayed.

After the Click – If the objective of mobile email copy and design is to earn the click, you have to consider where the click delivers the reader. As WeAreTeachers Email Program Manager Cami Eastman says, “While it is important to make sure the recipient can easily read and click your emails across devices, it’s just as important to make sure there is congruence between the email and the landing page. By establishing a similar tone and aesthetic in both your email and landing page, it requires less time for the reader to understand your offering and convert.”

Do’s and Don’ts of Image Usage – While a picture is usually worth a thousand words, this is not the case in emails. Using more images than copy can get your emails caught in spam filters. And images can be suppressed, rendering a message that relied on text within an image nonsensical or hard to understand. In either case, there are best practices to ensure your message comes across even if your images don’t. MDR recommends designing your email so the images are additive rather than essential to the message itself. This includes using text-based links instead of image links to earn clicks.

Move CTAs Up – Make sure to place the call to action “above the fold” on your email. This placement helps the reader understand what action you would like for them to take. If you keep your call to action “below the fold,” a reader may scan your email and miss the point completely.

Use Pre-headers – MDR also suggests providing a link at the top of the page in the pre-header so the reader can view the email in a web browser. In the pre-header of your emails, include “View as a Web Page” and/or “View Mobile Version” links if possible. It’s also important to left-align the pre-header, because some mobile devices may cut the text off if it’s centered. Even if readers have images turned off, they’ll see these links and can use them to experience a well-formatted version of the message.

Choose Contrasting Colors – Keeping a balance of white space and color improves the readability of emails. This is especially true on smaller mobile screens, where low-contrast fonts, backgrounds, and images are much harder to discern and read. A splash of color can go a long way.

Mobile First

In the education market, MDR’s research has shown that educators at all levels are checking email, browsing the web, and making purchasing decisions on multiple devices, including mobile. Users flip between smartphones, desktops, and tablets, often checking the same email on each device. Overall, email access via mobile is at 50% and growing. Designing for mobile first ensures your email design is device-agnostic and readable now and into the future. Here are MDR’s top tips for mobile-optimized design:

Simplify – Complex HTML, complex tables, and multiple links in close proximity are all challenges on a mobile device where the reader is “clicking” with a finger. Test to be sure it’s easy for recipients to read your copy and click on links, buttons, etc. without dreaded “fat finger” errors.

Skip the Navigation – Save landing-page style navigation for the landing page and focus on one core message that will earn the click.

Shrink or Eliminate Headers – Say goodbye to huge headers with positioning graphics, as they only push the real content of your message down. Try to keep headers for mobile between 110-120 pixels tall.

Think Vertically – Design in a vertical manner with full-width images. Single columns work well and avoid complex tables.

Slim Down – Reduce the width of your emails. Design for no more than 550 pixels wide; 320-550 pixels is a good width range. Android does not auto-scale like iOS (iPhone and iPad) does, so the slimmer width increases the odds that all readers, no matter what device they are reading your email on, can view your email content.

Be Readable – Use larger fonts: 14-16 pixels or larger for body text. iOS automatically scales text to 12px, but this can break up the layout of the design. Turn auto-scaling off by adding the following code: style=“-webkit-text-size-adjust:none.”

Finger-sized CTAs – Make sure your CTAs are sized at least 44 x 44 pixels in dimension. Anything smaller can be a challenge for a reader to easily click with a finger or thumb—which is the whole point of the email!

Identify Image Content – Always include ALT text for images since so many systems default to images turned off.

Send Multipart MIME Messages – This format sends the email content in both HTML and plain text and makes sure your email content is available, even if the mobile device only allows text.

Seed, Then Harvest Input

Before you send your email to your customers, the best way to get the recipient’s POV on your emails is to seed your email list by sending it to internal contacts who can tell you how the email looks on their platform, device, and email client. They can also tell you where your email “fit” in their inbox in regard to day of the week, time of day, competing emails, etc. Did it stand out, or get lost in the flood? Seeding puts more eyes, and more diverse perspectives, on your deployment.

Bringing Email Back to Life

Email best practices are a big topic, and every aspect of email marketing needs to be addressed to achieve the reinvigoration today’s marketers are looking for. Look to these related posts for deep dives into improving campaign performance with:

Want to dive even deeper? Take a minute to review our Email Best Practices webinar which has tons of tips for getting better email results!