17 Must-Know Tricks for Outlook 2007, 2010 and 2013

19

We’ve compiled 4 in-depth posts on Outlook, including this blog on 17 Must-Know Tricks for Outlook 2007, 2010 and 2013, into an extensive series surrounding this client and its vexing quirks.

Get the Whole Series in One Click…

Designing for Outlook is like chasing the ever elusive White Whale. We spend hours pursuing it, tracking down bugs and glitches, trying to achieve pixel perfection in a distinctly imperfect environment. We’ve spent hours testing to ensure we’ve worked out all the Outlook kinks and we’re sharing our years of experience coding for this pesky email client in one, exhaustive guide below.

Click the ‘Download Your Guide’ button below to gain access to the full series on Outlook 2007, 2010 & 2013 and their infamous word rendering engines!

 

Outlook Isn’t Going Anywhere…

We broke up this topic into 4 in-depth chapters so you can achieve pixel perfection in this irksome client.

This guide consists of the following Outlook tutorials:

Be sure and comment below if you have any tips or tricks to make coding and designing emails for Outlook a wee bit less painful.

Author: Kyle Lapaglia

Author: Kyle Lapaglia

19 thoughts on “17 Must-Know Tricks for Outlook 2007, 2010 and 2013”

  1. Thanks, however the wrap solution as described in paragraph 2 also breaks small words which would have comfortably fitted within the next line. Example: the workaround now results in “Hey you th|ere” instead of “Hey you |there”.

  2. For #17, that only applies to Outlook 2007+. I can see animated Gifs in Outlook 00/03.

    And #12, VML is only required for applying a background image to a table Cell. I have no problems adding a repeating background image to the body/100% width containing table without VML.

  3. Thanks for the article! I’m having an issue with a responsive email banner that is linked when viewing in Outlook for PC. Using a media query, I swap out the main banner for mobile but when I do, both banners display (mobile & standard) . Furthermore, the link no longer works. This seems to work everywhere else except Outlook on PC. If anyone has any ideas, please let me know!

  4. Sam,
    Thanks for letting us know it’s supported in those browsers! I’ll revise accordingly.

  5. Further to my comment. I realised what had happened.

    In one of my CSS files, for some reason I had this:

    td {
    border: 1px solid #575956 !important;
    padding: 10px;
    }

    Now, I had the inline style “border: 0px !important” for my td cells.

    Generally from experience I made the assumption that inline styles take precedences over any CSS styles. Yahoo, GMail and all other non-Microsoft email clients worked fine EXCEPT Outlook!

    For the sake of your sanity, please be careful how you define styling for table cells!!!

  6. 11. Outlook sets TDs at a minimum of 2 pixels high.

    How then might you recommend getting a 1px high horizontal rule to be 1 px tall instead of 2px tall.

    I can get it 1px tall in everything I test except Outlook 2007 and 2010. 2013 looks good.

  7. As a point to add to…

    13. Outlook converts some divs to paragraphs.
    Outlook often converts your DIVS to paragraphs. To date, we have not been able to detect a rhyme or reason for why it converts DIVs when it does, if you know, please feel free to share it with us below.

    If you take the email in outlook, copy it to Word and save in word as an html file you can see all the extra elements outlook is trying to add with the word engine.

    When you do this word adds tags to the end of divs. When a browser sees those tags it acts like a paragraph tag. I believe the reason its adding these is because since word doesn’t have div tags, it needs some kind of an office tag to use to translate the divs so it tries the office version of paragraph tags.

    I’m not really sure why they decided to use o:p tags, but that’s why you’re getting the behaviour.

  8. just had an hour of trying to figure out why there was some white space around and image inside a td setup, and the answer was that there was a height set on the td, this will screw up and bg colour that you have set on the table.

    just a quick tip to save hours of nightmares! 🙂

  9. I found that a VML button custom positing inside of a VML background does not work well for PC Outlook 2007, 2010 & 2013, so you must do mso conditionals to enable the VML button on versions earlier than 2007 while anything 2007 and later will only use table-based buttons.

  10. I subscribed and confirmed my email address, but I was only redirected back to your website. How do I get the guide?

  11. Hi Marc,

    I apologize for any confusion in getting access to your download. If you email support[at]emailonacid.com we can get you that guide in a jiffy!

  12. great info
    I want to ask a question that MS office outlook doesn’t support mediaquery and viewport, so do u know any way of making the mails responsive as per screen resolution.

  13. Hi All,
    I am using outlook 2007, recently I have received a mail from another person it is seems to be blank and I report the same to them. But when I try to view those mail through webmail I can view the content in it.

    I’m using pop.gmail.com as my server.

    This kind of mails started to come on by one at last almost all the files are like same kind.
    Once I tried to look those in safe mode of outlook it is okay to view. But not good in normal mode.

    In normal mode when I clicked any of those mails it started to close the outlook itself.

    Anyone can help with this.

    I have tried to re-install and also I have removed the profile and done the same. I have downloaded all the mails again, still the same result.

Comments are closed.