Email Development
Yahoo Mail Android App Limits Styles to Email Body
Email Development
Ever since Gmail started supporting media queries, there has been a resurgence of interest in responsive email design. If you’re using media queries in your design you should know that the Android version of Yahoo! Mail does not support the <style> tag in the head of an email.
Although the Android and iOS versions of the Yahoo! Mail app look similar, there is a key difference between them and that is the iOS version supports <style> in both the head as well as the body of the email whereas the Android version only supports <style> in the body.
Here’s a code snippet to test with:
<html>
<head>
<style>
.head-class{background-color:green;}
@media only screen and (max-width: 2046px) {
.head-mq{background-color:green;}
}
</style>
</head>
<body>
<style>
.body-class{background-color:green;}
@media only screen and (max-width: 2046px) {
.body-mq{background-color:green;}
}
</style>
<B>HEAD STYLES:</B><BR>
Class:<BR>
<div class="head-class" style="border:2px solid #444444;height:20px;width:100px"></div><BR>
Media Query:<BR>
<div class="head-mq" style="border:2px solid #444444;height:20px;width:100px"></div><BR>
<HR>
<B>BODY STYLES:</B><BR>
Class:<BR>
<div class="body-class" style="border:2px solid #444444;height:20px;width:100px"></div><BR>
Media Query:<BR>
<div class="body-mq" style="border:2px solid #444444;height:20px;width:100px"></div><BR>
</body>
</html>
This makes Yahoo! Mail’s Android version an outlier in email clients as all other email clients that support the <style> tag either support them in the head and body or just in the head (in the case of Gmail). See this table for details.
Just like Yahoo! Mail Webmail, both iOS and Android versions of the app do not support the max-device-width media query. So you’re limited to using max-width. This may come in useful when troubleshooting responsive email designs.
Should you put your embedded styles in both the head and body of your email to accommodate Yahoo! Mail’s Android app? If your style block is not large, it may not be a bad idea to also include them in the body to enable your email to be responsive in the Android client. However duplicating your style blocks increases the chance for error and the possibility of running into character limitations in certain email clients like Gmail. Therefor, it may be best to keep your responsive styles in the head and allow your design to render as the desktop version in the Android client.
Make sure your email renders nicely not just with Yahoo! Mail but with all the other major email clients as well. Get started for free with our 7 day trial of Email on Acid.
