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
CSS Grid in Email – Elliot Ross at #LitmusLive ...
Search
Elliot Ross
August 03, 2017
Design
1
460
CSS Grid in Email – Elliot Ross at #LitmusLive 2017
an introduction to CSS Grid and how we might use it in email design
Elliot Ross
August 03, 2017
Tweet
Share
More Decks by Elliot Ross
See All by Elliot Ross
Revolutionise your email workflow #TFM17
iamelliot
0
41
International Email: The End of Game Boss (#TEDC15 London)
iamelliot
1
430
International Email: The Little Things
iamelliot
1
3.6k
Mobile Email Design: Fluid, Adaptive & Responsive
iamelliot
4
8.4k
Other Decks in Design
See All in Design
RAKSUL_DESIGN_DECK_20250319
raksulrecruiting
0
410
portfolio_YumiYasuda
yum0418
0
300
読書シェア会 vol.5 / Yumemi.grow 20250526
rakus_dev
0
1.6k
数理的アプローチで挑むスマホUIのデザイン改善:タップ成功率推定ツール「Tappy」の社内活用事例 / Improving Smartphone UI Design with a Mathematical Approach: In-house Use Case of the Tap Success Rate Estimation Tool "Tappy"
lycorptech_jp
PRO
0
450
minpaku-community-scrum-patterns
norinity1103
1
150
新しいデザインの難しさ(公開版) / Difficulties in the New Design (public ver.)
usagimaru
1
670
タイミーでフィールドワークしたら、サービスデザインが始まった
kenichiota0711
1
2.2k
文字コントラストを改めて考える / Reevaluating Text Contrast
lycorptech_jp
PRO
0
280
業務効率化だけじゃ物足りない AIと一緒にプロトタイプ開発
shingo2000
1
1.5k
Storyboard Honey
rocioparronrubio
0
290
UXとUIの違いを自分の言葉で表現する: UX DAYS TOKYO
mizunashi_mana
0
180
DC Style Redesign
mcduckyart
0
140
Featured
See All Featured
Code Reviewing Like a Champion
maltzj
524
40k
Automating Front-end Workflow
addyosmani
1370
200k
Embracing the Ebb and Flow
colly
86
4.8k
How to Think Like a Performance Engineer
csswizardry
25
1.7k
Rails Girls Zürich Keynote
gr2m
95
14k
Product Roadmaps are Hard
iamctodd
PRO
54
11k
CoffeeScript is Beautiful & I Never Want to Write Plain JavaScript Again
sstephenson
161
15k
The Cult of Friendly URLs
andyhume
79
6.5k
Connecting the Dots Between Site Speed, User Experience & Your Business [WebExpo 2025]
tammyeverts
8
340
Speed Design
sergeychernyshev
32
1k
Evolution of real-time – Irina Nazarova, EuRuKo, 2024
irinanazarova
8
830
How to train your dragon (web standard)
notwaldorf
96
6.1k
Transcript
CSS GRID & Email
@iamelliot email.geeks.chat
None
None
None
None
Why? • More layout opportunities both on mobile and in
600+ • Still support legacy email clients • Lighter, accessible code • It’s actual innovation
CSS Grid won’t replace tables (for ages) It’s an enhancement
we can use to create interesting layouts
What is grid?
Giving up layout Table layout Grid layout Via reallygoodemails.com
Interesting layout Standard layout Fallback layout
None
None
None
None
None
Team Awesome • iPhone (iOS 10.3+) • iPad (iOS 10.3+)
• Apple Mail (recent) • Outlook 2015 (mac version) • Thunderbird • AOL Mail • Free Net • (plus hosted version in a browser)
Hybrid div layout
CSS Grid layout
LIVE HTML
None
https://litmus.com/builder/1229fdd
None
Outlook: Grid Only
Outlook (with ghost columns)
Outlook (as a simpler email)
None
More on CSS Grid • gridbyexample.com by Rachel Andrew •
jensimmons.com/post/jul-27-2017/css-grid-101 • css-tricks.com/snippets/css/complete-guide-grid • marcthiele.com/notes/is-it-safe-to-start-using-grid-layout • learncssgrid.com • cssgridgarden.com
Email Reference • Hybrid Div approach: campaignmonitor.com/blog/email-marketing/2014/07/creating-a- centred-responsive-design-without-media-queries/ • Ghost
columns for Outlook: labs.actionrocket.co/microsoft-outlook-conditional-statements
None
Pinterest: magazine spreads
Pinterest: magazine spreads
Pinterest: magazine spreads
Any questions? • Speed networking table • emailweekly.co • @iamelliot