SlideShare ist ein Scribd-Unternehmen logo
1 von 63
Downloaden Sie, um offline zu lesen
@lindsaylee13
@lindsaylee13
Designing Emails That Actually Work
Designing Emails That Actually Work
Designing Emails That Actually Work
Designing Emails That Actually Work
@lindsaylee13
@lindsaylee13
Email is Your Friend;
It Does Not Suck.
@lindsaylee13
You Can Create Emails
That Perform Well and
Deliver Results.
@lindsaylee13
@lindsaylee13
@lindsaylee13
@lindsaylee13
@lindsaylee13
@lindsaylee13
@lindsaylee13
The subscriber experience
is the flow in which someone
digests your email
before converting.
@lindsaylee13
From Name Subject Line Preheader
Open Preview Pane Full Message
Tap/Click Landing Page
@lindsaylee13
From Name
✔
@lindsaylee13
Subject Line
✔
@lindsaylee13
Preheader ✔
@lindsaylee13
Open
@lindsaylee13
Preview Pane
@lindsaylee13
Full Message
@lindsaylee13
Tap/Click
@lindsaylee13
Landing Page
@lindsaylee13
Concise Content
Over Length
• Your email is a doorway into
other channels
• Tell them the essentials
Scannable Layout
• Clear headings
• One or two column layout
• Contrast of weight and color
for content distinction
Make Your Calls
to Action Obvious
• Only have a few moments to
catch attention
• Can you narrow down to one
main CTA?
• Repeat your main CTAs
Designing Emails That Actually Work
Be Transparent in Your Language
NO
• Click Here
• Big Announcement!
• You Don’t Want to Miss This!
• New Items
YES
• Donate Now
• Sign Up for Our Webinar
• Start Your Free Trial Now
• We Have New Shoes
Remember
Image Blocking
• When possible, use HTML text
instead of graphical text
• Alt text is your friend
Designing Emails That Actually Work
Design with
Mobile in Mind
• 65% of all opens are on mobile
• Single column layout
• Make headlines ~28px
• Body copy ~16-20px
…More Mobile
Considerations
• Think about elements you see in apps
• What can be communicated through
icons?
• Let your content breathe
• Huge buttons
Fun Stuff
• Animated GIFs can add extra
interactivity
• Video…
Designing Emails That Actually Work
@lindsaylee13
Email
HTML
CSS
Images
Text
Design
Links
Hierarchy
Web
HTML
CSS
Images
Text
Design
Links
Hierarchy
✔
✔
✔
✔
✔
✔
✔
Some Ways Email and the Web are the Same
Web
<div>
<h1>
<p>
em
<style>
background-color
margin
Email
<table>
<td>
<td>
px
style=“font-face”
bgcolor
padding
Some Ways Email and the Web are Different
Designing Emails That Actually Work
Time to Code Like its 1999
Tables are
Your BFFs
• Use nested tables to structure
the layout of your email
• Poor support for CSS
positioning, floats, and clears
<table width=“600”><tr><td>
<table width=“100%”
cellspacing="0" cellpadding="0"
border="0">
<tr>
<td width=“250”></td>
<td width="350"></td>
</tr>
</table>
</td></tr></table>
KYSS (Keep Your
Styles Simple)
• Inline CSS
• Don’t attach styles externally
• Can use some CSS3 but
proceed with caution
<table>
<tr>
<td style=“font-family:Helvetica,
sans-serif; font-size:16px; font-
weight:bold; color:#e98300;>Hi, I’m
text!</td>
</tr>
</table>
Hi, I’m text!
Styling Block-Level Elements
<h1>I am a headline</h1>
<td style=“font-size:24px;font-weight:bold;>This is a headline in
email</td>
<p>I am a paragraph</p>
<td style=“font-size:18px;font-weight:bold;>This is a paragraph
in email</td>
✔
✔
Format Perfect
Images
• Style alt attributes
• Set borders to “0”
• Add style=“display:block” to
prevent gaps
• Set height and widths
<img
src=“http://www.emails.com/image/cat.j
pg” height=“250” width=“200” alt=“Cute
kitty” style=“display:block; font-
family:Helvetica; color:#0084ff; font-
size:18px;” border=“0”>
What About Responsiveness?
Designing Emails That Actually Work
Responsive Email Uses Media Queries
Designing Emails That Actually Work
@lindsaylee13
There are tons
of email clients out there
@lindsaylee13
Know Your Audience
• You never know…sometimes plain text emails will
do the trick
• Look for the lowest common denominator
Email Client Market Share
Stats from Litmus’ emailclientmarketshare.com,
June 2014
65%of all emails are opened on a mobile device
Test, test, test
@lindsaylee13
@lindsaylee13
Litmus Learning
Center
litmus.com/learning
• Email client market
share
• Code tips
@lindsaylee13
Email Design
Review
emaildesignreview.com
• Lots of inspirational
email design
@lindsaylee13
ExactTarget Blog
blog.exacttarget.com
• Current market trends
• Home to the Email
Swipe Files
@lindsaylee13
Email Swipe File
on Pinterest
pinterest.com/exacttarget/
email-swipe-file/
• Curated examples of
great email design
@lindsaylee13
Some People I Follow on Twitter
ETMC Design
@ETMC_Design
Andrea Smith
@andreasmith77
Chad White
@chadswhite
Justine Jordan
@meladorri
Brian Graves
@briangraves
Anna Yeaman
@stylecampaign
Thank You!
@lindsaylee13

Weitere ähnliche Inhalte

Andere mochten auch

Conversion Rate Optimisation
Conversion Rate OptimisationConversion Rate Optimisation
Conversion Rate OptimisationHristo Atanasov
 
Email Marketing Excellence - Dave Chaffey GetResponse Smart Insights
Email Marketing Excellence - Dave Chaffey GetResponse Smart InsightsEmail Marketing Excellence - Dave Chaffey GetResponse Smart Insights
Email Marketing Excellence - Dave Chaffey GetResponse Smart InsightsGetResponse
 
User Experience Factors That Can Make or Break Your Website
User Experience Factors That Can Make or Break Your WebsiteUser Experience Factors That Can Make or Break Your Website
User Experience Factors That Can Make or Break Your WebsiteSurefire Local
 
eCommerce Email Marketing 101
eCommerce Email Marketing 101eCommerce Email Marketing 101
eCommerce Email Marketing 101REMARKETY2015
 
Exploding 12 myths about presentations
Exploding 12 myths about presentationsExploding 12 myths about presentations
Exploding 12 myths about presentationsSOAP Presentations
 
Why Great Presenters are Boring People
Why Great Presenters are Boring PeopleWhy Great Presenters are Boring People
Why Great Presenters are Boring PeopleEthos3
 
Jenny and the Chicken
Jenny and the ChickenJenny and the Chicken
Jenny and the ChickenMash+Studio
 
Happiness as Your Business Model
Happiness as Your Business ModelHappiness as Your Business Model
Happiness as Your Business ModelTara Hunt
 
The Email Marketing Cheat Sheet
The Email Marketing Cheat SheetThe Email Marketing Cheat Sheet
The Email Marketing Cheat SheetMarketo
 
The Future of Presentations: Top Trends for Communicators
The Future of Presentations: Top Trends for CommunicatorsThe Future of Presentations: Top Trends for Communicators
The Future of Presentations: Top Trends for CommunicatorsHaiku Deck
 
ピッチをする前に知っておきたかったこと スタートアップの資金調達
ピッチをする前に知っておきたかったこと スタートアップの資金調達ピッチをする前に知っておきたかったこと スタートアップの資金調達
ピッチをする前に知っておきたかったこと スタートアップの資金調達Takaaki Umada
 
Design Principles of Excel Dashboards & Reports
Design Principles of Excel Dashboards & ReportsDesign Principles of Excel Dashboards & Reports
Design Principles of Excel Dashboards & ReportsWiley
 
8 creative tips for designers from specialists
8 creative tips for designers from specialists8 creative tips for designers from specialists
8 creative tips for designers from specialistsBannersnack
 
Email Marketing Presentation
Email Marketing PresentationEmail Marketing Presentation
Email Marketing PresentationIain Davenport
 
Tips for Designing, Testing & Delivering eLearning in a Multi-device World
Tips for Designing, Testing & Delivering eLearning in a Multi-device WorldTips for Designing, Testing & Delivering eLearning in a Multi-device World
Tips for Designing, Testing & Delivering eLearning in a Multi-device WorldUpside Learning Solutions
 

Andere mochten auch (16)

Conversion Rate Optimisation
Conversion Rate OptimisationConversion Rate Optimisation
Conversion Rate Optimisation
 
Email Marketing Excellence - Dave Chaffey GetResponse Smart Insights
Email Marketing Excellence - Dave Chaffey GetResponse Smart InsightsEmail Marketing Excellence - Dave Chaffey GetResponse Smart Insights
Email Marketing Excellence - Dave Chaffey GetResponse Smart Insights
 
User Experience Factors That Can Make or Break Your Website
User Experience Factors That Can Make or Break Your WebsiteUser Experience Factors That Can Make or Break Your Website
User Experience Factors That Can Make or Break Your Website
 
eCommerce Email Marketing 101
eCommerce Email Marketing 101eCommerce Email Marketing 101
eCommerce Email Marketing 101
 
Exploding 12 myths about presentations
Exploding 12 myths about presentationsExploding 12 myths about presentations
Exploding 12 myths about presentations
 
Why Great Presenters are Boring People
Why Great Presenters are Boring PeopleWhy Great Presenters are Boring People
Why Great Presenters are Boring People
 
The State of Creative Agency Land
The State of Creative Agency LandThe State of Creative Agency Land
The State of Creative Agency Land
 
Jenny and the Chicken
Jenny and the ChickenJenny and the Chicken
Jenny and the Chicken
 
Happiness as Your Business Model
Happiness as Your Business ModelHappiness as Your Business Model
Happiness as Your Business Model
 
The Email Marketing Cheat Sheet
The Email Marketing Cheat SheetThe Email Marketing Cheat Sheet
The Email Marketing Cheat Sheet
 
The Future of Presentations: Top Trends for Communicators
The Future of Presentations: Top Trends for CommunicatorsThe Future of Presentations: Top Trends for Communicators
The Future of Presentations: Top Trends for Communicators
 
ピッチをする前に知っておきたかったこと スタートアップの資金調達
ピッチをする前に知っておきたかったこと スタートアップの資金調達ピッチをする前に知っておきたかったこと スタートアップの資金調達
ピッチをする前に知っておきたかったこと スタートアップの資金調達
 
Design Principles of Excel Dashboards & Reports
Design Principles of Excel Dashboards & ReportsDesign Principles of Excel Dashboards & Reports
Design Principles of Excel Dashboards & Reports
 
8 creative tips for designers from specialists
8 creative tips for designers from specialists8 creative tips for designers from specialists
8 creative tips for designers from specialists
 
Email Marketing Presentation
Email Marketing PresentationEmail Marketing Presentation
Email Marketing Presentation
 
Tips for Designing, Testing & Delivering eLearning in a Multi-device World
Tips for Designing, Testing & Delivering eLearning in a Multi-device WorldTips for Designing, Testing & Delivering eLearning in a Multi-device World
Tips for Designing, Testing & Delivering eLearning in a Multi-device World
 

Ähnlich wie Designing Emails That Actually Work

Wait. What just happened to my email?
Wait. What just happened to my email?Wait. What just happened to my email?
Wait. What just happened to my email?Litmus
 
Understanding email hacks - Litmus Live London TEDC16
Understanding email hacks - Litmus Live London TEDC16Understanding email hacks - Litmus Live London TEDC16
Understanding email hacks - Litmus Live London TEDC16Mark Robbins
 
HTML Email Best Practice
HTML Email Best PracticeHTML Email Best Practice
HTML Email Best PracticeAmit Jain
 
Episode 14 - Basics of HTML for Salesforce
Episode 14 - Basics of HTML for SalesforceEpisode 14 - Basics of HTML for Salesforce
Episode 14 - Basics of HTML for SalesforceJitendra Zaa
 
Doing More with LESS for CSS
Doing More with LESS for CSSDoing More with LESS for CSS
Doing More with LESS for CSSTodd Anglin
 
Justine Jordan | SearchLove San Diego, 'Designed for Success: Optimizing The ...
Justine Jordan | SearchLove San Diego, 'Designed for Success: Optimizing The ...Justine Jordan | SearchLove San Diego, 'Designed for Success: Optimizing The ...
Justine Jordan | SearchLove San Diego, 'Designed for Success: Optimizing The ...Distilled
 
Designed for Success: Optimizing the Email Experience
Designed for Success: Optimizing the Email ExperienceDesigned for Success: Optimizing the Email Experience
Designed for Success: Optimizing the Email ExperienceLitmus
 
CSS (Cascading Style Sheet)
CSS (Cascading Style Sheet)CSS (Cascading Style Sheet)
CSS (Cascading Style Sheet)PumoTechnovation
 
Interactive Responsive Emails - Creative ways to innovate in email development
Interactive Responsive Emails - Creative ways to innovate in email developmentInteractive Responsive Emails - Creative ways to innovate in email development
Interactive Responsive Emails - Creative ways to innovate in email developmentMichael Posso
 
Troubleshooting Email Like a Pro
Troubleshooting Email Like a ProTroubleshooting Email Like a Pro
Troubleshooting Email Like a ProLitmus
 
HTML email design and usability
HTML email design and usabilityHTML email design and usability
HTML email design and usabilityKeith Kmett
 
33 "Must-Do" Tips to Improve HTML Email Design
33 "Must-Do" Tips to Improve HTML Email Design33 "Must-Do" Tips to Improve HTML Email Design
33 "Must-Do" Tips to Improve HTML Email DesignPinpointe On-Demand
 
Troubleshooting Email Like a Pro
Troubleshooting Email Like a ProTroubleshooting Email Like a Pro
Troubleshooting Email Like a ProLitmus
 

Ähnlich wie Designing Emails That Actually Work (20)

Wait. What just happened to my email?
Wait. What just happened to my email?Wait. What just happened to my email?
Wait. What just happened to my email?
 
Understanding email hacks - Litmus Live London TEDC16
Understanding email hacks - Litmus Live London TEDC16Understanding email hacks - Litmus Live London TEDC16
Understanding email hacks - Litmus Live London TEDC16
 
HTML Email Best Practice
HTML Email Best PracticeHTML Email Best Practice
HTML Email Best Practice
 
Episode 14 - Basics of HTML for Salesforce
Episode 14 - Basics of HTML for SalesforceEpisode 14 - Basics of HTML for Salesforce
Episode 14 - Basics of HTML for Salesforce
 
Doing More with LESS for CSS
Doing More with LESS for CSSDoing More with LESS for CSS
Doing More with LESS for CSS
 
Justine Jordan | SearchLove San Diego, 'Designed for Success: Optimizing The ...
Justine Jordan | SearchLove San Diego, 'Designed for Success: Optimizing The ...Justine Jordan | SearchLove San Diego, 'Designed for Success: Optimizing The ...
Justine Jordan | SearchLove San Diego, 'Designed for Success: Optimizing The ...
 
Email dssign rules
Email dssign rulesEmail dssign rules
Email dssign rules
 
Unit 3 (it workshop).pptx
Unit 3 (it workshop).pptxUnit 3 (it workshop).pptx
Unit 3 (it workshop).pptx
 
Creative Guidelines
Creative GuidelinesCreative Guidelines
Creative Guidelines
 
Designed for Success: Optimizing the Email Experience
Designed for Success: Optimizing the Email ExperienceDesigned for Success: Optimizing the Email Experience
Designed for Success: Optimizing the Email Experience
 
CSS (Cascading Style Sheet)
CSS (Cascading Style Sheet)CSS (Cascading Style Sheet)
CSS (Cascading Style Sheet)
 
Interactive Responsive Emails - Creative ways to innovate in email development
Interactive Responsive Emails - Creative ways to innovate in email developmentInteractive Responsive Emails - Creative ways to innovate in email development
Interactive Responsive Emails - Creative ways to innovate in email development
 
Troubleshooting Email Like a Pro
Troubleshooting Email Like a ProTroubleshooting Email Like a Pro
Troubleshooting Email Like a Pro
 
HTML email design and usability
HTML email design and usabilityHTML email design and usability
HTML email design and usability
 
33 "Must-Do" Tips to Improve HTML Email Design
33 "Must-Do" Tips to Improve HTML Email Design33 "Must-Do" Tips to Improve HTML Email Design
33 "Must-Do" Tips to Improve HTML Email Design
 
Troubleshooting Email Like a Pro
Troubleshooting Email Like a ProTroubleshooting Email Like a Pro
Troubleshooting Email Like a Pro
 
IntroHTML.ppt
IntroHTML.pptIntroHTML.ppt
IntroHTML.ppt
 
HTML.ppt
HTML.pptHTML.ppt
HTML.ppt
 
IntroHTML.ppt
IntroHTML.pptIntroHTML.ppt
IntroHTML.ppt
 
Successful email2013
Successful email2013Successful email2013
Successful email2013
 

Kürzlich hochgeladen

Create Funeral Invites Online @ feedvu.com
Create Funeral Invites Online @ feedvu.comCreate Funeral Invites Online @ feedvu.com
Create Funeral Invites Online @ feedvu.comjakyjhon00
 
Cold War Tensions Increase - 1945-1952.pptx
Cold War Tensions Increase - 1945-1952.pptxCold War Tensions Increase - 1945-1952.pptx
Cold War Tensions Increase - 1945-1952.pptxSamKuruvilla5
 
Designing for privacy: 3 essential UX habits for product teams
Designing for privacy: 3 essential UX habits for product teamsDesigning for privacy: 3 essential UX habits for product teams
Designing for privacy: 3 essential UX habits for product teamsBlock Party
 
Best-NO1 Pakistani Amil Baba Real Amil baba In Pakistan Najoomi Baba in Pakis...
Best-NO1 Pakistani Amil Baba Real Amil baba In Pakistan Najoomi Baba in Pakis...Best-NO1 Pakistani Amil Baba Real Amil baba In Pakistan Najoomi Baba in Pakis...
Best-NO1 Pakistani Amil Baba Real Amil baba In Pakistan Najoomi Baba in Pakis...Amil baba
 
Building+your+Data+Project+on+AWS+-+Luke+Anderson.pdf
Building+your+Data+Project+on+AWS+-+Luke+Anderson.pdfBuilding+your+Data+Project+on+AWS+-+Luke+Anderson.pdf
Building+your+Data+Project+on+AWS+-+Luke+Anderson.pdfsaidbilgen
 
Production of Erythromycin microbiology.pptx
Production of Erythromycin microbiology.pptxProduction of Erythromycin microbiology.pptx
Production of Erythromycin microbiology.pptxb2kshani34
 
UX Conference on UX Research Trends in 2024
UX Conference on UX Research Trends in 2024UX Conference on UX Research Trends in 2024
UX Conference on UX Research Trends in 2024mikailaoh
 
Math Group 3 Presentation OLOLOLOLILOOLLOLOL
Math Group 3 Presentation OLOLOLOLILOOLLOLOLMath Group 3 Presentation OLOLOLOLILOOLLOLOL
Math Group 3 Presentation OLOLOLOLILOOLLOLOLkenzukiri
 
Embroidery design from embroidery magazine
Embroidery design from embroidery magazineEmbroidery design from embroidery magazine
Embroidery design from embroidery magazineRivanEleraki
 
How to use Ai for UX UI Design | ChatGPT
How to use Ai for UX UI Design | ChatGPTHow to use Ai for UX UI Design | ChatGPT
How to use Ai for UX UI Design | ChatGPTThink 360 Studio
 
The future of UX design support tools - talk Paris March 2024
The future of UX design support tools - talk Paris March 2024The future of UX design support tools - talk Paris March 2024
The future of UX design support tools - talk Paris March 2024Alan Dix
 
Design mental models for managing large-scale dbt projects. March 21, 2024 in...
Design mental models for managing large-scale dbt projects. March 21, 2024 in...Design mental models for managing large-scale dbt projects. March 21, 2024 in...
Design mental models for managing large-scale dbt projects. March 21, 2024 in...Ed Orozco
 
Mike Tyson Sign The Contract Big Boy Shirt
Mike Tyson Sign The Contract Big Boy ShirtMike Tyson Sign The Contract Big Boy Shirt
Mike Tyson Sign The Contract Big Boy ShirtTeeFusion
 
LRFD Bridge Design Specifications-AASHTO (2014).pdf
LRFD Bridge Design Specifications-AASHTO (2014).pdfLRFD Bridge Design Specifications-AASHTO (2014).pdf
LRFD Bridge Design Specifications-AASHTO (2014).pdfHctorFranciscoSnchez1
 
Introduce Trauma-Informed Design to Your Organization - CSUN ATC 2024
Introduce Trauma-Informed Design to Your Organization - CSUN ATC 2024Introduce Trauma-Informed Design to Your Organization - CSUN ATC 2024
Introduce Trauma-Informed Design to Your Organization - CSUN ATC 2024Ted Drake
 
Khushi sharma undergraduate portfolio...
Khushi sharma undergraduate portfolio...Khushi sharma undergraduate portfolio...
Khushi sharma undergraduate portfolio...khushisharma298853
 
WCM Branding Agency | 210519 - Portfolio Review (F&B) -s.pptx
WCM Branding Agency | 210519 - Portfolio Review (F&B) -s.pptxWCM Branding Agency | 210519 - Portfolio Review (F&B) -s.pptx
WCM Branding Agency | 210519 - Portfolio Review (F&B) -s.pptxHasan S
 
Construction Documents Checklist before Construction
Construction Documents Checklist before ConstructionConstruction Documents Checklist before Construction
Construction Documents Checklist before ConstructionResDraft
 
High-Quality Faux Embroidery Services | Cre8iveSkill
High-Quality Faux Embroidery Services | Cre8iveSkillHigh-Quality Faux Embroidery Services | Cre8iveSkill
High-Quality Faux Embroidery Services | Cre8iveSkillCre8iveskill
 

Kürzlich hochgeladen (19)

Create Funeral Invites Online @ feedvu.com
Create Funeral Invites Online @ feedvu.comCreate Funeral Invites Online @ feedvu.com
Create Funeral Invites Online @ feedvu.com
 
Cold War Tensions Increase - 1945-1952.pptx
Cold War Tensions Increase - 1945-1952.pptxCold War Tensions Increase - 1945-1952.pptx
Cold War Tensions Increase - 1945-1952.pptx
 
Designing for privacy: 3 essential UX habits for product teams
Designing for privacy: 3 essential UX habits for product teamsDesigning for privacy: 3 essential UX habits for product teams
Designing for privacy: 3 essential UX habits for product teams
 
Best-NO1 Pakistani Amil Baba Real Amil baba In Pakistan Najoomi Baba in Pakis...
Best-NO1 Pakistani Amil Baba Real Amil baba In Pakistan Najoomi Baba in Pakis...Best-NO1 Pakistani Amil Baba Real Amil baba In Pakistan Najoomi Baba in Pakis...
Best-NO1 Pakistani Amil Baba Real Amil baba In Pakistan Najoomi Baba in Pakis...
 
Building+your+Data+Project+on+AWS+-+Luke+Anderson.pdf
Building+your+Data+Project+on+AWS+-+Luke+Anderson.pdfBuilding+your+Data+Project+on+AWS+-+Luke+Anderson.pdf
Building+your+Data+Project+on+AWS+-+Luke+Anderson.pdf
 
Production of Erythromycin microbiology.pptx
Production of Erythromycin microbiology.pptxProduction of Erythromycin microbiology.pptx
Production of Erythromycin microbiology.pptx
 
UX Conference on UX Research Trends in 2024
UX Conference on UX Research Trends in 2024UX Conference on UX Research Trends in 2024
UX Conference on UX Research Trends in 2024
 
Math Group 3 Presentation OLOLOLOLILOOLLOLOL
Math Group 3 Presentation OLOLOLOLILOOLLOLOLMath Group 3 Presentation OLOLOLOLILOOLLOLOL
Math Group 3 Presentation OLOLOLOLILOOLLOLOL
 
Embroidery design from embroidery magazine
Embroidery design from embroidery magazineEmbroidery design from embroidery magazine
Embroidery design from embroidery magazine
 
How to use Ai for UX UI Design | ChatGPT
How to use Ai for UX UI Design | ChatGPTHow to use Ai for UX UI Design | ChatGPT
How to use Ai for UX UI Design | ChatGPT
 
The future of UX design support tools - talk Paris March 2024
The future of UX design support tools - talk Paris March 2024The future of UX design support tools - talk Paris March 2024
The future of UX design support tools - talk Paris March 2024
 
Design mental models for managing large-scale dbt projects. March 21, 2024 in...
Design mental models for managing large-scale dbt projects. March 21, 2024 in...Design mental models for managing large-scale dbt projects. March 21, 2024 in...
Design mental models for managing large-scale dbt projects. March 21, 2024 in...
 
Mike Tyson Sign The Contract Big Boy Shirt
Mike Tyson Sign The Contract Big Boy ShirtMike Tyson Sign The Contract Big Boy Shirt
Mike Tyson Sign The Contract Big Boy Shirt
 
LRFD Bridge Design Specifications-AASHTO (2014).pdf
LRFD Bridge Design Specifications-AASHTO (2014).pdfLRFD Bridge Design Specifications-AASHTO (2014).pdf
LRFD Bridge Design Specifications-AASHTO (2014).pdf
 
Introduce Trauma-Informed Design to Your Organization - CSUN ATC 2024
Introduce Trauma-Informed Design to Your Organization - CSUN ATC 2024Introduce Trauma-Informed Design to Your Organization - CSUN ATC 2024
Introduce Trauma-Informed Design to Your Organization - CSUN ATC 2024
 
Khushi sharma undergraduate portfolio...
Khushi sharma undergraduate portfolio...Khushi sharma undergraduate portfolio...
Khushi sharma undergraduate portfolio...
 
WCM Branding Agency | 210519 - Portfolio Review (F&B) -s.pptx
WCM Branding Agency | 210519 - Portfolio Review (F&B) -s.pptxWCM Branding Agency | 210519 - Portfolio Review (F&B) -s.pptx
WCM Branding Agency | 210519 - Portfolio Review (F&B) -s.pptx
 
Construction Documents Checklist before Construction
Construction Documents Checklist before ConstructionConstruction Documents Checklist before Construction
Construction Documents Checklist before Construction
 
High-Quality Faux Embroidery Services | Cre8iveSkill
High-Quality Faux Embroidery Services | Cre8iveSkillHigh-Quality Faux Embroidery Services | Cre8iveSkill
High-Quality Faux Embroidery Services | Cre8iveSkill
 

Designing Emails That Actually Work

Hinweis der Redaktion

  1. My name is Lindsay Siovaila, and I’m a demo engineer for the Salesforce ExactTarget Marketing Cloud. In my current role as a demo engineer for ET I focus on creating demos for our Sales team which means I do a mixture of web and email design and development to showcase our product for customers. I’m a web designer and developer by training, but I’ve spent a large amount of time working on emails during my 4+ years at ExactTarget
  2. Some emails I have created during my time at exacttarget
  3. Some emails I have created during my time at exacttarget
  4. Some emails I have created during my time at exacttarget
  5. Some emails I have created during my time at exacttarget
  6. In fact, I’ve come to appreciate the art of email creation and find it a fun challenge to work within its constraints
  7. So to outline the agenda, I’m going to start with an overview of the subscriber experience and what someone goes through from beginning to end when they read your email before converting
  8. The subscriber experience is the flow in which someone digests your email before converting Unlike other mediums, emails are experienced in chunks, and digested one part at a time. And since your primary goal with email should be conversions and sending your subscriber to your website, landing page, blog, etc., it’s important to understand each stage of the subscriber experience so you can optimize each part
  9. At each stage in the subscriber experience, you want to be thinking about the ultimate goal which is getting them to convert You want them to land on your website, blog, store, etc
  10. From Name Large and bold Top hierarchy in the inbox Approximately 25 characters Based on this alone, they may choose to read the message, ignore the message, or even delete the message.
  11. Next is the subject line You have about 35 characters to use in the subject line J. Crew example – donut? SmarterTravel Deal Alert – 9 tips to the point
  12. Gives the reader a brief glimpse into the message content.
  13. Preview pane
  14. Preview pane
  15. Preview pane
  16. This is the goal – this is where you want your subscribers to arrive And everything I just talked about will determine if your subscribers arrive here
  17. Designing for email is about getting to the point and making the most of the brief chance you have with your subscribers. You only get one shot, so it's worth employing as many tricks in the book as possible to make sure your message gets through. The underlying principles are all about respecting your readers by giving them something valuable in return for their time
  18. Think about your email as a doorway into your website, app, or landing page. You don’t want your subscribers to spend a ton of time reading a lengthy monologue about why they should purchase your product or sign up for a free trial. Tell them the essentials to get them hooked, then send them to the next step in their journey Note: If you are in an industry or business where sending longer emails makes sense – then by all means do so, but consider adding highlights at the top of the email or bullet points of the content to follow to give your readers an overview at the beginning.
  19. Your readers are on information overload, so design your email to be punchy. Text should appear in clear, delineated chunks that get to the point. Use clear headings and call out key concepts in bold type so that your readers can get the gist, even if they don't read everything (which most of them won't). Single-column layout Contras of value and color for content distinction - main CTA Large text ensures readability Don’t cram - consider legibility over length People are used to scrolling and skimming
  20. Your call to action is the action you want your subscribers to take once they have read your email. Your subscribers will only look at your email for a few moments before moving on with their day, so make sure your calls to action stand out. Try and determine what ONE thing you would want your subscriber to do when opening your email. If you’re sending a newsletter with multiple articles, call out one of those stories as a featured article at the top. Don’t try and make everything in your email carry the same weight. If your email is long and a user has scrolled all the way through your content, make sure they have easy access to another call to action without having to scroll all the way back to the top of your email.
  21. This isn’t necessarily a design tip but still goes along with making your calls to action obvious Don’t use cryptic language – make your subject line, preheader text and headlines crystal clear Tell your subscribers who you are, why you are emailing them, and what action you want them to take – you are competing for your subscribers’ attention in their busy inboxes, so make it obvious why they should pay attention to your email
  22. This email is from Campaign Monitor
  23. 1. Single Column, Device-Agnostic Design This is hands-down the easiest way to have a mobile-friendly email. Using this method, the images and text are set to be quite large so that whether the email is viewed on a desktop or a mobile, the font is readable and the images are big enough already. Design your email at about 450px wide Headings should be at least 30px Body copy should be at least 20px Average font size ~16px * Pro tip: font adjustments can make emails mobile friendly w/o having to overhaul entire email
  24. * People are used to using apps in their mobile environment * What are visual cues that you can take from mobile websites and apps * Allow content to breathe, clear beginning and end to content blocks What can be used as an icon instead of long text? * 44px minimum button text size * 100% full-width button * Pro tip: Divider lines, containers, and padding are your friend
  25. GIFs are supported across most email clients Can add an extra element of interactivity to an otherwise static email Make your first frame of the gif the most descriptive in case it doesn’t play Avoid video. Video only works in Apple Mail/webkit-based email clients. If you absolutely must have moving images, the only reliable solution is to use an animated GIF. You can add a screenshot of the video to your email with a play button and then link out to a landing page with the actual video
  26. GIFs are supported across most email clients Can add an extra element of interactivity to an otherwise static email Make your first frame of the gif the most descriptive in case it doesn’t play Avoid video. Video only works in Apple Mail/webkit-based email clients. If you absolutely must have moving images, the only reliable solution is to use an animated GIF. You can add a screenshot of the video to your email with a play button and then link out to a landing page with the actual video
  27. HTML standards have long been in place for web design, but email remains a unique challenge because no universal standard exists—and subscribers increasingly open emails on more devices and in more environments
  28. So if there’s anyone in the audience who works primarily on websites or apps, or who just has a general web background but maybe not email, I wanted to highlight some of the ways that email and the web are the same In terms of user flow, they’re definitely different. But under the hood, there’s some similarities and differences, too. Design! Links! CSS
  29. Email uses some similar markup in non-traditional ways Separating presentation from content doesn’t have to be that important in email >> emails don’t need to be controlled by stylesheets >> don’t need to be maintained, they’re kind of one-and-done Enjoy your time machine travels
  30. The single most important guideline for HTML emails is that CSS layout just doesn’t work. The major email clients either offer no support at all, or mangle it in myriad frustratingly different ways. Using CSS instead of tables was the battle cry of the web standards war, but coding HTML emails means raising the white flag and giving in. Unless you’re building an extremely simple email, or your whole audience is using a more modern email reading tool, it’s back to those all encompassing <table> tags. The short answer is that scripting is unsupported in emails. This is hardly surprising, given the obvious security risks involved with a script running inside an application that has all that personal information stored in it. Webmail clients are mostly running the interface in JavaScript and are not keen on your email interfering with that, and desktop client filters often consider JavaScript to be an indicator of spam or phishing emails. Even in the cases where it might run, there really is little benefit to scripting in emails. Keep your emails as straight HTML and CSS, and avoid the hassle.
  31. Control the layout using standard HTML tables and avoid CSS for layout (DIV, float, etc). Use HTML tables, but don’t stack them. Nest all content and tables inside one structural table.
  32. Good support for some CSS basics font-family, font-size, font-style, color, padding Some support for margin, line-height, background-image, background-position, Avoid floats, z-index
  33. Block level elements such <p> and <h1> are stripped out or behave unexpectedly, which can affect your layout. Enclose all text within <td> cells instead and use inline styles to control the text.
  34. Since some email clients block images by default, make sure important images contain an alt attribute. Use alt tags on all images, even if you don’t want one displayed. If no alt tag is needed, insert a blank tag: <img alt=”” src…> Alt should come before source (src) to aid with mobile rendering on Blackberry. Include font, font size, and color properties in your <img> tag to style your alt text. Design for images OFF since Gmail and Outlook 2003 and 2007 block images by default Include alt attributes for images that have important content embedded (your company logo, a hero banner) To prevent odd spacing issues, always add border=0 and display:block to each image Always include height and width attributes to ensure proper sizing – set the height and width to the actual size of the image
  35. Your subscribers want emails to work just as well on their mobile devices as they do on their larger screens. To enhance the way an email looks and works on a smaller screen, you can adjust the standard version of the email with a few code enhancements. This may include specifying larger text sizes, resizing images, showing or hiding sections of the email, or making one side drop below the other side, to name a few. This approach is called responsive design, and these techniques are generally controlled by CSS. A few responsive design notes to remember:
  36. Responsive email uses media queries Is placed in the head tag Is a conditional statement used to determine whether or not the styles inside it will be used at time of open As you can see here, the media query is saying if the screen is no more than 480px wide, then use the following styles Since we style everything in our emails using inline styles, we need to use !important declaration to override them
  37. Graphic from Designing for the Mobile Inbox by ExactTarget Marketing Cloud This is a great graphic showing you a nice optimized mobile email on the right, compared to the same email that hasn’t been optimized at all on the left. You’ll notice that the desktop-centric graphic on the left has literally no mobile styles applied to the email, which causes the content of the email to shrink significantly on the iPhone The graphic in the middle looks like there was some mobile considerations like taking the entire message to one-column, but it’s still really hard to read and links are still pretty small The email on the right –there’s tons of mobile considerations coming into play here – extra large headlines and body copy with plenty of spacing between content, as well as increased size on the links so they are tappable
  38. Before you ever open up a text editor or start to edit HTML, it really helps to know your audience For all you know, your audience is looking at your emails on a blackberry and so plain text emails will do the trick What you’re looking for in these reports is your lowest common denominator
  39. Calculated from 552 million opens tracked by Litmus Email Analytics in June 2014
  40. Calculated from 552 million opens tracked by Litmus Email Analytics in June 2014 KNOW YOUR AUDIENCE http://venturebeat.com/2014/01/22/65-of-all-email-gets-opened-first-on-a-mobile-device-and-thats-great-news-for-marketers/
  41. Rendering is inconsistent across devices and operating systems So your email is not going to look the same in Gmail as it will on an iPhone Litmus and Return Path are good email testing services Otherwise, sign up for email addresses
  42. Blog Email Swipe Files