SlideShare a Scribd company logo
1 of 19
Download to read offline
RESPONSIVE EMAIL
EMAILS THAT RESPOND.
Created by Mike Louviere / @malouviere
PHILOSOPHY
Responsive Design is now standard. Going into 2014 it's time to
apply what we've learned and adapt it to email.
WHY RESPONSIVE EMAIL
Email Statistics
Webmail: 19.0 %
Desktop: 29.0 %

Mobile: 52.0 %

According to PEW Research Center at least 52% of
consumers use their mobile devices for reading and
accessing some type of email
WHY RESPONSIVE EMAIL
Email Opens
Source: emailmonday.com
60

Percentage

50

40

30

20

10

Jan' 13

Feb' 13

Mar' 13

Apr' 13

May' 13

Jun' 13

Jul' 13

Aug' 13

Sep' 13

Oct' 13

In 2013 mobile email opens increased by 21% and will account
for up to 70% of email opens depending on target audience,
product and email types.

Nov' 13
WHY RESPONSIVE EMAIL
Time Spent on Mobile Devices
Reading Email: 7.6 %

Responding to Sue's Meeting Invites: 92.4 %
Highcharts.com

On average 9 minutes of our day is spent reading email on our
device, or 7.6% of the total 119 minutes we spend on our phone
per day.
BUT SERIOUSLY, EMAIL IS IMPORTANT
So let's take a look at the good and the bad...
THIS DOESN'T FLY
HOUZZ THIS USABLE?
CAN YOU DIGG IT?
SOMETHING, SOMETHING, PLAY ON WORDS
HANSON ENEWSLETTER
Before & After
FRAMEWORKS
Zurb Ink - http://zurb.com/ink/

Table based layouts? What is this 1999?
580px wrapper, main container for the grid column tables
INK WORKFLOW
12 Column Grid
Sub Grids
Utility Classes
Nesting tables with grids, sub-grids and utility classes create
layouts.
SOMETHING TO LOOK FORWARD TO
It just works! Similar to standard html emails, you will never
experience issues with responsive design in email!
NEVER SAY NEVER.
CHALLENGES AND HURDLES
Microsoft word hasn't ruined your life enough
Gmail isn't off the hook (or Hotmail, or Yahoo or..)
The rest picks and chooses
BEST PRACTICES
Set widths on cells, not on tables.
Add a table wrapper with a class for styling i.e. "body"
Remove white-space between table cells
Understand absolute and relative positioning.
Avoid short-hand css
Bring CSS inline
FINAL TIPS & TRICKS
Create images at the largest size needed – this might not be
the size at the widest breakpoint
Be selective in loading assets – think of the data plans!
Re-think navigation for mobile
QUESTIONS?
View the Wiki

BY MIKE LOUVIERE / HANSON INC

More Related Content

What's hot

iPad Shortcuts
iPad ShortcutsiPad Shortcuts
iPad Shortcuts
Bsgyear4
 

What's hot (20)

10 Tips for Mobile Email
10 Tips for Mobile Email10 Tips for Mobile Email
10 Tips for Mobile Email
 
Slack protips from Arkency
Slack protips from ArkencySlack protips from Arkency
Slack protips from Arkency
 
Productivity in an age of collaboration sps leicester
Productivity in an age of collaboration   sps leicesterProductivity in an age of collaboration   sps leicester
Productivity in an age of collaboration sps leicester
 
Smart office outlook
Smart office outlookSmart office outlook
Smart office outlook
 
Online Tools to Monitor Competition - Do not re-invent the wheel
Online Tools to Monitor Competition - Do not re-invent the wheelOnline Tools to Monitor Competition - Do not re-invent the wheel
Online Tools to Monitor Competition - Do not re-invent the wheel
 
Print Pre Production
 Print Pre Production Print Pre Production
Print Pre Production
 
iPad Shortcuts
iPad ShortcutsiPad Shortcuts
iPad Shortcuts
 
Creating a productive work environment
Creating a productive work environmentCreating a productive work environment
Creating a productive work environment
 
Easy PowerPoint Business Template (by Roman Abashin)
Easy PowerPoint Business Template (by Roman Abashin)Easy PowerPoint Business Template (by Roman Abashin)
Easy PowerPoint Business Template (by Roman Abashin)
 
אסף באר
אסף באראסף באר
אסף באר
 
5 Ways to Increase your Productivity On-Site
5 Ways to Increase your Productivity On-Site5 Ways to Increase your Productivity On-Site
5 Ways to Increase your Productivity On-Site
 
Life of a Remote Developer - Productivity tips (MSBuild 2020)
Life of a Remote Developer - Productivity tips (MSBuild 2020)Life of a Remote Developer - Productivity tips (MSBuild 2020)
Life of a Remote Developer - Productivity tips (MSBuild 2020)
 
Recognizing and preventing distractions in the workplace
Recognizing and preventing distractions in the workplaceRecognizing and preventing distractions in the workplace
Recognizing and preventing distractions in the workplace
 
Working from Wherever
Working from WhereverWorking from Wherever
Working from Wherever
 
She ent blogging
She ent bloggingShe ent blogging
She ent blogging
 
Be a SPOC but dont be a SPOF
Be a SPOC but dont be a SPOFBe a SPOC but dont be a SPOF
Be a SPOC but dont be a SPOF
 
4 entrances
4 entrances4 entrances
4 entrances
 
Modern Usability Tools & Techniques
Modern Usability Tools & TechniquesModern Usability Tools & Techniques
Modern Usability Tools & Techniques
 
Using video to increase site traffic, admissions numbers, and yield rate
Using video to increase site traffic, admissions numbers, and yield rateUsing video to increase site traffic, admissions numbers, and yield rate
Using video to increase site traffic, admissions numbers, and yield rate
 
Presentacion licencia Creative Commonrs
Presentacion licencia Creative Commonrs Presentacion licencia Creative Commonrs
Presentacion licencia Creative Commonrs
 

Similar to Responsive Email Presentation

Eis tue 0815 sponsor infogroup
Eis tue 0815 sponsor infogroupEis tue 0815 sponsor infogroup
Eis tue 0815 sponsor infogroup
MediaPost
 
Eis tue 0815 sponsor infogroup
Eis tue 0815 sponsor infogroupEis tue 0815 sponsor infogroup
Eis tue 0815 sponsor infogroup
MediaPost
 
Brunch & Learn: Email Design Best Practices for Desktop, Mobile, Tablet & Beyond
Brunch & Learn: Email Design Best Practices for Desktop, Mobile, Tablet & BeyondBrunch & Learn: Email Design Best Practices for Desktop, Mobile, Tablet & Beyond
Brunch & Learn: Email Design Best Practices for Desktop, Mobile, Tablet & Beyond
Act-On Software
 
Effective Email Marketing
Effective Email MarketingEffective Email Marketing
Effective Email Marketing
Likeable Media
 
Email Marketing for Independent Creatives
Email Marketing for Independent CreativesEmail Marketing for Independent Creatives
Email Marketing for Independent Creatives
Indie Arsenal
 

Similar to Responsive Email Presentation (20)

Designing for email
Designing for emailDesigning for email
Designing for email
 
Eis tue 0815 sponsor infogroup
Eis tue 0815 sponsor infogroupEis tue 0815 sponsor infogroup
Eis tue 0815 sponsor infogroup
 
Samples - web design, blog posts, and infographics
Samples - web design, blog posts, and infographicsSamples - web design, blog posts, and infographics
Samples - web design, blog posts, and infographics
 
E-Learning - R.D.Sivakumar
E-Learning - R.D.SivakumarE-Learning - R.D.Sivakumar
E-Learning - R.D.Sivakumar
 
Accessing and Utilizing MLM through URL - R.D.Sivakumar
Accessing and Utilizing MLM through URL - R.D.SivakumarAccessing and Utilizing MLM through URL - R.D.Sivakumar
Accessing and Utilizing MLM through URL - R.D.Sivakumar
 
Designing technical documentation for tablets
Designing technical documentation for tabletsDesigning technical documentation for tablets
Designing technical documentation for tablets
 
Eis tue 0815 sponsor infogroup
Eis tue 0815 sponsor infogroupEis tue 0815 sponsor infogroup
Eis tue 0815 sponsor infogroup
 
Responsive Email Design for Dummies
Responsive Email Design for Dummies Responsive Email Design for Dummies
Responsive Email Design for Dummies
 
MIMA Summit: Design for Your Subscribers
MIMA Summit: Design for Your SubscribersMIMA Summit: Design for Your Subscribers
MIMA Summit: Design for Your Subscribers
 
Brunch & Learn: Email Design Best Practices for Desktop, Mobile, Tablet & Beyond
Brunch & Learn: Email Design Best Practices for Desktop, Mobile, Tablet & BeyondBrunch & Learn: Email Design Best Practices for Desktop, Mobile, Tablet & Beyond
Brunch & Learn: Email Design Best Practices for Desktop, Mobile, Tablet & Beyond
 
Mobile Email User Experience Strategies
Mobile Email User Experience StrategiesMobile Email User Experience Strategies
Mobile Email User Experience Strategies
 
Email Tips 2010
Email Tips 2010Email Tips 2010
Email Tips 2010
 
Effective Email Marketing
Effective Email MarketingEffective Email Marketing
Effective Email Marketing
 
Email Tips and Trends 2010
Email Tips and Trends 2010Email Tips and Trends 2010
Email Tips and Trends 2010
 
Responsive email design: 3 how-to steps
Responsive email design: 3 how-to stepsResponsive email design: 3 how-to steps
Responsive email design: 3 how-to steps
 
Email design guide
Email design guideEmail design guide
Email design guide
 
Thriving in the Chaotic World of Email Design
Thriving in the Chaotic World of Email DesignThriving in the Chaotic World of Email Design
Thriving in the Chaotic World of Email Design
 
Typography and Colors for GUI Designers
Typography and Colors for GUI DesignersTypography and Colors for GUI Designers
Typography and Colors for GUI Designers
 
Email Marketing for Independent Creatives
Email Marketing for Independent CreativesEmail Marketing for Independent Creatives
Email Marketing for Independent Creatives
 
HTML Emails in Rails 3
HTML Emails in Rails 3HTML Emails in Rails 3
HTML Emails in Rails 3
 

More from Hanson Inc

More from Hanson Inc (14)

Hot Topics in Interactive Design
Hot Topics in Interactive DesignHot Topics in Interactive Design
Hot Topics in Interactive Design
 
The Importance of Being Agile
The Importance of Being AgileThe Importance of Being Agile
The Importance of Being Agile
 
The Connected Consumer
The Connected ConsumerThe Connected Consumer
The Connected Consumer
 
Analytics and Social Listening
Analytics and Social Listening Analytics and Social Listening
Analytics and Social Listening
 
Intro: Marketing in the Digital Age
Intro: Marketing in the Digital Age Intro: Marketing in the Digital Age
Intro: Marketing in the Digital Age
 
Technical Strategies
Technical StrategiesTechnical Strategies
Technical Strategies
 
Social Trends and Platforms
Social Trends and PlatformsSocial Trends and Platforms
Social Trends and Platforms
 
Retail + Digital
Retail + DigitalRetail + Digital
Retail + Digital
 
Niche Networks and Social Commerce
Niche Networks and Social CommerceNiche Networks and Social Commerce
Niche Networks and Social Commerce
 
Users by Generation
Users by GenerationUsers by Generation
Users by Generation
 
Facebook
FacebookFacebook
Facebook
 
Content Marketing
Content MarketingContent Marketing
Content Marketing
 
User Testing and Research
User Testing and ResearchUser Testing and Research
User Testing and Research
 
4 Strategies for Developing a Unified Digital Experience
4 Strategies for Developing a Unified Digital Experience4 Strategies for Developing a Unified Digital Experience
4 Strategies for Developing a Unified Digital Experience
 

Recently uploaded

Escorts Service Nagavara ☎ 7737669865☎ Book Your One night Stand (Bangalore)
Escorts Service Nagavara ☎ 7737669865☎ Book Your One night Stand (Bangalore)Escorts Service Nagavara ☎ 7737669865☎ Book Your One night Stand (Bangalore)
Escorts Service Nagavara ☎ 7737669865☎ Book Your One night Stand (Bangalore)
amitlee9823
 
Abortion pill for sale in Muscat (+918761049707)) Get Cytotec Cash on deliver...
Abortion pill for sale in Muscat (+918761049707)) Get Cytotec Cash on deliver...Abortion pill for sale in Muscat (+918761049707)) Get Cytotec Cash on deliver...
Abortion pill for sale in Muscat (+918761049707)) Get Cytotec Cash on deliver...
instagramfab782445
 
Anamika Escorts Service Darbhanga ❣️ 7014168258 ❣️ High Cost Unlimited Hard ...
Anamika Escorts Service Darbhanga ❣️ 7014168258 ❣️ High Cost Unlimited Hard  ...Anamika Escorts Service Darbhanga ❣️ 7014168258 ❣️ High Cost Unlimited Hard  ...
Anamika Escorts Service Darbhanga ❣️ 7014168258 ❣️ High Cost Unlimited Hard ...
nirzagarg
 
怎样办理伯明翰大学学院毕业证(Birmingham毕业证书)成绩单留信认证
怎样办理伯明翰大学学院毕业证(Birmingham毕业证书)成绩单留信认证怎样办理伯明翰大学学院毕业证(Birmingham毕业证书)成绩单留信认证
怎样办理伯明翰大学学院毕业证(Birmingham毕业证书)成绩单留信认证
eeanqy
 
一比一定(购)卡尔顿大学毕业证(CU毕业证)成绩单学位证
一比一定(购)卡尔顿大学毕业证(CU毕业证)成绩单学位证一比一定(购)卡尔顿大学毕业证(CU毕业证)成绩单学位证
一比一定(购)卡尔顿大学毕业证(CU毕业证)成绩单学位证
wpkuukw
 
How to Build a Simple Shopify Website
How to Build a Simple Shopify WebsiteHow to Build a Simple Shopify Website
How to Build a Simple Shopify Website
mark11275
 
Editorial design Magazine design project.pdf
Editorial design Magazine design project.pdfEditorial design Magazine design project.pdf
Editorial design Magazine design project.pdf
tbatkhuu1
 
Jigani Call Girls Service: 🍓 7737669865 🍓 High Profile Model Escorts | Bangal...
Jigani Call Girls Service: 🍓 7737669865 🍓 High Profile Model Escorts | Bangal...Jigani Call Girls Service: 🍓 7737669865 🍓 High Profile Model Escorts | Bangal...
Jigani Call Girls Service: 🍓 7737669865 🍓 High Profile Model Escorts | Bangal...
amitlee9823
 
➥🔝 7737669865 🔝▻ dharamshala Call-girls in Women Seeking Men 🔝dharamshala🔝 ...
➥🔝 7737669865 🔝▻ dharamshala Call-girls in Women Seeking Men  🔝dharamshala🔝  ...➥🔝 7737669865 🔝▻ dharamshala Call-girls in Women Seeking Men  🔝dharamshala🔝  ...
➥🔝 7737669865 🔝▻ dharamshala Call-girls in Women Seeking Men 🔝dharamshala🔝 ...
amitlee9823
 
Call Girls In Jp Nagar ☎ 7737669865 🥵 Book Your One night Stand
Call Girls In Jp Nagar ☎ 7737669865 🥵 Book Your One night StandCall Girls In Jp Nagar ☎ 7737669865 🥵 Book Your One night Stand
Call Girls In Jp Nagar ☎ 7737669865 🥵 Book Your One night Stand
amitlee9823
 
FULL ENJOY Call Girls In Mahipalpur Delhi Contact Us 8377877756
FULL ENJOY Call Girls In Mahipalpur Delhi Contact Us 8377877756FULL ENJOY Call Girls In Mahipalpur Delhi Contact Us 8377877756
FULL ENJOY Call Girls In Mahipalpur Delhi Contact Us 8377877756
dollysharma2066
 
Nisha Yadav Escorts Service Ernakulam ❣️ 7014168258 ❣️ High Cost Unlimited Ha...
Nisha Yadav Escorts Service Ernakulam ❣️ 7014168258 ❣️ High Cost Unlimited Ha...Nisha Yadav Escorts Service Ernakulam ❣️ 7014168258 ❣️ High Cost Unlimited Ha...
Nisha Yadav Escorts Service Ernakulam ❣️ 7014168258 ❣️ High Cost Unlimited Ha...
nirzagarg
 
RT Nagar Call Girls Service: 🍓 7737669865 🍓 High Profile Model Escorts | Bang...
RT Nagar Call Girls Service: 🍓 7737669865 🍓 High Profile Model Escorts | Bang...RT Nagar Call Girls Service: 🍓 7737669865 🍓 High Profile Model Escorts | Bang...
RT Nagar Call Girls Service: 🍓 7737669865 🍓 High Profile Model Escorts | Bang...
amitlee9823
 

Recently uploaded (20)

Escorts Service Nagavara ☎ 7737669865☎ Book Your One night Stand (Bangalore)
Escorts Service Nagavara ☎ 7737669865☎ Book Your One night Stand (Bangalore)Escorts Service Nagavara ☎ 7737669865☎ Book Your One night Stand (Bangalore)
Escorts Service Nagavara ☎ 7737669865☎ Book Your One night Stand (Bangalore)
 
Pooja 9892124323, Call girls Services and Mumbai Escort Service Near Hotel Gi...
Pooja 9892124323, Call girls Services and Mumbai Escort Service Near Hotel Gi...Pooja 9892124323, Call girls Services and Mumbai Escort Service Near Hotel Gi...
Pooja 9892124323, Call girls Services and Mumbai Escort Service Near Hotel Gi...
 
Abortion pill for sale in Muscat (+918761049707)) Get Cytotec Cash on deliver...
Abortion pill for sale in Muscat (+918761049707)) Get Cytotec Cash on deliver...Abortion pill for sale in Muscat (+918761049707)) Get Cytotec Cash on deliver...
Abortion pill for sale in Muscat (+918761049707)) Get Cytotec Cash on deliver...
 
Pooja 9892124323, Call girls Services and Mumbai Escort Service Near Hotel Hy...
Pooja 9892124323, Call girls Services and Mumbai Escort Service Near Hotel Hy...Pooja 9892124323, Call girls Services and Mumbai Escort Service Near Hotel Hy...
Pooja 9892124323, Call girls Services and Mumbai Escort Service Near Hotel Hy...
 
Anamika Escorts Service Darbhanga ❣️ 7014168258 ❣️ High Cost Unlimited Hard ...
Anamika Escorts Service Darbhanga ❣️ 7014168258 ❣️ High Cost Unlimited Hard  ...Anamika Escorts Service Darbhanga ❣️ 7014168258 ❣️ High Cost Unlimited Hard  ...
Anamika Escorts Service Darbhanga ❣️ 7014168258 ❣️ High Cost Unlimited Hard ...
 
怎样办理伯明翰大学学院毕业证(Birmingham毕业证书)成绩单留信认证
怎样办理伯明翰大学学院毕业证(Birmingham毕业证书)成绩单留信认证怎样办理伯明翰大学学院毕业证(Birmingham毕业证书)成绩单留信认证
怎样办理伯明翰大学学院毕业证(Birmingham毕业证书)成绩单留信认证
 
一比一定(购)卡尔顿大学毕业证(CU毕业证)成绩单学位证
一比一定(购)卡尔顿大学毕业证(CU毕业证)成绩单学位证一比一定(购)卡尔顿大学毕业证(CU毕业证)成绩单学位证
一比一定(购)卡尔顿大学毕业证(CU毕业证)成绩单学位证
 
How to Build a Simple Shopify Website
How to Build a Simple Shopify WebsiteHow to Build a Simple Shopify Website
How to Build a Simple Shopify Website
 
Editorial design Magazine design project.pdf
Editorial design Magazine design project.pdfEditorial design Magazine design project.pdf
Editorial design Magazine design project.pdf
 
Jordan_Amanda_DMBS202404_PB1_2024-04.pdf
Jordan_Amanda_DMBS202404_PB1_2024-04.pdfJordan_Amanda_DMBS202404_PB1_2024-04.pdf
Jordan_Amanda_DMBS202404_PB1_2024-04.pdf
 
VIP Model Call Girls Kalyani Nagar ( Pune ) Call ON 8005736733 Starting From ...
VIP Model Call Girls Kalyani Nagar ( Pune ) Call ON 8005736733 Starting From ...VIP Model Call Girls Kalyani Nagar ( Pune ) Call ON 8005736733 Starting From ...
VIP Model Call Girls Kalyani Nagar ( Pune ) Call ON 8005736733 Starting From ...
 
Jigani Call Girls Service: 🍓 7737669865 🍓 High Profile Model Escorts | Bangal...
Jigani Call Girls Service: 🍓 7737669865 🍓 High Profile Model Escorts | Bangal...Jigani Call Girls Service: 🍓 7737669865 🍓 High Profile Model Escorts | Bangal...
Jigani Call Girls Service: 🍓 7737669865 🍓 High Profile Model Escorts | Bangal...
 
➥🔝 7737669865 🔝▻ dharamshala Call-girls in Women Seeking Men 🔝dharamshala🔝 ...
➥🔝 7737669865 🔝▻ dharamshala Call-girls in Women Seeking Men  🔝dharamshala🔝  ...➥🔝 7737669865 🔝▻ dharamshala Call-girls in Women Seeking Men  🔝dharamshala🔝  ...
➥🔝 7737669865 🔝▻ dharamshala Call-girls in Women Seeking Men 🔝dharamshala🔝 ...
 
Call Girls In Jp Nagar ☎ 7737669865 🥵 Book Your One night Stand
Call Girls In Jp Nagar ☎ 7737669865 🥵 Book Your One night StandCall Girls In Jp Nagar ☎ 7737669865 🥵 Book Your One night Stand
Call Girls In Jp Nagar ☎ 7737669865 🥵 Book Your One night Stand
 
Sector 105, Noida Call girls :8448380779 Model Escorts | 100% verified
Sector 105, Noida Call girls :8448380779 Model Escorts | 100% verifiedSector 105, Noida Call girls :8448380779 Model Escorts | 100% verified
Sector 105, Noida Call girls :8448380779 Model Escorts | 100% verified
 
8377087607, Door Step Call Girls In Kalkaji (Locanto) 24/7 Available
8377087607, Door Step Call Girls In Kalkaji (Locanto) 24/7 Available8377087607, Door Step Call Girls In Kalkaji (Locanto) 24/7 Available
8377087607, Door Step Call Girls In Kalkaji (Locanto) 24/7 Available
 
FULL ENJOY Call Girls In Mahipalpur Delhi Contact Us 8377877756
FULL ENJOY Call Girls In Mahipalpur Delhi Contact Us 8377877756FULL ENJOY Call Girls In Mahipalpur Delhi Contact Us 8377877756
FULL ENJOY Call Girls In Mahipalpur Delhi Contact Us 8377877756
 
Nisha Yadav Escorts Service Ernakulam ❣️ 7014168258 ❣️ High Cost Unlimited Ha...
Nisha Yadav Escorts Service Ernakulam ❣️ 7014168258 ❣️ High Cost Unlimited Ha...Nisha Yadav Escorts Service Ernakulam ❣️ 7014168258 ❣️ High Cost Unlimited Ha...
Nisha Yadav Escorts Service Ernakulam ❣️ 7014168258 ❣️ High Cost Unlimited Ha...
 
RT Nagar Call Girls Service: 🍓 7737669865 🍓 High Profile Model Escorts | Bang...
RT Nagar Call Girls Service: 🍓 7737669865 🍓 High Profile Model Escorts | Bang...RT Nagar Call Girls Service: 🍓 7737669865 🍓 High Profile Model Escorts | Bang...
RT Nagar Call Girls Service: 🍓 7737669865 🍓 High Profile Model Escorts | Bang...
 
UI:UX Design and Empowerment Strategies for Underprivileged Transgender Indiv...
UI:UX Design and Empowerment Strategies for Underprivileged Transgender Indiv...UI:UX Design and Empowerment Strategies for Underprivileged Transgender Indiv...
UI:UX Design and Empowerment Strategies for Underprivileged Transgender Indiv...
 

Responsive Email Presentation

  • 1. RESPONSIVE EMAIL EMAILS THAT RESPOND. Created by Mike Louviere / @malouviere
  • 2. PHILOSOPHY Responsive Design is now standard. Going into 2014 it's time to apply what we've learned and adapt it to email.
  • 3. WHY RESPONSIVE EMAIL Email Statistics Webmail: 19.0 % Desktop: 29.0 % Mobile: 52.0 % According to PEW Research Center at least 52% of consumers use their mobile devices for reading and accessing some type of email
  • 4. WHY RESPONSIVE EMAIL Email Opens Source: emailmonday.com 60 Percentage 50 40 30 20 10 Jan' 13 Feb' 13 Mar' 13 Apr' 13 May' 13 Jun' 13 Jul' 13 Aug' 13 Sep' 13 Oct' 13 In 2013 mobile email opens increased by 21% and will account for up to 70% of email opens depending on target audience, product and email types. Nov' 13
  • 5. WHY RESPONSIVE EMAIL Time Spent on Mobile Devices Reading Email: 7.6 % Responding to Sue's Meeting Invites: 92.4 % Highcharts.com On average 9 minutes of our day is spent reading email on our device, or 7.6% of the total 119 minutes we spend on our phone per day.
  • 6. BUT SERIOUSLY, EMAIL IS IMPORTANT So let's take a look at the good and the bad...
  • 12. FRAMEWORKS Zurb Ink - http://zurb.com/ink/ Table based layouts? What is this 1999? 580px wrapper, main container for the grid column tables
  • 13. INK WORKFLOW 12 Column Grid Sub Grids Utility Classes Nesting tables with grids, sub-grids and utility classes create layouts.
  • 14. SOMETHING TO LOOK FORWARD TO It just works! Similar to standard html emails, you will never experience issues with responsive design in email!
  • 16. CHALLENGES AND HURDLES Microsoft word hasn't ruined your life enough Gmail isn't off the hook (or Hotmail, or Yahoo or..) The rest picks and chooses
  • 17. BEST PRACTICES Set widths on cells, not on tables. Add a table wrapper with a class for styling i.e. "body" Remove white-space between table cells Understand absolute and relative positioning. Avoid short-hand css Bring CSS inline
  • 18. FINAL TIPS & TRICKS Create images at the largest size needed – this might not be the size at the widest breakpoint Be selective in loading assets – think of the data plans! Re-think navigation for mobile
  • 19. QUESTIONS? View the Wiki BY MIKE LOUVIERE / HANSON INC