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 KlannSeptember 19, 2011 |
Designing HTML Emails for Outlook 2003 and Outlook ExpressWe've had a few members ask us about Outlook 2003 recently so we decided to dive deeper into the topic of rendering engines, particularly with respect to Outlook 2003 and Outlook Express. As you probably know, both of these older versions of MS Outlook used the Internet Explorer(IE) rendering engine for displaying HTML emails. The question is: What version of IE do they use? After numerous installs and uninstalls, we concluded that when Outlook 2003 is installed for the first time, it uses the version of IE that is installed on that particular OS as it's rendering engine. From there, if IE6 is upgraded to IE7, Outlook will still use the original version of IE (in this case IE6). This means that there are ten possible variations effecting the way an email might render in these two email clients:
We'd like to hear your thoughts on this subject! Let us know which configurations you would like us to add next. Feel free to post a comment (below) or speak your mind on Twitter: @emailonacid. |
||
Comments
Thanks for sharing this. You might want to check out this article: Media Queries in HTML Emails.
Without seeing your media query conditional statements it is difficult to help you diagnose the problem.
From our research, none of the Gmail applications (web based and mobile) support the style block and therefore they do not support media queries. But maybe you have found something to the contrary in your research? Feel free to share your code examples with us via the blog article I linked above or our forum.
Sorry, you can actually ignore that I mention media queries. The major point at the moment is the stripping of <style> tags.
You're right, the Gmail applications strip <style> blocks. But if you receive an @gmail.com address on the iPhone or Android *native* mail clients, they do not get stripped (using the Gmail app or Gmail in the mobile browser will strip them).
So, for example
<style>
body {background: red !important;}
table {background: red !important;}
tr {background: red !important;}
td {background: red !important;}
div {background: red !important;}
p {background: red !important;}
</style>
- If I receive that email on iPhone Mail and a Gmail account, I see red backgrounds.
- If I receive that email on iPhone Mail and an Exchange email account, I see red backgrounds.
- If I receive that email on Android Email and a Gmail account, I see red backgrounds.
- If I receive that email on Android Email and an Exchange email account, I do *not* see red backgrounds.
(If I open any Gmail account in the browser, or in the Gmail app for Android, I also do not see red, but I'm aware of that use case.)
Does that clarify?
Porter
Ok, I think I understand. It sounds like you have set up both your Gmail account and your Exchange account using the native Android email client. Since it's the same email client, you should not be seeing any discrepancies from one account to the next.
You might be running into the same glitches we noticed when testing media queries on the Android device. It seemed like one second they would work, and the next second they wouldn't, even on emails that we had already tested. I have never seen this happen with the style block and unfortunately I don't have an Exchange email account to test that for you.
It doesn't look like you are using any class declarations in your example above but it might also be good to know that the Android does not support them: The Android Mail App and CSS “Class” Declarations.
Sorry that I can't be of more help here :(
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!
I've got a question about MS Exchange, actually. We are sending HTML emails with an embedded <style> tag in them as tests to internal company email accounts, which use MS Exchange 2010 (I believe it is 2010).
When we receive the email on an iPhone, the <style> tag is intact (and media queries work).
But when receiving the email an the Android Email app, the styles inside the <style> tag are ignored completely, all of them.
Making it more strange is that if we send the test email to a gmail.com account, and check it on the Android Email app, the <style> tag is intact (and media queries work).
Palm Pre (for what it's worth) behaves like Android.
So, I see this:
iPhone Mail + @gmail.com: <style> works
iPhone Mail + Exchange: <style> works
Android Email + @gmail.com: <style> works
Android Email + Exchange: <style> does NOT work
Palm Pre email + @gmail.com: <style> worksPalm Pre email + Exchange: <style> does NOT work
Have you seen this, too?
Any thoughts on why Exchange + iPhone work fine, but fails elsewhere?
Porter