SG
4
Responsive Email Breaks in Outlook 07, 10, 13
I have an email design 650px wide, and two columns (325 px wide).
Email looks good in most clients, but in Outlook 2007, 2010 and 2013, Litmus shows the design broken.
It's like the columns don't fit anymore in the 650 container, so now they are displayed on separate rows, one under the other.
It is like some padding/margin is added somewhere.
Also, the font defaults to Times New Roman although I selected Verdana, Arial, Sand Serif.
All other clients (including Outlook 2000, 2002, 2003, 2011 and 2016) displays everything correctly.
Is there a gotcha for the Outlook versions above alone?
Any helpt would be highly appreciated. Thanks!
Also, to answer your question about the font changing, you need to apply the following inline style to ALL <td> cells containing text. Outlook doesn't believe in inheriting styles from parents. You can change the font family, size, line-height, color, etc to your needing.
Different versions of Outlook use different rendering engines:
Internet Explorer and WebKit have much better support for HTML and CSS, whereas the Word-powered Outlook versions have a ton of known issues/quirks. One of those issues is that Outlook will fall back to Times New Roman. This blog post has more information.
Outlook also hates math, and mysteriously adds a couple pixels of extra space to multi-column designs. In Outlook's mind, 325+325=655 or so. My recommendation would be to reduce the size of each column by a couple pixels—there is more information and some detailed fix recommendations in this post, too. If you post your code here, the Community can also take a look and help make suggestions to fix.
Actually seems like my main problem is that I am trying to stack images side by side, to have have stack under each other on a mobile view.
And it seems that this is more complicated, I looked at all the articles you linked, and downloaded the pdf guide from Campaign Monitor but they don't seem to have a solution for my case (images inside tables side by side). Still looking for a solution to that.
I believe what you're looking to do requires the Ghost Hack: https://github.com/FunWithEmail/HTML-Email-Hacks#ghost-column-to-emulate-align-in-outlook
In most versions of Outlook, tables aligned left and right cannot touch each other. They need roughly 5px between them, I prefer to leave 8-10px when I can. If you want the tables touching, you need nested tables using the Ghost Hack, which uses MSO conditionals to add in some extra markup that turns two tables into one.
If you want two images next to each other to be responsive in mobile, your markup should look something like this:
Style needed in header:
Markup:
Here's an example. It's an excerpt from my email framework that I've been building. Just remember that you'll need to add in your Yahoo specific hacks (if needed). I removed the method we use -- which is body[yahoo] .style {} -- otherwise the codepen wouldn't work responsively.
http://codepen.io/anon/pen/eNmbYV
Hopefully this helps!
Thanks Jared,
I didn't know about those hacks, great answer.
However, two observations:
1) The 4 column layout still breaks on Outlook 2007
2) The template is completely broken in Gmail. And this is actually my problem now, I made my email look decent in Outlook, but Gmail is another story, I have the problem others are experiencing with columns widths in Gmail Android being unequal. Unbelievable... it looks like for now my email design skills are not up to scratch
In my tests, my 4-col layout doesn't break anywhere, although I guess that depends on your definition of "break" because there's an intentional gap between cells 2 and 3.
Are you having troubles with Gmail Web or Gmail Android App? They're both two very different monsters.
If you're having troubles with the Gmail app, then you may need the Gmail App Fix hack:
For this, it needs to go right before your closing </body> tag (I usually leave a blank line above the </body> tag though), and the background-color and color styles in the inline <div> should match what your email's background color is, because it will show up in clients that don't support display:none;. Otherwise you end up with a big white bar at the bottom in some clients.
As for your column issues, I know this sounds obvious, but triple check your math to make sure that all tables and <td>s all add up to the proper dimensions. Check for padding because that can unexpectedly bump out some TDs by just a pixel or two without you noticing and break the template in certain clients.