Rather, I should say: it looks like _filtered is being used to weed out properties not supported in Mail for a reason; presumably, because they might potentially interfere with part of the outer Yahoo mail app.
That safeguard is, in theory, done by appending the yui_X_XX_... prefix on IDs and classes, but it could be that maybe there was a way to get around that and serve CSS that could directly affect some part of mail.yahoo.com directly.
I've been looking at that for the past hour or so. _filtered is applied selectively to unsupported declarations, from what I'm seeing.
On an "@media screen" trigger, _filter gets applied on a ruleset that contains the 'animation' (and prefixed versions thereof) property, but isn't applied on another ruleset that contains height, overflow, and width properties.
At first blush, it looks like they're just weeding out the things Yahoo doesn't support.
It's absolutely possible, yes, though technically the email wouldn't be "responsive".
You'd be doing it with a combination of fluid and non-fluid table structures; I call it 'spongy' development, it's been called 'hybrid' development as well. Though there are a few caveats, this method produces emails that are 'responsive' across all email clients (the ones that matter, anyway). If your design relies on pixel-perfect dimensions, though, this isn't a good method to use; I'd say it's totally incompatible, actually.
I talked about this method in the advanced workshop held at TEDC last month. Here's some of the code we wrote, which illustrates what I'm talking about:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>The Latest from Table Junkies</title>
<style type="text/css">
/* RESET STYLES */
p{margin:1em 0;}
table{border-collapse:collapse; table-layout:fixed;}
img, a img{border:0; height:auto; outline:none; text-decoration:none;}
h1, h2, h3, h4, h5, h6{display:block !important; margin:0 !important; padding:0 !important;}
body, #bodyTable, #bodyCell{height:100% !important; margin:0; padding:0; width:100% !important;}
/* CLIENT-SPECIFIC STYLES */
img{-ms-interpolation-mode: bicubic;} /* Force IE to smoothly render resized images. */
#outlook a{padding:0;} /* Force Outlook 2007 and up to provide a "view in browser" message. */
table{mso-table-lspace:0pt; mso-table-rspace:0pt;} /* Remove spacing between tables in Outlook 2007 and up. */
.ReadMsgBody{width:100%;} .ExternalClass{width:100%;} /* Force Outlook.com to display emails at full width. */
p, a, li, td, blockquote{mso-line-height-rule:exactly;} /* Force Outlook to render line heights as they're originally set. */
a[href^="tel"], a[href^="sms"]{color:inherit; cursor:default; text-decoration:none;} /* Force mobile devices to inherit declared link styles. */
p, a, li, td, body, table, blockquote{-ms-text-size-adjust:100%; -webkit-text-size-adjust:100%;} /* Prevent Windows- and Webkit-based mobile platforms from changing declared text sizes. */
.ExternalClass, .ExternalClass p, .ExternalClass td, .ExternalClass div, .ExternalClass span, .ExternalClass font{line-height:100%;} /* Force Outlook.com to display line heights normally. */
/* STRUCTURAL STYLES */
.emailContainer{max-width:640px;}
.flexibleColumn{max-width:320px;}
.flexibleGrid{max-width:213px;}
/* CONTENT STYLES */
#heroImage{width:100% !important;}
/* MOBILE STYLES */
@media only screen{ /* If media queries are supported, make all images fluid. */
img{width:100%;}
}
@media screen and (min-width:768px){ /* Set min-width for clients that have media query support, but no max-width support. */
/* STRUCTURAL STYLES */
.emailContainer{width:640px !important;}
#emailLogo{max-width:200px;}
#emailPreview{max-width:440px;}
.flexibleColumn{width:50% !important;}
.flexibleGrid{width:33% !important;}
}
@media screen and (max-width:768px){
/* STRUCTURAL STYLES */
#emailPreview, #emailLogo{max-width:100% !important; width:100% !important;}
.flexibleColumn{max-width:50% !important; width:100% !important;}
.flexibleGrid{max-width:33% !important;}
/* CONTENT STYLES */
}
@media only screen and (max-width:480px){
/* CLIENT-SPECIFIC STYLES */
body{width:100% !important; min-width:100% !important;} /* Force iOS Mail to render the email at full width. */
/* STRUCTURAL STYLES */
.flexibleColumn{max-width:100% !important; width:100% !important;}
.flexibleGrid{max-width:50% !important;}
/* CONTENT STYLES */
}
</style>
</head>
<body>
<center>
<table align="center" border="0" cellpadding="0" cellspacing="0" height="100%" width="100%" id="bodyTable">
<tr>
<td align="center" valign="top" id="bodyCell">
<table align="center" border="0" cellspacing="0" cellpadding="0" width="100%">
<tr>
<td align="center" valign="top" id="emailPreheader">
<table align="center" border="0" cellpadding="0" cellspacing="0" width="100%" class="emailContainer">
<tr>
<td align="center" valign="top">
<!--[if (gte mso 9)|(IE)]>
<table align="center" border="0" cellspacing="0" cellpadding="0" dir="rtl" width="640">
<tr>
<td align="center" valign="top" width="440">
<![endif]-->
<table align="right" border="0" cellpadding="10" cellspacing="0" width="100%" id="emailPreview">
<tr>
<td align="left" valign="top" id="previewContent">
Spruce up your tables. See what we did there? New products in the store.
</td>
</tr>
</table>
<!--[if (gte mso 9)|(IE)]>
</td>
<td align="center" valign="top" width="200">
<![endif]-->
<table align="left" border="0" cellpadding="10" cellspacing="0" width="100%" id="emailLogo">
<tr>
<td align="left" valign="top" id="logoContent">
<h1 id="logo"><a href="#">Tj</a></h1>
</td>
</tr>
</table>
<!--[if (gte mso 9)|(IE)]>
</td>
</tr>
</table>
<![endif]-->
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td align="center" valign="top" id="emailHeader">
<table align="center" border="0" cellpadding="0" cellspacing="0" width="100%" class="emailContainer">
<tr>
<td align="center" valign="top">
<!--[if (gte mso 9)|(IE)]>
<table align="center" border="0" cellspacing="0" cellpadding="0" width="640">
<tr>
<td align="center" valign="top">
<![endif]-->
<table border="0" cellpadding="10" cellspacing="0" width="100%">
<tr>
<td align="center" valign="top">
<a href="#"><img src="~img/hero.jpg" width="620" id="heroImage" style="max-width:620px;"></a>
</td>
</tr>
<tr>
<td valign="top" class="headerContent">
<h2>The Latest from Table Junkies</h2>
<br />
We're taking it back to the mid-century with our latest crop of products. Embracing the old and making it new again, our latest tables and dining accessories are the perfect compliment to any home. First, we've got two new additions designed to make your meals better:
</td>
</tr>
</table>
<!--[if (gte mso 9)|(IE)]>
</td>
</tr>
</table>
<![endif]-->
</td>
</tr>
<tr>
<td align="center" valign="top">
<!--[if (gte mso 9)|(IE)]>
<table align="center" border="0" cellspacing="0" cellpadding="0" width="640">
<tr>
<td align="center" valign="top" width="320">
<![endif]-->
<table align="left" border="0" cellpadding="10" cellspacing="0" width="100%" class="flexibleColumn">
<tr>
<td align="center" valign="top">
<table border="0" cellspacing="0" cellpadding="0" width="100%">
<tr>
<td align="center" valign="top">
<a href="#"><img src="~img/teapot.jpg" width="300" style="max-width:480px;"></a>
</td>
</tr>
<tr>
<td align="center" valign="top" class="headerContent">
<h3>The Teapot</h3>
An unusual approach to a classic piece of kitchen-ware.
</td>
</tr>
<tr>
<td align="center" valign="top" class="headerButtonContainer">
<table border="0" cellpadding="0" cellspacing="0" class="headerButton">
<tr>
<td align="center" valign="middle" class="headerButtonContent">
<a href="#">Shop Now</a>
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
<!--[if (gte mso 9)|(IE)]>
</td>
<td align="center" valign="top" width="320">
<![endif]-->
<table align="left" border="0" cellpadding="10" cellspacing="0" width="100%" class="flexibleColumn">
<tr>
<td align="center" valign="top">
<table border="0" cellspacing="0" cellpadding="0" width="100%">
<tr>
<td align="center" valign="top">
<a href="#"><img src="~img/bowl.jpg" width="300" style="max-width:480px;"></a>
</td>
</tr>
<tr>
<td align="center" valign="top" class="headerContent">
<h3>The Bowl</h3>
Turn heads and whet appetites with this unique bowl.
</td>
</tr>
<tr>
<td align="center" valign="top" class="headerButtonContainer">
<table border="0" cellpadding="0" cellspacing="0" class="headerButton">
<tr>
<td align="center" valign="middle" class="headerButtonContent">
<a href="#">Shop Now</a>
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
<!--[if (gte mso 9)|(IE)]>
</td>
</tr>
</table>
<![endif]-->
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td align="center" valign="top" id="emailGrid">
<table align="center" border="0" cellpadding="0" cellspacing="0" width="100%" class="emailContainer">
<tr>
<td align="center" valign="top">
<!--[if (gte mso 9)|(IE)]>
<table align="center" border="0" cellspacing="0" cellpadding="0" width="640">
<tr>
<td align="center" colspan="3" valign="top" width="640">
<![endif]-->
<table align="center" border="0" cellpadding="10" cellspacing="0" width="100%">
<tr>
<td align="center" valign="top" class="gridContent">
<h2>What’s a table without a great chair?</h2>
<br />
Relax in style with six new chairs from Table Junkies:
</td>
</tr>
</table>
<!--[if (gte mso 9)|(IE)]>
</td>
</tr>
<tr>
<td align="center" valign="top" width="213">
<![endif]-->
<table align="left" border="0" cellpadding="10" cellspacing="0" width="50%" class="flexibleGrid">
<tr>
<td align="center" valign="top">
<table border="0" cellspacing="0" cellpadding="0" width="100%">
<tr>
<td align="center" valign="top">
<a href="#"><img src="~img/chair1.jpg" width="120" style="max-width:120px;"></a>
</td>
</tr>
</table>
</td>
</tr>
</table>
<!--[if (gte mso 9)|(IE)]>
</td>
<td align="center" valign="top" width="213">
<![endif]-->
<table align="left" border="0" cellpadding="10" cellspacing="0" width="50%" class="flexibleGrid">
<tr>
<td align="center" valign="top">
<table border="0" cellspacing="0" cellpadding="0" width="100%">
<tr>
<td align="center" valign="top">
<a href="#"><img src="~img/chair2.jpg" width="120" style="max-width:120px;"></a>
</td>
</tr>
</table>
</td>
</tr>
</table>
<!--[if (gte mso 9)|(IE)]>
</td>
<td align="center" valign="top" width="213">
<![endif]-->
<table align="left" border="0" cellpadding="10" cellspacing="0" width="50%" class="flexibleGrid">
<tr>
<td align="center" valign="top">
<table border="0" cellspacing="0" cellpadding="0" width="100%">
<tr>
<td align="center" valign="top">
<a href="#"><img src="~img/chair3.jpg" width="120" style="max-width:120px;"></a>
</td>
</tr>
</table>
</td>
</tr>
</table>
<!--[if (gte mso 9)|(IE)]>
</td>
</tr>
<tr>
<td align="center" valign="top" width="213">
<![endif]-->
<table align="left" border="0" cellpadding="10" cellspacing="0" width="50%" class="flexibleGrid">
<tr>
<td align="center" valign="top">
<table border="0" cellspacing="0" cellpadding="0" width="100%">
<tr>
<td align="center" valign="top">
<a href="#"><img src="~img/chair1.jpg" width="120" style="max-width:120px;"></a>
</td>
</tr>
</table>
</td>
</tr>
</table>
<!--[if (gte mso 9)|(IE)]>
</td>
<td align="center" valign="top" width="213">
<![endif]-->
<table align="left" border="0" cellpadding="10" cellspacing="0" width="50%" class="flexibleGrid">
<tr>
<td align="center" valign="top">
<table border="0" cellspacing="0" cellpadding="0" width="100%">
<tr>
<td align="center" valign="top">
<a href="#"><img src="~img/chair2.jpg" width="120" style="max-width:120px;"></a>
</td>
</tr>
</table>
</td>
</tr>
</table>
<!--[if (gte mso 9)|(IE)]>
</td>
<td align="center" valign="top" width="213">
<![endif]-->
<table align="left" border="0" cellpadding="10" cellspacing="0" width="50%" class="flexibleGrid">
<tr>
<td align="center" valign="top">
<table border="0" cellspacing="0" cellpadding="0" width="100%">
<tr>
<td align="center" valign="top">
<a href="#"><img src="~img/chair3.jpg" width="120" style="max-width:120px;"></a>
</td>
</tr>
</table>
</td>
</tr>
</table>
<!--[if (gte mso 9)|(IE)]>
</td>
</tr>
</table>
<![endif]-->
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td align="center" valign="top" id="emailArticles">
<table align="center" border="0" cellpadding="0" cellspacing="0" width="100%" class="emailContainer">
<tr>
<td align="center" valign="top">
<!--[if (gte mso 9)|(IE)]>
<table align="center" border="0" cellspacing="0" cellpadding="0" width="540">
<tr>
<td align="center" valign="top">
<![endif]-->
<table border="0" cellpadding="10" cellspacing="0" width="90%">
<tr>
<td align="left" valign="top" class="articleContent">
<h2>From Our Blog</h2>
</td>
</tr>
<tr>
<td align="left" valign="top" class="articleContent">
<h5>April 18, 2014</h5>
<h3>Revamping Our Workshop</h3>
We love building quality furniture, but it can be a real mess. Check out how we revamped our workshop and kept things tidy.
</td>
</tr>
<tr>
<td valign="top" class="articleButtonContainer">
<table border="0" cellpadding="0" cellspacing="0" class="articleButton">
<tr>
<td align="center" valign="middle" class="articleButtonContent">
<a href="#">Read More</a>
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td valign="top" class="articleContent">
<h5>April 7, 2014</h5>
<h3>New Finish Options</h3>
We're thrilled to announce that all of our tables have new finish options available: Midnight Silk, Natural High Noon, and Lavendar Street. Check them out in the store.
</td>
</tr>
<tr>
<td valign="top" class="articleButtonContainer">
<table border="0" cellpadding="0" cellspacing="0" class="articleButton">
<tr>
<td align="center" valign="middle" class="articleButtonContent">
<a href="#">Read More</a>
</td>
</tr>
</table>
</td>
</tr>
</table>
<!--[if (gte mso 9)|(IE)]>
</td>
</tr>
</table>
<![endif]-->
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td align="center" valign="top" id="emailFooter">
<table align="center" border="0" cellpadding="0" cellspacing="0" width="100%" class="emailContainer">
<tr>
<td align="center" valign="top">
<!--[if (gte mso 9)|(IE)]>
<table align="center" border="0" cellspacing="0" cellpadding="0" width="640">
<tr>
<td align="center" valign="top">
<![endif]-->
<table border="0" cellpadding="10" cellspacing="0" width="100%">
<tr>
<td align="center" valign="top" class="footerContent">
<span>1234 Main Street, Anywhere, MA 01234, USA</span>
<br />
<a href="#">Unsubscribe</a> | <a href="#">View this email in your browser</a>
</td>
</tr>
</table>
<!--[if (gte mso 9)|(IE)]>
</td>
</tr>
</table>
<![endif]-->
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
</center>
</body>
</html>
Take this example, delete the media query styles, and check it out in a browser; everything flows and stacks as you'd expect; the media queries are only there to shore up some of the structure and make that stacking and flowing 'smooth'.
The gist is this: most of the email works on a fluid basis, with percentage-based widths (generally 100%), except for the bits where you need more structure, which would get pixel-based widths. Tables are 'floated' using the align attribute, which works way more consistently than CSS floats do.
The media query styles are used for progressive enhancement (as they should be), and not as a hard requirement of a viewable page (or email, in this case).
None of the CSS in the example above is inlined, but that's for clarity's sake. You'd inline the CSS as normal.
Feel free to ask questions if there's anything that looks weird or you don't get; I'll try to get in here to answer.
Hey Abby - would you mind sending me a bit of information? A DM on Twitter would be fine. I can ask our delivery folks to take a look at what's going on.
Hey Sam - give this bit of CSS a shot:
@media only screen and (max-width:480px){
body{width:100% !important; min-width:100% !important;} /* Force iOS Mail to render the email at full width. */
}
It doesn't have to be in a media query, but I like to have CSS be served only where it's needed, hence the query. Might fix your issue.
It's this year?
I booked my flight for 2017. Oops.
For MailChimp's UX Newsletter, we really like LICEcap for creating gifs; we've found that it allows a pretty nice level of fidelity while keeping file size low.
For me, shit pizza breaks down like so:
1. Pizza Hut
2. Little Caesar's
3. Domino's
4. Papa John's
I share your midwestern sensibilities; whenever I'm in the midwest, I make it a point to stop at Little Caesar's and White Castle.
Probably because, deep down, I hate myself.