Hello Vincent,

All Outlook on Windows from 2007 to 2019 use Word as a rendering engine for HTML and CSS. And Word is known for adding all sorts of styles and tags, especially in cases when you're coding something it doesn't support.

In your case, you're wrapping an <h4> by an <a>. This is perfectly valid since HTML5, but it is not supported by "the Outlooks". So one thing I'd recommend is to actually have your link at the lowest possible level. So your code should look like this:

<td style="border-collapse:collapse;border-radius:5px;line-height:16px;padding:20px"
align="center" bgcolor="#5950FF">
<h4 style="font-weight:normal;color:#ffffff;font-family:&#39;open sans&#39;,Arial,&#39;Helvetica Neue&#39;,Helvetica,sans-serif;font-style:inherit;text-transform:inherit;letter-spacing:0px;font-size:16px;line-height:16px;margin:0px"
align="left"><a
style="display:inline-block;text-decoration:none;text-align:center;color:#ffffff"
href="http://retailer.spently.com/ShopifyAna/Link/1234?store=steve-spently&amp;type=OI&amp;url=https://checkout.shopify.com/4637950025/orders/123456abcd/authenticate?key=abcdefg"
target="_blank" style="color:#ffffff;">View Your Order</a></h4>
</td>

Hello,

I don't know much about earthlink. But from my experience, a blank email in general means that something in your code is not supported or misinterpreted by the webmail. It could be something like comments (in HTML or CSS) and I'd advise to remove them all (except Outlook conditional comments). Feel free to share your code if you need any further help.

Hello,

Upon inspection, I don't this it has to do with direction or dir. But it looks like the align="right" declaration on the <td> containing the bottom image is ignored. Adding text-align:right; seems to work.

<td class="break" style="vertical-align: top; direction: ltr; text-align: right;" align="right">
 <img src="https://assets.prod.ibn.host/Loreal/NYX/Beetroot_bottom.png" alt="" style="display: block; border: 0; width:200px;" class="centercenter" height="179">
</td>

I'm not sure when Firefox dropped support for align on <td>, but it doesn't seem too new based on this thread and this compatibility table.

Hello,

Your font ProximaNova_Light is declared for a font-weight:300. This means it should only apply if you have a font-weight:300, so first I would add a font-weight definition in your inline style as well.

<p style="font-size: 40px;font-family:'ProximaNova_Light', Arial, sans-serif; color: #242839; text-align: center; margin: 0px; font-weight:300;" class="mobile-headline">Your Featured Title Is Here!</p>

I also notice that the woff2 version of the font on your client's server is not available (http://thedisneymovieclub.com/vemail7/dn/font/proximanovalight/ProximaNova-Light.woff2). So maybe that's why it wouldn't work.

Great find, Wilbert ! Out of curiosity, how did you come to find this? Did you use any special tools to view the source of the message within the Outlook app ?

Hi,

Doubling the width of your actual email for your design has been a good practice for supporting retina images (and making sure everything is nice and sharp on such screens). But I've long believed that this was wrong. And turns out this is very well summarized in the following article by designer Kurt Varner : Design at 1x, it's a fact.

So nowadays, I definitely prefer working on designs at scale (that is, a 640px PSD file for a 640px wide email). We just need to make sure that all the visuels are embedded in the PSD as dynamic objects (and not as flat layers).

Hello,

I'd recommend using the screen reader you have at hand. So if you are on macOS or iOS, use VoiceOver. If you are on Windows 10, use Narrator. If you're on Android, use Talkback. They all need a bit of getting used to, but you can usually get away with knowing just a few shortcuts.

For example, my go to shortcuts in VoiceOver are:

• CMD + F5 : Activate/disactivate VoiceOver.
• CTRL + ALT + SHIFT + DOWN : Enter content.
• CTRL + ALT + LEFT or RIGHT : Navigate content.

With just these three shortcuts, I can get away to navigate and test an email with VoiceOver on macOS.

Bonjour Jules,

As far as I know, there might not be much difference between a 32bits and a 64bits version of the same Outlook. By the look of your screenshots, it seems that the difference in font is what's causing the text to wrap in a new line. The table containing the text sizes itself based on the text, and not its parent. Thus the difference you see between the two. Adding a width:100%; to the containing table should do the trick.

<table bgcolor="#FFFFFF" style="width:100%; background-color: #FFFFFF; border-bottom: 3px solid #959595" align="center" valign="middle">

Feel free to post your entire code if this doesn't solve it.