Interactive Responsive Emails - Creative ways to innovate in email development
-
Upload
michael-posso -
Category
Marketing
-
view
62 -
download
0
Transcript of Interactive Responsive Emails - Creative ways to innovate in email development
![Page 1: Interactive Responsive Emails - Creative ways to innovate in email development](https://reader036.fdocuments.us/reader036/viewer/2022062522/58841d141a28ab485c8b4bb3/html5/thumbnails/1.jpg)
Interactive Responsive Emails Creative ways to innovate in email development
![Page 3: Interactive Responsive Emails - Creative ways to innovate in email development](https://reader036.fdocuments.us/reader036/viewer/2022062522/58841d141a28ab485c8b4bb3/html5/thumbnails/3.jpg)
Thank you ThoughtWorks!
![Page 4: Interactive Responsive Emails - Creative ways to innovate in email development](https://reader036.fdocuments.us/reader036/viewer/2022062522/58841d141a28ab485c8b4bb3/html5/thumbnails/4.jpg)
Speak at my meetupsManhattan DW Meetup GroupLatino Web Developers NYC
![Page 5: Interactive Responsive Emails - Creative ways to innovate in email development](https://reader036.fdocuments.us/reader036/viewer/2022062522/58841d141a28ab485c8b4bb3/html5/thumbnails/5.jpg)
• 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
![Page 6: Interactive Responsive Emails - Creative ways to innovate in email development](https://reader036.fdocuments.us/reader036/viewer/2022062522/58841d141a28ab485c8b4bb3/html5/thumbnails/6.jpg)
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.
![Page 7: Interactive Responsive Emails - Creative ways to innovate in email development](https://reader036.fdocuments.us/reader036/viewer/2022062522/58841d141a28ab485c8b4bb3/html5/thumbnails/7.jpg)
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.
![Page 8: Interactive Responsive Emails - Creative ways to innovate in email development](https://reader036.fdocuments.us/reader036/viewer/2022062522/58841d141a28ab485c8b4bb3/html5/thumbnails/8.jpg)
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
![Page 9: Interactive Responsive Emails - Creative ways to innovate in email development](https://reader036.fdocuments.us/reader036/viewer/2022062522/58841d141a28ab485c8b4bb3/html5/thumbnails/9.jpg)
@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; }}
![Page 10: Interactive Responsive Emails - Creative ways to innovate in email development](https://reader036.fdocuments.us/reader036/viewer/2022062522/58841d141a28ab485c8b4bb3/html5/thumbnails/10.jpg)
<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>
![Page 11: Interactive Responsive Emails - Creative ways to innovate in email development](https://reader036.fdocuments.us/reader036/viewer/2022062522/58841d141a28ab485c8b4bb3/html5/thumbnails/11.jpg)
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
![Page 12: Interactive Responsive Emails - Creative ways to innovate in email development](https://reader036.fdocuments.us/reader036/viewer/2022062522/58841d141a28ab485c8b4bb3/html5/thumbnails/12.jpg)
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.
![Page 14: Interactive Responsive Emails - Creative ways to innovate in email development](https://reader036.fdocuments.us/reader036/viewer/2022062522/58841d141a28ab485c8b4bb3/html5/thumbnails/14.jpg)
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.
![Page 15: Interactive Responsive Emails - Creative ways to innovate in email development](https://reader036.fdocuments.us/reader036/viewer/2022062522/58841d141a28ab485c8b4bb3/html5/thumbnails/15.jpg)
-Mobile is king-
![Page 16: Interactive Responsive Emails - Creative ways to innovate in email development](https://reader036.fdocuments.us/reader036/viewer/2022062522/58841d141a28ab485c8b4bb3/html5/thumbnails/16.jpg)
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
![Page 17: Interactive Responsive Emails - Creative ways to innovate in email development](https://reader036.fdocuments.us/reader036/viewer/2022062522/58841d141a28ab485c8b4bb3/html5/thumbnails/17.jpg)
“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.
![Page 18: Interactive Responsive Emails - Creative ways to innovate in email development](https://reader036.fdocuments.us/reader036/viewer/2022062522/58841d141a28ab485c8b4bb3/html5/thumbnails/18.jpg)
Popular screen sizes for media Responsive email media queries
-320px--380px-
![Page 19: Interactive Responsive Emails - Creative ways to innovate in email development](https://reader036.fdocuments.us/reader036/viewer/2022062522/58841d141a28ab485c8b4bb3/html5/thumbnails/19.jpg)
Mobile app and media queries
![Page 20: Interactive Responsive Emails - Creative ways to innovate in email development](https://reader036.fdocuments.us/reader036/viewer/2022062522/58841d141a28ab485c8b4bb3/html5/thumbnails/20.jpg)
![Page 21: Interactive Responsive Emails - Creative ways to innovate in email development](https://reader036.fdocuments.us/reader036/viewer/2022062522/58841d141a28ab485c8b4bb3/html5/thumbnails/21.jpg)
![Page 22: Interactive Responsive Emails - Creative ways to innovate in email development](https://reader036.fdocuments.us/reader036/viewer/2022062522/58841d141a28ab485c8b4bb3/html5/thumbnails/22.jpg)
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]-->
![Page 23: Interactive Responsive Emails - Creative ways to innovate in email development](https://reader036.fdocuments.us/reader036/viewer/2022062522/58841d141a28ab485c8b4bb3/html5/thumbnails/23.jpg)
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;}
![Page 24: Interactive Responsive Emails - Creative ways to innovate in email development](https://reader036.fdocuments.us/reader036/viewer/2022062522/58841d141a28ab485c8b4bb3/html5/thumbnails/24.jpg)
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.
![Page 25: Interactive Responsive Emails - Creative ways to innovate in email development](https://reader036.fdocuments.us/reader036/viewer/2022062522/58841d141a28ab485c8b4bb3/html5/thumbnails/25.jpg)
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.
![Page 26: Interactive Responsive Emails - Creative ways to innovate in email development](https://reader036.fdocuments.us/reader036/viewer/2022062522/58841d141a28ab485c8b4bb3/html5/thumbnails/26.jpg)
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.
![Page 27: Interactive Responsive Emails - Creative ways to innovate in email development](https://reader036.fdocuments.us/reader036/viewer/2022062522/58841d141a28ab485c8b4bb3/html5/thumbnails/27.jpg)
What is Next in Mobile Email?
More apps supporting responsive design.Email shopping cart solutionsGeotargeted modulesVideo on email improvementsAutomated templates
![Page 28: Interactive Responsive Emails - Creative ways to innovate in email development](https://reader036.fdocuments.us/reader036/viewer/2022062522/58841d141a28ab485c8b4bb3/html5/thumbnails/28.jpg)
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.
![Page 29: Interactive Responsive Emails - Creative ways to innovate in email development](https://reader036.fdocuments.us/reader036/viewer/2022062522/58841d141a28ab485c8b4bb3/html5/thumbnails/29.jpg)
Blogs and Resources
https://litmus.com/blog/
http://freshinbox.com/blog/
https://www.campaignmonitor.com/blog/
http://www.keynote.com/solutions/testing/mobile-testing