Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
You're Gonna Love HTML Emails
Search
Dan Denney
April 29, 2016
Design
0
180
You're Gonna Love HTML Emails
Presentation for Squares Conf 2016, attempting to make people love this dark art.
Dan Denney
April 29, 2016
Tweet
Share
More Decks by Dan Denney
See All by Dan Denney
You're Gonna Love HTML Emails Converge
dandenney
0
170
The Organized Chaos of Email Creation
dandenney
3
1.1k
HTML Emails: Tables, Testing, and Tooling
dandenney
2
100
Creating HTML Emails Can Be Fun
dandenney
2
320
Creating HTML Emails Can Be Fun
dandenney
9
1.7k
Web Typography and the Case of the Voluptuous Curl
dandenney
3
420
responsive_grids.pdf
dandenney
4
460
Making Money With Web Design
dandenney
4
390
UI Design Decisions
dandenney
2
630
Other Decks in Design
See All in Design
読書シェア会 vol.5 / Yumemi.grow 20250526
rakus_dev
0
1.8k
Goodpatch Tour💙 / We are hiring!
goodpatch
31
890k
portfolio.pdf
onof003
0
180
企画を動かすデザイナーの思考!「広げて絞る」アプローチ。
hikidakan
0
180
BPStudy#213〜ビジネスアナリシスとDDD(ドメイン駆動設計)パネルディスカッション資料 / BPStudy213-panel
haru860
0
490
株式会社ログラス - 会社説明資料【デザイナー】/ Loglass Designer
loglass2019
1
2.6k
デザイナーのAI活用とチームへの浸透戦略
ukaoli
0
130
Мышление историями. Как текстовые модели поведения помогают дизайнеру проектировать
ashapiro
0
150
デザイナー向けフライル説明資料
toshiblues
0
160
【最新】マズロー安達の弟子実績(1期-4期の26人分)
maslow_akkun
0
2.7k
Building Experiences: Design Systems, User Experience, and Full Site Editing
marktimemedia
0
260
デザインシステムの「種」を使って、受託開発を加速させる
akane___ui
0
11k
Featured
See All Featured
Fight the Zombie Pattern Library - RWD Summit 2016
marcelosomers
234
17k
How to train your dragon (web standard)
notwaldorf
96
6.3k
Code Review Best Practice
trishagee
72
19k
What’s in a name? Adding method to the madness
productmarketing
PRO
23
3.7k
[RailsConf 2023 Opening Keynote] The Magic of Rails
eileencodes
31
9.7k
Large-scale JavaScript Application Architecture
addyosmani
514
110k
ReactJS: Keep Simple. Everything can be a component!
pedronauck
667
120k
Making Projects Easy
brettharned
119
6.4k
Fashionably flexible responsive web design (full day workshop)
malarkey
407
66k
Evolution of real-time – Irina Nazarova, EuRuKo, 2024
irinanazarova
9
960
Chrome DevTools: State of the Union 2024 - Debugging React & Beyond
addyosmani
7
890
Build The Right Thing And Hit Your Dates
maggiecrowley
37
2.9k
Transcript
You’re Gonna Love HTML Emails Dan Denney, Squares Conf ‘16
that one dude from Code School
KOALAFI CATIONS 3 years, 3-5 promos monthly, ~40 recurring, ~7M
total http://static1.squarespace.com/static/5005afd7e4b0a6953320bf3f/t/528cfce6e4b0c1452601a558/1384971527352/4651364311_f505cc3cc3_o.jpg
THE GOOD THE BAD THE GREAT http://images.agoramedia.com/ugcphotoservice/100/2015/4/13/61491466/79790b56-81a7-46a2-be04-81e62a06f9c3.jpg
THE GOOD - Low-tech - Testable (The A/B kind) -
Tied to revenue - Personal
I AM NOT A MARKETER - Best ROI - Outperforms
social media - Compliments social media
PERSONAL
I’ve learned that people will forget what you said, people
will forget what you did, but people will never forget how you made them feel. “ ” - Maya Angelou http://www.mayaangelou.com/wp-content/uploads/2015/05/mayaremembered-slider.jpg
We Miss You Life can get busy, we understand. If
you're ready to continue learning, check out our new content, or even some courses you missed the first time around.
None
- Abraham Lincoln http://a1.files.biography.com/image/upload/c_fit,cs_srgb,dpr_1.0,h_1200,q_80,w_1200/MTIwNjA4NjMzODE4MjIwMDQ0.jpg Send emails that you want to
receive. “ ”
THE BAD - Low-tech - Minimal standards
Tables are a Lie! Well, kinda
(screen of email) collectUI.com
kyle loaney https://dribbble.com/KLoaney
None
None
None
None
Modern Workflow - Write for a preprocessor - Build -
Deploy
Email Workflow - Write for a preprocessor - Build -
Deploy
Email’s “Gotcha” 1. Preprocess 2. Build 3. Deploy 4. Client
Web 1. Preprocess 2. Build 3. Deploy 4. Preprocess 5. Client Email
Email Client Preprocessors - Sneaky disguised horse feathers - People
talking on their cellphone in the bathroom evil - Evil worse than a dragon - Not cute - Not funny - Not clever
Disclaimer I make bad decisions.
Webmail Decisions Do not support linked CSS. - CSS has
to be in a <style> tag in the doc
Gmail’s Decision Do not support CSS in a <style> tag.
- CSS has to be inline - No hover events - No media queries - And more! (of less)
(female dev) https://emailclientmarketshare.com 23000 .15 x 3450 90000 .15 x
$13,500 Our Gmail Persona
None
Obligatory MS Joke Microsoft
Outlook’s Decision Render HTML and CSS using Microsoft Word -
No box model - Support for word processor styles only
Tables aren’t a Lie! For reals this time
(female dev) https://emailclientmarketshare.com 23000 .07 x 1610 90000 .07 x
$6,300 Our Outlook Persona
None
BEATING THE BAD - Use tables for markup - Apply
basic layout CSS to <table> - Apply text/spacing styles to <td> - Apply critical CSS inline - Apply enhancement CSS to <style> - Use padding, not margin
THE GREAT - The Community - Shared Code - Tools
COMMUNITY
email-toolbox.com
litmus.com/community/snippets
litmus.com/community
THE GOOD - Low-tech - Testable (The A/B kind) -
Tied to revenue - Personal THE BAD - Low-tech - Minimal standards THE GREAT - The Community - Shared Code - Tools HTML Emails
https://litmus.com/builder/5e7f81f Webkit https://litmus.com/builder/1e31db9 Gmail https://litmus.com/builder/c969340 Outlook Examples There are still
bugs!
Questions? Now or later, with beer