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
950
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
Money Forward UIの紹介 / Introducing Money Forward UI
taigakiyokawa
0
290
Mitra Manual
nnidhz
0
190
202409_会社概要資料_Englishver.pdf
zakkerooni
0
190
丸井グループが取り組むエンタープライズアジャイルと プロダクトマネージャーの役割
muture
3
1.5k
デザイナー視点の体験設計とデザインレビューを事業部全員で体験するワークショップをしたお話
masayofff
2
160
User Experience Design für Entwickler
joergneumann
4
960
Rebuilding Stamen’s iconic map styles with Stadia Maps
almccon
0
200
Kim Possible - Crush
olgastoryboard
0
120
ピクシブにおける「ビジョン」の取り扱われ方 #pixivdevmeetup / 20240920
minamitary
1
660
We Baby Bears-Triple T Tiger
yvonnehsuanho
PRO
0
430
美しいUIを作るために デザイナーが意識している ちょっとした考え方
yuichi_hara7
44
27k
Minuto de Aventura
olgastoryboard
0
160
Featured
See All Featured
Agile that works and the tools we love
rasmusluckow
327
21k
How to Think Like a Performance Engineer
csswizardry
16
1k
The Art of Delivering Value - GDevCon NA Keynote
reverentgeek
4
87
A better future with KSS
kneath
235
17k
Fight the Zombie Pattern Library - RWD Summit 2016
marcelosomers
230
17k
It's Worth the Effort
3n
183
27k
The MySQL Ecosystem @ GitHub 2015
samlambert
250
12k
What’s in a name? Adding method to the madness
productmarketing
PRO
22
3.1k
Statistics for Hackers
jakevdp
796
220k
Making Projects Easy
brettharned
114
5.8k
Docker and Python
trallard
40
3k
StorybookのUI Testing Handbookを読んだ
zakiyama
26
5.1k
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