CSS Grid in Email – Elliot Ross at #LitmusLive 2017

an introduction to CSS Grid and how we might use it in email design

Transcript

1. CSS GRID & Email
2. @iamelliot email.geeks.chat
7. Why? • More layout opportunities both on mobile and in 600+ • Still support legacy email clients • Lighter, accessible code • It’s actual innovation
8. CSS Grid won’t replace tables (for ages) It’s an enhancement we can use to create interesting layouts
9. What is grid?
10. Giving up layout Table layout Grid layout Via reallygoodemails.com
11. Interesting layout Standard layout Fallback layout
17. 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)
18. Hybrid div layout
19. CSS Grid layout
20. LIVE HTML
22. https://litmus.com/builder/1229fdd
24. Outlook: Grid Only
25. Outlook (with ghost columns)
26. Outlook (as a simpler email)
28. 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
29. 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
31. Pinterest: magazine spreads
32. Pinterest: magazine spreads
33. Pinterest: magazine spreads
34. Any questions? • Speed networking table • emailweekly.co • @iamelliot