Blog
Repurpose your Images for Mobile Email |
|
10.19.2011 Get connected with Email on Acid for up-to-date news and information on the subject of email design, development, and testing!
|
| |
By Michelle KlannJuly 28, 2011 |
Stop Yahoo! Mail from rendering your Media QueriesIn April 2011, Campaign Monitor published this article which identifies an issue in the way Yahoo! Mail handles media queries. With the help of Brian Sisolak @bsisolak at Trilogy Interactive, we've identified a few more issues with regard to the way Yahoo! Mail handles media query styles intended for mobile devices only. @media only screen and (max-device-width: 480px) {
#smallScreen {width:100px; padding:2px;} .desktop {width:500px; padding:10px;} } Will get converted to this: _filtered #yiv1449593645 {padding:2px;}
#yiv1449593645 .yiv1449593645desktop {width:500px;padding:10px;} #yiv1449593645 As you can see, Yahoo! converts each of your style names into a name that is unique to your email. They do this in order to keep your styles separate from the ones they use in their interface. So later in the document, it also converts your HTML: <div class="desktop">Text</div>
Is converted to: <div class=" yiv1449593645desktop ">Text</div>
Although Yahoo! has really good intentions, I think the problem is occurring because their parsing tool does not take into account media queries and the way they are formatted. So what's the fix?Campaign Monitor came up with a sneaky solution to use attribute selectors since they are not support either. That way your media query and the styles within will not get picked up by Yahoo! To give an example, if I convert my original query from above, it would look like this: @media only screen and (max-device-width: 480px) {
*[id=smallScreen] {width:100px; padding:2px;} *[class=desktop] {width:500px; padding:10px;} } Another option is to use attribute selectors a little differently wherein you add a "*[class]" before all class declarations and "*[id]" before ID's like this: @media only screen and (max-device-width: 480px) {
*[id]#smallScreen {width:100px; padding:2px;} *[class].desktop {width:500px; padding:10px;} } The bugger about using the examples above is that each element controlled within your media query must contain an HTML attribute (id, class, style, etc). Unfortunatly, universal, type and decendent selectors are out of the question. So here's one more creative tactic that gives you access to additional selector types: <style>
@media only screen and (max-device-width: 480px) { body[yahoo] p {color:#00C} body[yahoo] .foo {color:#C03} body[yahoo] .bar {color:#C03} } </style> ... <body yahoo="fix"> <p>test</p> <p class="foo">test</p> <div class="bar">test</div> </body> In this example, I am making up a "yahoo" attribute and placing it in the body tag. I could have left out the value "fix" but this will help me remember what it's for later on. Then I am placing "body[yahoo] " before each declaration which now allows me to access universal selectors. Each of the recommendations above will work in both Yahoo! Classic and Yahoo! Mail. |
Comments
Yahoo Beta has now officially become Yahoo Mail. Yahoo New has been discontinued and Yahoo Classic is difficult to get to. So this fix is still required for Yahoo Mail and Yahoo Classic.
<style type="text/css">
@media only screen and (max-device-width: 480px) {
#table {width:300px !important;}
#cell {width:300px !important;}
#hide {display:none !important;}
#emailHeader {width:300px !important; height:40px !important;}
#borderTop {width:300px !important; height:5px !important; display:none !important;}
#borderBottom {width:300px !important; height:5px !important; display:none !important;}
body[yahoo] #table {width:300px !important;}
body[yahoo] #cell {width:300px !important;}
body[yahoo] #borderTop {display:block !important;}
body[yahoo] #borderBottom {display:block !important;}
}
</style>
The image tag is nestled between tables yet set within the over table/td that has a mobile width of 300pm, much like the Campaign Master example:
http://www.website.com/email/header.gif
Did you add the yahoo="fix" attribute to your body tag?
For example:
<body yahoo="fix">
There is no need to duplicate your styles above (#table and #cell). You must use the body[yahoo] before every declaration in your media query - this is to ensure Yahoo does not render your mobile version:
<style type="text/css">
@media only screen and (max-device-width: 480px) {
body[yahoo] #table {width:300px !important;}
body[yahoo] #cell {width:300px !important;}
body[yahoo] #hide {display:none !important;}
body[yahoo] #emailHeader {width:300px !important; height:40px !important;}
body[yahoo] #borderTop {display:block !important; width:300px !important; height:5px !important;}
body[yahoo] #borderBottom {display:block !important; width:300px !important; height:5px !important;}
}
</style>...
<body yahoo="fix">...
Hope this helps!
Thanks,
Keiron
We have updated our online simulation to reflect this fix, sorry for any confusion! I double checked and confirmed that this fix works correctly on both the iPhone and Android devices.
Cheers,
Miki
If you haven't signed up yet, give our FREE online Email Test a try. Just drop in your code and we will instantly simulate your email in the most popular email clients!
Get connected with Email on Acid for up-to-date news and information on the subject of email design, development, and testing!
