KMUsing CSS Grid for the Latest Litmus Newsletter Layout
Hey all!
We like to experiment with new design and coding techniques in our newsletter, and this month we tried something new. We used CSS Grid for a masonry layout of the email (where supported) - you can see it here in Builder.
What is CSS Grid?
CSS Grid is the next wave of CSS layouts and the future of how we will implement designs. I highly recommend checking out Rachel Andrews' Grid by Example for learning all about it. There are many other great resources you can search for online, as well.
Here is the support chart for CSS Grid in web browsers. For email clients, CSS Grid is supported in:
- Apple Mail 10.3
- Outlook 2016 for Mac
- AOL Mail (In the latest version of Firefox or Chrome)
- Freenet.de (In the latest version of Firefox or Chrome)
Alto Mail also has support for CSS Grid, but for the newsletter we fell back to the mobile design for this app.
Our Apple Mail audience at Litmus is approximately 30%, so a good portion of our subscriber base is able to see the grid desktop layout.
Here is what the email looked like where CSS Grid is supported, for device/window widths greater than 850px:
Where CSS Grid isn't supported (and for device/window widths of less than 850 pixels), we fell back to a one-column layout.
We've been slowly moving away from using tables for our layouts in our newsletters, and using divs with conditional tables only for Outlook. This is a very future-forward approach. As soon as tables are no longer needed for HTML email, we can simply remove the conditional tables and won't need to change the underlying HTML structure. It also enables us to use progressively enhanced layouts such as CSS Grid much more seamlessly. We are not bound by tables for our layout structure, instead only using them as a fallback for Outlook.
We also displayed a banner at the top of the email telling users to view online for non-grid supported clients and leading to this post for all clients to learn more.
What are your thoughts?
Do you plan on trying CSS Grid for your future email layouts? Do you have any questions for us?
This is very cool. I tried to forward it to my coworkers though (we're all email people) and Outlook 2016 on Mac froze every time I tried. It also defaults down to the one-column layout in the forwarding preview, but it shows up as gridded in my inbox. Weird problem. I've never had an email cause my inbox to freeze and crash when forwarding an email. Any idea why this is?
I had a similar event happen when I tried to forward the email from Outlook 2016 on Mac
this is really interesting stuff, and I can see how it will become the default method for email coding in future. I'm guessing only around 2% of my audience would feel the benefit right now but I'm certainly keeping an eye on it. A couple of Q's...
Do you have any idea how many people have email widths of >850px?
What are the implications for HTML weight? This is a fairly content-heavy email - is CSS grid a more efficient way of coding?
I was curious too, so I just saved the email to see the size. 54 KB. Not bad at all for the content.
css grid isnt supported in old outlook though?