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
170
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
160
The Organized Chaos of Email Creation
dandenney
3
940
HTML Emails: Tables, Testing, and Tooling
dandenney
2
92
Creating HTML Emails Can Be Fun
dandenney
2
300
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
450
Making Money With Web Design
dandenney
4
370
UI Design Decisions
dandenney
2
620
Other Decks in Design
See All in Design
デザイナー採用 3社目で学び中のこと / Learnings of Designer Recruitment | Yasuhiro Yokota
yasuhiroyokota
1
1.7k
Blender 4.1 で レッツ Vket Cloud!
kamera25
0
260
デザインプリンシプルのつくりかた(freee技術の日)
magi1125
4
3.7k
PdMを始めたUIデザイナーのリアルな課題
muture
0
730
企業やプロダクトにおける "らしさ"を分析する | UXリサーチャー/デザイナーはもっとAIを触って欲しいシリーズ
iflection
0
250
Rebuilding Stamen’s iconic map styles with Stadia Maps
almccon
0
190
情報設計からのデザインアプローチ ~ユーザーの声を聞くよりも、もっとデータの声を聞け~
securecat
2
1.1k
富山デザイン勉強会_インフォグラフィックが上手に描けるコツ.pdf
keita_yoshikawa
1
150
地図・デザイン・可視化 −情報をわかりやすく伝えるために−
hjmkth
1
310
最速で価値を届けるUXリサーチ
degudegu2510
5
1.1k
Designing and Automating Component Specifications
nathanacurtis
3
370
アジャイル開発におけるFigmaAI新機能の活用
abokadotyann
1
140
Featured
See All Featured
It's Worth the Effort
3n
182
27k
Why You Should Never Use an ORM
jnunemaker
PRO
53
8.9k
Web Components: a chance to create the future
zenorocha
309
42k
RailsConf & Balkan Ruby 2019: The Past, Present, and Future of Rails at GitHub
eileencodes
131
32k
The World Runs on Bad Software
bkeepers
PRO
64
11k
個人開発の失敗を避けるイケてる考え方 / tips for indie hackers
panda_program
89
16k
Thoughts on Productivity
jonyablonski
66
4.2k
Navigating Team Friction
lara
183
13k
Let's Do A Bunch of Simple Stuff to Make Websites Faster
chriscoyier
502
140k
The Illustrated Children's Guide to Kubernetes
chrisshort
47
48k
Clear Off the Table
cherdarchuk
91
320k
Designing the Hi-DPI Web
ddemaree
278
34k
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