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
440
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
Hatena Engineer Seminar #33 チームと開発するためのモック
takuwolog
0
400
【30人中30人が3ヶ月平均180万収入アップ】マズロー安達の弟子、成功事例集
maslow_akkun
0
190
How to get a Tiger to Tulsa
mcduckyart
0
120
sachi_y_portfolio
sachi337
0
420
読書シェア会 vol.5 / Yumemi.grow 20250526
rakus_dev
0
1.7k
タイミーでフィールドワークしたら、サービスデザインが始まった
kenichiota0711
2
2.6k
サービスリブランディングにおけるイラストレーションシステムの構築と活用事例 / Building and Utilizing an Illustration System in Service Rebranding
lycorptech_jp
PRO
0
470
教育分野に強いUIデザイナー / 山口哲弘ポートフォリオ
t2yamaguchi429
0
590
ランドマークが光る!季節を彩るナビ体験 - Mobility Night #3 -
kitau
0
100
株式会社ログラス - 会社説明資料【デザイナー】/ Loglass Designer
loglass2019
1
840
Building foundations 堅牢なデザイントークンの設計
hilokifigma
2
3.7k
「批評」を習慣にするための仕組みと場のデザイン/uxdesign202507
nikkei_engineer_recruiting
5
720
Featured
See All Featured
Bash Introduction
62gerente
613
210k
The Art of Delivering Value - GDevCon NA Keynote
reverentgeek
15
1.6k
CSS Pre-Processors: Stylus, Less & Sass
bermonpainter
357
30k
Site-Speed That Sticks
csswizardry
10
730
Writing Fast Ruby
sferik
628
62k
ReactJS: Keep Simple. Everything can be a component!
pedronauck
667
120k
jQuery: Nuts, Bolts and Bling
dougneiner
63
7.8k
Building a Modern Day E-commerce SEO Strategy
aleyda
42
7.4k
Practical Tips for Bootstrapping Information Extraction Pipelines
honnibal
PRO
21
1.4k
4 Signs Your Business is Dying
shpigford
184
22k
I Don’t Have Time: Getting Over the Fear to Launch Your Podcast
jcasabona
33
2.4k
Design and Strategy: How to Deal with People Who Don’t "Get" Design
morganepeng
130
19k
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