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 Klann
July 26, 2011 A CSS Template for Developing HTML Emails in Mobile DevicesWith the recent increase in mobile email open rates, it makes perfect sense that you'd want to design your email with each of the most popular devices in mind. In a recent article: Media Queries in HTML Emails, we explore which devices support media queries. To take it a step further, here's your play by play approach to developing your email for the iPhone, iPad, and Android devices. First we need to set up your media queries to detect the user agent:<style type="text/css">
@media only screen and (max-device-width: 480px) {
/* Here you can include rules for the Android and iPhone
native email clients.
Device viewport dimensions are as follows:
Iphone: 320px X 480px - portrait, 480px X 320px - landscape
Android: 350px X 480px - portrait, 480px X 350px - landscape
(These are average dimensions, the Android OS runs on several different devices)
*/
}
@media only screen and (min-device-width: 768px) and (max-device-width: 1024px){
/* Here you can include rules for the iPad native email client.
Device viewport dimensions: 768px x 1024px - portrait, 1024px x 768px - landscape
*/
}
</style>
Important: I have included some notes in this snippet but be sure to strip out all of the CSS comments to avoid getting blocked by SPAM filters. What happens next depends on your layout.As a general rule, it's better to add "bells and whistles" to your media queries which optimize your layout in mobile devices. In other words, resize some images, text, and maybe even throw in a few background images for good measure. However, if you want to get really crazy, there is one more option: Let's say you have a three column layout and you want it to appear as two columns in the iPad and one column in the Android & iPhone. To do this, you could show and hide container DIVs depending on the device. I tested this out and Lotus Notes 6.5 and 7 were the only clients that do not support the "display" property, instead they display all DIVs as "display:block" by default. However, if you feel that your open rates in mobile devices outweigh the risk of leaving old versions of Lotus Notes in the dust, here is a working example for you: <style type="text/css">
@media only screen and (max-device-width: 480px) {
body[yahoo] #smallScreen {display:block !important}
body[yahoo] #desktop {display:none !important}
}
@media only screen and (min-device-width: 768px) and (max-device-width: 1024px) {
body[yahoo] #largeScreen {display:block !important}
body[yahoo] #desktop {display:none !important}
}
</style>
</head>
<body yahoo="fix">
<div id="smallScreen" style="display:none; color:#FFF; background:#000;">
This is a Small Mobile Client
</div>
<div id="largeScreen" style="display:none; color:#0F3; background:#FFC;">
This is a Large Mobile Client
</div>
<div id="desktop" style="display:block; color:#00F; background:#3F3;">
This is a Standard Desktop Client
</div>
</body>
There are a few downsides to this approach. First, you might end up having to duplicate some content here and there. Secondly, even though you are hiding two DIVs in this example, the email client will still have to load up all of your HTML and assets. So you might consider reusing all of your images in each instance to control the overall file size of your email. To be more specific, let's say you are using an image at full size for desktop clients, just resize that same image for mobile devices using CSS within your media query. A big thanks to Jeff Doan for bringing this loading issue to our attention on Twitter! Update October 14, 2011 As you may know, Yahoo! Mail ignores the media query conditinal statement and reads your styles as if they are outside of the query. So for this example, I am using attribute selectors in each media query declaration. A big thanks to Campaign Monitor for posting this fix a few months back! Here is our follow-up article which further explains the Yahoo! strategy I used above. As a side note: the Android device does NOT support class declarations in embedded CSS outside of the media query. Keep that in mind as you construct the rest of your embedded CSS and use IDs or type selectors whenever possible. Here's more on that topic. |
|
Comments
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!
