Best Practices, Trade Secrets, & Trends in Email Design and Copy

Optimizing Email Marketing Content Best Practices, Trade Secrets, & Trends in Email Design and Copy

@bestofjess Course Overview:

1. Anatomy of an Email 2. Accessibility in Email Design 3. Rich Media in Email Design 4. Trends to Try The Anatomy of an Email

2010 2020 @bestofjess The Anatomy of an Email

1. Subject Line 2 3 2. Pre-header

3. Branded graphic header 4 4. Main message 5 5. Call-to-Action

6. Supporting Message 6 7. Footer 7

@bestofjess @bestofjess @bestofjess @bestofjess Keep it Skimmable (not necessarily Short)

✔ Clear ✔ Concise ✔ Clickable

@bestofjess Clarity Trumps Cleverness in Email Design/Copy

We marketers looooove clever, but not at the expense of making it perfectly clear (1) what the offer is and (2) how to use it.

What do we want them to do? ✔ Download Your Brochure ✔ Read More ✔ Watch the 3-min Video ✔ Find a Dealer Near You

@bestofjess Email Design/Style Should Fit the Message

Text-only emails can work better in sales automation, and B2B or nonprofit marketing automation.

Source: NextAfter (2017)

@bestofjess Email Marketing design must consider accessibility for all readers & devices

@bestofjess Make Design Accessible… With Images Off Up to 25% of email subscribers can have images turned off by default (including versions of Android and Outlook). IKEA in 2015:

@bestofjess Make Design Accessible… With Images Off IKEA in 2019:

@bestofjess Make Design Accessible… With Images Off

DESKTOP DEFAULTS Images WEBMAIL MOBILE DEFAULTS Images Apple Mail on DEFAULTS Images Android Native Email App off Lotus Notes 8.5 off AOL off BlackBerry off Outlook 2000-2003 off Gmail on Gmail App on G Suite / Inbox by Gmail on Outlook 2007/2010/ Inbox by Gmail on iOS 11 Native App on 2013/2016 off Outlook.com depends Mailbox (iOS) on Office 365 depends Outlook.com browser depends Outlook 2016 (Windows) off Yahoo! Mail off Windows Mobile off Windows 10 Mail on Yahoo! Mail App off Outlook 2011 Yahoo! Mail (Android (Outlook for Mac) off browser) off Outlook 2016 (OS X) off Yahoo! Mail (iOS browser) on Thunderbird on

Source: Litmus’ Ultimate Guide to Image Blocking, 2017 @bestofjess Make Design Accessible… With Images Off In order to blend images and text, we need to design on a “grid.”

Header/Top Navigation Header/Top Navigation

Promo #1 – image Image

Copy copy copy copy copy on background color

Promo #2 image Promo #2 copy on a Copy copy copy copy copy on background color background color

Promo #3 - image Footer Footer

@bestofjess The Email Grid Think in terms of cutting images – we have to use straight lines to cut and don’t want to “split” an image if we don’t have to.

Background images are finally ok,* but also should be avoided if possible.

*Thanks to a jenky work around just for Microsoft Outlook.

@bestofjess The Email Grid Litmus emails are the gold standard. LOTS of white space & fully responsive. On a phone, the only thing that needs to change here is font size.

@bestofjess Make Design Accessible… on Mobile Devices In 2018, up to 60% of subscribers read email on a phone or tablet.

Source: Adestra Consumer Adoption & Usage Study (2016) @bestofjess Make Design Accessible… on Mobile Devices Up to 60% of subscribers open email on a phone or tablet.

@bestofjess Mobile-Friendly Email Design Quick Tips

✔ Lots of white space between headlines, body copy, and calls to action

✔ At least 40px tall/wide buttons

✔ Bigger font: Minimum 14pt font size for body copy that sizes up on mobile devices (25-30pt)

@bestofjess Mobile-Friendly Email Design Quick Tips

✔ Limit words in images (which don’t resize well). Think “headlines” only.

✔ Better yet: If possible, keep text out of images so they can be “true text” which solves for the images off version, too.

@bestofjess Example: Noodlegram

@bestofjess Email Design Should be Tested on Various Devices Before Launch

@bestofjess Email Marketing design can – and should! – incorporate rich media

@bestofjess Make It Move with Animation

@bestofjess Make It Move with Animation Warning: large image sizes will load slowly on poor internet connections and even a fraction of a second delay can make an empty email too easy to delete.

In fact, in some email platforms, images can’t be largely than a few hundred KB file size!

@bestofjess Make It Move with Animation TIPS for keeping file size down: ✔ Vector art tends to be easier to keep to smaller file size than photo. ✔ Fewer colors mean simpler files, which saves on file size ✔ Trim your GIF to ONLY the portion of the image that is animated, keeping pixel width/height lower ✔ Fewer slides/frames and/or layers can save file size

@bestofjess Make It Move with Animation Warning #2: Outlook doesn’t show any animation in the inbox. It will default to the first “slide” in an animated GIF, so be sure to think of that as your “default” slide for those that won’t see the animation.

For example, if your image “builds,” you’ll want to start with a quick .5 second “slide” that is complete, then loop back to the first slide in the build. @bestofjess Make It Move with “Video in Email”

Video can drive engagement rates through the roof… IF:

❑ You use accompanying copy to tell readers why to watch

❑ The “freeze frame” is alluring

❑ The CTA is clear

@bestofjess Make It Move with “Video in Email”

Most inbox providers won’t play video inline in the body of the email, so most often, we “fake” it with: ✔ A still shot from the video ✔ A play button (like the thumbnails that YouTube creates) ✔ A link to the video on YouTube/Vimeo/Facebook or our website. Though for a cool trick, try “faux” video (Litmus 2019) @bestofjess Make It Move with “Video in Email”

TIPS on video in email: ✔ Some inboxes (Gmail/Hotmail) will find any YouTube links in your email and bring the video to the top/bottom of the email in the reader’s inbox, so they don’t have to leave their inbox to play it.

@bestofjess Make It Move with “Video in Email”

TIPS on video in email:

✔ You can also try using an animated GIF as a “silent video” teaser of the content…

but don’t cut into a dizzying “flipbook” style GIF (and remember the limitations of GIFs in Outlook etc!)

@bestofjess A few other fun tricks to try…

@bestofjess Own Your Voice in Email

@bestofjess Own Your Voice in Email (even if you’re B2B)

@bestofjess 1 Team. 1 Dream. 1 Content Calendar.

@bestofjess Personalization in Text

@bestofjess Personalization in Text & Images

@bestofjess Countdown Timers to Add Urgency

@bestofjess Real-Time or Dynamic Content

@bestofjess Pop Quiz Which Subject Line Drove the Most Opens?

A. I Spy a Winner

B. Be a Hallo-Winner C. Trick or $5000 Treat?

@bestofjess Pop Quiz Which Subject Line Won?

A. All the New School Happenings B. How Are Ping Pong Balls Like Student Debt? Buzzfeed Helps Us Explain.

@bestofjess Test & Learn Most email platforms allow easy testing. Measure the right metrics!

@bestofjess Email Outline - Brainstorm/Workshop Two potential ways to put this to use for you today:

1. Start to outline your Content Calendar and/or update it with specific ideas for email campaigns a. How can email support other channels and vice versa? b. When does new content “drop” that might inform an email campaign?

2. Reimagine your current email look and feel based on what you’ve learned in this course: a. How does the layout/architecture need to change? b. What movement or motion is the most relevant to your brand, product or upcoming campaign? @bestofjess Optimizing Email Marketing Content Best Practices, Trade Secrets, & Trends in Email Design and Copy

@bestofjess