Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
Wait…
WHAT JUST HAPPENED
TO MY EMAIL?!?
#WelcomeToTheInbox
Jason Rodriguez
Community Manager, Litmus
@rodriguezcommaj
Marketing Lead, Sendwithus
@alexophile
Alex Mohr
Welcome to the inbox, nerds.
#WelcomeToTheInbox
Welcome to the inboxes
Mobile complicates things
Standards support sucks
Source: campaignmonitor.com/css
The Web ≠ Email
#WelcomeToTheInbox
What can actually go wrong?
#WelcomeToTheInbox
Broken & missing images
Broken & blue links
Broken layouts
How do you find these problems
before your subscribers?
#WelcomeToTheInbox
We’ll have to run a test…
#WelcomeToTheInbox
0
22.5
45
67.5
90
High base costs
favor big changes
Which is why transactional
emails so often get left behind
Perfect, now never move
ever again.
0
15
30
45
60
Faster testing makes smaller
changes more practical
Smaller changes =
better feedback
and more control
#WelcomeToTheInbox
Data DeliveryDesign
#WelcomeToTheInbox
Let’s look at these again…
#WelcomeToTheInbox
Broken images
Blue links
Broken layouts
#WelcomeToTheInbox
Broken images
Web
Relative paths work
src=“/img/hero.jpg”
Image paths
Email
Only absolute paths
src=“http://example.com/
img/hero.jpg”
ALT text
Include ALT text
Provides context
for missing images
<img src=“logo.jpg” width=“400″ height=“149″
alt=“Litmus” st...
Web
Relative paths work
href=“/about.html”
Broken links
Email
Only absolute paths
href=“http://example.com/
about.html”
Blue links
Present design problems
Colors are off-brand
Accessibility concerns
Low contrast text = unreadable
Old fix
Wrap suspect text and style using CSS
.blue-links a { color: #888888 !important; }
<span class=“blue-links”>March 1...
New fix
Put this in the <head> of your email:
Blue links
a[x-apple-data-detectors] {
color: inherit !important;
text-decora...
Broken layouts
Always remember:
The Web ≠ Email
#WelcomeToTheInbox
divs for structure
floats
external stylesheets
shorthand properties
& values
When coding…
tables for structure
align attri...
<h1>
<p>
<img>
<a class=“button”>
Instead of positioned elements…
<tr><td>
Use table rows and cells…
<tr><td>
<tr><td>
<tr><td>
Modular design
Table rows & cells
For every section
Emails as LEGO
Makes building different
templates & troubleshooting ea...
Inline your CSS
No linked stylesheets
Most email clients won’t display them
Embedded for enhancements
Use styles in the <h...
Different device & screen
sizes break a lot of emails
#WelcomeToTheInbox
Email approaches:
Mobile aware, fluid,
and responsive
* In two varieties
*
Mobile aware
• Considers the mobile user a priority
• One layout for all screen sizes
• Single column design; 320-500px
• ...
Fluid
Email width changes to fit
inside the window
• Percentage-based widths
• Adapts to fit the screen
• Text wraps automat...
Responsive
• Resize content: make images fit,
make text larger
• Hide content on mobile
• Stack columns
• Move a two-column...
Traditional
Responsive
Traditional Responsive
• Relies on CSS media queries
• Makes images fluid on mobile
• Makes tables fluid on mobile
• Tons of...
Not supported
Everywhere*
*Looking at you, Gmail… Inbox by Gmail (iOS) Mail (iOS)
Spongy /
Hybrid
Approach
Spongy (hybrid) approach
• Fluid-by-default tables
• Constrained tables using CSS
• Conditional tables for Outlook
• Conte...
“Hybrid” or “Spongy” email development
http://labs.actionrocket.co/the-hybrid-coding-approach
http://www.emaildesignreview...
Works everywhere Desktop
Android
Gmail
iOS
Webmail
Keep all of that in mind and
email can be wonderful
(even transactional!)
#WelcomeToTheInbox
Always be testing
#WelcomeToTheInbox
Check out these
resources…
#WelcomeToTheInbox
responsiveemailresources.com
‣ bit.ly/slate-templates
SLATE TEMPLATES
Sendwithus Open Source Templates
sendwithus.com/resources/templates
Litmus Community
litmus.com/community
Litmus Blog
litm...
Litmus Community
http://bit.ly/1KogqN1
Q&A Time
Type your questions in the chat window
Try Sendwithus free
sendwithus.com/...
Wait. What just happened to my email?
Wait. What just happened to my email?
Wait. What just happened to my email?
Wait. What just happened to my email?
Wait. What just happened to my email?
Wait. What just happened to my email?
Wait. What just happened to my email?
Wait. What just happened to my email?
Wait. What just happened to my email?
Wait. What just happened to my email?
Wait. What just happened to my email?
Wait. What just happened to my email?
Wait. What just happened to my email?
Wait. What just happened to my email?
Wait. What just happened to my email?
Wait. What just happened to my email?
Upcoming SlideShare
Loading in …5
×

Wait. What just happened to my email?

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.

Related Books

Free with a 30 day trial from Scribd

See all
  • Be the first to comment

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
  3. Welcome to the inbox, nerds. #WelcomeToTheInbox
  4. Welcome to the inboxes
  5. Mobile complicates things
  6. Standards support sucks Source: campaignmonitor.com/css
  7. The Web ≠ Email #WelcomeToTheInbox
  8. What can actually go wrong? #WelcomeToTheInbox
  9. Broken & missing images
  10. Broken & blue links
  11. Broken layouts
  12. How do you find these problems before your subscribers? #WelcomeToTheInbox
  13. We’ll have to run a test… #WelcomeToTheInbox
  14. 0 22.5 45 67.5 90 High base costs favor big changes
  15. Which is why transactional emails so often get left behind
  16. Perfect, now never move ever again.
  17. 0 15 30 45 60 Faster testing makes smaller changes more practical
  18. Smaller changes = better feedback and more control #WelcomeToTheInbox
  19. Data DeliveryDesign #WelcomeToTheInbox
  20. Let’s look at these again… #WelcomeToTheInbox
  21. Broken images Blue links Broken layouts #WelcomeToTheInbox
  22. Broken images
  23. Web Relative paths work src=“/img/hero.jpg” Image paths Email Only absolute paths src=“http://example.com/ img/hero.jpg”
  24. 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;”>
  25. Web Relative paths work href=“/about.html” Broken links Email Only absolute paths href=“http://example.com/ about.html”
  26. Blue links Present design problems Colors are off-brand Accessibility concerns Low contrast text = unreadable
  27. Old fix Wrap suspect text and style using CSS .blue-links a { color: #888888 !important; } <span class=“blue-links”>March 10</span> Blue links
  28. 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; }
  29. Broken layouts
  30. Always remember: The Web ≠ Email #WelcomeToTheInbox
  31. divs for structure floats external stylesheets shorthand properties & values When coding… tables for structure align attribute inline CSS explicit properties & values
  32. <h1> <p> <img> <a class=“button”> Instead of positioned elements…
  33. <tr><td> Use table rows and cells… <tr><td> <tr><td> <tr><td>
  34. 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
  35. 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>
  36. Different device & screen sizes break a lot of emails #WelcomeToTheInbox
  37. Email approaches: Mobile aware, fluid, and responsive * In two varieties *
  38. 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
  39. Fluid Email width changes to fit inside the window • Percentage-based widths • Adapts to fit the screen • Text wraps automatically
  40. 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
  41. Traditional Responsive
  42. Traditional Responsive • Relies on CSS media queries • Makes images fluid on mobile • Makes tables fluid on mobile • Tons of control over content
  43. Not supported Everywhere* *Looking at you, Gmail… Inbox by Gmail (iOS) Mail (iOS)
  44. Spongy / Hybrid Approach
  45. 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]-->
  46. “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
  47. Works everywhere Desktop Android Gmail iOS Webmail
  48. Keep all of that in mind and email can be wonderful (even transactional!) #WelcomeToTheInbox
  49. Always be testing #WelcomeToTheInbox
  50. Check out these resources… #WelcomeToTheInbox
  51. responsiveemailresources.com
  52. ‣ bit.ly/slate-templates SLATE TEMPLATES
  53. Sendwithus Open Source Templates sendwithus.com/resources/templates Litmus Community litmus.com/community Litmus Blog litmus.com/blog
  54. 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

×