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 Converge
Search
Dan Denney
June 15, 2017
Design
0
170
You're Gonna Love HTML Emails Converge
I love them and I hope you will too
Dan Denney
June 15, 2017
Tweet
Share
More Decks by Dan Denney
See All by Dan Denney
You're Gonna Love HTML Emails
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
310
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
380
UI Design Decisions
dandenney
2
630
Other Decks in Design
See All in Design
sachi_y_portfolio
sachi337
0
250
ポートフォリオ_藤田歩希(ほまれ)
akifujita_homarecreate
0
560
Design Studio Deck | インクルーシブデザインスタジオCULUUM
culumu
2
610
pixel-art-skill-and-knowhow/ドット絵の経歴と知見
aokashi
1
270
“ブロック”で作る、WordPress制作フロー変革のすすめ
koots2021
4
1.8k
児童相談所における養育里親委託時の親権者同意に向けたコミュニケーションの実態
trivia
0
400
今日からできる実践アクセシビリティSNSというかXでaltをつけよう
securecat
1
220
The Golden Whitney
ohtristanart
PRO
0
430
本当に欲しかったのはモノレポツールではなく、tsconfigの設定だった / monorepo-tsconfig
rdlabo
1
140
プロジェクト内でデザイナーができること 日経電子版アプリ機能開発「For You」#nikkei_tech_talk
nikkei_engineer_recruiting
8
3.8k
オープンデータを利用して色々なものを作った話
hjmkth
1
100
1920*1080pxに設定したケース / Google Slide Size Test
arthur1
0
2.7k
Featured
See All Featured
I Don’t Have Time: Getting Over the Fear to Launch Your Podcast
jcasabona
32
2.3k
Fireside Chat
paigeccino
37
3.5k
Keith and Marios Guide to Fast Websites
keithpitt
411
22k
Rebuilding a faster, lazier Slack
samanthasiow
81
9k
The Myth of the Modular Monolith - Day 2 Keynote - Rails World 2024
eileencodes
26
2.8k
Making Projects Easy
brettharned
116
6.2k
jQuery: Nuts, Bolts and Bling
dougneiner
63
7.8k
Why You Should Never Use an ORM
jnunemaker
PRO
56
9.4k
Reflections from 52 weeks, 52 projects
jeffersonlam
349
20k
The Success of Rails: Ensuring Growth for the Next 100 Years
eileencodes
45
7.3k
Chrome DevTools: State of the Union 2024 - Debugging React & Beyond
addyosmani
6
670
Site-Speed That Sticks
csswizardry
9
620
Transcript
SLIDES bit.ly/love-emails If you're into that kind of thing
You’re Gonna Love HTML Emails Dan Denney, ConvergeSE ‘17 that
one dude from Code School
KOALAFI CATIONS 4 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
SMALL GESTURES
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
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
It's not a bug... #perf,yo
Gmail’s Decision Support CSS in a <style> tag most of
the time. - CSS has to be inline - No hover events - No media queries - And more! (of less)
None
(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/beeedcf Webkit https://litmus.com/builder/16016d1 Gmail https://litmus.com/builder/56fdbdd Outlook Examples There are still
bugs!
Questions? Now or later, with beer
Thank you