Improving reader return rates.
06 March 2016 | 3 min read
Most web pages are written with the assumption that all the content is loaded, then the CSS determines the priority for styling. In emails, you have to design your CSS/class/markup base on the assumption that you can have some parts of your code NOT run.
When it comes to responsive layouts, you have to design for the case where desktop is default (without the media queries) and any media queries are added, only if its possible to run inline styles. In the case where you have things like Gmail, where the style tags are stripped out, you need to account for this.
Most email browsers don’t read style tags. As a result, you have to write your emails with all the CSS properties as style tags in the html tag. This is called inlined CSS. Instead of writing the raw HTML with inlined CSS, there are many services or libraries for inlining a block of HTML and CSS.
The problem with email inliners, like Rail’s Roadie, was that it was inlining the media query styles that would run on mobile, which broke the default desktop layout. By having roadie ignore certain styles, we control the designed layout to render the desktop mode in all cases, and then serve the inline style tag with media queries to be run where possible.
To make things more complicated, Outlook is very outdated. Specifically, there are a lot of CSS3 properties and even CSS2 properties it doesn’t render. As a result, outlook has some legacy hacks where you can use comment flags to tell Outlook NOT to render certain content.
For responsive emails, where you use media queries, you have to keep a few things in mind.
Based on this factor, you have to code your emails to be desktop-first. The CSS, without any media queries, need to look good on desktop email browsers. This way, you can assume at the very least, the email looks like this:
Considering you want to add a media query, you need to add an inline media query on the email. This is pretty straight forward for desktop rendering. For example, you would get something like this:
The problem comes up in emails, the two conditions above don’t work perfectly. For CSS to render in emails, it needs to be inlined. This means that the desktop or media query conditions don’t jive well together. This why we started with the Desktop-First css structure. One you inline your css, when theres a media query, you get this mess:
Consider your inliner to ignore media query for inline
When you have a media query, the media queries CSS gets inlined, and consequently overrides the desktop CSS. As a result, you get markup that looks broken. To prevent this, you have to queue your CSS inliner to ignore the media query CSS. To do this, you separate the media query CSS in a seperate style tag and you flag it in the inliner. In the case for Roadie, thats the roadie-ignore flag. This way you get this:
By setting the inliner to ignore the media query style tag, you allow all email browsers to render the working desktop CSS. In the case that the email browser will parse the style tag, it can view the media query and optionally render the mobile styles when relevant. This is how you can have cross-email-browser functional CSS emails!
On the post-centralization of social media
How to write Desktop-first responsive emails
On email newsletters for Big Media
Remind to Read launched on the New Yorker 1 week ago
Why publishers need a way to return users after they read an article