SlideShare a Scribd company logo
Interactive Responsive Emails
Creative ways to innovate in email
development
Michael Posso
Web Developer / Oracle Marketing Cloud
@micposso
micposso@gmail.com
Thank you ThoughtWorks!
Speak at my meetups
Manhattan DW Meetup Group
Latino 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.
https://www.campaignmonitor.com/css/
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 solutions
Geotargeted modules
Video on email improvements
Automated 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/mo
bile-testing

More Related Content

Similar to Interactive Responsive Emails - Creative ways to innovate in email development

Email Design Workshop - Don't Let Bad Email Code Ruin Your Day or Your Results
Email Design Workshop - Don't Let Bad Email Code Ruin Your Day or Your ResultsEmail Design Workshop - Don't Let Bad Email Code Ruin Your Day or Your Results
Email Design Workshop - Don't Let Bad Email Code Ruin Your Day or Your Results
Shana Masterson
 
Email dssign rules
Email dssign rulesEmail dssign rules
Email dssign rules
Markandey Singh
 
Responsive Web Design (April 18th, Los Angeles)
Responsive Web Design (April 18th, Los Angeles)Responsive Web Design (April 18th, Los Angeles)
Responsive Web Design (April 18th, Los Angeles)
Thinkful
 
Tips & tricks to render your email correctly on all devices
Tips & tricks to render your email correctly on all devicesTips & tricks to render your email correctly on all devices
Tips & tricks to render your email correctly on all devices
Copernica BV
 
World wide web with multimedia
World wide web with multimediaWorld wide web with multimedia
World wide web with multimedia
Afaq Siddiqui
 
Troubleshooting Email Like a Pro
Troubleshooting Email Like a ProTroubleshooting Email Like a Pro
Troubleshooting Email Like a Pro
Litmus
 
Deepika Mittal , BCA Third Year
Deepika Mittal , BCA Third YearDeepika Mittal , BCA Third Year
Deepika Mittal , BCA Third Year
dezyneecole
 
css.ppt
css.pptcss.ppt
css.ppt
Sana903754
 
css.ppt
css.pptcss.ppt
HTML Web Devlopment presentation css.ppt
HTML Web Devlopment presentation css.pptHTML Web Devlopment presentation css.ppt
HTML Web Devlopment presentation css.ppt
raghavanp4
 
Responsive Email Design and Development
Responsive Email Design and DevelopmentResponsive Email Design and Development
Responsive Email Design and Development
ladyheatherly
 
01 Introduction To CSS
01 Introduction To CSS01 Introduction To CSS
01 Introduction To CSS
crgwbr
 
Lect-4-Responsive-Web-06032024-082044am.pptx
Lect-4-Responsive-Web-06032024-082044am.pptxLect-4-Responsive-Web-06032024-082044am.pptx
Lect-4-Responsive-Web-06032024-082044am.pptx
zainm7032
 
Making Your Site Look Great in IE7
Making Your Site Look Great in IE7Making Your Site Look Great in IE7
Making Your Site Look Great in IE7
goodfriday
 
GDI Seattle Intermediate HTML and CSS Class 1
GDI Seattle Intermediate HTML and CSS Class 1GDI Seattle Intermediate HTML and CSS Class 1
GDI Seattle Intermediate HTML and CSS Class 1
Heather Rock
 
Slow kinda sucks
Slow kinda sucksSlow kinda sucks
Slow kinda sucks
Tim Wright
 
Css best practices style guide and tips
Css best practices style guide and tipsCss best practices style guide and tips
Css best practices style guide and tips
Chris Love
 
Cssbestpracticesjstyleguidejandtips 150830184202-lva1-app6892
Cssbestpracticesjstyleguidejandtips 150830184202-lva1-app6892Cssbestpracticesjstyleguidejandtips 150830184202-lva1-app6892
Cssbestpracticesjstyleguidejandtips 150830184202-lva1-app6892
Deepak Sharma
 
Module 4 Minuteman Lexington Web Design Daniel Downs
Module 4 Minuteman Lexington Web Design Daniel DownsModule 4 Minuteman Lexington Web Design Daniel Downs
Module 4 Minuteman Lexington Web Design Daniel Downs
Daniel Downs
 
Controlling Web Typography
Controlling Web TypographyControlling Web Typography
Controlling Web Typography
Trent Walton
 

Similar to Interactive Responsive Emails - Creative ways to innovate in email development (20)

Email Design Workshop - Don't Let Bad Email Code Ruin Your Day or Your Results
Email Design Workshop - Don't Let Bad Email Code Ruin Your Day or Your ResultsEmail Design Workshop - Don't Let Bad Email Code Ruin Your Day or Your Results
Email Design Workshop - Don't Let Bad Email Code Ruin Your Day or Your Results
 
Email dssign rules
Email dssign rulesEmail dssign rules
Email dssign rules
 
Responsive Web Design (April 18th, Los Angeles)
Responsive Web Design (April 18th, Los Angeles)Responsive Web Design (April 18th, Los Angeles)
Responsive Web Design (April 18th, Los Angeles)
 
Tips & tricks to render your email correctly on all devices
Tips & tricks to render your email correctly on all devicesTips & tricks to render your email correctly on all devices
Tips & tricks to render your email correctly on all devices
 
World wide web with multimedia
World wide web with multimediaWorld wide web with multimedia
World wide web with multimedia
 
Troubleshooting Email Like a Pro
Troubleshooting Email Like a ProTroubleshooting Email Like a Pro
Troubleshooting Email Like a Pro
 
Deepika Mittal , BCA Third Year
Deepika Mittal , BCA Third YearDeepika Mittal , BCA Third Year
Deepika Mittal , BCA Third Year
 
css.ppt
css.pptcss.ppt
css.ppt
 
css.ppt
css.pptcss.ppt
css.ppt
 
HTML Web Devlopment presentation css.ppt
HTML Web Devlopment presentation css.pptHTML Web Devlopment presentation css.ppt
HTML Web Devlopment presentation css.ppt
 
Responsive Email Design and Development
Responsive Email Design and DevelopmentResponsive Email Design and Development
Responsive Email Design and Development
 
01 Introduction To CSS
01 Introduction To CSS01 Introduction To CSS
01 Introduction To CSS
 
Lect-4-Responsive-Web-06032024-082044am.pptx
Lect-4-Responsive-Web-06032024-082044am.pptxLect-4-Responsive-Web-06032024-082044am.pptx
Lect-4-Responsive-Web-06032024-082044am.pptx
 
Making Your Site Look Great in IE7
Making Your Site Look Great in IE7Making Your Site Look Great in IE7
Making Your Site Look Great in IE7
 
GDI Seattle Intermediate HTML and CSS Class 1
GDI Seattle Intermediate HTML and CSS Class 1GDI Seattle Intermediate HTML and CSS Class 1
GDI Seattle Intermediate HTML and CSS Class 1
 
Slow kinda sucks
Slow kinda sucksSlow kinda sucks
Slow kinda sucks
 
Css best practices style guide and tips
Css best practices style guide and tipsCss best practices style guide and tips
Css best practices style guide and tips
 
Cssbestpracticesjstyleguidejandtips 150830184202-lva1-app6892
Cssbestpracticesjstyleguidejandtips 150830184202-lva1-app6892Cssbestpracticesjstyleguidejandtips 150830184202-lva1-app6892
Cssbestpracticesjstyleguidejandtips 150830184202-lva1-app6892
 
Module 4 Minuteman Lexington Web Design Daniel Downs
Module 4 Minuteman Lexington Web Design Daniel DownsModule 4 Minuteman Lexington Web Design Daniel Downs
Module 4 Minuteman Lexington Web Design Daniel Downs
 
Controlling Web Typography
Controlling Web TypographyControlling Web Typography
Controlling Web Typography
 

Recently uploaded

How to Make Your Trade Show Booth Stand Out
How to Make Your Trade Show Booth Stand OutHow to Make Your Trade Show Booth Stand Out
How to Make Your Trade Show Booth Stand Out
Blue Atlas Marketing
 
Breaking Silos To Break Bank: Shattering The Divide Between Search And Social
Breaking Silos To Break Bank: Shattering The Divide Between Search And SocialBreaking Silos To Break Bank: Shattering The Divide Between Search And Social
Breaking Silos To Break Bank: Shattering The Divide Between Search And Social
Navah Hopkins
 
From Hope to Despair The Top 10 Reasons Businesses Ditch SEO Tactics.pptx
From Hope to Despair The Top 10 Reasons Businesses Ditch SEO Tactics.pptxFrom Hope to Despair The Top 10 Reasons Businesses Ditch SEO Tactics.pptx
From Hope to Despair The Top 10 Reasons Businesses Ditch SEO Tactics.pptx
Boston SEO Services
 
THE STORY COMMUNICATION Credential 2024.pptx
THE STORY COMMUNICATION Credential 2024.pptxTHE STORY COMMUNICATION Credential 2024.pptx
THE STORY COMMUNICATION Credential 2024.pptx
huyenngo62
 
From Subreddits To Search: Maximizing Your Brand's Impact On Reddit
From Subreddits To Search: Maximizing Your Brand's Impact On RedditFrom Subreddits To Search: Maximizing Your Brand's Impact On Reddit
From Subreddits To Search: Maximizing Your Brand's Impact On Reddit
Search Engine Journal
 
What Software is Used in Marketing in 2024.
What Software is Used in Marketing in 2024.What Software is Used in Marketing in 2024.
What Software is Used in Marketing in 2024.
Ishaaq6
 
01 Field+Guide+to+Human-Centered+Design_IDEOorg_English GUIA COMPLETA DETALLA...
01 Field+Guide+to+Human-Centered+Design_IDEOorg_English GUIA COMPLETA DETALLA...01 Field+Guide+to+Human-Centered+Design_IDEOorg_English GUIA COMPLETA DETALLA...
01 Field+Guide+to+Human-Centered+Design_IDEOorg_English GUIA COMPLETA DETALLA...
Jorge Calmett
 
Digital Marketing Trends - Experts Insights on How to Gain a Competitive Edge...
Digital Marketing Trends - Experts Insights on How to Gain a Competitive Edge...Digital Marketing Trends - Experts Insights on How to Gain a Competitive Edge...
Digital Marketing Trends - Experts Insights on How to Gain a Competitive Edge...
DigiMarCon - Digital Marketing, Media and Advertising Conferences & Exhibitions
 
No Cookies, No Problem - Steve Krull, Be Found Online
No Cookies, No Problem - Steve Krull, Be Found OnlineNo Cookies, No Problem - Steve Krull, Be Found Online
No Cookies, No Problem - Steve Krull, Be Found Online
DigiMarCon - Digital Marketing, Media and Advertising Conferences & Exhibitions
 
Boost Your Instagram Views Instantly Proven Free Strategies.
Boost Your Instagram Views Instantly Proven Free Strategies.Boost Your Instagram Views Instantly Proven Free Strategies.
Boost Your Instagram Views Instantly Proven Free Strategies.
InstBlast Marketing
 
Embark on style journeys Indian clothing store denver guide.pptx
Embark on style journeys Indian clothing store denver guide.pptxEmbark on style journeys Indian clothing store denver guide.pptx
Embark on style journeys Indian clothing store denver guide.pptx
Omnama Fashions
 
Influencer Marketing Master Class - Alexis Andreasik
Influencer Marketing Master Class - Alexis AndreasikInfluencer Marketing Master Class - Alexis Andreasik
Influencer Marketing Master Class - Alexis Andreasik
DigiMarCon - Digital Marketing, Media and Advertising Conferences & Exhibitions
 
Title: Making Money the Easy Way: A Quick Guide to Generating Income
Title: Making Money the Easy Way: A Quick Guide to Generating IncomeTitle: Making Money the Easy Way: A Quick Guide to Generating Income
Title: Making Money the Easy Way: A Quick Guide to Generating Income
WilliamZinsmeister
 
Story Telling Master Class - Jennifer Morilla
Story Telling Master Class - Jennifer MorillaStory Telling Master Class - Jennifer Morilla
Crafting Seamless B2B Customer Journeys - Strategies for Exceptional Experien...
Crafting Seamless B2B Customer Journeys - Strategies for Exceptional Experien...Crafting Seamless B2B Customer Journeys - Strategies for Exceptional Experien...
Crafting Seamless B2B Customer Journeys - Strategies for Exceptional Experien...
DigiMarCon - Digital Marketing, Media and Advertising Conferences & Exhibitions
 
Learn more about affiliate marketing as a beginner
Learn more about affiliate marketing as a beginnerLearn more about affiliate marketing as a beginner
Learn more about affiliate marketing as a beginner
MichaelGiles34
 
Content Marketing Blueprint For Content Strategy, content creation, content d...
Content Marketing Blueprint For Content Strategy, content creation, content d...Content Marketing Blueprint For Content Strategy, content creation, content d...
Content Marketing Blueprint For Content Strategy, content creation, content d...
Bertie Birchfield
 
PickUp_conversational AI_Capex, Inc._20240611
PickUp_conversational AI_Capex, Inc._20240611PickUp_conversational AI_Capex, Inc._20240611
PickUp_conversational AI_Capex, Inc._20240611
Shuntaro Kogame
 
Data-Driven Personalization - Build a Competitive Advantage by Knowing Your C...
Data-Driven Personalization - Build a Competitive Advantage by Knowing Your C...Data-Driven Personalization - Build a Competitive Advantage by Knowing Your C...
Data-Driven Personalization - Build a Competitive Advantage by Knowing Your C...
DigiMarCon - Digital Marketing, Media and Advertising Conferences & Exhibitions
 

Recently uploaded (20)

How to Make Your Trade Show Booth Stand Out
How to Make Your Trade Show Booth Stand OutHow to Make Your Trade Show Booth Stand Out
How to Make Your Trade Show Booth Stand Out
 
Breaking Silos To Break Bank: Shattering The Divide Between Search And Social
Breaking Silos To Break Bank: Shattering The Divide Between Search And SocialBreaking Silos To Break Bank: Shattering The Divide Between Search And Social
Breaking Silos To Break Bank: Shattering The Divide Between Search And Social
 
From Hope to Despair The Top 10 Reasons Businesses Ditch SEO Tactics.pptx
From Hope to Despair The Top 10 Reasons Businesses Ditch SEO Tactics.pptxFrom Hope to Despair The Top 10 Reasons Businesses Ditch SEO Tactics.pptx
From Hope to Despair The Top 10 Reasons Businesses Ditch SEO Tactics.pptx
 
THE STORY COMMUNICATION Credential 2024.pptx
THE STORY COMMUNICATION Credential 2024.pptxTHE STORY COMMUNICATION Credential 2024.pptx
THE STORY COMMUNICATION Credential 2024.pptx
 
Amazing and On Point - Ramon Ray, USA TODAY
Amazing and On Point - Ramon Ray, USA TODAYAmazing and On Point - Ramon Ray, USA TODAY
Amazing and On Point - Ramon Ray, USA TODAY
 
From Subreddits To Search: Maximizing Your Brand's Impact On Reddit
From Subreddits To Search: Maximizing Your Brand's Impact On RedditFrom Subreddits To Search: Maximizing Your Brand's Impact On Reddit
From Subreddits To Search: Maximizing Your Brand's Impact On Reddit
 
What Software is Used in Marketing in 2024.
What Software is Used in Marketing in 2024.What Software is Used in Marketing in 2024.
What Software is Used in Marketing in 2024.
 
01 Field+Guide+to+Human-Centered+Design_IDEOorg_English GUIA COMPLETA DETALLA...
01 Field+Guide+to+Human-Centered+Design_IDEOorg_English GUIA COMPLETA DETALLA...01 Field+Guide+to+Human-Centered+Design_IDEOorg_English GUIA COMPLETA DETALLA...
01 Field+Guide+to+Human-Centered+Design_IDEOorg_English GUIA COMPLETA DETALLA...
 
Digital Marketing Trends - Experts Insights on How to Gain a Competitive Edge...
Digital Marketing Trends - Experts Insights on How to Gain a Competitive Edge...Digital Marketing Trends - Experts Insights on How to Gain a Competitive Edge...
Digital Marketing Trends - Experts Insights on How to Gain a Competitive Edge...
 
No Cookies, No Problem - Steve Krull, Be Found Online
No Cookies, No Problem - Steve Krull, Be Found OnlineNo Cookies, No Problem - Steve Krull, Be Found Online
No Cookies, No Problem - Steve Krull, Be Found Online
 
Boost Your Instagram Views Instantly Proven Free Strategies.
Boost Your Instagram Views Instantly Proven Free Strategies.Boost Your Instagram Views Instantly Proven Free Strategies.
Boost Your Instagram Views Instantly Proven Free Strategies.
 
Embark on style journeys Indian clothing store denver guide.pptx
Embark on style journeys Indian clothing store denver guide.pptxEmbark on style journeys Indian clothing store denver guide.pptx
Embark on style journeys Indian clothing store denver guide.pptx
 
Influencer Marketing Master Class - Alexis Andreasik
Influencer Marketing Master Class - Alexis AndreasikInfluencer Marketing Master Class - Alexis Andreasik
Influencer Marketing Master Class - Alexis Andreasik
 
Title: Making Money the Easy Way: A Quick Guide to Generating Income
Title: Making Money the Easy Way: A Quick Guide to Generating IncomeTitle: Making Money the Easy Way: A Quick Guide to Generating Income
Title: Making Money the Easy Way: A Quick Guide to Generating Income
 
Story Telling Master Class - Jennifer Morilla
Story Telling Master Class - Jennifer MorillaStory Telling Master Class - Jennifer Morilla
Story Telling Master Class - Jennifer Morilla
 
Crafting Seamless B2B Customer Journeys - Strategies for Exceptional Experien...
Crafting Seamless B2B Customer Journeys - Strategies for Exceptional Experien...Crafting Seamless B2B Customer Journeys - Strategies for Exceptional Experien...
Crafting Seamless B2B Customer Journeys - Strategies for Exceptional Experien...
 
Learn more about affiliate marketing as a beginner
Learn more about affiliate marketing as a beginnerLearn more about affiliate marketing as a beginner
Learn more about affiliate marketing as a beginner
 
Content Marketing Blueprint For Content Strategy, content creation, content d...
Content Marketing Blueprint For Content Strategy, content creation, content d...Content Marketing Blueprint For Content Strategy, content creation, content d...
Content Marketing Blueprint For Content Strategy, content creation, content d...
 
PickUp_conversational AI_Capex, Inc._20240611
PickUp_conversational AI_Capex, Inc._20240611PickUp_conversational AI_Capex, Inc._20240611
PickUp_conversational AI_Capex, Inc._20240611
 
Data-Driven Personalization - Build a Competitive Advantage by Knowing Your C...
Data-Driven Personalization - Build a Competitive Advantage by Knowing Your C...Data-Driven Personalization - Build a Competitive Advantage by Knowing Your C...
Data-Driven Personalization - Build a Competitive Advantage by Knowing Your C...
 

Interactive Responsive Emails - Creative ways to innovate in email development

  • 1. Interactive Responsive Emails Creative ways to innovate in email development
  • 2. Michael Posso Web Developer / Oracle Marketing Cloud @micposso micposso@gmail.com
  • 4. Speak at my meetups Manhattan DW Meetup Group Latino Web Developers NYC
  • 5. • 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
  • 6. 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.
  • 7. 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.
  • 8. 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
  • 9. @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; } }
  • 10. <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>
  • 11. 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
  • 12. 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.
  • 14. 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.
  • 16. 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
  • 17. “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.
  • 18. Popular screen sizes for media Responsive email media queries -320px- -380px-
  • 19. Mobile app and media queries
  • 20.
  • 21.
  • 22. 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]-->
  • 23. 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;}
  • 24. 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.
  • 25. 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.
  • 26. 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.
  • 27. What is Next in Mobile Email? More apps supporting responsive design. Email shopping cart solutions Geotargeted modules Video on email improvements Automated templates
  • 28. 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.

Editor's Notes

  1. We are here to talk about d3. It is a tool has been around for a few years but it is increasing in popularity. This is not a presentation about code, even thou we will cover some programming aspects of tool. At the end we will review some samples and examine some public data sets that you can use in your own projects. We will also explore some project ideas.
  2. Present yourself, I’m not here representing oracle. Have been a web developer for a few years, mostly in the front end side of things. Please feel free to tweet about this event and check-in in Facebook using these hashtags.
  3. Introduce Duncan. He is going to speal about ThoughtWorks.
  4. Speak at my meetups! I run two meetup groups, the first group is the oldest group I have been running for about 4 years now. It is focused on people how are starting out in the web development world. I’m an adobe user, and I teach DW and how to use DW efficiently in any type of web development project. I know this tool gets a lot of bad press from more experienced designers, but the good news is that adobe knows this and they are listening. Is anybody here using adobe brackets? Is a really good tool and the plan of adobe is integrating it with DW. My other group is for more experience web developers. I envision this group to be a way to connect Latino web developers and encourage a community of learning an mentorship at a local and international level. Of course this group is available to anybody. So if you have any ideas on what we should do next, let me know. Or even better if you want to talk, let me know.
  5. This is what we are going to cover today, this is not a code workshop or a code along. I usually avoid doing any live coding during my presentations I find it very time consuming. There are some code samples, but the main idea is to give you the right information so you can start using this techniques in your email projects. We will not talk about digital marketing or analytics too much. We are going to focus on how to use these coding techniques.
  6. How many people remember Hotmail? My first Hotmail account was guacamole@Hotmail.com. Video for example has a strong business case on improving file formats, speed interactive features at. Because people pay for video.
  7. Read slide. When you think about this, it is very easy to mislabel a graphic for a data visualization piece. Designers can very easily make that mistake. Any designers here in the room. This is an emergin field that is being thought in design schools and also is being incorporated into user experience training. It is a necessary discipline because there is a lot of data out there. But most importantly, that data is easier to acquire. Government agencies are making their data available to the public more and more. Also, data analysis and data science is a very popular field in the digital world right now.
  8. Let go over this code, this is a typical set of rules for responsive emails. The asterisk is just a fixed to an old bug in yahoo. I don’t know if that bug went away, but I still use it. Before, if you did not include this, yahoo will display the CSS rules at the top of your email. Using important is just good practice for email. As HTML emails uses inline CSS, the only way to overrule those rules is to use important.
  9. Has anybody here used flexible emails, there are a lot of templates out there. I personally don’t code a lot of flexible emails because the designers hate them. The support is very poor and it does not allow for much flexibility in the design. We are not going to do much with flexible emails today. One big advantage of flexible emails is that they work on Gmail app. Gmaill app has a huge market share and media queirs do not work in gmail app.
  10. Let me show you an example of a friendly email. This email us visually appealing, but its layout is very conventional. When this email fit the screen in mobile still very readable. It takes advantage of a more vertical design. Most emails are designed with editorial design principles. A well mobile friendly design requires an experience designer and it has to have a good balance of images vs text. As the text is typically larger.
  11. Look at CSS table
  12. A company that is not using responsive emails can be seen as obsolete and their branding ca be affected.
  13. This might not be a surprise to you. Basically we these numbers say is that iphone uses seem to use email more, but these results never tell you about the gmail app. A user can use the gmail app on android or iphone. We know that android has a larger market share by know. Globally, android is more dominant, but in the US, iphone is still seen as the most popular mobile device. Also marketers pay more attention to iphone number because iphone users are seen as having more aquisiton power. Also we are seeing that MS products are slowly loosing market share. Outlook still the most popular email client for business, but more companies are using cloud services like google for business, skipping a desktop client all together.
  14. We have all done pie charts in power point and keynote for college or client presentations right? It is often the most frustrating part of the slide making process specially if you are working in ppt. Some of us had to use FLASH to create animated piechars and bar charts. Who used FLASH for charts before?. Performance is important because we are dealing with the web. I know of a lot of developer that are all about performance and are very critical of some libraries for being too heavy and slow. But D3 is not that bad.
  15. So what? I already know Jquery, this seems like another heavy javascript library that nobody is using. That is fair to say, but every project requires the right tool. While is true you could write a good DV application using just Jquery, D3 offers other benefits. I have seen very cool infographics animated with jquery. Lets compare the two.
  16. Jqueyr is easy to use, it has been around for a lot time and it’s a standard skill for every web developer. It uses less code. Jquery has always claimed to be very efficient when it comes to writing code.
  17. Beware of outlook desktop client. Most companies use MS office and the clients most likely are going to use outlook for approiving emails. Always test in the email your client is using. As of know, outlook has minimal market share, but because it being used by businessed, it is important your emails look good in outlook. For some of this techniques, you might need to use outlook conditional statement. Have you seen these, has anybody used those?
  18. These are some fixes to some bugs found in iOS. The second fix, was detected in the iOS 9 update. Tell them what happened with RC credit card and iOS 9.