Ever since Gmail began supporting media queries, there was a resurgence of curiosity in responsive electronic mail design. In case you’re utilizing media queries in your design you must know that the Android model of Yahoo! Mail doesn’t assist the <model> tag within the head of an electronic mail.
Android and iOS Variations of the Yahoo! Mail app.
Though the Android and iOS variations of the Yahoo! Mail app look related, there’s a key distinction between them and that’s the iOS model helps <model> in each the top in addition to the physique of the e-mail whereas the Android model solely helps <model> within the physique.
Right here’s a code snippet to check with:
<html>
<head>
<model>
.head-class{background-color:inexperienced;}
@media solely display screen and (max-width: 2046px) {
.head-mq{background-color:inexperienced;}
}
</model>
</head><physique>
<model>
.body-class{background-color:inexperienced;}
@media solely display screen and (max-width: 2046px) {
.body-mq{background-color:inexperienced;}
}
</model>
<B>HEAD STYLES:</B><BR>
Class:<BR>
<div class="head-class" model="border:2px strong #444444;peak:20px;width:100px"></div><BR>
Media Question:<BR>
<div class="head-mq" model="border:2px strong #444444;peak:20px;width:100px"></div><BR>
<HR>
<B>BODY STYLES:</B><BR>
Class:<BR>
<div class="body-class" model="border:2px strong #444444;peak:20px;width:100px"></div><BR>
Media Question:<BR>
<div class="body-mq" model="border:2px strong #444444;peak:20px;width:100px"></div><BR>
</physique>
</html>Right here’s the leads to the 2 variations of the Yahoo! Mail app:
This makes Yahoo! Mail’s Android model an outlier in electronic mail shoppers as all different electronic mail shoppers that assist the <model> tag both assist them within the head and physique or simply within the head (within the case of Gmail). See this desk for particulars.
Lack of max-device-width assist.
Identical to Yahoo! Mail Webmail, each iOS and Android variations of the app don’t assist the max-device-width media question. So that you’re restricted to utilizing max-width. This will are available helpful when troubleshooting responsive electronic mail designs.
Ought to You Duplicate Your Types?
Must you put your embedded types in each the top and physique of your electronic mail to accommodate Yahoo! Mail’s Android app? In case your model block shouldn’t be massive, it will not be a foul thought to additionally embrace them within the physique to allow your electronic mail to be responsive within the Android consumer. Nevertheless duplicating your model blocks will increase the prospect for error and the potential for working into character limitations in sure electronic mail shoppers like Gmail. Therefor, it might be greatest to maintain your responsive types within the head and permit your design to render because the desktop model within the Android consumer.
Make sure that your electronic mail renders properly not simply with Yahoo! Mail however with all the opposite main electronic mail shoppers as properly. Get began without cost with our 7 day trial of E mail on Acid.
