Understanding email rendering about c2

[rememberlenny]

Conditions for email

For responsive emails, where you use media queries, you have to keep a few things in mind.

1. The email is being inlined
2. Email browsers render CSS2 on average
3. You have some email browsers that have comment hacks (ie. outlook)

Desktop-First first

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:

Adding the media query

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:

Inlining mess

The problem comes up in emails, the two conditions above dont work perfectly. For CSS to render in emails, it needs to be inlined. This means that the desktop or media query conditions dont 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:

Ignoring 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:

Wrap up

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!