E-mail • Direct Mail • Digital Marketing • Sales Tools • Funding Data • Creative Services
November 19, 2014
Looking Good!
Troubleshooting Email
Display Problems
Today’s Speaker
Geoff Phillips
Senior Editor & Email Specialist
Why test your emails?
Your email is rendered differently everywhere.
o Lack of support for basic CSS/HTML o ESP may modify your code
o Web clients strip a lot of code in
pre-processing
o Different screen sizes
Why test your emails?
Creating an email campaign requires a significant investment of time and money.
o Copy o Artwork o Coding
o Administration
Optyn reported that 75% of smartphone users delete emails they can't read.
Why test your emails?
Would you publish…
o An ad with a typo?
o Incorrect prices for your product? o An email with a broken layout?
Testing thoroughly helps you make sure that your emails will maintain your brand’s image.
How to Code for Email
A few things to remember.
o Not website coding o Not the same as print
o No stylesheets (use inline styles)
• <img src=“#” style=“place styles here;”> o Tables are your friend!
How to Test Email
Using a testing service vs. ad hoc testing.
Ad hoc testing is done on browsers and
devices in your office.
A testing service enables users to test on a wide range of clients simultaneously.
How to Test Email
Testing Method o HTML Cut/Paste o Upload ZIP o URL o Auto-processHow to Test Email
How to Test Email
How to Test Email
How to Test Email
Reviewing your test results.
You’ll want to keep an eye out for the following:
o Text and image spacing o Fonts
o Missing images o Layout issues
o Responsive design o Link destinations
How to Test Email
Identify the problem.
o ESP/Sender Issues
• Copy/Paste vs. Auto-process
o Code issues (closing tags, table structure)
o Remove/Add Sections to find issue
• CSS
• Other tables
How to Test Email
Fixing the problem.
o Broken images o Code issues
• Try a fix, test, repeat
o Use Google to look for fixes o Ask an expert or community
How to Test Email
Testing is an iterative process.
o Try a fix, test, repeat
o Test again to see effects on other clients o Think outside the div
Email Client Tips
Outlook 2003-2013
• Word often converts paragraphs to DIVs
• No support for CSS floats
• No support for forms
• Sometimes converts padding to margin
• No support for CSS positioning
• No support for responsive design
• Background images only work with Vector Markup Language (VML)
• Outlook sometimes breaks very long emails at a certain point, this is where a page break would appear in Word
Email Client Tips
Gmail and the Gmail App
• No support for styles attached to a class or ID
• No support for media queries
• All styles must be inline (not in the <head>)
• No absolute positioning
• Gmail clips emails over 102k in length
• Gmail doesn’t support “display: none” but does support “display: none !important”
Email Client Tips
Yahoo! Mail
• Yahoo! Mail will render all of the styles contained in
any media query in your email, ignoring the query itself. The fix to this takes advantage of a bug that causes Yahoo! To ignore CSS styles written with attribute selectors. Simple use attribute selectors on all rules in your media query, and Yahoo! Will ignore the query.
o body[yahoo] .center {text-align: center!important;}
• Yahoo! Mail converts body tags to DIVs, which can sometimes cause strange issues.
• Yahoo! Mail doesn’t give paragraphs any spacing by default, so make sure to add a style to your <head> to address this.
Email Client Tips
Outlook.com
• No support for margins
• Enforced line height of 1.35em
• HTML code inside a style block breaks the display, causing it to show a “blank” email
Email Testing Tips
Focus on the most popular clients in your list
o Use email analytics to find out what kind of
email clients are being used to open your emails.
o Get the list of top 10 most popular clients. o Test carefully in these, don’t worry so much
Email Testing Tips
Don’t Pursue Pixel Perfection
o Every client is different. o Every screen is different.
o Make sure it works, not that it’s identical. o Don’t pull your hair out!
Media Query Tips
Media Queries are a must.
o You can use media queries to hide/show or
rearrange content
o Make sure to adjust font size
o Use attribute selectors for Yahoo! Mail
o Remember, they help but are not supported
Media Query Support
Client Supported? Client Supported?
Kindle Fire Yes ✓ Mailbox (iOS) Yes ✓ Kindle Fire HD Yes ✓ Outlook Exchange App (Android) No Android 2.1 Éclair No Microsoft Surface No Android 2.2+ Yes ✓ Microsoft Windows Mobile 6.1 No BlackBerry OS 5 No Windows Phone 7 No BlackBerry OS 6+ Yes ✓ Windows Phone 7.5 Yes ✓ BlackBerry Playbook Yes ✓ Windows Phone 8 No Gmail App No Palm's Open Web 4.5 Yes ✓ iPhone, iPod, iPad Yes ✓ Yahoo! App No
General Testing Tips
o Start learning these
nuances to code for success from the start
o Don’t be afraid to seek outside help o It gets easier!
Email Testing Demo
Let me walk you through a testing demo.
1. Send an email to your auto-process address
from your ESP.
2. Examine the results of your test. 3. Try to fix issues.