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.

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 ?