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
自分たちがターゲットになりにくい業務アプリケーションのユーザビリティを担保する取り組み / Initiatives to ensure the usability of business applications that are difficult for us to target
Avatar for Hiromi Morikawa hiromitsuuuuu
1
1.3k
デザインエンジニアの延長にデザインマネージャーとしての可能性を探る
Avatar for takanorip takanorip
1
900
Storyboard Exercise: Chase Sequence
Avatar for Mandalyn Teo lynteo
1
200
Crisp Code inc.｜ブランドガイドライン - Brand guidelines
Avatar for So Kotani / Crisp Code inc. CEO so_kotani
1
300
ユーザー像を「みてね」らしく可視化する　家族アルバムみてねUXリサーチチームの取り組み
Avatar for MIXI DESIGN mixi_design
PRO
3
730
Spacemarket Brand Guide
Avatar for Spacemarket spacemarket
2
160
「ツール」から「パートナー」へ。AI伴走時代のUXデザインとは？～操作を減らし、成果を最大にするための設計～
Avatar for NCDC ncdc
0
110
Emmy's Artwork
Avatar for McKenna mcksmith
0
190
ユーザー体験は細部に宿る -ウィジェットQAの挑戦と気づき- / UX is in the details: Challenges and Learnings from Widget QA
Avatar for 株式会社ビットキー / Bitkey Inc. bitkey
PRO
0
140
デザインコンテキストのバトンをつなぐ—AI時代のプロダクトマネジメント
Avatar for kumano ayumi kumanoayumi
6
850
maki setoguchi
Avatar for Maki / Web Designer maki_setoguchi
0
660
From the Visible Crossroads: Turning Outputs into Outcomes
Avatar for takai_kanako takaikanako
2
1.1k

Featured

See All Featured
ラッコキーワード サービス紹介資料
Avatar for ラッコ株式会社 rakko
1
2.3M
How STYLIGHT went responsive
Avatar for nonsquared nonsquared
100
6k
<Decoding/> the Language of Devs - We Love SEO 2024
Avatar for Nikki Halliwell nikkihalliwell
1
130
From Legacy to Launchpad: Building Startup-Ready Communities
Avatar for Dug Song dugsong
0
140
How to train your dragon (web standard)
Avatar for Monica Dinculescu notwaldorf
97
6.5k
GraphQLとの向き合い方2022年版
Avatar for Yosuke Kurami quramy
50
14k
Agile that works and the tools we love
Avatar for Rasmus Luckow-Nielsen rasmusluckow
331
21k
Organizational Design Perspectives: An Ontology of Organizational Design Elements
Avatar for Dr. Kim W Petersen kimpetersen
PRO
1
200
世界の人気アプリ100個を分析して見えたペイウォール設計の心得
Avatar for Akihiro Kokubo akihiro_kokubo
PRO
66
37k
Designing Experiences People Love
Avatar for Jonathan Moore moore
144
24k
Are puppies a ranking factor?
Avatar for Jono Alderson jonoalderson
1
2.7k
Refactoring Trust on Your Teams (GOTO; Chicago 2020)
Avatar for Rebecca Miller-Webster rmw
35
3.4k

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 !