Designing HTML Emails for Outlook 2003 and Outlook Express


We’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:

Outlook 2003/IE5
Outlook 2003/IE6
Outlook 2003/IE7
Outlook 2003/IE8
Outlook 2003/IE9
Outlook Express/IE5
Outlook Express/IE6
Outlook Express/IE7
Outlook Express/IE8
Outlook Express/IE9

Currently, we provide screen captures for Outlook 2003/IE8 and Outlook Express/IE8. However, from my recent research, Outlook 2003 was released on October 21, 2003 with MS Office 2003.  IE6 was released on August 27, 2001 and IE7 was released on October 18, 2006. That said, we have discussed the possibility of adding an Outlook2003/IE6 configuration because that was the most popular browser during the time of its release.  Interestingly, Outlook Express was released back in 1999 at which time IE5 would have been the most popular version of IE.

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.

Author:

25 thoughts on “Designing HTML Emails for Outlook 2003 and Outlook Express”

  1. Thank you *so much* for this blog.

    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

  2. Porter,

    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.

  3. Michelle, thanks for such a quick reply.

    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

  4. 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 🙁

  5. Thanks for taking the time to discuss this, I feel strongly about it and love learning more on this topic. If possible, as you gain expertise, would you mind updating your blog with more information? It is extremely helpful for me.

  6. Good day I am so thrilled I found your website, I really found you by mistake, while I was browsing
    on Bing for something else, Anyways I am here now and would
    just like to say many thanks for a remarkable post and a all round interesting blog (I also love the theme/design), I
    don’t have time to browse it all at the moment but I have saved it and also added in your RSS feeds, so when I have time I will be back to read much more, Please do keep up the awesome work.

  7. Hi! I’m at work surfing around your blog from my new iphone 3gs! Just wanted to say I love reading your blog and look forward to all your posts! Carry on the great work!

  8. Hmm is anyone else experiencing problems with the images on
    this blog loading? I’m trying to determine if its a problem on my end or if it’s the blog.

    Any suggestions would be greatly appreciated.

  9. I didn’t quite understand this when I first feature it.
    Merely when I went through it a second time, it all became
    evident. Thanks for the brainstorm. Absolutely thing to remember just about.

  10. Nice stuff for my research writing.Wonderful post! This is very useful to many readers like me. Being a student, I am requiring myself to read articles more often and your writing just caught my interest. Thank you so much!

  11. Having read this I believed it was really informative.

    I appreciate you finding the time and effort to put this informative article together.
    I once again find myself spending a lot of time both reading and leaving comments.
    But so what, it was still worthwhile!

  12. I do trust all the ideas you’ve offered to your post.
    They are very convincing and can definitely work. Nonetheless, the posts are very brief for newbies.
    May you please lengthen them a bit from subsequent time? Thanks for
    the post.

  13. Hello it’s me, I am also visiting this website regularly, this site
    is in fact nice and the users are genuinely sharing good thoughts.

  14. Just want to say your article is as astonishing.
    The clearness in your submit is just nice and that i could
    think you are an expert in this subject. Fine along with
    your permission let me to clutch your RSS feed to keep up to date with coming near near post.
    Thanks one million and please carry on the rewarding work.

  15. What’s up everybody, here every person is sharing these kinds of
    experience, therefore it’s good to read this
    web site, and I used to pay a visit this weblog every day.

  16. Greetings! Very helpful advice within this post! It’s the
    little changes that make the largest changes. Many thanks for sharing!

  17. It’s a shame you don’t have a donate button! I’d definitely
    donate to this superb blog! I suppose for now i’ll settle for bookmarking and adding
    your RSS feed to my Google account. I look forward to fresh updates and will talk about this
    site with my Facebook group. Chat soon!

  18. whoah this weblog is wonderful i like reading your posts.
    Stay up the great work! You already know, many people are hunting round for
    this information, you can help them greatly.

  19. Everything is very open with a precise clarification of the issues.
    It was truly informative. Your site is useful. Thank you for sharing!

Leave a Reply

Your email address will not be published. Required fields are marked *

Free Email Goodies