wait. what just happened to my email?
TRANSCRIPT
![Page 1: Wait. What just happened to my email?](https://reader033.vdocuments.site/reader033/viewer/2022051503/58705ac11a28aba2118b6675/html5/thumbnails/1.jpg)
Wait… WHAT JUST HAPPENED
TO MY EMAIL?!?
#WelcomeToTheInbox
![Page 2: Wait. What just happened to my email?](https://reader033.vdocuments.site/reader033/viewer/2022051503/58705ac11a28aba2118b6675/html5/thumbnails/2.jpg)
Jason RodriguezCommunity Manager, Litmus
@rodriguezcommajMarketing Lead, Sendwithus
@alexophile
Alex Mohr
![Page 3: Wait. What just happened to my email?](https://reader033.vdocuments.site/reader033/viewer/2022051503/58705ac11a28aba2118b6675/html5/thumbnails/3.jpg)
![Page 4: Wait. What just happened to my email?](https://reader033.vdocuments.site/reader033/viewer/2022051503/58705ac11a28aba2118b6675/html5/thumbnails/4.jpg)
![Page 5: Wait. What just happened to my email?](https://reader033.vdocuments.site/reader033/viewer/2022051503/58705ac11a28aba2118b6675/html5/thumbnails/5.jpg)
![Page 6: Wait. What just happened to my email?](https://reader033.vdocuments.site/reader033/viewer/2022051503/58705ac11a28aba2118b6675/html5/thumbnails/6.jpg)
![Page 7: Wait. What just happened to my email?](https://reader033.vdocuments.site/reader033/viewer/2022051503/58705ac11a28aba2118b6675/html5/thumbnails/7.jpg)
![Page 8: Wait. What just happened to my email?](https://reader033.vdocuments.site/reader033/viewer/2022051503/58705ac11a28aba2118b6675/html5/thumbnails/8.jpg)
Welcome to the inbox, nerds.
#WelcomeToTheInbox
![Page 9: Wait. What just happened to my email?](https://reader033.vdocuments.site/reader033/viewer/2022051503/58705ac11a28aba2118b6675/html5/thumbnails/9.jpg)
Welcome to the inboxes
![Page 10: Wait. What just happened to my email?](https://reader033.vdocuments.site/reader033/viewer/2022051503/58705ac11a28aba2118b6675/html5/thumbnails/10.jpg)
![Page 11: Wait. What just happened to my email?](https://reader033.vdocuments.site/reader033/viewer/2022051503/58705ac11a28aba2118b6675/html5/thumbnails/11.jpg)
Mobile complicates things
![Page 12: Wait. What just happened to my email?](https://reader033.vdocuments.site/reader033/viewer/2022051503/58705ac11a28aba2118b6675/html5/thumbnails/12.jpg)
![Page 14: Wait. What just happened to my email?](https://reader033.vdocuments.site/reader033/viewer/2022051503/58705ac11a28aba2118b6675/html5/thumbnails/14.jpg)
![Page 15: Wait. What just happened to my email?](https://reader033.vdocuments.site/reader033/viewer/2022051503/58705ac11a28aba2118b6675/html5/thumbnails/15.jpg)
The Web ≠ Email
#WelcomeToTheInbox
![Page 16: Wait. What just happened to my email?](https://reader033.vdocuments.site/reader033/viewer/2022051503/58705ac11a28aba2118b6675/html5/thumbnails/16.jpg)
![Page 17: Wait. What just happened to my email?](https://reader033.vdocuments.site/reader033/viewer/2022051503/58705ac11a28aba2118b6675/html5/thumbnails/17.jpg)
![Page 18: Wait. What just happened to my email?](https://reader033.vdocuments.site/reader033/viewer/2022051503/58705ac11a28aba2118b6675/html5/thumbnails/18.jpg)
What can actually go wrong?
#WelcomeToTheInbox
![Page 19: Wait. What just happened to my email?](https://reader033.vdocuments.site/reader033/viewer/2022051503/58705ac11a28aba2118b6675/html5/thumbnails/19.jpg)
Broken & missing images
![Page 20: Wait. What just happened to my email?](https://reader033.vdocuments.site/reader033/viewer/2022051503/58705ac11a28aba2118b6675/html5/thumbnails/20.jpg)
Broken & blue links
![Page 21: Wait. What just happened to my email?](https://reader033.vdocuments.site/reader033/viewer/2022051503/58705ac11a28aba2118b6675/html5/thumbnails/21.jpg)
Broken layouts
![Page 22: Wait. What just happened to my email?](https://reader033.vdocuments.site/reader033/viewer/2022051503/58705ac11a28aba2118b6675/html5/thumbnails/22.jpg)
How do you find these problems before your subscribers?
#WelcomeToTheInbox
![Page 23: Wait. What just happened to my email?](https://reader033.vdocuments.site/reader033/viewer/2022051503/58705ac11a28aba2118b6675/html5/thumbnails/23.jpg)
We’ll have to run a test…
#WelcomeToTheInbox
![Page 24: Wait. What just happened to my email?](https://reader033.vdocuments.site/reader033/viewer/2022051503/58705ac11a28aba2118b6675/html5/thumbnails/24.jpg)
![Page 25: Wait. What just happened to my email?](https://reader033.vdocuments.site/reader033/viewer/2022051503/58705ac11a28aba2118b6675/html5/thumbnails/25.jpg)
0
22.5
45
67.5
90 High base costs favor big changes
![Page 26: Wait. What just happened to my email?](https://reader033.vdocuments.site/reader033/viewer/2022051503/58705ac11a28aba2118b6675/html5/thumbnails/26.jpg)
Which is why transactional emails so often get left behind
![Page 27: Wait. What just happened to my email?](https://reader033.vdocuments.site/reader033/viewer/2022051503/58705ac11a28aba2118b6675/html5/thumbnails/27.jpg)
Perfect, now never move ever again.
![Page 28: Wait. What just happened to my email?](https://reader033.vdocuments.site/reader033/viewer/2022051503/58705ac11a28aba2118b6675/html5/thumbnails/28.jpg)
0
15
30
45
60Faster testing makes smaller changes more practical
![Page 29: Wait. What just happened to my email?](https://reader033.vdocuments.site/reader033/viewer/2022051503/58705ac11a28aba2118b6675/html5/thumbnails/29.jpg)
Smaller changes = better feedback and more control
#WelcomeToTheInbox
![Page 30: Wait. What just happened to my email?](https://reader033.vdocuments.site/reader033/viewer/2022051503/58705ac11a28aba2118b6675/html5/thumbnails/30.jpg)
Data DeliveryDesign
#WelcomeToTheInbox
![Page 31: Wait. What just happened to my email?](https://reader033.vdocuments.site/reader033/viewer/2022051503/58705ac11a28aba2118b6675/html5/thumbnails/31.jpg)
![Page 32: Wait. What just happened to my email?](https://reader033.vdocuments.site/reader033/viewer/2022051503/58705ac11a28aba2118b6675/html5/thumbnails/32.jpg)
![Page 33: Wait. What just happened to my email?](https://reader033.vdocuments.site/reader033/viewer/2022051503/58705ac11a28aba2118b6675/html5/thumbnails/33.jpg)
Let’s look at these again…
#WelcomeToTheInbox
![Page 34: Wait. What just happened to my email?](https://reader033.vdocuments.site/reader033/viewer/2022051503/58705ac11a28aba2118b6675/html5/thumbnails/34.jpg)
Broken imagesBlue links
Broken layouts
#WelcomeToTheInbox
![Page 35: Wait. What just happened to my email?](https://reader033.vdocuments.site/reader033/viewer/2022051503/58705ac11a28aba2118b6675/html5/thumbnails/35.jpg)
Broken images
![Page 36: Wait. What just happened to my email?](https://reader033.vdocuments.site/reader033/viewer/2022051503/58705ac11a28aba2118b6675/html5/thumbnails/36.jpg)
Web
Relative paths work
src=“/img/hero.jpg”
Image paths
Only absolute paths
src=“http://example.com/img/hero.jpg”
![Page 37: Wait. What just happened to my email?](https://reader033.vdocuments.site/reader033/viewer/2022051503/58705ac11a28aba2118b6675/html5/thumbnails/37.jpg)
ALT textInclude 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;”>
![Page 38: Wait. What just happened to my email?](https://reader033.vdocuments.site/reader033/viewer/2022051503/58705ac11a28aba2118b6675/html5/thumbnails/38.jpg)
Web
Relative paths work
href=“/about.html”
Broken links
Only absolute paths
href=“http://example.com/about.html”
![Page 39: Wait. What just happened to my email?](https://reader033.vdocuments.site/reader033/viewer/2022051503/58705ac11a28aba2118b6675/html5/thumbnails/39.jpg)
Blue linksPresent design problems
Colors are off-brand
Accessibility concerns
Low contrast text = unreadable
![Page 40: Wait. What just happened to my email?](https://reader033.vdocuments.site/reader033/viewer/2022051503/58705ac11a28aba2118b6675/html5/thumbnails/40.jpg)
Old fix
Wrap suspect text and style using CSS
.blue-links a { color: #888888 !important; }
<span class=“blue-links”>March 10</span>
Blue links
![Page 41: Wait. What just happened to my email?](https://reader033.vdocuments.site/reader033/viewer/2022051503/58705ac11a28aba2118b6675/html5/thumbnails/41.jpg)
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;
}
![Page 42: Wait. What just happened to my email?](https://reader033.vdocuments.site/reader033/viewer/2022051503/58705ac11a28aba2118b6675/html5/thumbnails/42.jpg)
Broken layouts
![Page 43: Wait. What just happened to my email?](https://reader033.vdocuments.site/reader033/viewer/2022051503/58705ac11a28aba2118b6675/html5/thumbnails/43.jpg)
Always remember:The Web ≠ Email
#WelcomeToTheInbox
![Page 44: Wait. What just happened to my email?](https://reader033.vdocuments.site/reader033/viewer/2022051503/58705ac11a28aba2118b6675/html5/thumbnails/44.jpg)
divs for structure
floats
external stylesheets
shorthand properties & values
When coding…
tables for structure
align attribute
inline CSS
explicit properties & values
![Page 45: Wait. What just happened to my email?](https://reader033.vdocuments.site/reader033/viewer/2022051503/58705ac11a28aba2118b6675/html5/thumbnails/45.jpg)
<h1>
<p>
<img>
<a class=“button”>
Instead of positioned elements…
![Page 46: Wait. What just happened to my email?](https://reader033.vdocuments.site/reader033/viewer/2022051503/58705ac11a28aba2118b6675/html5/thumbnails/46.jpg)
<tr><td>
Use table rows and cells…
<tr><td>
<tr><td>
<tr><td>
![Page 47: Wait. What just happened to my email?](https://reader033.vdocuments.site/reader033/viewer/2022051503/58705ac11a28aba2118b6675/html5/thumbnails/47.jpg)
Modular designTable rows & cellsFor every section
Emails as LEGOMakes building different templates & troubleshooting easy
ModuleHEADER
ModuleHERO IMAGE
ModuleCOPY BLOCK
ModuleCTA BUTTON
ModuleFOOTER
![Page 48: Wait. What just happened to my email?](https://reader033.vdocuments.site/reader033/viewer/2022051503/58705ac11a28aba2118b6675/html5/thumbnails/48.jpg)
Inline your CSSNo linked stylesheetsMost email clients won’t display them
Embedded for enhancementsUse styles in the <head> for progressive enhancement
Inline for everything elseAll 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>
![Page 49: Wait. What just happened to my email?](https://reader033.vdocuments.site/reader033/viewer/2022051503/58705ac11a28aba2118b6675/html5/thumbnails/49.jpg)
Different device & screen sizes break a lot of emails
#WelcomeToTheInbox
![Page 50: Wait. What just happened to my email?](https://reader033.vdocuments.site/reader033/viewer/2022051503/58705ac11a28aba2118b6675/html5/thumbnails/50.jpg)
![Page 51: Wait. What just happened to my email?](https://reader033.vdocuments.site/reader033/viewer/2022051503/58705ac11a28aba2118b6675/html5/thumbnails/51.jpg)
Email approaches:Mobile aware, fluid,
and responsive
* In two varieties
*
![Page 52: Wait. What just happened to my email?](https://reader033.vdocuments.site/reader033/viewer/2022051503/58705ac11a28aba2118b6675/html5/thumbnails/52.jpg)
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
![Page 53: Wait. What just happened to my email?](https://reader033.vdocuments.site/reader033/viewer/2022051503/58705ac11a28aba2118b6675/html5/thumbnails/53.jpg)
FluidEmail width changes to fit inside the window
• Percentage-based widths• Adapts to fit the screen• Text wraps automatically
![Page 54: Wait. What just happened to my email?](https://reader033.vdocuments.site/reader033/viewer/2022051503/58705ac11a28aba2118b6675/html5/thumbnails/54.jpg)
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
![Page 55: Wait. What just happened to my email?](https://reader033.vdocuments.site/reader033/viewer/2022051503/58705ac11a28aba2118b6675/html5/thumbnails/55.jpg)
![Page 56: Wait. What just happened to my email?](https://reader033.vdocuments.site/reader033/viewer/2022051503/58705ac11a28aba2118b6675/html5/thumbnails/56.jpg)
TraditionalResponsive
![Page 57: Wait. What just happened to my email?](https://reader033.vdocuments.site/reader033/viewer/2022051503/58705ac11a28aba2118b6675/html5/thumbnails/57.jpg)
Traditional Responsive• Relies on CSS media queries• Makes images fluid on mobile• Makes tables fluid on mobile• Tons of control over content
![Page 58: Wait. What just happened to my email?](https://reader033.vdocuments.site/reader033/viewer/2022051503/58705ac11a28aba2118b6675/html5/thumbnails/58.jpg)
Not supportedEverywhere*
*Looking at you, Gmail… Inbox by Gmail (iOS) Mail (iOS)
![Page 59: Wait. What just happened to my email?](https://reader033.vdocuments.site/reader033/viewer/2022051503/58705ac11a28aba2118b6675/html5/thumbnails/59.jpg)
Spongy /HybridApproach
![Page 60: Wait. What just happened to my email?](https://reader033.vdocuments.site/reader033/viewer/2022051503/58705ac11a28aba2118b6675/html5/thumbnails/60.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]-->
![Page 61: Wait. What just happened to my email?](https://reader033.vdocuments.site/reader033/viewer/2022051503/58705ac11a28aba2118b6675/html5/thumbnails/61.jpg)
“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
![Page 62: Wait. What just happened to my email?](https://reader033.vdocuments.site/reader033/viewer/2022051503/58705ac11a28aba2118b6675/html5/thumbnails/62.jpg)
Works everywhere DesktopAndroidGmailiOSWebmail
![Page 63: Wait. What just happened to my email?](https://reader033.vdocuments.site/reader033/viewer/2022051503/58705ac11a28aba2118b6675/html5/thumbnails/63.jpg)
Keep all of that in mind and email can be wonderful
(even transactional!)
#WelcomeToTheInbox
![Page 64: Wait. What just happened to my email?](https://reader033.vdocuments.site/reader033/viewer/2022051503/58705ac11a28aba2118b6675/html5/thumbnails/64.jpg)
![Page 65: Wait. What just happened to my email?](https://reader033.vdocuments.site/reader033/viewer/2022051503/58705ac11a28aba2118b6675/html5/thumbnails/65.jpg)
Always be testing
#WelcomeToTheInbox
![Page 66: Wait. What just happened to my email?](https://reader033.vdocuments.site/reader033/viewer/2022051503/58705ac11a28aba2118b6675/html5/thumbnails/66.jpg)
Check out these resources…
#WelcomeToTheInbox
![Page 69: Wait. What just happened to my email?](https://reader033.vdocuments.site/reader033/viewer/2022051503/58705ac11a28aba2118b6675/html5/thumbnails/69.jpg)
Sendwithus Open Source Templatessendwithus.com/resources/templates
Litmus Communitylitmus.com/community
Litmus Bloglitmus.com/blog
![Page 70: Wait. What just happened to my email?](https://reader033.vdocuments.site/reader033/viewer/2022051503/58705ac11a28aba2118b6675/html5/thumbnails/70.jpg)
Litmus Communityhttp://bit.ly/1KogqN1
Q&A TimeType your questions in the chat window
Try Sendwithus freesendwithus.com/pricing
Try Litmus free for 14 dayslitmus.com/coupon/WelcomeToTheInbox
Join the discussion