SlideShare a Scribd company logo
Responsive 
HTML Email 
https://flic.kr/p/idKefi
Benjy Stanton 
Freelance web designer
Responsive 
HTML Email
My Process 
https://flic.kr/p/idJmHY
1. Gather content 
2. List elements on paper 
3. Sketch wireframes 
4. Mock-up design 
5. Write the code 
6. Inline CSS 
7. Test in web browsers 
8. Test with ‘real’ email clients 
9. Test on virtual email clients 
10. Lift-off!
Design with data 
https://flic.kr/p/i3Hm7i
http://emailclientmarketshare.com/
Progressive 
enhancement
Start with plain text 
• Encourages a ‘Content First’ approach 
• Not having a plain text will anger the spam filters 
• Some older email clients can’t handle html 
• Some people prefer plain text and will set their 
email clients accordingly
Images off by default 
• Most email clients block images by default 
• Content should make sense with images off 
• Style ALT text so email looks good even 
without images
Link to web view 
• People may have images turned off 
• The html may not be rendering properly 
• It’s a handy way to share the email
Accessibility
“People spend a lot of time worrying about 
email clients with 1% usage; accessibility 
is a much bigger issue” 
– Mark, Rebelmail
https://www.campaignmonitor.com/guides/accessibility/
• Tables are optimised to preserve logical reading order 
• Heading elements used 
• Text colour contrast is sufficient 
• Subject line is concise and descriptive 
• Headings summarise content that follows 
• Link text is meaningful (not “read more” or “click here”)
http://colororacle.org/
Back to the 
design process
Client brief 
• main objective of the email 
• target audience 
• an early draft of the content 
• guidance on potential design style 
(including imagery and brand guidelines)
Start with 
real content 
https://flic.kr/p/ic3Hi9
• Logo 
• Main image 
• Heading 
• Paragraph (or two) 
• A main call to action 
• Contact details 
• Social media icons 
• Small print 
• Unsubscribe link 
• View in a browser link
Make a list 
• List the elements on some paper 
• Mark them up as h1, p, button etc. 
• develop a hierarchy and a source order 
(good for mobile first approach)
Responsive HTML Email
Responsive HTML Email
How big should an email be? 
• 600px wide for “desktop” email clients 
• I’ve already decided on the source order, so no 
real need to mock-up at narrower widths 
• Height and weight: smaller the better
Keep Things Simple 
• Use just 1 or 2 columns if you can 
• Be generous with spacing 
• Complicated designs take ages to test and debug
Consider how things 
will look in the inbox
Responsive HTML Email
Responsive HTML Email
Building
http://zurb.com/ink/
http://zurb.com/ink/inliner.php
Inline your CSS 
We need to do this because Gmail 
strips CSS from the <style> tag.
http://inliner.cm/
Use tables 
Use <table></table> because Outlook 
has poor support for CSS based layouts 
https://www.campaignmonitor.com/guides/coding/guidelines/
Attribute selectors 
Use attribute selectors for any styles 
contained in your media queries to make 
sure Yahoo! ignores them. 
https://www.campaignmonitor.com/guides/mobile/coding/
Use !important 
Use !important in your media queries to 
make sure the styles override any inline styles 
https://www.campaignmonitor.com/guides/mobile/coding/
Checklist 
• Proof read the copy 
• Check phone numbers and email addresses 
• Check you’ve included alt text and titles attributes 
• Remove unused CSS 
• Optimize images 
• Check email with images turned-off 
• Check images and links have absolute paths
http://emailchecklist.org/
Testing! 
https://flic.kr/p/hLD7cN
http://mailchimp.com/
Test on real devices 
• Gmail.com 
• Outlook.com 
• Yahoo.com 
• AOL.com 
• iPhone 5c 
• iPad 
• Mail (OSX) 
• Thunderbird (OSX) 
• Outlook (Windows) 
• Windows Live Mail
http://benjystanton.co.uk/email-test.pdf
Inspecting is tricky 
Test in old browsers like IE7 instead
Outlook for free 
Start a Office trial, then don’t renew 
it. You still get to use Outlook for 
testing. Shhhh, don’t tell anyone.
http://mailchimp.com/features/inbox-inspector/
Stuck? Check the interwebs 
• Campaign Monitor 
• Litmus 
• Email on Acid
Beating spam filters 
• Use test services provided by ESPs 
• Use www.mail-tester.com 
• Write good content
Nearly there… 
https://flic.kr/p/hVRbV8
Further Reading 
Making Responsive HTML Emails 
benjystanton.co.uk/blog/making-responsive-html-emails/ 
The Ultimate Guide to CSS 
campaignmonitor.com/css/ 
The Email Design Guide 
mailchimp.com/resources/email-design-guide 
Can Email Be Responsive? 
alistapart.com/article/can-email-be-responsive 
Five Ways to Test an Email 
litmus.com/blog/five-ways-to-test-an-email
Further Reading 
Email Design Review 
emaildesignreview.com 
Let’s fix email 
letsfixemail.com 
The design of government emails 
designnotes.blog.gov.uk/2014/09/04/the-design-of-government-emails 
Litmus Email Builder 
litmus.com/email-builder 
What you need to know about using fonts in email 
adestra.com/what-need-know-using-fonts-in-email
Further Reading 
6 Email Client Hacks You Need To Know 
freshinbox.com/blog/6-email-client-hacks-infographic 
Best Practices for Plain Text Emails 
litmus.com/blog/best-practices-for-plain-text-emails-a-look-at-why-theyre-important 
The Ultimate Guide to Styled ALT Text in Email 
litmus.com/blog/the-ultimate-guide-to-styled-alt-text-in-email 
Image Blocking in HTML Email 
campaignmonitor.com/resources/will-it-work/image-blocking/ 
Color blindness and email: Are you designing for accessibility? 
www.campaignmonitor.com/blog/post/4267/color-blindness-accessibility-and-the-vision- 
impaired-in-email-design
Thanks! 
benjystanton.co.uk 
@benjystanton 
https://flic.kr/p/hXzsG9

More Related Content

What's hot

Turn Concepts to Reality Using Prototyping and Feedback Loops
Turn Concepts to Reality Using Prototyping and Feedback LoopsTurn Concepts to Reality Using Prototyping and Feedback Loops
Turn Concepts to Reality Using Prototyping and Feedback Loops
Nick Floro
 
Fundamentals of Mobile-Friendly Emails
Fundamentals of Mobile-Friendly EmailsFundamentals of Mobile-Friendly Emails
Fundamentals of Mobile-Friendly Emails
Litmus
 
Design better forms – Mobile UX London
Design better forms – Mobile UX LondonDesign better forms – Mobile UX London
Design better forms – Mobile UX London
Sjors Timmer
 
Responsive Email: What It Is & Why You Need It
Responsive Email: What It Is & Why You Need ItResponsive Email: What It Is & Why You Need It
Responsive Email: What It Is & Why You Need It
HighRoad Solution
 
Smartphones
SmartphonesSmartphones
Smartphones
Drew Shope
 
Apps for publishers sept 2013
Apps for publishers sept 2013Apps for publishers sept 2013
Apps for publishers sept 2013
Michael Kowalski
 
Thank God Its Responsive - The Top 10 Responsive Email Design Tips
Thank God Its Responsive - The Top 10 Responsive Email Design TipsThank God Its Responsive - The Top 10 Responsive Email Design Tips
Thank God Its Responsive - The Top 10 Responsive Email Design Tips
Abhishek Shah
 
Effective use of technology in a job search by Greg David of Laka & Company G...
Effective use of technology in a job search by Greg David of Laka & Company G...Effective use of technology in a job search by Greg David of Laka & Company G...
Effective use of technology in a job search by Greg David of Laka & Company G...
Greg David
 
Conversational apps UX best practices
Conversational apps UX best practicesConversational apps UX best practices
Conversational apps UX best practices
Matthieu Varagnat
 
Performance Optimisation For Web & Mobile
Performance Optimisation For Web & MobilePerformance Optimisation For Web & Mobile
Performance Optimisation For Web & Mobile
formfunction
 
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
Catalyst
 
Dreamforce - mobility in the enterprise
Dreamforce  - mobility in the enterpriseDreamforce  - mobility in the enterprise
Dreamforce - mobility in the enterprise
Doug Maloney
 
Mobile Magazine Publishing
Mobile Magazine PublishingMobile Magazine Publishing
Mobile Magazine Publishing
Haig Armen
 
Mobile UX London (MUXL) Best Practice Forms by Chaymae Lougmani
Mobile UX London (MUXL) Best Practice Forms by Chaymae LougmaniMobile UX London (MUXL) Best Practice Forms by Chaymae Lougmani
Mobile UX London (MUXL) Best Practice Forms by Chaymae Lougmani
MobileUXLondon
 
Readme box version 1.0
Readme box  version 1.0Readme box  version 1.0
Readme box version 1.0
kaushalvshet76
 
App v. Web
App v. WebApp v. Web
App v. Web
MobileMoxie
 
Design.doc
Design.docDesign.doc
Design.doc
butest
 
#ProdTank - Mobile Conversion, June 2013
#ProdTank - Mobile Conversion, June 2013#ProdTank - Mobile Conversion, June 2013
#ProdTank - Mobile Conversion, June 2013
Dave Martin
 
The Mobile Experience Through Email
The Mobile Experience Through EmailThe Mobile Experience Through Email
The Mobile Experience Through Email
Demac Media
 
Email for Mobile Devices | Stream:20 Best Practice
Email for Mobile Devices | Stream:20 Best PracticeEmail for Mobile Devices | Stream:20 Best Practice
Email for Mobile Devices | Stream:20 Best Practice
Stream20consultants
 

What's hot (20)

Turn Concepts to Reality Using Prototyping and Feedback Loops
Turn Concepts to Reality Using Prototyping and Feedback LoopsTurn Concepts to Reality Using Prototyping and Feedback Loops
Turn Concepts to Reality Using Prototyping and Feedback Loops
 
Fundamentals of Mobile-Friendly Emails
Fundamentals of Mobile-Friendly EmailsFundamentals of Mobile-Friendly Emails
Fundamentals of Mobile-Friendly Emails
 
Design better forms – Mobile UX London
Design better forms – Mobile UX LondonDesign better forms – Mobile UX London
Design better forms – Mobile UX London
 
Responsive Email: What It Is & Why You Need It
Responsive Email: What It Is & Why You Need ItResponsive Email: What It Is & Why You Need It
Responsive Email: What It Is & Why You Need It
 
Smartphones
SmartphonesSmartphones
Smartphones
 
Apps for publishers sept 2013
Apps for publishers sept 2013Apps for publishers sept 2013
Apps for publishers sept 2013
 
Thank God Its Responsive - The Top 10 Responsive Email Design Tips
Thank God Its Responsive - The Top 10 Responsive Email Design TipsThank God Its Responsive - The Top 10 Responsive Email Design Tips
Thank God Its Responsive - The Top 10 Responsive Email Design Tips
 
Effective use of technology in a job search by Greg David of Laka & Company G...
Effective use of technology in a job search by Greg David of Laka & Company G...Effective use of technology in a job search by Greg David of Laka & Company G...
Effective use of technology in a job search by Greg David of Laka & Company G...
 
Conversational apps UX best practices
Conversational apps UX best practicesConversational apps UX best practices
Conversational apps UX best practices
 
Performance Optimisation For Web & Mobile
Performance Optimisation For Web & MobilePerformance Optimisation For Web & Mobile
Performance Optimisation For Web & Mobile
 
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
 
Dreamforce - mobility in the enterprise
Dreamforce  - mobility in the enterpriseDreamforce  - mobility in the enterprise
Dreamforce - mobility in the enterprise
 
Mobile Magazine Publishing
Mobile Magazine PublishingMobile Magazine Publishing
Mobile Magazine Publishing
 
Mobile UX London (MUXL) Best Practice Forms by Chaymae Lougmani
Mobile UX London (MUXL) Best Practice Forms by Chaymae LougmaniMobile UX London (MUXL) Best Practice Forms by Chaymae Lougmani
Mobile UX London (MUXL) Best Practice Forms by Chaymae Lougmani
 
Readme box version 1.0
Readme box  version 1.0Readme box  version 1.0
Readme box version 1.0
 
App v. Web
App v. WebApp v. Web
App v. Web
 
Design.doc
Design.docDesign.doc
Design.doc
 
#ProdTank - Mobile Conversion, June 2013
#ProdTank - Mobile Conversion, June 2013#ProdTank - Mobile Conversion, June 2013
#ProdTank - Mobile Conversion, June 2013
 
The Mobile Experience Through Email
The Mobile Experience Through EmailThe Mobile Experience Through Email
The Mobile Experience Through Email
 
Email for Mobile Devices | Stream:20 Best Practice
Email for Mobile Devices | Stream:20 Best PracticeEmail for Mobile Devices | Stream:20 Best Practice
Email for Mobile Devices | Stream:20 Best Practice
 

Viewers also liked

Responsive Email Design
Responsive Email DesignResponsive Email Design
Responsive Email Design
ETCommunitiesKC
 
Coding for Responsive Email
Coding for Responsive EmailCoding for Responsive Email
Coding for Responsive Email
Brian Graves
 
Manual instrução elsys 2.0 e 2
Manual instrução elsys 2.0 e 2Manual instrução elsys 2.0 e 2
Manual instrução elsys 2.0 e 2
Nystrom Azevedo Nystrom
 
Monsters university
Monsters universityMonsters university
Monsters university
helenmoch
 
Mobile Email: Why, What, How
Mobile Email: Why, What, HowMobile Email: Why, What, How
Mobile Email: Why, What, How
Litmus
 
Responsive Email Design
Responsive Email DesignResponsive Email Design
Responsive Email Design
Anna Yeaman
 
Hard-Won Lessons in Responsive Email Design - ConvergeSE 2014
Hard-Won Lessons in Responsive Email Design - ConvergeSE 2014Hard-Won Lessons in Responsive Email Design - ConvergeSE 2014
Hard-Won Lessons in Responsive Email Design - ConvergeSE 2014
Fabio Carneiro
 
Modular email templates
Modular email templatesModular email templates
Modular email templates
Anna Yeaman
 

Viewers also liked (8)

Responsive Email Design
Responsive Email DesignResponsive Email Design
Responsive Email Design
 
Coding for Responsive Email
Coding for Responsive EmailCoding for Responsive Email
Coding for Responsive Email
 
Manual instrução elsys 2.0 e 2
Manual instrução elsys 2.0 e 2Manual instrução elsys 2.0 e 2
Manual instrução elsys 2.0 e 2
 
Monsters university
Monsters universityMonsters university
Monsters university
 
Mobile Email: Why, What, How
Mobile Email: Why, What, HowMobile Email: Why, What, How
Mobile Email: Why, What, How
 
Responsive Email Design
Responsive Email DesignResponsive Email Design
Responsive Email Design
 
Hard-Won Lessons in Responsive Email Design - ConvergeSE 2014
Hard-Won Lessons in Responsive Email Design - ConvergeSE 2014Hard-Won Lessons in Responsive Email Design - ConvergeSE 2014
Hard-Won Lessons in Responsive Email Design - ConvergeSE 2014
 
Modular email templates
Modular email templatesModular email templates
Modular email templates
 

Similar to Responsive HTML Email

Week 1 - Interactive News Editing and Producing
Week 1 - Interactive News Editing and ProducingWeek 1 - Interactive News Editing and Producing
Week 1 - Interactive News Editing and Producing
kurtgessler
 
Email responsive
Email responsiveEmail responsive
Email responsive
Justin Wu
 
Code &amp; design your first website (3:16)
Code &amp; design your first website (3:16)Code &amp; design your first website (3:16)
Code &amp; design your first website (3:16)
Thinkful
 
Code & Design your first website 4/18
Code & Design your first website 4/18Code & Design your first website 4/18
Code & Design your first website 4/18
TJ Stalcup
 
Class1slides
Class1slidesClass1slides
Class1slides
Alexis Goldstein
 
Online sub editing workshop
Online sub editing workshopOnline sub editing workshop
Online sub editing workshop
Fiona C
 
Intro To Twitter Bootstrap
Intro To Twitter BootstrapIntro To Twitter Bootstrap
Intro To Twitter Bootstrap
Ahmed Haque
 
Introducing Cascading Style Sheets
Introducing Cascading Style SheetsIntroducing Cascading Style Sheets
Introducing Cascading Style Sheets
St. Petersburg College
 
Popping the Hood: How to Create Custom SharePoint Branding by Randy Drisgill ...
Popping the Hood: How to Create Custom SharePoint Branding by Randy Drisgill ...Popping the Hood: How to Create Custom SharePoint Branding by Randy Drisgill ...
Popping the Hood: How to Create Custom SharePoint Branding by Randy Drisgill ...
SPTechCon
 
Code & Design Your First Website (Downtown Los Angeles)
Code & Design Your First Website (Downtown Los Angeles)Code & Design Your First Website (Downtown Los Angeles)
Code & Design Your First Website (Downtown Los Angeles)
Thinkful
 
Guest Posting 101
Guest Posting 101Guest Posting 101
Guest Posting 101
topherbeats
 
Intro to ExpressionEngine and CodeIgniter
Intro to ExpressionEngine and CodeIgniterIntro to ExpressionEngine and CodeIgniter
Intro to ExpressionEngine and CodeIgniter
brightrocket
 
Creative Guidelines
Creative GuidelinesCreative Guidelines
Creative Guidelines
Wendy Peichel
 
How to make your emails look good naked
How to make your emails look good nakedHow to make your emails look good naked
How to make your emails look good naked
mike_ragan
 
Web Components at Scale, HTML5DevConf 2014-10-21
Web Components at Scale, HTML5DevConf 2014-10-21Web Components at Scale, HTML5DevConf 2014-10-21
Web Components at Scale, HTML5DevConf 2014-10-21
Chris Danford
 
WebSG - HTML Email Newsletters
WebSG - HTML Email NewslettersWebSG - HTML Email Newsletters
WebSG - HTML Email Newsletters
Sean Thambiah
 
Week 2 - Interactive News Editing and Producing
Week 2 - Interactive News Editing and ProducingWeek 2 - Interactive News Editing and Producing
Week 2 - Interactive News Editing and Producing
kurtgessler
 
1-22-24 INFO 2106.pptx
1-22-24 INFO 2106.pptx1-22-24 INFO 2106.pptx
1-22-24 INFO 2106.pptx
MattMarino13
 
HTML email best practices
HTML email best practicesHTML email best practices
HTML email best practices
Jeffrey Barke
 
HTML email best practices
HTML email best practicesHTML email best practices
HTML email best practices
Jeffrey Barke
 

Similar to Responsive HTML Email (20)

Week 1 - Interactive News Editing and Producing
Week 1 - Interactive News Editing and ProducingWeek 1 - Interactive News Editing and Producing
Week 1 - Interactive News Editing and Producing
 
Email responsive
Email responsiveEmail responsive
Email responsive
 
Code &amp; design your first website (3:16)
Code &amp; design your first website (3:16)Code &amp; design your first website (3:16)
Code &amp; design your first website (3:16)
 
Code & Design your first website 4/18
Code & Design your first website 4/18Code & Design your first website 4/18
Code & Design your first website 4/18
 
Class1slides
Class1slidesClass1slides
Class1slides
 
Online sub editing workshop
Online sub editing workshopOnline sub editing workshop
Online sub editing workshop
 
Intro To Twitter Bootstrap
Intro To Twitter BootstrapIntro To Twitter Bootstrap
Intro To Twitter Bootstrap
 
Introducing Cascading Style Sheets
Introducing Cascading Style SheetsIntroducing Cascading Style Sheets
Introducing Cascading Style Sheets
 
Popping the Hood: How to Create Custom SharePoint Branding by Randy Drisgill ...
Popping the Hood: How to Create Custom SharePoint Branding by Randy Drisgill ...Popping the Hood: How to Create Custom SharePoint Branding by Randy Drisgill ...
Popping the Hood: How to Create Custom SharePoint Branding by Randy Drisgill ...
 
Code & Design Your First Website (Downtown Los Angeles)
Code & Design Your First Website (Downtown Los Angeles)Code & Design Your First Website (Downtown Los Angeles)
Code & Design Your First Website (Downtown Los Angeles)
 
Guest Posting 101
Guest Posting 101Guest Posting 101
Guest Posting 101
 
Intro to ExpressionEngine and CodeIgniter
Intro to ExpressionEngine and CodeIgniterIntro to ExpressionEngine and CodeIgniter
Intro to ExpressionEngine and CodeIgniter
 
Creative Guidelines
Creative GuidelinesCreative Guidelines
Creative Guidelines
 
How to make your emails look good naked
How to make your emails look good nakedHow to make your emails look good naked
How to make your emails look good naked
 
Web Components at Scale, HTML5DevConf 2014-10-21
Web Components at Scale, HTML5DevConf 2014-10-21Web Components at Scale, HTML5DevConf 2014-10-21
Web Components at Scale, HTML5DevConf 2014-10-21
 
WebSG - HTML Email Newsletters
WebSG - HTML Email NewslettersWebSG - HTML Email Newsletters
WebSG - HTML Email Newsletters
 
Week 2 - Interactive News Editing and Producing
Week 2 - Interactive News Editing and ProducingWeek 2 - Interactive News Editing and Producing
Week 2 - Interactive News Editing and Producing
 
1-22-24 INFO 2106.pptx
1-22-24 INFO 2106.pptx1-22-24 INFO 2106.pptx
1-22-24 INFO 2106.pptx
 
HTML email best practices
HTML email best practicesHTML email best practices
HTML email best practices
 
HTML email best practices
HTML email best practicesHTML email best practices
HTML email best practices
 

Recently uploaded

Identity Issues (Slideshow by: Kal-el Go)
Identity Issues (Slideshow by: Kal-el Go)Identity Issues (Slideshow by: Kal-el Go)
Identity Issues (Slideshow by: Kal-el Go)
Kal-el Shows
 
Pranay Mhatre Introduction cum Portfolio
Pranay Mhatre Introduction cum PortfolioPranay Mhatre Introduction cum Portfolio
Pranay Mhatre Introduction cum Portfolio
Pranay Мhatre
 
Indore Girls Call 000XX00000 Provide Best And Top Girl Service And No1 in City
Indore Girls Call 000XX00000 Provide Best And Top Girl Service And No1 in CityIndore Girls Call 000XX00000 Provide Best And Top Girl Service And No1 in City
Indore Girls Call 000XX00000 Provide Best And Top Girl Service And No1 in City
bookneha89
 
2024_summer_my_dream_from_gnjpuser_20240708
2024_summer_my_dream_from_gnjpuser_202407082024_summer_my_dream_from_gnjpuser_20240708
2024_summer_my_dream_from_gnjpuser_20240708
kousato1
 
ecc3d98e-fb3b-4fe4-a6ff-fbd8d2a86392.pdf
ecc3d98e-fb3b-4fe4-a6ff-fbd8d2a86392.pdfecc3d98e-fb3b-4fe4-a6ff-fbd8d2a86392.pdf
ecc3d98e-fb3b-4fe4-a6ff-fbd8d2a86392.pdf
MojtabaMeghdari
 
Unit-1 OOMD- Inthhro- class modeling.ppt
Unit-1 OOMD- Inthhro- class modeling.pptUnit-1 OOMD- Inthhro- class modeling.ppt
Unit-1 OOMD- Inthhro- class modeling.ppt
ChiragSuresh
 
High End Girls Call Navi Mumbai 9930245274 Provide Best And Top Girl Service ...
High End Girls Call Navi Mumbai 9930245274 Provide Best And Top Girl Service ...High End Girls Call Navi Mumbai 9930245274 Provide Best And Top Girl Service ...
High End Girls Call Navi Mumbai 9930245274 Provide Best And Top Girl Service ...
sharonblush
 
SMACNA - DUCT CONSTRUCTION STANDARDS-2005.pdf
SMACNA -  DUCT CONSTRUCTION STANDARDS-2005.pdfSMACNA -  DUCT CONSTRUCTION STANDARDS-2005.pdf
SMACNA - DUCT CONSTRUCTION STANDARDS-2005.pdf
Magdiel70
 
2024_summer_my_dream_from_users_gnjp_20240708
2024_summer_my_dream_from_users_gnjp_202407082024_summer_my_dream_from_users_gnjp_20240708
2024_summer_my_dream_from_users_gnjp_20240708
kousato1
 
Introduction of Stone Display Stand.pptx
Introduction of Stone Display Stand.pptxIntroduction of Stone Display Stand.pptx
Introduction of Stone Display Stand.pptx
Xiamen Tsianfan Industrial & Trading Co.,Ltd.
 
Topup Girls Call Indore 000XX00000 Provide Best And Top Girl Service And No1 ...
Topup Girls Call Indore 000XX00000 Provide Best And Top Girl Service And No1 ...Topup Girls Call Indore 000XX00000 Provide Best And Top Girl Service And No1 ...
Topup Girls Call Indore 000XX00000 Provide Best And Top Girl Service And No1 ...
monikaservice00
 
Girls call Service Indore 000XX00000 Provide Best And Top Girl Service And No...
Girls call Service Indore 000XX00000 Provide Best And Top Girl Service And No...Girls call Service Indore 000XX00000 Provide Best And Top Girl Service And No...
Girls call Service Indore 000XX00000 Provide Best And Top Girl Service And No...
sonalibook860
 
Introduction to Vertical Cities Vertical cities are high-density, mixed-use ...
Introduction to Vertical Cities  Vertical cities are high-density, mixed-use ...Introduction to Vertical Cities  Vertical cities are high-density, mixed-use ...
Introduction to Vertical Cities Vertical cities are high-density, mixed-use ...
Mostafa Abd Elrahman
 
SS26 Men's Fashion Trend Book Peclers Paris
SS26 Men's Fashion Trend Book Peclers ParisSS26 Men's Fashion Trend Book Peclers Paris
SS26 Men's Fashion Trend Book Peclers Paris
Peclers Paris
 
HongHao Furniture Catalogue EN 202407 - Store Fit-out.pdf
HongHao Furniture Catalogue EN 202407 - Store Fit-out.pdfHongHao Furniture Catalogue EN 202407 - Store Fit-out.pdf
HongHao Furniture Catalogue EN 202407 - Store Fit-out.pdf
Hong Hao Furniture Ltd.
 
Carleton University degree offer diploma Transcript
Carleton University degree offer diploma TranscriptCarleton University degree offer diploma Transcript
Carleton University degree offer diploma Transcript
eamhs
 
Acclerating_the_energy_transition_Microsoft_x_WindEurope_1711355110.pdf
Acclerating_the_energy_transition_Microsoft_x_WindEurope_1711355110.pdfAcclerating_the_energy_transition_Microsoft_x_WindEurope_1711355110.pdf
Acclerating_the_energy_transition_Microsoft_x_WindEurope_1711355110.pdf
ssuserdee4d8
 
Chinese Girls Call Indore 000XX00000 Provide Best And Top Girl Service And No...
Chinese Girls Call Indore 000XX00000 Provide Best And Top Girl Service And No...Chinese Girls Call Indore 000XX00000 Provide Best And Top Girl Service And No...
Chinese Girls Call Indore 000XX00000 Provide Best And Top Girl Service And No...
monikaservice00
 
Girls Call Pune 000XX00000 Provide Best And Top Girl Service And No1 in City
Girls Call Pune 000XX00000 Provide Best And Top Girl Service And No1 in CityGirls Call Pune 000XX00000 Provide Best And Top Girl Service And No1 in City
Girls Call Pune 000XX00000 Provide Best And Top Girl Service And No1 in City
sexytaniya455
 
Google UX Design Certificate - Portfolio Project 1 - Case study slide deck -T...
Google UX Design Certificate - Portfolio Project 1 - Case study slide deck -T...Google UX Design Certificate - Portfolio Project 1 - Case study slide deck -T...
Google UX Design Certificate - Portfolio Project 1 - Case study slide deck -T...
philipjuuu
 

Recently uploaded (20)

Identity Issues (Slideshow by: Kal-el Go)
Identity Issues (Slideshow by: Kal-el Go)Identity Issues (Slideshow by: Kal-el Go)
Identity Issues (Slideshow by: Kal-el Go)
 
Pranay Mhatre Introduction cum Portfolio
Pranay Mhatre Introduction cum PortfolioPranay Mhatre Introduction cum Portfolio
Pranay Mhatre Introduction cum Portfolio
 
Indore Girls Call 000XX00000 Provide Best And Top Girl Service And No1 in City
Indore Girls Call 000XX00000 Provide Best And Top Girl Service And No1 in CityIndore Girls Call 000XX00000 Provide Best And Top Girl Service And No1 in City
Indore Girls Call 000XX00000 Provide Best And Top Girl Service And No1 in City
 
2024_summer_my_dream_from_gnjpuser_20240708
2024_summer_my_dream_from_gnjpuser_202407082024_summer_my_dream_from_gnjpuser_20240708
2024_summer_my_dream_from_gnjpuser_20240708
 
ecc3d98e-fb3b-4fe4-a6ff-fbd8d2a86392.pdf
ecc3d98e-fb3b-4fe4-a6ff-fbd8d2a86392.pdfecc3d98e-fb3b-4fe4-a6ff-fbd8d2a86392.pdf
ecc3d98e-fb3b-4fe4-a6ff-fbd8d2a86392.pdf
 
Unit-1 OOMD- Inthhro- class modeling.ppt
Unit-1 OOMD- Inthhro- class modeling.pptUnit-1 OOMD- Inthhro- class modeling.ppt
Unit-1 OOMD- Inthhro- class modeling.ppt
 
High End Girls Call Navi Mumbai 9930245274 Provide Best And Top Girl Service ...
High End Girls Call Navi Mumbai 9930245274 Provide Best And Top Girl Service ...High End Girls Call Navi Mumbai 9930245274 Provide Best And Top Girl Service ...
High End Girls Call Navi Mumbai 9930245274 Provide Best And Top Girl Service ...
 
SMACNA - DUCT CONSTRUCTION STANDARDS-2005.pdf
SMACNA -  DUCT CONSTRUCTION STANDARDS-2005.pdfSMACNA -  DUCT CONSTRUCTION STANDARDS-2005.pdf
SMACNA - DUCT CONSTRUCTION STANDARDS-2005.pdf
 
2024_summer_my_dream_from_users_gnjp_20240708
2024_summer_my_dream_from_users_gnjp_202407082024_summer_my_dream_from_users_gnjp_20240708
2024_summer_my_dream_from_users_gnjp_20240708
 
Introduction of Stone Display Stand.pptx
Introduction of Stone Display Stand.pptxIntroduction of Stone Display Stand.pptx
Introduction of Stone Display Stand.pptx
 
Topup Girls Call Indore 000XX00000 Provide Best And Top Girl Service And No1 ...
Topup Girls Call Indore 000XX00000 Provide Best And Top Girl Service And No1 ...Topup Girls Call Indore 000XX00000 Provide Best And Top Girl Service And No1 ...
Topup Girls Call Indore 000XX00000 Provide Best And Top Girl Service And No1 ...
 
Girls call Service Indore 000XX00000 Provide Best And Top Girl Service And No...
Girls call Service Indore 000XX00000 Provide Best And Top Girl Service And No...Girls call Service Indore 000XX00000 Provide Best And Top Girl Service And No...
Girls call Service Indore 000XX00000 Provide Best And Top Girl Service And No...
 
Introduction to Vertical Cities Vertical cities are high-density, mixed-use ...
Introduction to Vertical Cities  Vertical cities are high-density, mixed-use ...Introduction to Vertical Cities  Vertical cities are high-density, mixed-use ...
Introduction to Vertical Cities Vertical cities are high-density, mixed-use ...
 
SS26 Men's Fashion Trend Book Peclers Paris
SS26 Men's Fashion Trend Book Peclers ParisSS26 Men's Fashion Trend Book Peclers Paris
SS26 Men's Fashion Trend Book Peclers Paris
 
HongHao Furniture Catalogue EN 202407 - Store Fit-out.pdf
HongHao Furniture Catalogue EN 202407 - Store Fit-out.pdfHongHao Furniture Catalogue EN 202407 - Store Fit-out.pdf
HongHao Furniture Catalogue EN 202407 - Store Fit-out.pdf
 
Carleton University degree offer diploma Transcript
Carleton University degree offer diploma TranscriptCarleton University degree offer diploma Transcript
Carleton University degree offer diploma Transcript
 
Acclerating_the_energy_transition_Microsoft_x_WindEurope_1711355110.pdf
Acclerating_the_energy_transition_Microsoft_x_WindEurope_1711355110.pdfAcclerating_the_energy_transition_Microsoft_x_WindEurope_1711355110.pdf
Acclerating_the_energy_transition_Microsoft_x_WindEurope_1711355110.pdf
 
Chinese Girls Call Indore 000XX00000 Provide Best And Top Girl Service And No...
Chinese Girls Call Indore 000XX00000 Provide Best And Top Girl Service And No...Chinese Girls Call Indore 000XX00000 Provide Best And Top Girl Service And No...
Chinese Girls Call Indore 000XX00000 Provide Best And Top Girl Service And No...
 
Girls Call Pune 000XX00000 Provide Best And Top Girl Service And No1 in City
Girls Call Pune 000XX00000 Provide Best And Top Girl Service And No1 in CityGirls Call Pune 000XX00000 Provide Best And Top Girl Service And No1 in City
Girls Call Pune 000XX00000 Provide Best And Top Girl Service And No1 in City
 
Google UX Design Certificate - Portfolio Project 1 - Case study slide deck -T...
Google UX Design Certificate - Portfolio Project 1 - Case study slide deck -T...Google UX Design Certificate - Portfolio Project 1 - Case study slide deck -T...
Google UX Design Certificate - Portfolio Project 1 - Case study slide deck -T...
 

Responsive HTML Email

  • 1. Responsive HTML Email https://flic.kr/p/idKefi
  • 2. Benjy Stanton Freelance web designer
  • 5. 1. Gather content 2. List elements on paper 3. Sketch wireframes 4. Mock-up design 5. Write the code 6. Inline CSS 7. Test in web browsers 8. Test with ‘real’ email clients 9. Test on virtual email clients 10. Lift-off!
  • 6. Design with data https://flic.kr/p/i3Hm7i
  • 9. Start with plain text • Encourages a ‘Content First’ approach • Not having a plain text will anger the spam filters • Some older email clients can’t handle html • Some people prefer plain text and will set their email clients accordingly
  • 10. Images off by default • Most email clients block images by default • Content should make sense with images off • Style ALT text so email looks good even without images
  • 11. Link to web view • People may have images turned off • The html may not be rendering properly • It’s a handy way to share the email
  • 13. “People spend a lot of time worrying about email clients with 1% usage; accessibility is a much bigger issue” – Mark, Rebelmail
  • 15. • Tables are optimised to preserve logical reading order • Heading elements used • Text colour contrast is sufficient • Subject line is concise and descriptive • Headings summarise content that follows • Link text is meaningful (not “read more” or “click here”)
  • 17. Back to the design process
  • 18. Client brief • main objective of the email • target audience • an early draft of the content • guidance on potential design style (including imagery and brand guidelines)
  • 19. Start with real content https://flic.kr/p/ic3Hi9
  • 20. • Logo • Main image • Heading • Paragraph (or two) • A main call to action • Contact details • Social media icons • Small print • Unsubscribe link • View in a browser link
  • 21. Make a list • List the elements on some paper • Mark them up as h1, p, button etc. • develop a hierarchy and a source order (good for mobile first approach)
  • 24. How big should an email be? • 600px wide for “desktop” email clients • I’ve already decided on the source order, so no real need to mock-up at narrower widths • Height and weight: smaller the better
  • 25. Keep Things Simple • Use just 1 or 2 columns if you can • Be generous with spacing • Complicated designs take ages to test and debug
  • 26. Consider how things will look in the inbox
  • 32. Inline your CSS We need to do this because Gmail strips CSS from the <style> tag.
  • 34. Use tables Use <table></table> because Outlook has poor support for CSS based layouts https://www.campaignmonitor.com/guides/coding/guidelines/
  • 35. Attribute selectors Use attribute selectors for any styles contained in your media queries to make sure Yahoo! ignores them. https://www.campaignmonitor.com/guides/mobile/coding/
  • 36. Use !important Use !important in your media queries to make sure the styles override any inline styles https://www.campaignmonitor.com/guides/mobile/coding/
  • 37. Checklist • Proof read the copy • Check phone numbers and email addresses • Check you’ve included alt text and titles attributes • Remove unused CSS • Optimize images • Check email with images turned-off • Check images and links have absolute paths
  • 41. Test on real devices • Gmail.com • Outlook.com • Yahoo.com • AOL.com • iPhone 5c • iPad • Mail (OSX) • Thunderbird (OSX) • Outlook (Windows) • Windows Live Mail
  • 43. Inspecting is tricky Test in old browsers like IE7 instead
  • 44. Outlook for free Start a Office trial, then don’t renew it. You still get to use Outlook for testing. Shhhh, don’t tell anyone.
  • 46. Stuck? Check the interwebs • Campaign Monitor • Litmus • Email on Acid
  • 47. Beating spam filters • Use test services provided by ESPs • Use www.mail-tester.com • Write good content
  • 49. Further Reading Making Responsive HTML Emails benjystanton.co.uk/blog/making-responsive-html-emails/ The Ultimate Guide to CSS campaignmonitor.com/css/ The Email Design Guide mailchimp.com/resources/email-design-guide Can Email Be Responsive? alistapart.com/article/can-email-be-responsive Five Ways to Test an Email litmus.com/blog/five-ways-to-test-an-email
  • 50. Further Reading Email Design Review emaildesignreview.com Let’s fix email letsfixemail.com The design of government emails designnotes.blog.gov.uk/2014/09/04/the-design-of-government-emails Litmus Email Builder litmus.com/email-builder What you need to know about using fonts in email adestra.com/what-need-know-using-fonts-in-email
  • 51. Further Reading 6 Email Client Hacks You Need To Know freshinbox.com/blog/6-email-client-hacks-infographic Best Practices for Plain Text Emails litmus.com/blog/best-practices-for-plain-text-emails-a-look-at-why-theyre-important The Ultimate Guide to Styled ALT Text in Email litmus.com/blog/the-ultimate-guide-to-styled-alt-text-in-email Image Blocking in HTML Email campaignmonitor.com/resources/will-it-work/image-blocking/ Color blindness and email: Are you designing for accessibility? www.campaignmonitor.com/blog/post/4267/color-blindness-accessibility-and-the-vision- impaired-in-email-design
  • 52. Thanks! benjystanton.co.uk @benjystanton https://flic.kr/p/hXzsG9