Download as PDF, PPTX
![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;
}](https://image.slidesharecdn.com/wait-what-happened-to-my-email-160203210920/75/Wait-What-just-happened-to-my-email-41-2048.jpg)
![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]-->](https://image.slidesharecdn.com/wait-what-happened-to-my-email-160203210920/75/Wait-What-just-happened-to-my-email-60-2048.jpg)
Uploaded byLitmus
Wait. What just happened to my email?
The document discusses best practices for email design, emphasizing the challenges posed by mobile devices and the importance of testing for issues like broken images and links. It advocates for using tables for structure, inlining CSS, and adopting various responsive email approaches to ensure compatibility across different clients. Additionally, it provides resources for further learning and testing tools for effective email marketing.
More Related Content
Similar to Wait. What just happened to my email?
Wait. What just happened to my email?
- 1. Wait… WHAT JUST HAPPENED TOMY EMAIL?!? #WelcomeToTheInbox
- 2. Jason Rodriguez Community Manager,Litmus @rodriguezcommaj Marketing Lead, Sendwithus @alexophile Alex Mohr
- 8. Welcome to theinbox, nerds. #WelcomeToTheInbox
- 9. Welcome to theinboxes
- 11.
- 13. Standards support sucks Source:campaignmonitor.com/css
- 15. The Web ≠Email #WelcomeToTheInbox
- 18. What can actuallygo wrong? #WelcomeToTheInbox
- 19. Broken & missingimages
- 20. Broken & bluelinks
- 21.
- 22. How do youfind these problems before your subscribers? #WelcomeToTheInbox
- 23. We’ll have torun a test… #WelcomeToTheInbox
- 25. 0 22.5 45 67.5 90 High base costs favorbig changes
- 26. Which is whytransactional emails so often get left behind
- 27. Perfect, now nevermove ever again.
- 28. 0 15 30 45 60 Faster testing makessmaller changes more practical
- 29. Smaller changes = betterfeedback and more control #WelcomeToTheInbox
- 30.
- 33. Let’s look atthese again… #WelcomeToTheInbox
- 34. Broken images Blue links Brokenlayouts #WelcomeToTheInbox
- 35.
- 36. Web Relative paths work src=“/img/hero.jpg” Imagepaths Email Only absolute paths src=“http://example.com/ img/hero.jpg”
- 37. ALT text Include ALTtext 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” Brokenlinks Email Only absolute paths href=“http://example.com/ about.html”
- 39. Blue links Present designproblems Colors are off-brand Accessibility concerns Low contrast text = unreadable
- 40. Old fix Wrap suspecttext and style using CSS .blue-links a { color: #888888 !important; } <span class=“blue-links”>March 10</span> Blue links
- 41. New fix Put thisin 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.
- 43. Always remember: The Web≠ Email #WelcomeToTheInbox
- 44. divs for structure floats externalstylesheets shorthand properties & values When coding… tables for structure align attribute inline CSS explicit properties & values
- 45. <h1> <p> <img> <a class=“button”> Instead ofpositioned elements…
- 46. <tr><td> Use table rowsand 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 Nolinked 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 • Considersthe 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 changesto 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
- 56.
- 57. Traditional Responsive • Relieson CSS media queries • Makes images fluid on mobile • Makes tables fluid on mobile • Tons of control over content
- 58. Not supported Everywhere* *Looking atyou, Gmail… Inbox by Gmail (iOS) Mail (iOS)
- 59.
- 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
- 62.
- 63. Keep all ofthat in mind and email can be wonderful (even transactional!) #WelcomeToTheInbox
- 65.
- 66.
- 67.
- 68.
- 69. Sendwithus Open SourceTemplates sendwithus.com/resources/templates Litmus Community litmus.com/community Litmus Blog litmus.com/blog
- 70. Litmus Community http://bit.ly/1KogqN1 Q&A Time Typeyour questions in the chat window Try Sendwithus free sendwithus.com/pricing Try Litmus free for 14 days litmus.com/coupon/WelcomeToTheInbox Join the discussion