Building Email with CSS Grid. #EmailWeekly Redesign — Week 2

We’re re-designing our weekly newsletter in public.

After week 1’s semantic HTML-only email, for week 2’s email we looked at using modern CSS to apply layout to our code. We’ve been looking at how we could move towards a multi-column, magazine-style layout for a while, and combined with a co-incidental update in iOS support, CSS Grid seemed like the perfect approach.

Take a look at week 2’s email here.

What is CSS Grid?

Essentially, it’s a much better way to do layout with CSS. No floats, no tables, but a proper, flexible, grid. We won’t cover the details, as that has been covered with more expertise by people like Rachel Andrew and CSS Tricks, but here is a cool little game to help get started.

CSS Grid in Email

CSS Grid enables some pretty cool layout options — for us it means we can make each story a width of 250–450px, and stack them on layouts that fit the screen size accordingly. Last week’s email topped out at a mighty 1600px wide, which looks great on big screens.

Where is CSS Grid supported in email?

For the last year or so, it’s been mainly web browsers and there has been poor support in email clients, but as luck would have it, around the time we were coding this, Apple pushed the iOS 10.3 update. This adds CSS Grid support to iPhone and iPad, including in mail.app. Being a point release, it’s harder to see exactly how many users have the latest version, but anecdotally, we know that most iOS users move to the latest version within a few weeks of release, so we can assume that there will be fairly decent iOS support, pretty quickly. On the iOS Dev dashboard we can see that 79% of iOS users are on iOS 10, and a few months on it’ll be even higher.

Elsewhere, CSS Grid seems to be supported in the latest versions of Apple Mail for Mac, AOL and Outlook 2011.

There isn’t support in most webmail clients, nor in Gmail App or in older email clients like Outlook (🙄). But luckily, our div based structure lends itself to the Hybrid Div approach, as a fallback. That means we can centre align our story blocks, and they automatically stack up and down as required, for the majority of email clients that don’t support CSS Grid.

Falling back to the Hybrid Div approach

And that just leaves the Word Outlooks (and their ever-aligning web based equivalents), and a few lesser used (for us) regional clients. Here, our div based layout reverts back to every story being on a new line. For #EmailWeekly, we’re ok with that. We’re big proponents of the idea that Email doesn’t have to look the same everywhere — if it looks different, but not broken, that’s fine.

If you’re using Outlook 2013 I feel bad for you son

Where Next?

There’s a lot we can do to explore CSS Grid, so we’re keen to get on further with that, but we need to tidy up the layout for Outlook users (sorry guys, I know the last couple weeks haven’t been the best experience).

Read about Email #3 now→

Plus!

Thanks to Kevin & Jason for talking about our project on the Litmus Podcast! Jason has embarked on an open redesign of his own newsletter, so check that out here.

Also shout to Mark Robbins, who has been discussing his CSS Grid adventures on the Twitters.


We’re re-designing our weekly newsletter in public. Find out more here, subscribe here and see progress on github here.