Upgrade to Pro — share decks privately, control downloads, hide ads and more …

HTML Emails: Tables, Testing, and Tooling

Sponsored · Ship Features Fearlessly Turn features on and off without deploys. Used by thousands of Ruby developers. →
Avatar for Dan Denney Dan Denney
March 27, 2014
Design
2
110

HTML Emails: Tables, Testing, and Tooling

Part of a meetup presentation, with the rest being live coding FTW.

Avatar for Dan Denney

Dan Denney

March 27, 2014
Tweet

More Decks by Dan Denney

See All by Dan Denney
You're Gonna Love HTML Emails Converge
Avatar for Dan Denney dandenney
0
180
You're Gonna Love HTML Emails
Avatar for Dan Denney dandenney
0
180
The Organized Chaos of Email Creation
Avatar for Dan Denney dandenney
3
1.1k
Creating HTML Emails Can Be Fun
Avatar for Dan Denney dandenney
2
330
Creating HTML Emails Can Be Fun
Avatar for Dan Denney dandenney
9
1.8k
Web Typography and the Case of the Voluptuous Curl
Avatar for Dan Denney dandenney
3
430
responsive_grids.pdf
Avatar for Dan Denney dandenney
4
470
Making Money With Web Design
Avatar for Dan Denney dandenney
4
390
UI Design Decisions
Avatar for Dan Denney dandenney
2
640

Other Decks in Design

See All in Design
“ことば”が苦手なデザイナーへの処方箋 「なんとなく」から「意図」へ、 デザインを動かす言葉の力
Avatar for MIXI DESIGN mixi_design
PRO
1
200
コムデマネージャーがプロダクトデザインに挑戦した。むずかしくて楽しかった。
Avatar for payatsun payatsusan213
0
200
AI時代に問われる、リサーチの感受性──地域⇄大企業の現場から見えた「違和感」との向き合い方
Avatar for Muture muture
PRO
0
430
AIネイティブスタートアップにおけるプロダクト開発の新常識 / Product Development Tips in AI-Native Startups
Avatar for Jumpei Sakatsu saka2jp
2
930
2026の目標「もっと定量的に事業、会社へ貢献する！」
Avatar for yuri ohashi yuri_ohashi
0
680
30分でわかるインサイトマネジメント（2025年12月バージョン）
Avatar for Centou centou
1
380
Figmaレクチャー会Part1 基本のき編＠千株式会社 社内勉強会
Avatar for ぽん designer_no_pon
2
250
はじめての演奏会フライヤーデザイン
Avatar for Kaito Kikuchi chorkaichan
1
220
チームで事業価値を生み出す、プロアクティブなデザイナーになるための道のり/ Designship2025_Naya
Avatar for 株式会社ルート root_recruit
0
380
2026年の勢い / Momentum for 2026
Avatar for bebe bebe
0
350
Emmy's Artwork
Avatar for McKenna mcksmith
0
190
一次体験を起点にしたUX改善の取り組み / Direct Experience Driven UX Improvements
Avatar for 株式会社ビットキー / Bitkey Inc. bitkey
PRO
0
370

Featured

See All Featured
Imperfection Machines: The Place of Print at Facebook
Avatar for Scott Boms scottboms
269
14k
The AI Search Optimization Roadmap by Aleyda Solis
Avatar for Aleyda Solis aleyda
1
5.2k
The Web Performance Landscape in 2024 [PerfNow 2024]
Avatar for Tammy Everts tammyeverts
12
1k
The Director’s Chair: Orchestrating AI for Truly Effective Learning
Avatar for Mike Taylor tmiket
1
96
End of SEO as We Know It (SMX Advanced Version)
Avatar for Michael King ipullrank
3
3.9k
Rebuilding a faster, lazier Slack
Avatar for samanthasiow samanthasiow
85
9.4k
Reflections from 52 weeks, 52 projects
Avatar for Jefferson Lam jeffersonlam
356
21k
Thoughts on Productivity
Avatar for Jon Yablonski jonyablonski
74
5k
Producing Creativity
Avatar for Steve Smith orderedlist
PRO
348
40k
Measuring & Analyzing Core Web Vitals
Avatar for Philip Tellis bluesmoon
9
750
Building Adaptive Systems
Avatar for Chris Keathley keathley
44
2.9k
How to Talk to Developers About Accessibility
Avatar for Jason CranfordTeague jct
2
130

Transcript

  1. HTML EMAILS Tables, Testing, and Tooling

  2. WTF, TABLES?

  3. HTTP://WWW.ZELDMAN.COM/WP-CONTENT/JZBYJOHNMORRISONBW.JPG

  4. None

  5. HTTP://WWW.CAMPAIGNMONITOR.COM/CSS/

  6. HOW HORRIBLE IS IT?

  7. BOOTSTRAP, YO

  8. AN EMAIL, B

  9. PROBLEMS & SOLUTIONS ! NESTING = HAML ! INLINE CSS

    = AUTOMATION? ! DRY = RYALAP ! NO FALLBACKS = BEER

  10. TESTING

  11. BROWSERS ! DUO ! CLIENTS ! LITMUS !