E-mail Direct Mail Digital Marketing Sales Tools Funding Data Creative Services Looking Good! Troubleshooting Email Display Problems November 19, 2014
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 preprocessing o Different screen sizes o Responsive Design requires careful testing
Why test your emails? Creating an email campaign requires a significant investment of time and money. o o o o Copy Artwork Coding 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 o o o o Not website coding Not the same as print No stylesheets (use inline styles) <img src= # style= place styles here; > Tables are your friend! Image blocking (use HTML text)
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-process
How to Test Email Your Pre-Send Code
How to Test Email Your ESP Modified Code
How to Test Email Your Code as Interpreted by Outlook
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 Header/Footer
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 No support for image maps
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 about these others.
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 everywhere (Gmail app)
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. 4. Test again to confirm fix.
Questions for Geoff? Send them Using the Chat Panel