-
CMD + F5: Activate/disactivate VoiceOver. CTRL + ALT + SHIFT + DOWN: Enter content.CTRL + ALT + LEFT or RIGHT: Navigate content.
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:
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.
Hello Thomas,
This is a feature of Apple Mail on iOS probably since iOS 10. But you're right in the way that this is not very documented. Apple Mail creates automatic links towards certain contents available on iTunes. So as you noticed, mostly singers or bands. Clicking on the link created opens a popup with previews of available content. Here's an example.
As far as I know, there is no proper way to prevent this. However, you can hide it and prevent the links to be clickable. Apple adds a x-apple-data-detectors="true" attribute on each created link. So you can add the following styles in the <head> of your email to hide this.
a[x-apple-data-detectors] { color:inherit; text-decoration: none; pointer-events: none; }
Hey there. I don't think I ever saw that. But you're in at a good timing as I just launched a thread to try to understand how Gmail clipping algorithm works. Could you share your code (here or on Github, or DM me on Twitter @HTeuMeuLeu if you prefer). That'll help a ton!