interactive responsive emails - creative ways to innovate in email development
TRANSCRIPT
Interactive Responsive Emails Creative ways to innovate in email development
Thank you ThoughtWorks!
Speak at my meetupsManhattan DW Meetup GroupLatino Web Developers NYC
• Responsive Emails• Mobile dominance• Analytics & Screen sizes• Mobile Apps• Samples• Document structure• Using Hover effects• Using HTML form elements• CSS3 Animations• Tracking issues
Interactive Responsive Emails
Why are email so lame?
Email development has not changed much since MIME was implemented, this allowed to send emails in the form of HTML. Email is a complementary service and there is very poor business case over improving HTML and CSS support. Most efforts go into SPAM control, , capacity, security and presentation. Today, emails have the best ROI when compared to other digital marketing channels.
Responsive Emails
@media only screen and (max-width: 600px) { }
Responsive emails are HTML emails that use CSS media queries. These rules are mostly used to re-size HTML
table elements and change font sizes.
Main features of Responsive emails• Use media queries to adjust email width dependent on the size of
the display on which its viewed. That way, the email’s width adapts to any display size in any orientation.
• Font sizes change from desktop to mobile displays. Several different display sizes can be targeted using different media queries
• Layout can be changed from multi-column to single-column on the fly.
• Different elements (image-based buttons, for example) can be hidden and shown dependent on which platform the email is viewed on.
• Can use advanced CSS3
@media only screen and (max-width: 600px) {/** font styles **/*[class].f14{ font-size:14px !important; line-height:17px !important; }
/** widths **/*[class].w380 { width:380px !important; }*[class].w320 { width:320px !important; }
/** heights **/*[class].h320{ height:320px !important; }*[class].h30{ height:30px !important; }*[class].h20{ height:20px !important; }}
<table width="500" border="0" align="center" cellpadding="0" cellspacing="0" class="w320"><tr><td width="500" class="w320">
<div style="font-family:Arial, Helvetica, sans-serif; font-size: 17px; line-height:20px; color:#000000;" class="f14">This is my header</div>
<table width="1" border="0" cellspacing="0" cellpadding="0" align="center"><tr><td width="1" height="10" class="h30"><img style="display:block;" src="images/spacer.gif" width="1" height="10" border="0" class="h30"></td></tr></table>
<div style="font-family:Arial, Helvetica, sans-serif; font-size: 12px; line-height:20px; color:#000000;">This is the body of the email</div>
</td></tr></table>
Flexible Emails
Flexible emails use %widths and table floats to allow the containers to re-size rather than convert to new widths.
Flexible emails are very hard to code and do not allow for complex layout. They can be very problematic with popular with email clients such Outlook and Gmail
Mobile Friendly
Are emails that are designed to be readable on both, desktop and mobile email clients. They are very modular, and use large typography to compensate for any automatic re-sizing on mobile apps.
Why bother with Responsive Emails?
80% of people delete an email if it doesn’t look good on their mobile device
56% of all email opens occur in mobile devices.
With responsive email design, you can ensure an optimal experience across platforms and devices, resulting in greater impact with your
messages and higher ROI on your marketing efforts. Responsive emails are not longer the exception, they have become the standard.
-Mobile is king-
Apple iPhone 32.91%Gmail 15.64%
Apple iPad 11.58%Android 9.52%
Apple Mail 7.51%Outlook 7.3%
Yahoo! Mail 2.87%Outlook.com 2.57%
Windows Mail 1.41%Windows Live Mail 1.04%
https://litmus.com/blog/mobile-market-share-drops-for-the-first-time-since-january-to-54
Litmus’ Email Analytics June 2016
“Designing emails for a mobile screen forces you to be ruthless with your content and aesthetic and makes you get to the point faster”
Tom Boates, VP of User Experience at RunKeeper.
Popular screen sizes for media Responsive email media queries
-320px--380px-
Mobile app and media queries
Outlook conditional statements<!--[if gte mso 9]> <style type="text/css"> a[href^=tel] {color: #295AA6;font-weight: bold; } </style><![endif]-->
<!--[if gte mso 9]><table><tr><td><![endif]-->
<!--[if gte mso 9]></table></tr></td><![endif]-->
BUGS!!!!!body {
-webkit-text-size-adjust: none;-ms-text-size-adjust: none;-webkit-animation: bugfix infinite 1s;
}
@-webkit-keyframes bugfix {from {padding:0;}to {padding: 0;}
Hover Technique
*[id]#hs_02:hover~#cs_02, *[id]#cs_02:hover {left: 0;}
*[id]#hs_02:hover~#inner_box, *[id]#cs_02:hover~#inner_box {left: -640px;}
*[id]#hs_03:hover~#inner_box, *[id]#cs_03:hover~#inner_box {left: -1280px;}
Uses the :hove pseudo selector to move an element left, causing the effect of sliding.
CheckBox Technique
*[id]#mobile-checkbox:checked + table #menu-wrapper { max-height: 130px;}
<input id="mobile-checkbox" style="display: none!important; max-height: 0; visibility: hidden;" type="checkbox">
<label for="mobile-checkbox" id="mobile-label" style="display: none;"></label>
Uses the adjacent selectors and the checkbox HTML form element. When the checkbox is checked, it will trigger the CSS rule that will affect the next HTML element in the code. The checkbox element is hidden. It needs to have a fix to hide it from Outlook. The order of the HTML elements is very important.
Animated BG Technique
@keyframes imageAnimation { 0% { background-image: url('images/image_1.jpg'); } 30% { background-image: url('images/image_1.jpg'); } 35% { background-image: url('images/image_2.jpg'); }
Uses the CSS3 Keyframe animation rules. The class is later applied to a container with as a background.
What is Next in Mobile Email?
More apps supporting responsive design.Email shopping cart solutionsGeotargeted modulesVideo on email improvementsAutomated templates
Using templates
There are a lot of template floating around in the web. They claim that they are compatible and have been tested, but they are heavy and full of features you might not need. Learn the principles and create your own templates.
Blogs and Resources
https://litmus.com/blog/
http://freshinbox.com/blog/
https://www.campaignmonitor.com/blog/
http://www.keynote.com/solutions/testing/mobile-testing