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
41

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
47
IE Classes
Avatar for Rachel Ober rachelober
0
49
Front End Overview (2014)
Avatar for Rachel Ober rachelober
0
46
Team Communication Through Code
Avatar for Rachel Ober rachelober
0
73
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
Navigation 2 を 3 に移行する（予定）ためにやったこと
Avatar for yokomii yokomii
0
340
ぬるぬる動かせ！ Riveでアニメーション実装🐾
Avatar for Kuno Ayana kno3a87
1
230
Rancher と Terraform
Avatar for Ryoma Fujiwara fufuhu
2
550
Namespace and Its Future
Avatar for Satoshi Tagomori tagomoris
6
710
How Android Uses Data Structures Behind The Scenes
Avatar for HyunWoo Lee l2hyunwoo
0
480
より安全で効率的な Go コードへ： Protocol Buffers Opaque API の導入
Avatar for shoyan shwatanap
2
750
スケールする組織の実現に向けた インナーソース育成術 - ISGT2025
Avatar for teamLab teamlab
PRO
2
160
Swift Updates - Learn Languages 2025
Avatar for Yuta Koshizawa koher
2
510
Reading Rails 1.0 Source Code
Avatar for Masafumi Okura okuramasafumi
0
250
OSS開発者という働き方
Avatar for ANDPAD inc andpad
5
1.7k
Improving my own Ruby thereafter
Avatar for monochrome sisshiki1969
1
160
Performance for Conversion! 分散トレーシングでボトルネックを 特定せよ
Avatar for Andrey Chernov inetand
0
2.4k

Featured

See All Featured
Facilitating Awesome Meetings
Avatar for Lara Hogan lara
55
6.5k
Building an army of robots
Avatar for Kyle Neath kneath
306
46k
Rebuilding a faster, lazier Slack
Avatar for samanthasiow samanthasiow
83
9.2k
Cheating the UX When There Is Nothing More to Optimize - PixelPioneers
Avatar for Stéphanie Walter stephaniewalter
285
14k
Large-scale JavaScript Application Architecture
Avatar for Addy Osmani addyosmani
513
110k
ReactJS: Keep Simple. Everything can be a component!
Avatar for Pedro Nauck pedronauck
667
120k
Bash Introduction
Avatar for André Augusto Costa Santos 62gerente
615
210k
Automating Front-end Workflow
Avatar for Addy Osmani addyosmani
1370
200k
How To Stay Up To Date on Web Technology
Avatar for Chris Coyier chriscoyier
790
250k
The Psychology of Web Performance [Beyond Tellerrand 2023]
Avatar for Tammy Everts tammyeverts
49
3k
The Power of CSS Pseudo Elements
Avatar for Geoffrey Crofte geoffreycrofte
77
6k
Measuring & Analyzing Core Web Vitals
Avatar for Philip Tellis bluesmoon
9
580

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