Troubleshooting Email Like a Pro
•
1 like•1,024 views
This document outlines an agenda for an email troubleshooting workshop. It includes background information on common email rendering issues. The plan covers troubleshooting workflows, common bugs and fixes, email optimization, and a Q&A session. Breaks and lunch are also included on the agenda. Attendees will participate in exercises to practice identifying and fixing common email issues related to images, layouts, links, responsiveness, and rendering in different clients like Gmail.
Recommended
More Related Content
Similar to Troubleshooting Email Like a Pro
Similar to Troubleshooting Email Like a Pro (20)
More from Litmus
More from Litmus (20)
Recently uploaded
Recently uploaded (20)
Troubleshooting Email Like a Pro
- 1. Troubleshooting Email Like a Pro #LitmusLive
- 2. Get the Resources You can find the slides, examples, and more at: pages.litmus.com/troubleshooting-san-francisco #LitmusLive Wifi: litmuslive Password: weloveemail
- 3. Jaina Mistry Email Marketing Specialist, Litmus @jainamistry Jason Rodriguez Product Manager, Litmus @rodriguezcommaj
- 5. Agenda • 8:15 - Background Info • 8:45 - Troubleshooting Workflows • 9:10 - Common Bugs & Fixes • 10:00 - BREAK • 10:20 - Quick Review • 10:30 - Exercise Time • 11:00 - Email Optimization • 11:30 - Q&A Session • 12:00 - LUNCH
- 6. Why Problems Happen or The Crazy State of Email Rendering
- 7. — Me, now “Email is unique.”
- 8. ✔ Iterative ✔ Testable ✔ Personal ✔ Forgettable
- 9. The problem with email client icons background
- 10. IMAP & POP WebDav Exchange Domino Preprocessor Trident (IE) WebKit Gecko MS Word Inbox Server Sanitization Rendering Inbox View The Rendering Pipeline
- 13. WEB ≠ EMAIL
- 14. EMAIL DESIGN WEB DESIGN <table> <div> <td> <h1> <td> <p> px em style=“” <style> bgcolor background-color padding margin
- 15. EMAIL DESIGN WEB DESIGN #ffffff #fff rgba hsa individual properties shorthand width=“100” width: 100px; align=“left” text-align: left; style=“” <style>
- 17. All emails consist of: HTML and CSS
- 18. Tags <a> <h1> <table> Attributes width="" cellpadding="" HTML = Structure and content
- 19. Rules padding color font-family Values 100px #333333 sans-serif CSS = Style and Manipulation
- 20. Most of your problems will come from issues with your code. At least the ones you can fix.
- 21. A Guide to Troubleshooting Determining What's Going On
- 22. Email Troubleshooting 101 1. Test your email 2. Check your images 3. Check your HTML 4. Ask for help
- 23. Test Your Email Step 1
- 24. During Development (in browser, in Builder, do test sends (PutsMail))
- 25. During Development (in browser, in Builder, do test sends (PutsMail))
- 28. Step 2 Check Your Images
- 30. Images in Email Require: 1. Absolute paths 2. Publicly accessible servers
- 31. Relative Path <img src="/img/img.jpg"> Absolute Path <img src="http://example.com/img/img.jpg">
- 33. Check the File Name
- 34. Check the File Type JPG PNG GIF SVG TIFF
- 36. Check Your HTML Step 3
- 38. Highlight Tables <table cellpadding="0" cellspacing="0" border="1"> <tr> <td></td> </tr> </table>
- 39. Remove Other Sections HEADER HERO SECTION CTA BLOCK FOOTER
- 40. Reintroduce Components HEADER HERO SECTION CTA BLOCK FOOTER
- 41. Modularity FTW HEADER HERO SECTION CTA BLOCK FOOTER + + +
- 43. Common Syntax Issues: 1. Missing tags 2. Incorrect tags & values 3. Lack of HTML/CSS support
- 44. validator.w3.org
- 46. caniuse.com
- 48. Override Client Defaults <table cellpadding="0" cellspacing="0" border="0"> <tr> <td></td> </tr> </table>
- 49. Override Client Defaults <body style="margin: 0; padding: 0;">
- 50. Check the Math
- 51. + = Outlook Math
- 52. See What Clients are Doing to Your HTML
- 54. Ask for Help Step 4
- 57. email.geeks.chat
- 58. Common Bugs and How to Fix Them
- 60. Missing ImagesImage not displayed.
- 61. Blocked Images
- 62. Prevent Collapsing <img src="" width="600" height="200">
- 63. Alternative Text <img src="" width="600" height="200" alt="20% off coupon">
- 64. ALT Text Guidelines: 1. Include on most images 2. Keep empty for non-essential images 3. Keep it short 4. Can be styled using inline CSS
- 65. Cached Images table flip, what can you do?
- 66. (╯°□°)╯︵ ┻━┻
- 68. Removing Download Button <a href="https://litmus.com"> <img src="" width="600" height="200" alt="20% off coupon"> </a>
- 70. Removing Borders <a href="litmus.com"> <img src="" width="600" height="200" alt="20% off coupon" border="0"> </a>
- 72. Removing Gaps <a href="litmus.com"> <img src="" width="600" height="200" alt="20% off coupon" border="0" style="display: block;"> </a>
- 73. Where is my background image? Where is my background image?
- 74. Background Images 1. Not supported everywhere (Outlooks, Gmail IMAP) 2. Can use VML for Outlooks 3. Always use fallback colors
- 76. Issues with Text and Links
- 78. Ensure Alignment <td align="left"></td> <td align="center"></td> <td align="right"></td>
- 79. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Tempora harum maiores totam possimus vero. Quaerat nemo maxime fugit quas aliquam earum amet sequi omnis nihil, quos ipsam quasi, reiciendis repudiandae? Lorem ipsum dolor sit amet, consectetur adipisicing elit. Tempora harum maiores totam possimus vero. Quaerat nemo maxime fugit quas aliquam earum amet sequi omnis nihil, quos ipsam quasi, reiciendis repudiandae?
- 80. Use MSO Conditional CSS <!--[if mso]> <style type="text/css"> body, table, td {font-family: Arial, Helvetica, sans-serif !important;} </style> <![endif]-->
- 81. Blank Media Query FTW @media screen { @font-face { /* FONT DECLARATIONS */ } }
- 83. Wrap Suspect Text .nolink { text-color: #c0c0c0; text-decoration: none; } <span class=“nolink”>866-787-7030</span>
- 84. Use a CSS Reset <style> a[x-apple-data-detectors] { color: inherit !important; text-decoration: none !important; font-size: inherit !important; font-family: inherit !important; font-weight: inherit !important; line-height: inherit !important; } </style>
- 86. HTML Lists Don’t Look Right This is a list of information: Item One Item Two Item Three Item Four This is a list of information: • Item One • Item Two • Item Three • Item Four
- 87. More Random Stuff
- 88. Full Email Not Shown in Gmail
- 89. Full Email Not Shown in Gmail102kb Clipping in Gmail
- 90. What if tables look bigger than expected?
- 92. Override Client Defaults <table cellpadding="0" cellspacing="0" border="0"> <tr> <td></td> </tr> </table>
- 93. Override Client Defaults <body style="margin: 0; padding: 0;">
- 97. ‌ = width of 1 character
- 98. Hide Unwanted Preview Text <div style="display: none; max-height: 0px; overflow:hidden;”> <!--Insert hidden preheader text here--> </div> <!-- Insert ‌ hack after hidden preview text --> <div style="display: none; max-height: 0px; overflow: hidden;"> ‌ ‌ ‌ ‌ ‌  ;‌ ‌ ‌ ‌ ‌ ‌ & zwnj; ‌ </div>
- 101. Quick Refresh What have we learned so far?
- 102. These guys cause a lot of problems…
- 103. IMAP & POP WebDav Exchange Domino Preprocessor Trident (IE) WebKit Gecko MS Word Inbox Server Sanitization Rendering Inbox View The Rendering Pipeline
- 105. Understanding what's supported where is your first line of defense.
- 106. Email Troubleshooting 101 1. Test your email 2. Check your images 3. Check your HTML 4. Ask for help
- 107. Exercises Let's look at some code…
- 108. The Plan: 1. Quick assignment 2. A few clues 3. 3 minutes of troubleshooting 4. Review
- 109. Exercise #1 Fix the Missing Images Hints: https://img.litmuscdn.com/images/next/illustrations File Formats
- 110. Exercise #2 Fix the Layout Hint:
- 111. Exercise #3 Fix the Blue Links Hints: HTML Classes Style Resets
- 112. Exercise #4 Fix the Responsive Layout 1 Hints: See if something's missing…
- 113. Exercise #5 Fix the Responsive Layout 2 Hints: See if something's wrong…
- 114. Exercise #6 Fix the Styles in Gmail Hints: [ hey="wtf" ]
- 115. Your Own Emails Who's brave?
- 116. Q&A Time Anything we missed?