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
ビジネス成果を最大限に発揮するPORTFOLIO
ataxi1003
0
190
Cards | Storyboards
giofortuna_story
0
280
Flow, Not Stock 知識触媒としてのIA
5kaichi
1
290
Goodpatch Tour💙 / We are hiring!
goodpatch
31
860k
1920*1080pxに設定したケース / Google Slide Size Test
arthur1
0
2.8k
BPStudy#213〜ビジネスアナリシスとDDD(ドメイン駆動設計)パネルディスカッション資料 / BPStudy213-panel
haru860
0
400
portfolio_YumiYasuda
yum0418
0
280
Design Studio Deck | インクルーシブデザインスタジオCULUUM
culumu
3
1.3k
バイアスを凌ぐデザインとコード ―異動直後にどうふるまうか―
kkaru
0
430
児童相談所における養育里親委託時の親権者同意に向けたコミュニケーションの実態
trivia
0
460
デフォルトの16:9(960*540px)のケース / Google Slide Size Test
arthur1
0
2.8k
AI時代に淘汰されないデザインのしごと
akinen
1
130
Featured
See All Featured
Why You Should Never Use an ORM
jnunemaker
PRO
57
9.4k
Into the Great Unknown - MozCon
thekraken
39
1.9k
I Don’t Have Time: Getting Over the Fear to Launch Your Podcast
jcasabona
32
2.3k
Optimizing for Happiness
mojombo
379
70k
[Rails World 2023 - Day 1 Closing Keynote] - The Magic of Rails
eileencodes
35
2.3k
Git: the NoSQL Database
bkeepers
PRO
430
65k
Chrome DevTools: State of the Union 2024 - Debugging React & Beyond
addyosmani
7
700
The Art of Programming - Codeland 2020
erikaheidi
54
13k
Balancing Empowerment & Direction
lara
1
370
Scaling GitHub
holman
459
140k
How to train your dragon (web standard)
notwaldorf
93
6.1k
Build The Right Thing And Hit Your Dates
maggiecrowley
36
2.8k
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