Comments (1)
Conditions for email
For responsive emails, where you use media queries, you have to keep a few things in mind.
- The email is being inlined
- Email browsers render CSS2 on average
- 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!
from c2.
Related Issues (20)
- Onboarding for Robb HOT 6
- konacha / sprockets update HOT 1
- Onboarding Micah
- CVE-2016-6316 in rails HOT 1
- API isn't working HOT 3
- Date submitted bug HOT 1
- Blanket branding question
- Incorrect recurring interval value
- Incorrect Purchase Type Displayed
- Visual bug: new purch req form selector missing chevron
- Canceling a request doesn't cancel a request HOT 1
- Cookies are sent via HTTP instead of HTTPS HOT 3
- Add additional logging for ATO HOT 1
- Create user account for penetration testing
- Supervisor select box is extremely difficult to use
- Migrate email service off Mandrill
- The mail job is failing HOT 3
- Remove "micropurchase" from gsa18f options
- Remove references to cg-fake-uaa
- ?
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from c2.