Know Before it GoesTesting For Your Email Design

Normal People’s Worst Nightmare.Normal People’s Worst Nightmare.

Email Marketer’s Worst Nightmare.Email Marketer’s Worst Nightmare.

Why test?• Preserve your brand and reputation• Retain conversions and revenue• HTML and CSS are not always well

supported• Dozens of different email clients

and devices out there

Good QA is good customer service.- Chad White, The Retail Email Blog

Lay a Solid FoundationLay a Solid Foundation11

Email HTML ≠ Web HTML

• Use table-based layouts• Inline CSS only• Limited or no support for:

• Forms/surveys• Video• Javascript• Flash• Background images• Animated .gifs

Verify ContentVerify Content22

Triple check spelling and pricing to avoid embarrassing errors

Format the plain text version for readability and usability

Your testing checklist• Remove/convert symbols and nonstandard characters

® © “ • ™ £ ¢ € ° • Ensure images and URLs start with http://www • Proofread & spell check

•Preheader, from name, subject line, body copy, text version• Are prices and other critical information correct?• Replace default or placeholder values• Verify personalization or dynamic content• Does email content lead to relevant landing pages?• Perform a spam check

Confirm Function Confirm Function33

Add “style=display: block;” to sliced images to prevent gaps

Be sure to include ALT text to combat image blocking

Test your emails in a variety of programs to be sure they display as you expected.

Your testing checklist• Tested in common/popular email clients

• Set up test accounts or use an online tool• Preview with images on and images off • Check rendering in desktop, mobile and webmail • Verify all links work and go to the correct pages• Verify web analytics tagging is in place and working• Are CAN-SPAM elements in place?

• Working unsubscribe mechanism, mailing address, etc.

Create (and Follow!) a Process Create (and Follow!) a Process44

We are by nature flawed and inconstant creatures.

- Atul Gawande, The Checklist Manifesto

Your testing checklist• Makes you a smarter, more systematic decision-maker• Creates a culture of discipline and teamwork• Gets the dumb stuff out of the way

Creating checklists• Short and simple• Use task checks for ‘dumb’ but critical stuff

• Did you select the right setting? Press the red button?• Use communication checks for complex stuff

• When coordination or knowledge sharing is necessary, communication checks a balance between freedom and discipline

• Pick the right type of list:• READ-DO (read each step, then do it)• DO-CONFIRM (do the steps from memory, then pause and check)

Tools & Resources Tools & Resources**

Validation

http://validator.w3.org/

http://validator.w3.org/• Look out for ‘Start tag’ or ‘end tag’ omitted errors

• End tag for TABLE / TD / TR omitted• End tag for element A which is not open• End tag for P which is not finished

• Empty elements are okay• “NET-enabling start-tag requires SHORTTAG YES”

• Deprecated tags are okay• “there is no attribute BACKGROUND”

full details: https://litmus.com/blog/validating-html-for-email

Innovyx Campaign Audit

Runs your email through a series of checks and balances; emails you a report.

Industry Guides from Campaign Monitor, MailChimp, etc. are written by experts and chock full of information

Litmus

Takes screenshots of what your emails look like on a variety of email programs and mobile devices, performs spam check, validates links, etc.

emailchecklist.org performs 7 quality and best practice checks on your HTML

EmailMonday.com Checklist

Provides a framework for following best practices and starting your own QA process

Happy testing!

Justine JordanMarketing Director

e: justine@litmus.comt: @meladorri