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
40
International Email: The End of Game Boss (#TEDC15 London)
iamelliot
1
410
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
【pmconf2024】ユーザーになりきる「コスプレUX」で リサーチ解像度を上げる
kamechi7222222
1
8.4k
ネットワークセキュリティ科 学科紹介
sklbj_unz
0
160
富山デザイン勉強会_デザイントレンド2025.pdf
keita_yoshikawa
0
150
20241019-CUD友の会「困った!を解決するデザイン改訂版」交流会
majimasachi
0
320
急成長中のWINTICKETにおける ちいさくはじめるライティング改善 / winticket-writing
cyberagentdevelopers
PRO
1
270
若手デザイナーチームが手がける CADC2024クリエイティブディレクションの全貌 / opening-design
cyberagentdevelopers
PRO
1
1.5k
Personal Story Sequence - Vendetta(WIP)
elrns88
0
400
Generating Momentum | Yasuhiro Yokota
yasuhiroyokota
0
230
【Designship 2024|10.13】デザイン組織を進化させるための仕組み化の要諦
payatsusan213
1
780
Rayout Pattern 01
one0
0
1.5k
TUNAG BOOK 2024
stmn
0
470
共創するのはモノではなく価値 ── 日本の「はたらく」を変える挑戦 / Designship2024 MainStage
visional_engineering_and_design
1
720
Featured
See All Featured
What’s in a name? Adding method to the madness
productmarketing
PRO
22
3.3k
Bootstrapping a Software Product
garrettdimon
PRO
305
110k
Let's Do A Bunch of Simple Stuff to Make Websites Faster
chriscoyier
507
140k
Unsuck your backbone
ammeep
669
57k
Evolution of real-time – Irina Nazarova, EuRuKo, 2024
irinanazarova
6
540
Producing Creativity
orderedlist
PRO
343
39k
KATA
mclloyd
29
14k
Visualization
eitanlees
146
15k
Speed Design
sergeychernyshev
25
780
The MySQL Ecosystem @ GitHub 2015
samlambert
250
12k
JavaScript: Past, Present, and Future - NDC Porto 2020
reverentgeek
47
5.2k
実際に使うSQLの書き方 徹底解説 / pgcon21j-tutorial
soudai
175
51k
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