Looking Good! Troubleshooting Display Problems

Size: px

Start display at page:

Download "Looking Good! Troubleshooting Email Display Problems"

Adam Wilson
8 years ago
Views:

1 Direct Mail Digital Marketing Sales Tools Funding Data Creative Services Looking Good! Troubleshooting Display Problems November 19, 2014

2 Today s Speaker Geoff Phillips Senior Editor & Specialist

3 Why test your s? Your 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

4 Why test your s? Creating an 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 s they can't read.

5 Why test your s? Would you publish o An ad with a typo? o Incorrect prices for your product? o An with a broken layout? Testing thoroughly helps you make sure that your s will maintain your brand s image.

How to Code for Email A few things to remember.

6 How to Code for 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)

7 How to Test 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.

8 How to Test Testing Method o HTML Cut/Paste o Upload ZIP o URL o Auto-process

9 How to Test Your Pre-Send Code

10 How to Test Your ESP Modified Code

11 How to Test Your Code as Interpreted by Outlook

12 How to Test 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

13 How to Test 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

14 How to Test 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

15 How to Test 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

16 Client Tips Outlook 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 s at a certain point, this is where a page break would appear in Word

support for responsive design Background images only work with Vector Markup Language (VML)

17 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 s over 102k in length Gmail doesn t support display: none but does support display: none!important

in the <head>) No absolute positioning Gmail clips emails over 102k in

18 Client Tips Yahoo! Mail Yahoo! Mail will render all of the styles contained in any media query in your , 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.

Simple use attribute selectors on all rules in your media query, and Yahoo! Will ignore the query. o body[yahoo].center {text-align: center!

19 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 No support for image maps

20 Testing Tips Focus on the most popular clients in your list o Use analytics to find out what kind of clients are being used to open your s. o Get the list of top 10 most popular clients. o Test carefully in these, don t worry so much about these others.

21 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!

22 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)

23 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

24 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!

25 Testing Demo Let me walk you through a testing demo. 1. Send an 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.

26 Questions for Geoff? Send them Using the Chat Panel

A GUIDE TO MOBILE EMAIL

A GUIDE TO MOBILE EMAIL UNDERSTANDING THE WHAT, HOW & WHY TABLE OF CONTENTS EMAILS OPENED ON MOBILE? 1 Email open market share 2011-2013 WHAT DOES THIS MEAN? 2 FIRST THINGS FIRST 2 From and Subject Lines