Wait. What just happened to my email?
•
131 likes•44,107 views
Email is at the heart of most applications, web and native alike. An ideal and universal way to communicate with users, nearly every designer and developer has to build transactional or marketing emails at some point in their careers (whether they want to or not). But the sheer number of email clients—each with their own rendering problems—leaves many people with heads hung, fists raised, cursing the creators of Outlook and Gmail and pining for simpler days. In this webinar, we identify some of the most common email rendering pitfalls, look at techniques to prevent them, and talk about a process to test your transactional emails using Sendwithus and Litmus.
Recommended
More Related Content
What's hot
What's hot (20)
Viewers also liked
Viewers also liked (20)
Similar to Wait. What just happened to my email?
Similar to Wait. What just happened to my email? (20)
More from Litmus
More from Litmus (20)
Recently uploaded
Recently uploaded (20)
Wait. What just happened to my email?
- 1. Wait… WHAT JUST HAPPENED TO MY EMAIL?!? #WelcomeToTheInbox
- 2. Jason Rodriguez Community Manager, Litmus @rodriguezcommaj Marketing Lead, Sendwithus @alexophile Alex Mohr
- 8. Welcome to the inbox, nerds. #WelcomeToTheInbox
- 9. Welcome to the inboxes
- 13. Standards support sucks Source: campaignmonitor.com/css
- 15. The Web ≠ Email #WelcomeToTheInbox
- 18. What can actually go wrong? #WelcomeToTheInbox
- 19. Broken & missing images
- 20. Broken & blue links
- 21. Broken layouts
- 22. How do you find these problems before your subscribers? #WelcomeToTheInbox
- 23. We’ll have to run a test… #WelcomeToTheInbox
- 25. 0 22.5 45 67.5 90 High base costs favor big changes
- 26. Which is why transactional emails so often get left behind
- 27. Perfect, now never move ever again.
- 28. 0 15 30 45 60 Faster testing makes smaller changes more practical
- 29. Smaller changes = better feedback and more control #WelcomeToTheInbox
- 33. Let’s look at these again… #WelcomeToTheInbox
- 34. Broken images Blue links Broken layouts #WelcomeToTheInbox
- 35. Broken images
- 36. Web Relative paths work src=“/img/hero.jpg” Image paths Email Only absolute paths src=“http://example.com/ img/hero.jpg”
- 37. ALT text Include ALT text Provides context for missing images <img src=“logo.jpg” width=“400″ height=“149″ alt=“Litmus” style=“font-family: Georgia; color: #697c52; font-style: italic; font-size: 30px;”>
- 38. Web Relative paths work href=“/about.html” Broken links Email Only absolute paths href=“http://example.com/ about.html”
- 39. Blue links Present design problems Colors are off-brand Accessibility concerns Low contrast text = unreadable
- 40. Old fix Wrap suspect text and style using CSS .blue-links a { color: #888888 !important; } <span class=“blue-links”>March 10</span> Blue links
- 41. New fix Put this in the <head> of your email: Blue links 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; }
- 42. Broken layouts
- 43. Always remember: The Web ≠ Email #WelcomeToTheInbox
- 44. divs for structure floats external stylesheets shorthand properties & values When coding… tables for structure align attribute inline CSS explicit properties & values
- 45. <h1> <p> <img> <a class=“button”> Instead of positioned elements…
- 46. <tr><td> Use table rows and cells… <tr><td> <tr><td> <tr><td>
- 47. Modular design Table rows & cells For every section Emails as LEGO Makes building different templates & troubleshooting easy Module HEADER Module HERO IMAGE Module COPY BLOCK Module CTA BUTTON Module FOOTER
- 48. Inline your CSS No linked stylesheets Most email clients won’t display them Embedded for enhancements Use styles in the <head> for progressive enhancement Inline for everything else All important formatting should be inline on HTML elements for maximum compatibility <link rel="stylesheet" type="text/css" href=“style.css"> <head> <style> … STYLES … </style> </head> <td style=“padding: 10px 20px 30px 20px; font-family: sans-serif; font-size: 18px; color: #000000;”></td>
- 49. Different device & screen sizes break a lot of emails #WelcomeToTheInbox
- 51. Email approaches: Mobile aware, fluid, and responsive * In two varieties *
- 52. Mobile aware • Considers the mobile user a priority • One layout for all screen sizes • Single column design; 320-500px • Large text & buttons • Generous white space • Short, concise body copy
- 53. Fluid Email width changes to fit inside the window • Percentage-based widths • Adapts to fit the screen • Text wraps automatically
- 54. Responsive • Resize content: make images fit, make text larger • Hide content on mobile • Stack columns • Move a two-column design to a one-column design
- 57. Traditional Responsive • Relies on CSS media queries • Makes images fluid on mobile • Makes tables fluid on mobile • Tons of control over content
- 58. Not supported Everywhere* *Looking at you, Gmail… Inbox by Gmail (iOS) Mail (iOS)
- 60. Spongy (hybrid) approach • Fluid-by-default tables • Constrained tables using CSS • Conditional tables for Outlook • Content stacking w/o media queries • Complicated w/ complex layouts <!--[if (gte mso 9)|(IE)]> <table align="center" border="0" cellspacing="0" cellpadding="0" width="600"> <tr> <td align="center" valign="top" width="600"> <![endif]--> <table border="0" cellpadding="0" cellspacing="0" width="100%" style="max- width: 600px;" > <tr> <td align="left" valign="top" style="padding: 10px 10px 20px 10px;"> … CONTENT … </td> </tr> </table> <!--[if (gte mso 9)|(IE)]> </td> </tr> </table> <![endif]-->
- 61. “Hybrid” or “Spongy” email development http://labs.actionrocket.co/the-hybrid-coding-approach http://www.emaildesignreview.com/email-design-best-practice/googles-embarrassing-email-problem-2465/ http://webdesign.tutsplus.com/tutorials/creating-a-future-proof-responsive-email-without-media-queries--cms-23919 https://www.campaignmonitor.com/blog/email-marketing/2014/07/creating-a-centred-responsive-design-without-media-queries/ @ActionRocket @flcarneiro @moonstrips @mike_ragan
- 63. Keep all of that in mind and email can be wonderful (even transactional!) #WelcomeToTheInbox
- 69. Sendwithus Open Source Templates sendwithus.com/resources/templates Litmus Community litmus.com/community Litmus Blog litmus.com/blog
- 70. Litmus Community http://bit.ly/1KogqN1 Q&A Time Type your questions in the chat window Try Sendwithus free sendwithus.com/pricing Try Litmus free for 14 days litmus.com/coupon/WelcomeToTheInbox Join the discussion