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
150
The Organized Chaos of Email Creation
dandenney
3
860
HTML Emails: Tables, Testing, and Tooling
dandenney
2
91
Creating HTML Emails Can Be Fun
dandenney
2
250
Creating HTML Emails Can Be Fun
dandenney
9
1.7k
Web Typography and the Case of the Voluptuous Curl
dandenney
3
410
responsive_grids.pdf
dandenney
4
450
Making Money With Web Design
dandenney
4
350
UI Design Decisions
dandenney
2
600
Other Decks in Design
See All in Design
Desarrollo de Carrera en Diseño y Producto
solmesz1
2
170
UX/UI改善に貢献するユーザーテストとは? 基礎知識から実施のプロセスまで解説
ncdc
0
330
リリース1ヶ月後で機能をなくした話
hinofu
1
700
マスとAIをなめらかにつなぐデザイン
abcmisuzu
0
240
「これをゲームにしたい!」と言われた時ゲームデザイナーが考えること
kinakobooster
5
5.2k
あらゆる場面でデザインを駆使するための技術 / Techniques for Applying Design in Any Situation
akiramotomura
4
2.2k
新しい資産運用サービスALTERNA(オルタナ)の伝え方の工夫
layerx
PRO
0
940
データ活用に強い、伴走型デザインパートナー「DeC」紹介資料
hopin
0
190
1人歩きする営業資料作成
yutoshukuya
0
150
意志と、デザインと、ときどきお金
transit_kix
2
2.2k
ウェブディレクターを救うBacklog
wattlaa
0
280
デザインに関わる全ての人たちでエベレスト登頂を目指すために取り組んでいること
amishiratori
0
600
Featured
See All Featured
ParisWeb 2013: Learning to Love: Crash Course in Emotional UX Design
dotmariusz
104
6.6k
Distributed Sagas: A Protocol for Coordinating Microservices
caitiem20
322
20k
Fireside Chat
paigeccino
21
2.6k
Into the Great Unknown - MozCon
thekraken
10
990
Fantastic passwords and where to find them - at NoRuKo
philnash
37
2.5k
Templates, Plugins, & Blocks: Oh My! Creating the theme that thinks of everything
marktimemedia
19
1.7k
A Philosophy of Restraint
colly
197
16k
The Cost Of JavaScript in 2023
addyosmani
16
3.9k
We Have a Design System, Now What?
morganepeng
43
6.7k
Product Roadmaps are Hard
iamctodd
44
9.7k
Visualization
eitanlees
136
14k
GraphQLとの向き合い方2022年版
quramy
32
12k
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