Outlook 2013 Destroys Layout

  • 0
  • 1
  • Question
  • Updated 5 years ago
  • Answered

I have tested my mailing in the following mail clients:

  • Gmail
  • Outlook.com

In each of the following browsers:

  • Chrome v35
  • Firefox v30
  • IE v11
  • Opera v20
  • Safari v5

All in Windows 7. Below is pretty representative of what I see across the board:

However, when I look at the mailer in Outlook 2013, I see this:

Extra space is being inserted between the title area and the body content. Header text is changed to black, loses center alignment and seems to have no left padding. red borders are not flush like the image above, but are adjusted a few pixels to the left or right out of alignment.

I'm sure that Outlook 2013 is not the only email client that doesn't render correctly, but it is a major one. Could someone please shed some light on what I, if anything, I can do to get Outlook to render correctly? Thank you.

Photo of Diesel Performance Parts

Diesel Performance Parts

  • 11 Posts
  • 1 Reply Like
  • frustrated

Posted 5 years ago

  • 0
  • 1
Photo of Marc Russell

Marc Russell

  • 64 Posts
  • 40 Reply Likes
Much to Ted's point as well, Outlook in general is terrible at following any type of web standard and just doesn't take kindly to CSS styling, inline or otherwise.

<div class="redblock bigtext" style="font-size: 20px;color: rgb(255, 255, 255) !important;font-family: Arial Black, Avant Garde, Arial, sans-serif !important;text-align: center !important;text-shadow: 2px 2px 0 rgba(0, 0, 0, 1)">Protip: Know Your Supply Tubes</div>

For example, your header bar has many things Outlook is ignoring. Try the simplified version below:

<div class="redblock bigtext"><p style="font-size: 20px; color: #ffffff; font-family: Arial, sans-serif; text-align: center;"><strong>Protip: Know Your Supply Tubes</strong></p></div>

Arial Black isn't really a consistent web font, so although a system most likely has it, Outlook isn't smart enough for that. I just came across a bug this week in Outlook 2010 that if text doesn't have <strong> on it as the very first wrapping element, it will not show up that way. So I fixed that in the example given as well.
Photo of Ted Hogan

Ted Hogan, Champion

  • 145 Posts
  • 83 Reply Likes
There is no question in my experience that MS products seem to want tags nested in a certain order or those tags may not all render correctly. Marc, I suspect the <strong> "bug" you stumbled across might actually be considered a "design feature" by the folks in Redmond. :)
Photo of Diesel Performance Parts

Diesel Performance Parts

  • 11 Posts
  • 1 Reply Like
Marc, thanks for taking a look at the code. I will work in your html into the header block and see what comes out. I'll post again once I see some test messages.

Sometimes I feel that my relationship with MS products is like Stockholm Syndrome. After reading Ted's link that explained that Outlook uses Word to render email, I was dumbstruck.