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

Responsive Emails

Avatar for Rachel Ober Rachel Ober
September 10, 2014
Programming
0
40

Responsive Emails

Avatar for Rachel Ober

Rachel Ober

September 10, 2014
Tweet

More Decks by Rachel Ober

See All by Rachel Ober
So, You Want to Organize a Conference
Avatar for Rachel Ober rachelober
0
51
Front End Workshop 2015
Avatar for Rachel Ober rachelober
0
67
Front End Overview for Interns 2015
Avatar for Rachel Ober rachelober
1
45
IE Classes
Avatar for Rachel Ober rachelober
0
47
Front End Overview (2014)
Avatar for Rachel Ober rachelober
0
45
Team Communication Through Code
Avatar for Rachel Ober rachelober
0
72
What I Learned About SVG
Avatar for Rachel Ober rachelober
0
49
Paperless Post Sass
Avatar for Rachel Ober rachelober
1
89
SassConf Custom Framework/Style Guide Panel
Avatar for Rachel Ober rachelober
0
100

Other Decks in Programming

See All in Programming
なぜ「共通化」を考え、失敗を繰り返すのか
Avatar for Rinchoku rinchoku
1
650
地方に住むエンジニアの残酷な現実とキャリア論
Avatar for nakamichi ichimichi
5
1.5k
Claude Code + Container Use と Cursor で作る ローカル並列開発環境のススメ / ccc local dev
Avatar for Yuichi Maekawa kaelaela
9
5k
AI コーディングエージェントの時代へ：JetBrains が描く開発の未来
Avatar for Masaru Horioka masaruhr
1
140
Is Xcode slowly dying out in 2025?
Avatar for 上ちょ / uetyo uetyo
1
270
「Cursor/Devin全社導入の理想と現実」のその後
Avatar for Ryoichi Saito saitoryc
0
820
チームで開発し事業を加速するための"良い"設計の考え方 @ サポーターズCoLab 2025-07-08
Avatar for Agata Naomichi agatan
1
410
新メンバーも今日から大活躍！SREが支えるスケールし続ける組織のオンボーディング
Avatar for HonMarkHunt honmarkhunt
5
7.2k
git worktree × Claude Code × MCP ～生成AI時代の並列開発フロー～
Avatar for hisuzuya hisuzuya
1
570
NPOでのDevinの活用
Avatar for みんなのコード codeforeveryone
0
830
猫と暮らす Google Nest Cam生活🐈 / WebRTC with Google Nest Cam
Avatar for Yutaro Muta yutailang0119
0
120
イベントストーミング図からコードへの変換手順 / Procedure for Converting Event Storming Diagrams to Code
Avatar for nrs nrslib
2
800

Featured

See All Featured
Navigating Team Friction
Avatar for Lara Hogan lara
187
15k
Measuring & Analyzing Core Web Vitals
Avatar for Philip Tellis bluesmoon
7
510
Why You Should Never Use an ORM
Avatar for John Nunemaker jnunemaker
PRO
58
9.4k
Keith and Marios Guide to Fast Websites
Avatar for Keith Pitt keithpitt
411
22k
It's Worth the Effort
Avatar for 3n 3n
185
28k
The World Runs on Bad Software
Avatar for Brandon Keepers bkeepers
PRO
69
11k
Principles of Awesome APIs and How to Build Them.
Avatar for Keavy McMinn keavy
126
17k
Build your cross-platform service in a week with App Engine
Avatar for Jose L jlugia
231
18k
Easily Structure & Communicate Ideas using Wireframe
Avatar for Afnizar Nur Ghifari afnizarnur
194
16k
Cheating the UX When There Is Nothing More to Optimize - PixelPioneers
Avatar for Stéphanie Walter stephaniewalter
281
13k
Responsive Adventures: Dirty Tricks From The Dark Corners of Front-End
Avatar for Vitaly Friedman smashingmag
251
21k
Six Lessons from altMBA
Avatar for Skipper Chong Warson skipperchong
28
3.9k

Transcript

  1. RESPONSIVE EMAILS with Rachel Ober

  2. RESPONSIVE EMAILS https://flic.kr/p/bWugk2

  3. Lotus Notes https://flic.kr/p/bWugk2

  4. 4 DESIGNING RESPONSIVE

  5. 5 BUILDING BLOCKS OF RESPONSIVE @media FLUID GRIDS FLEXIBLE IMAGES

    MEDIA QUERIES

  6. CLASSIC EMAIL TRICKS https://flic.kr/p/uEhmK

  7. CLASSIC EMAIL TRICKS https://flic.kr/p/69fTME

  8. CLASSIC EMAIL TRICKS https://flic.kr/p/diXxXU

  9. RESPONSIVE EMAIL TRICKS

  10. RESPONSIVE EMAIL TRICKS

  11. That wasn’t funny

  12. PROGRAM LIKE IT’S

  13. 13 WHY RESPONSIVE EMAIL DESIGN? 47% 150 80% times a

    day of emails are opened on a mobile device your eyeballs are on your mobile phone of people delete an email if it looks crappy

  14. 14 MOBILE FIRST

  15. 15 DESIGN RESPONSIVE EMAIL

  16. 16 APPLICATION SUPPORT iPhone Gmail App iPhone Mailbox App iPhone

    Yahoo! Mail App Android Gmail App Android Yahoo! App Blackberry OS 5 Windows Mobile 6.1 Windows Phone 7 Windows Phone 8 Not Supported:

  17. 17 Image & Icon Credits • http://thenounproject.com/Mikhail1986/ • https://flic.kr/p/9fpnZi •

    https://flic.kr/p/6ao3nd • https://flic.kr/p/2W1CBG