Hi Steven ! Nice to see you've been experimenting with my technique. I gave a quick look at your code, and I think the problem comes from this:

<a href="http://example.com" style="display:block;text-decoration:none;">
    <p id="COPY-normal">
        LEFT (scale)
    </p>
</a>

While wrapping any content in an <a> element is perfectly valid in HTML5, some email clients don't support this. Especially Outlook and it's word rendering engine. So I would strongly advise against this, and use a single <a> at the text level only. Like this:

<p id="COPY-normal">
    <a href="http://example.com" style="display:block;text-decoration:none;">
        LEFT (scale)
    </a>
</p>

Let me know if you have any other question.

Hi Jun,

This has changed indeed in the past two months. A new way to target Outlook.com is to use an attribute selector with a class prefixed by x_. Example :

[class="x_fallback"] {
   color: #004991;
   font-size: 100px;
}

The reason this works is that now Outlook.com supports attribute selectors and keep their values intact. But it will still prefix class names by x_ (and it's the only webmail to use this exact prefix). So <td class="fallback"> will become <td class="x_fallback"> only in Outlook.com and thus the styles will match.

Hello! I wrote an article about Outlook.com's dark mode earlier this year.

A way you can override Outlook.com dark styles is to add a class to the element you want and then use !important declarations.

<table bgcolor="#ffffff" style="width:70%;" align="center" border="0" cellspacing="0" cellpadding="0" class="bgcolor-white"> <tbody> <tr> <td bgcolor="#ffffff" class="bgcolor-white">

<style>
 .bgcolor-white { background:white !important; }
</style>

However, I'd really advise not to do this. If someone uses Outlook.com's dark mode, it's because they prefer it that way. They might know about the "Turn the lights on" button because it's presented by Outlook's interface when you activate dark mode the first time.

Hi there ! Yahoo doesn't support !important with a space before for certain properties (see here). Remove the spaces before all your !important declarations and you should be good.

Hello,

On Outlook (the desktop software on Windows from 2007 to 2019), width="100%" on an image doesn't behave as it does in regular CSS. So the image won't be 100% of its parent size. But it will be 100% of the native file width instead. So if your image is 1920px wide, it will be 1920px wide. You can prevent this by applying your 100% in an inline style instead of the width attribute, and define a fixed width for Outlook instead. Like so :

<img alt="Product Name" src="Image.jpg" style="border:0; outline:0; width:100%;" width="600">

Hi Veronica,

This is a very interesting challenge. I tried to have a go at it based on my fake background technique.

Here's what your first example (without text) could look like:

<div style="max-height:0">
    <img src="https://i.imgur.com/meQEqmO.jpg" width="180" alt="" style="display:block; max-width:100%;" />
</div>
<table border="0" cellpadding="0" cellspacing="0" role="presentation" style="width:100%; opacity:0.99;">
    <tr>
        <td style="padding:10px;">
            <table border="0" cellpadding="0" cellspacing="0" role="presentation" style="width:100%;">
                <tr>
                    <td style="border:1px solid #fff; padding-top:100%;"></td>
                </tr>
            </table>
        </td>
    </tr>
</table>

Now a bit of explanations:

1. The <div style="max-height:0"> allow to create fake absolute positioning. This means it will behave as if the image was out of the flow of the code, just like an absolute positioning in CSS.
2. The opacity:0.99; on the table allows to trigger a new stacking context so that the table content and its border appears above the previous image. Usually, on the web, we'd achieve this by using something like position:relative; z-index:1;. But because position and z-index are not well supported in email clients, opacity allows to achieve the same thing with better support.
3. The <td style="padding:10px;"> creates the spacing between the image and the border inside.
4. The padding-top:100%; creates a "magic padding" that ensures the ratio aspect. So this will work well if your images are square. If you have other image formats, you'll need to add a different padding value accordingly.

This seems to work well in most email clients except Outlook and Yahoo. I don't have much time to pursue this right now, but I'm sure both those issues can be worked on with a few more research.

Regarding the example with text, it can be achieved the same way but with one more row containing the text. You can view two examples in this Builder project I made here.

Hello Josh,

If you're interested, the website Email Mentor can pair you with a mentee you can then reach by email and exchange with.

If you'd prefer a more interactive experience with screenshare, this is certainly something I'd be interested to do. I've been giving email trainings to small groups of developers and designers for the past 3 years. I usually go from revisiting the basics (which hacks are necessary and why) to different methods to adapt emails from mobile to desktop (responsive, fluid hybrid, mobile first), to more advanced things like interactive emails, using Gulp to generate templates, etc. If this is something you'd be interested in, you can hit me on Twitter (@HTeuMeuLeu) or by email (remi at hteumeuleu dot fr).

Cheers !

As of now, Outlook.com doesn't support media queries. So you'll have to chose if you prefer to have your email show as a desktop version (even on mobile or smaller resolutions) or as a mobile version (even on desktop or larger resolutions).

You can use [owa] .foo { } selectors to target only Outlook.com. (The [owa] part gets removed only on Outlook.com and thus applies there, for mobile and desktop.)

However, a few emailgeeks have noticed that Microsoft seems to be testing media queries support in Outlook.com right now. (But it might be some kind of A/B testing, as not every user seems to have it.) So hopefully things will get better in the upcoming months.