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 mklann
October 19, 2011 Repurpose your Images for Mobile EmailAs open rates for mobile devices continue to skyrocket, we've seen an increased level of interest from people who are developing emails that render flawlessly on desktop and mobile email clients. Replacing and/or re-using graphics is a great place to start for a few different reasons: iPhone
Android Code Examples
Using media queries, you can control the way various page elements render in the iPhone and Android. Here are a few examples for handling images: 1.) Re-size and re-use the same image (better for overall file size): <style type="text/css">
2.) Completely replace your image(s): <style type="text/css">
We also incorporated this Yahoo fix in both examples.
|
|
Comments
You also can't use the technique to selectively show or hide cells, unfortunately.
Technique 2 doesn't appear to be a great choice, unless you're emailing people that don't use Outlook.
In response to your comments:
1.) In my testing, I learned that Gmail converts the "height" property to "min-height" which has an adverse affect cross browser. That's why I used the "width" property only.
2.) Regarding the inline elements, I just tested the following:
<div class="mobile_only" style="width:0px; overflow:hidden;float:left;display:none">
Image for mobile - width="300px":
http://www.emailonacid.com/images/EOA_logo.gif
< p >paragraph< /p >
<div>div</div>
<table><tr><td>table 1</td></tr></table>
<table style="display:none"><tr><td>table 2</td></tr></table>
</div>
(was forced to add spaces in order to get p tags to show up in these comments)
The only thing that rendered in Outlook 2007 was table 1. So it looks like if you want to nest tables in this option, you must include an inline style with display:none and overwrite that in your media query as well. Not sure about nested elements within that table so this is one I would "handle with care."
3.) You are correct, adding an inline style of display:none to an image does not work in Outlook 07/10, the workaround is to place it in a hidden div as shown in my example for Option 2.
Since there are so many nuances when using this technique it's really important to test in all clients before sending the final email blast
You're right, adding the div completely hides the image in Outlook 2007, though the hidden text will still cause issues in Gmail.
I need to make a few more tests for hidden tables and cells, but initial testing isn't proving great.
At best we'll be able to hide certain content for mobile and show optimized images.
Its working great so far except for one issue, I cannot seem to make it work in Android 2.2 Gmail. It does work for Android 2.2 Native.
Any ideas?
Yeah unfortunately this fix only works for the native email clients on the Android and iPhone. Since desktop and mobile versions of Gmail do not support embedded styles, I don't know of any other way to detect the device via inline CSS.
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!
