SlideShare a Scribd company logo
1 of 63
Download to read offline
@lindsaylee13
@lindsaylee13
@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
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
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…
@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
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?
Responsive Email Uses Media Queries
@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

More Related Content

Viewers also liked

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
 

Viewers also liked (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
 

Similar to 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
 

Similar to 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
 

Recently uploaded

ArtWaves 2024 - embracing Curves in Modern Homes
ArtWaves 2024 - embracing Curves in Modern HomesArtWaves 2024 - embracing Curves in Modern Homes
ArtWaves 2024 - embracing Curves in Modern HomesVellyslav Petrov
 
Understanding Image Masking: What It Is and Why It's Matters
Understanding Image Masking: What It Is and Why It's MattersUnderstanding Image Masking: What It Is and Why It's Matters
Understanding Image Masking: What It Is and Why It's MattersCre8iveskill
 
City Hall London, Norman Foster building description with building details.pptx
City Hall London, Norman Foster building description with building details.pptxCity Hall London, Norman Foster building description with building details.pptx
City Hall London, Norman Foster building description with building details.pptxYaminiDabbara
 
Highway LOS - Freeway-- Multilane -- highway class 2 & 3 Housam Siyoufi
Highway LOS - Freeway-- Multilane -- highway class 2 & 3 Housam SiyoufiHighway LOS - Freeway-- Multilane -- highway class 2 & 3 Housam Siyoufi
Highway LOS - Freeway-- Multilane -- highway class 2 & 3 Housam Siyoufisiyoufihoussam
 
Unlock Canva Pro for Free Today - Canva Pro for Free.pdf
Unlock Canva Pro for Free Today - Canva Pro for Free.pdfUnlock Canva Pro for Free Today - Canva Pro for Free.pdf
Unlock Canva Pro for Free Today - Canva Pro for Free.pdfLewis John
 
ARCHITECTURAL PORTFOLIO CRISTOBAL HERAUD 2024.pdf
ARCHITECTURAL PORTFOLIO CRISTOBAL HERAUD 2024.pdfARCHITECTURAL PORTFOLIO CRISTOBAL HERAUD 2024.pdf
ARCHITECTURAL PORTFOLIO CRISTOBAL HERAUD 2024.pdfCristobalHeraud
 
_Neighborhood Planning in Capital City of Chandigarh- An Appraisal (2) - Copy...
_Neighborhood Planning in Capital City of Chandigarh- An Appraisal (2) - Copy..._Neighborhood Planning in Capital City of Chandigarh- An Appraisal (2) - Copy...
_Neighborhood Planning in Capital City of Chandigarh- An Appraisal (2) - Copy...JIT KUMAR GUPTA
 
Piece by Piece Magazine
Piece by Piece Magazine                      Piece by Piece Magazine
Piece by Piece Magazine CharlottePulte
 
Cities Light Up in Solidarity With Ukraine: From Internationally Synchronized...
Cities Light Up in Solidarity With Ukraine: From Internationally Synchronized...Cities Light Up in Solidarity With Ukraine: From Internationally Synchronized...
Cities Light Up in Solidarity With Ukraine: From Internationally Synchronized...Thomas Schielke
 
Karim apartment ideas 01 ppppppppppppppp
Karim apartment ideas 01 pppppppppppppppKarim apartment ideas 01 ppppppppppppppp
Karim apartment ideas 01 pppppppppppppppNadaMohammed714321
 
STITCH: HOW MIGHT WE PROMOTE AN EQUITABLE AND INCLUSIVE URBAN LIFESTYLE PRIOR...
STITCH: HOW MIGHT WE PROMOTE AN EQUITABLE AND INCLUSIVE URBAN LIFESTYLE PRIOR...STITCH: HOW MIGHT WE PROMOTE AN EQUITABLE AND INCLUSIVE URBAN LIFESTYLE PRIOR...
STITCH: HOW MIGHT WE PROMOTE AN EQUITABLE AND INCLUSIVE URBAN LIFESTYLE PRIOR...Pranav Subramanian
 
Imagist3D Architectural and Interior Rendering Portfolio
Imagist3D Architectural and Interior Rendering PortfolioImagist3D Architectural and Interior Rendering Portfolio
Imagist3D Architectural and Interior Rendering PortfolioAlinaLau2
 
Interior Design for Office a cura di RMG Project Studio
Interior Design for Office a cura di RMG Project StudioInterior Design for Office a cura di RMG Project Studio
Interior Design for Office a cura di RMG Project StudioRMG Project Studio
 
PORTFOLIO 2024_ANASTASIYA KUDINOVA / EXTENDED VERSION
PORTFOLIO 2024_ANASTASIYA KUDINOVA / EXTENDED VERSIONPORTFOLIO 2024_ANASTASIYA KUDINOVA / EXTENDED VERSION
PORTFOLIO 2024_ANASTASIYA KUDINOVA / EXTENDED VERSIONAnastasiya Kudinova
 
guest bathroom white and blue ssssssssss
guest bathroom white and blue ssssssssssguest bathroom white and blue ssssssssss
guest bathroom white and blue ssssssssssNadaMohammed714321
 
LIGHTSCAPES: HOW MIGHT WE DESIGN AN INCLUSIVE AND ACCESSIBLE CLASSICAL CONCER...
LIGHTSCAPES: HOW MIGHT WE DESIGN AN INCLUSIVE AND ACCESSIBLE CLASSICAL CONCER...LIGHTSCAPES: HOW MIGHT WE DESIGN AN INCLUSIVE AND ACCESSIBLE CLASSICAL CONCER...
LIGHTSCAPES: HOW MIGHT WE DESIGN AN INCLUSIVE AND ACCESSIBLE CLASSICAL CONCER...Pranav Subramanian
 
eCultify brand guidelines- Shamika Dukle.pdf
eCultify brand guidelines- Shamika Dukle.pdfeCultify brand guidelines- Shamika Dukle.pdf
eCultify brand guidelines- Shamika Dukle.pdfswdukle
 
General Simple Guide About AI in Design By: A.L. Samar Hossam ElDin
General Simple Guide About AI in Design By: A.L. Samar Hossam ElDinGeneral Simple Guide About AI in Design By: A.L. Samar Hossam ElDin
General Simple Guide About AI in Design By: A.L. Samar Hossam ElDinSamar Hossam ElDin Ahmed
 
Karim apartment ideas 02 ppppppppppppppp
Karim apartment ideas 02 pppppppppppppppKarim apartment ideas 02 ppppppppppppppp
Karim apartment ideas 02 pppppppppppppppNadaMohammed714321
 
guest bathroom white and bluesssssssssss
guest bathroom white and bluesssssssssssguest bathroom white and bluesssssssssss
guest bathroom white and bluesssssssssssNadaMohammed714321
 

Recently uploaded (20)

ArtWaves 2024 - embracing Curves in Modern Homes
ArtWaves 2024 - embracing Curves in Modern HomesArtWaves 2024 - embracing Curves in Modern Homes
ArtWaves 2024 - embracing Curves in Modern Homes
 
Understanding Image Masking: What It Is and Why It's Matters
Understanding Image Masking: What It Is and Why It's MattersUnderstanding Image Masking: What It Is and Why It's Matters
Understanding Image Masking: What It Is and Why It's Matters
 
City Hall London, Norman Foster building description with building details.pptx
City Hall London, Norman Foster building description with building details.pptxCity Hall London, Norman Foster building description with building details.pptx
City Hall London, Norman Foster building description with building details.pptx
 
Highway LOS - Freeway-- Multilane -- highway class 2 & 3 Housam Siyoufi
Highway LOS - Freeway-- Multilane -- highway class 2 & 3 Housam SiyoufiHighway LOS - Freeway-- Multilane -- highway class 2 & 3 Housam Siyoufi
Highway LOS - Freeway-- Multilane -- highway class 2 & 3 Housam Siyoufi
 
Unlock Canva Pro for Free Today - Canva Pro for Free.pdf
Unlock Canva Pro for Free Today - Canva Pro for Free.pdfUnlock Canva Pro for Free Today - Canva Pro for Free.pdf
Unlock Canva Pro for Free Today - Canva Pro for Free.pdf
 
ARCHITECTURAL PORTFOLIO CRISTOBAL HERAUD 2024.pdf
ARCHITECTURAL PORTFOLIO CRISTOBAL HERAUD 2024.pdfARCHITECTURAL PORTFOLIO CRISTOBAL HERAUD 2024.pdf
ARCHITECTURAL PORTFOLIO CRISTOBAL HERAUD 2024.pdf
 
_Neighborhood Planning in Capital City of Chandigarh- An Appraisal (2) - Copy...
_Neighborhood Planning in Capital City of Chandigarh- An Appraisal (2) - Copy..._Neighborhood Planning in Capital City of Chandigarh- An Appraisal (2) - Copy...
_Neighborhood Planning in Capital City of Chandigarh- An Appraisal (2) - Copy...
 
Piece by Piece Magazine
Piece by Piece Magazine                      Piece by Piece Magazine
Piece by Piece Magazine
 
Cities Light Up in Solidarity With Ukraine: From Internationally Synchronized...
Cities Light Up in Solidarity With Ukraine: From Internationally Synchronized...Cities Light Up in Solidarity With Ukraine: From Internationally Synchronized...
Cities Light Up in Solidarity With Ukraine: From Internationally Synchronized...
 
Karim apartment ideas 01 ppppppppppppppp
Karim apartment ideas 01 pppppppppppppppKarim apartment ideas 01 ppppppppppppppp
Karim apartment ideas 01 ppppppppppppppp
 
STITCH: HOW MIGHT WE PROMOTE AN EQUITABLE AND INCLUSIVE URBAN LIFESTYLE PRIOR...
STITCH: HOW MIGHT WE PROMOTE AN EQUITABLE AND INCLUSIVE URBAN LIFESTYLE PRIOR...STITCH: HOW MIGHT WE PROMOTE AN EQUITABLE AND INCLUSIVE URBAN LIFESTYLE PRIOR...
STITCH: HOW MIGHT WE PROMOTE AN EQUITABLE AND INCLUSIVE URBAN LIFESTYLE PRIOR...
 
Imagist3D Architectural and Interior Rendering Portfolio
Imagist3D Architectural and Interior Rendering PortfolioImagist3D Architectural and Interior Rendering Portfolio
Imagist3D Architectural and Interior Rendering Portfolio
 
Interior Design for Office a cura di RMG Project Studio
Interior Design for Office a cura di RMG Project StudioInterior Design for Office a cura di RMG Project Studio
Interior Design for Office a cura di RMG Project Studio
 
PORTFOLIO 2024_ANASTASIYA KUDINOVA / EXTENDED VERSION
PORTFOLIO 2024_ANASTASIYA KUDINOVA / EXTENDED VERSIONPORTFOLIO 2024_ANASTASIYA KUDINOVA / EXTENDED VERSION
PORTFOLIO 2024_ANASTASIYA KUDINOVA / EXTENDED VERSION
 
guest bathroom white and blue ssssssssss
guest bathroom white and blue ssssssssssguest bathroom white and blue ssssssssss
guest bathroom white and blue ssssssssss
 
LIGHTSCAPES: HOW MIGHT WE DESIGN AN INCLUSIVE AND ACCESSIBLE CLASSICAL CONCER...
LIGHTSCAPES: HOW MIGHT WE DESIGN AN INCLUSIVE AND ACCESSIBLE CLASSICAL CONCER...LIGHTSCAPES: HOW MIGHT WE DESIGN AN INCLUSIVE AND ACCESSIBLE CLASSICAL CONCER...
LIGHTSCAPES: HOW MIGHT WE DESIGN AN INCLUSIVE AND ACCESSIBLE CLASSICAL CONCER...
 
eCultify brand guidelines- Shamika Dukle.pdf
eCultify brand guidelines- Shamika Dukle.pdfeCultify brand guidelines- Shamika Dukle.pdf
eCultify brand guidelines- Shamika Dukle.pdf
 
General Simple Guide About AI in Design By: A.L. Samar Hossam ElDin
General Simple Guide About AI in Design By: A.L. Samar Hossam ElDinGeneral Simple Guide About AI in Design By: A.L. Samar Hossam ElDin
General Simple Guide About AI in Design By: A.L. Samar Hossam ElDin
 
Karim apartment ideas 02 ppppppppppppppp
Karim apartment ideas 02 pppppppppppppppKarim apartment ideas 02 ppppppppppppppp
Karim apartment ideas 02 ppppppppppppppp
 
guest bathroom white and bluesssssssssss
guest bathroom white and bluesssssssssssguest bathroom white and bluesssssssssss
guest bathroom white and bluesssssssssss
 

Designing Emails That Actually Work

Editor's Notes

  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