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)
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
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

一比一原版(Hull毕业证)英国哈珀亚当斯大学毕业证如何办理
一比一原版(Hull毕业证)英国哈珀亚当斯大学毕业证如何办理一比一原版(Hull毕业证)英国哈珀亚当斯大学毕业证如何办理
一比一原版(Hull毕业证)英国哈珀亚当斯大学毕业证如何办理
aonx8o5f
 
一比一原版加拿大瑞尔森大学毕业证如何办理
一比一原版加拿大瑞尔森大学毕业证如何办理一比一原版加拿大瑞尔森大学毕业证如何办理
一比一原版加拿大瑞尔森大学毕业证如何办理
oydykuz
 
一比一原版(爱大毕业证)美国爱荷华大学毕业证如何办理
一比一原版(爱大毕业证)美国爱荷华大学毕业证如何办理一比一原版(爱大毕业证)美国爱荷华大学毕业证如何办理
一比一原版(爱大毕业证)美国爱荷华大学毕业证如何办理
ynrtjotp
 
一比一原版(lbs毕业证书)伦敦商学院毕业证如何办理
一比一原版(lbs毕业证书)伦敦商学院毕业证如何办理一比一原版(lbs毕业证书)伦敦商学院毕业证如何办理
一比一原版(lbs毕业证书)伦敦商学院毕业证如何办理
7jpwahiy
 
一比一原版(NU毕业证书)诺森比亚大学毕业证如何办理
一比一原版(NU毕业证书)诺森比亚大学毕业证如何办理一比一原版(NU毕业证书)诺森比亚大学毕业证如何办理
一比一原版(NU毕业证书)诺森比亚大学毕业证如何办理
21uul8se
 
一比一原版(OU毕业证)美国俄克拉荷马大学毕业证如何办理
一比一原版(OU毕业证)美国俄克拉荷马大学毕业证如何办理一比一原版(OU毕业证)美国俄克拉荷马大学毕业证如何办理
一比一原版(OU毕业证)美国俄克拉荷马大学毕业证如何办理
67n7f53
 
一比一原版(lu毕业证书)英国拉夫堡大学毕业证如何办理
一比一原版(lu毕业证书)英国拉夫堡大学毕业证如何办理一比一原版(lu毕业证书)英国拉夫堡大学毕业证如何办理
一比一原版(lu毕业证书)英国拉夫堡大学毕业证如何办理
ubogumo
 
一比一原版美国明尼苏达大学双城分校毕业证(UMTC学位证)如何办理
一比一原版美国明尼苏达大学双城分校毕业证(UMTC学位证)如何办理一比一原版美国明尼苏达大学双城分校毕业证(UMTC学位证)如何办理
一比一原版美国明尼苏达大学双城分校毕业证(UMTC学位证)如何办理
sf3cfttw
 
一比一原版美国加州大学戴维斯分校毕业证(ucdavis学位证)如何办理
一比一原版美国加州大学戴维斯分校毕业证(ucdavis学位证)如何办理一比一原版美国加州大学戴维斯分校毕业证(ucdavis学位证)如何办理
一比一原版美国加州大学戴维斯分校毕业证(ucdavis学位证)如何办理
twqryq79
 
一比一原版(USQ毕业证书)南昆士兰大学毕业证如何办理
一比一原版(USQ毕业证书)南昆士兰大学毕业证如何办理一比一原版(USQ毕业证书)南昆士兰大学毕业证如何办理
一比一原版(USQ毕业证书)南昆士兰大学毕业证如何办理
p74xokfq
 
一比一原版英国伦敦政治经济学院毕业证(LSE学位证)如何办理
一比一原版英国伦敦政治经济学院毕业证(LSE学位证)如何办理一比一原版英国伦敦政治经济学院毕业证(LSE学位证)如何办理
一比一原版英国伦敦政治经济学院毕业证(LSE学位证)如何办理
k4krdgxx
 
Value based approach to heritae conservation -.docx
Value based approach to heritae conservation -.docxValue based approach to heritae conservation -.docx
Value based approach to heritae conservation -.docx
JIT KUMAR GUPTA
 
The Power to Battle! Slideshow by: Kal-el
The Power to Battle! Slideshow by: Kal-elThe Power to Battle! Slideshow by: Kal-el
The Power to Battle! Slideshow by: Kal-el
Kal-el Shows
 
欧洲杯足彩-欧洲杯足彩比赛投注-欧洲杯足彩比赛投注官网|【​网址​🎉ac10.net🎉​】
欧洲杯足彩-欧洲杯足彩比赛投注-欧洲杯足彩比赛投注官网|【​网址​🎉ac10.net🎉​】欧洲杯足彩-欧洲杯足彩比赛投注-欧洲杯足彩比赛投注官网|【​网址​🎉ac10.net🎉​】
欧洲杯足彩-欧洲杯足彩比赛投注-欧洲杯足彩比赛投注官网|【​网址​🎉ac10.net🎉​】
bljeremy734
 
一比一原版(UWS毕业证)澳洲西悉尼大学毕业证如何办理
一比一原版(UWS毕业证)澳洲西悉尼大学毕业证如何办理一比一原版(UWS毕业证)澳洲西悉尼大学毕业证如何办理
一比一原版(UWS毕业证)澳洲西悉尼大学毕业证如何办理
t34zod9l
 
一比一原版(Deakin毕业证书)澳洲迪肯大学毕业证文凭如何办理
一比一原版(Deakin毕业证书)澳洲迪肯大学毕业证文凭如何办理一比一原版(Deakin毕业证书)澳洲迪肯大学毕业证文凭如何办理
一比一原版(Deakin毕业证书)澳洲迪肯大学毕业证文凭如何办理
k4krdgxx
 
一比一原版(ECU毕业证)澳洲埃迪斯科文大学毕业证如何办理
一比一原版(ECU毕业证)澳洲埃迪斯科文大学毕业证如何办理一比一原版(ECU毕业证)澳洲埃迪斯科文大学毕业证如何办理
一比一原版(ECU毕业证)澳洲埃迪斯科文大学毕业证如何办理
kohd1ci2
 
欧洲杯足彩-欧洲杯足彩买球软件-欧洲杯足彩买球软件下载|【​网址​🎉ac123.net🎉​】
欧洲杯足彩-欧洲杯足彩买球软件-欧洲杯足彩买球软件下载|【​网址​🎉ac123.net🎉​】欧洲杯足彩-欧洲杯足彩买球软件-欧洲杯足彩买球软件下载|【​网址​🎉ac123.net🎉​】
欧洲杯足彩-欧洲杯足彩买球软件-欧洲杯足彩买球软件下载|【​网址​🎉ac123.net🎉​】
batchelorerbm45967
 
一比一原版(UCB毕业证)英国伯明翰大学学院毕业证如何办理
一比一原版(UCB毕业证)英国伯明翰大学学院毕业证如何办理一比一原版(UCB毕业证)英国伯明翰大学学院毕业证如何办理
一比一原版(UCB毕业证)英国伯明翰大学学院毕业证如何办理
zv943dhb
 
Plastic Molding Infographic - RPWORLD.pdf
Plastic Molding Infographic - RPWORLD.pdfPlastic Molding Infographic - RPWORLD.pdf
Plastic Molding Infographic - RPWORLD.pdf
RPWORLD Manufacturing
 

Recently uploaded (20)

一比一原版(Hull毕业证)英国哈珀亚当斯大学毕业证如何办理
一比一原版(Hull毕业证)英国哈珀亚当斯大学毕业证如何办理一比一原版(Hull毕业证)英国哈珀亚当斯大学毕业证如何办理
一比一原版(Hull毕业证)英国哈珀亚当斯大学毕业证如何办理
 
一比一原版加拿大瑞尔森大学毕业证如何办理
一比一原版加拿大瑞尔森大学毕业证如何办理一比一原版加拿大瑞尔森大学毕业证如何办理
一比一原版加拿大瑞尔森大学毕业证如何办理
 
一比一原版(爱大毕业证)美国爱荷华大学毕业证如何办理
一比一原版(爱大毕业证)美国爱荷华大学毕业证如何办理一比一原版(爱大毕业证)美国爱荷华大学毕业证如何办理
一比一原版(爱大毕业证)美国爱荷华大学毕业证如何办理
 
一比一原版(lbs毕业证书)伦敦商学院毕业证如何办理
一比一原版(lbs毕业证书)伦敦商学院毕业证如何办理一比一原版(lbs毕业证书)伦敦商学院毕业证如何办理
一比一原版(lbs毕业证书)伦敦商学院毕业证如何办理
 
一比一原版(NU毕业证书)诺森比亚大学毕业证如何办理
一比一原版(NU毕业证书)诺森比亚大学毕业证如何办理一比一原版(NU毕业证书)诺森比亚大学毕业证如何办理
一比一原版(NU毕业证书)诺森比亚大学毕业证如何办理
 
一比一原版(OU毕业证)美国俄克拉荷马大学毕业证如何办理
一比一原版(OU毕业证)美国俄克拉荷马大学毕业证如何办理一比一原版(OU毕业证)美国俄克拉荷马大学毕业证如何办理
一比一原版(OU毕业证)美国俄克拉荷马大学毕业证如何办理
 
一比一原版(lu毕业证书)英国拉夫堡大学毕业证如何办理
一比一原版(lu毕业证书)英国拉夫堡大学毕业证如何办理一比一原版(lu毕业证书)英国拉夫堡大学毕业证如何办理
一比一原版(lu毕业证书)英国拉夫堡大学毕业证如何办理
 
一比一原版美国明尼苏达大学双城分校毕业证(UMTC学位证)如何办理
一比一原版美国明尼苏达大学双城分校毕业证(UMTC学位证)如何办理一比一原版美国明尼苏达大学双城分校毕业证(UMTC学位证)如何办理
一比一原版美国明尼苏达大学双城分校毕业证(UMTC学位证)如何办理
 
一比一原版美国加州大学戴维斯分校毕业证(ucdavis学位证)如何办理
一比一原版美国加州大学戴维斯分校毕业证(ucdavis学位证)如何办理一比一原版美国加州大学戴维斯分校毕业证(ucdavis学位证)如何办理
一比一原版美国加州大学戴维斯分校毕业证(ucdavis学位证)如何办理
 
一比一原版(USQ毕业证书)南昆士兰大学毕业证如何办理
一比一原版(USQ毕业证书)南昆士兰大学毕业证如何办理一比一原版(USQ毕业证书)南昆士兰大学毕业证如何办理
一比一原版(USQ毕业证书)南昆士兰大学毕业证如何办理
 
一比一原版英国伦敦政治经济学院毕业证(LSE学位证)如何办理
一比一原版英国伦敦政治经济学院毕业证(LSE学位证)如何办理一比一原版英国伦敦政治经济学院毕业证(LSE学位证)如何办理
一比一原版英国伦敦政治经济学院毕业证(LSE学位证)如何办理
 
Value based approach to heritae conservation -.docx
Value based approach to heritae conservation -.docxValue based approach to heritae conservation -.docx
Value based approach to heritae conservation -.docx
 
The Power to Battle! Slideshow by: Kal-el
The Power to Battle! Slideshow by: Kal-elThe Power to Battle! Slideshow by: Kal-el
The Power to Battle! Slideshow by: Kal-el
 
欧洲杯足彩-欧洲杯足彩比赛投注-欧洲杯足彩比赛投注官网|【​网址​🎉ac10.net🎉​】
欧洲杯足彩-欧洲杯足彩比赛投注-欧洲杯足彩比赛投注官网|【​网址​🎉ac10.net🎉​】欧洲杯足彩-欧洲杯足彩比赛投注-欧洲杯足彩比赛投注官网|【​网址​🎉ac10.net🎉​】
欧洲杯足彩-欧洲杯足彩比赛投注-欧洲杯足彩比赛投注官网|【​网址​🎉ac10.net🎉​】
 
一比一原版(UWS毕业证)澳洲西悉尼大学毕业证如何办理
一比一原版(UWS毕业证)澳洲西悉尼大学毕业证如何办理一比一原版(UWS毕业证)澳洲西悉尼大学毕业证如何办理
一比一原版(UWS毕业证)澳洲西悉尼大学毕业证如何办理
 
一比一原版(Deakin毕业证书)澳洲迪肯大学毕业证文凭如何办理
一比一原版(Deakin毕业证书)澳洲迪肯大学毕业证文凭如何办理一比一原版(Deakin毕业证书)澳洲迪肯大学毕业证文凭如何办理
一比一原版(Deakin毕业证书)澳洲迪肯大学毕业证文凭如何办理
 
一比一原版(ECU毕业证)澳洲埃迪斯科文大学毕业证如何办理
一比一原版(ECU毕业证)澳洲埃迪斯科文大学毕业证如何办理一比一原版(ECU毕业证)澳洲埃迪斯科文大学毕业证如何办理
一比一原版(ECU毕业证)澳洲埃迪斯科文大学毕业证如何办理
 
欧洲杯足彩-欧洲杯足彩买球软件-欧洲杯足彩买球软件下载|【​网址​🎉ac123.net🎉​】
欧洲杯足彩-欧洲杯足彩买球软件-欧洲杯足彩买球软件下载|【​网址​🎉ac123.net🎉​】欧洲杯足彩-欧洲杯足彩买球软件-欧洲杯足彩买球软件下载|【​网址​🎉ac123.net🎉​】
欧洲杯足彩-欧洲杯足彩买球软件-欧洲杯足彩买球软件下载|【​网址​🎉ac123.net🎉​】
 
一比一原版(UCB毕业证)英国伯明翰大学学院毕业证如何办理
一比一原版(UCB毕业证)英国伯明翰大学学院毕业证如何办理一比一原版(UCB毕业证)英国伯明翰大学学院毕业证如何办理
一比一原版(UCB毕业证)英国伯明翰大学学院毕业证如何办理
 
Plastic Molding Infographic - RPWORLD.pdf
Plastic Molding Infographic - RPWORLD.pdfPlastic Molding Infographic - RPWORLD.pdf
Plastic Molding Infographic - RPWORLD.pdf
 

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)
  • 22.
  • 23.
  • 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
  • 27.
  • 28.
  • 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