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 2017
Search
Elliot Ross
August 03, 2017
Design
1
440
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
34
International Email: The End of Game Boss (#TEDC15 London)
iamelliot
1
380
International Email: The Little Things
iamelliot
1
3.5k
Mobile Email Design: Fluid, Adaptive & Responsive
iamelliot
4
8.3k
Other Decks in Design
See All in Design
Designship 2023|想いを可視化するデザインの力
weddingpark
0
220
「これをゲームにしたい!」と言われた時ゲームデザイナーが考えること
kinakobooster
5
5.1k
20231122_Design Leader Impact Award_Presentation_FAKE Okazaki
okazakityo
1
230
Concept Art of Pirate Cat
hansolo21
0
2.6k
現象と向き合うデザイン @Spectrum Tokyo Festival 2023
hirokazu_oda
3
1.3k
デザイナーの帽子をかぶったわたしが、プロダクト開発するうえでスクラムチームに提供したいこと / what I want to provide to Scrum teams when developing products
hiromitsuuuuu
14
4.5k
もち的デザイナーのキャリアデザイン新提言:副業起業家のすゝめ
mochitaro
0
1.3k
3D空間を扱うUI表現とユーザビリティ
akinen
0
410
デザインをみんなのものに 「デザインの脱植民地化」を日本の文脈で考える
mayunak
6
4k
Design Leadership in Challenging Times
morganepeng
3
280
Amebaデザインシステム Spindleの開発 / The Development of Spindle
spindle
4
520
ポートフォリオ思考を通じたデザイナーキャリアの形成と未来への展望
recruitengineers
PRO
3
2.1k
Featured
See All Featured
How to Create Impact in a Changing Tech Landscape [PerfNow 2023]
tammyeverts
12
1.4k
Fantastic passwords and where to find them - at NoRuKo
philnash
35
2.4k
GraphQLとの向き合い方2022年版
quramy
28
12k
Embracing the Ebb and Flow
colly
78
4.1k
10 Git Anti Patterns You Should be Aware of
lemiorhan
644
57k
Typedesign – Prime Four
hannesfritz
36
2k
Rails Girls Zürich Keynote
gr2m
91
13k
ReactJS: Keep Simple. Everything can be a component!
pedronauck
657
120k
Designing for Performance
lara
601
67k
The Invisible Customer
myddelton
114
12k
The Illustrated Children's Guide to Kubernetes
chrisshort
28
46k
Teambox: Starting and Learning
jrom
126
8.4k
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