eladnava/mailgen

Outlook

throrin19 opened this issue ยท 9 comments

Hi,

I've test your library into oulook and the result is not great :(. The icon size in the header is incorrect and the button in the body is not visible as you can see in the bellow screen :

capture

Hi @throrin19,
Thanks for the report!

Is this happening in the default Mailgen theme? What version of Outlook?

It's an extension of the default theme with only the header background and text color changed.

For outlook, it's the version 2016

@throrin19 Could you try sending with other themes? E.g. salted or cerberus?

I've test with the original theme and the neopolitan theme and this is the result :

capture 1
capture 2

In the default theme, the button is not visible and, in the neopolitan theme, Outlook seems to add text decoration in the <a> tag

OK I found problems.

For the logo : Outlook >=2013 only support images with the width setted directly like that :

<-- This image will be resized to 300px in Outlook -->
<img src="https://www.emailonacid.com/images/photo.jpg" width="300" style="width:300px;" />

<-- This image will NOT be resized in Outlook -->
<img src="https://www.emailonacid.com/images/photo.jpg" style="width:300px;" />

For the button, it's more complexe. I remove the mso-hide in the .button section bug outlook don't show it correctly. So, after many research and tests, we should add specific tag for outloock like this gist :

https://gist.github.com/elidickinson/9424116#file-html_email_buttons_1-html

I think you should update your templates to work correctly in MS outlook desktop app

Ooh, that doesn't look pretty.

We could use a service like Litmus to fix this (previewing the themes in the most popular e-mail clients without having to install them). They have a 3-day free trial which could suffice.

If you have the time, would you like to submit a PR to add compatibility for Outlook?

I make that ASAP

@throrin19 Please comment if you still intend to work on this, otherwise, this is up for grabs. ๐Ÿ‘

I added a comment to https://gist.github.com/elidickinson/9424116 that centers the button and changed the default template to support the button method. I'll work on the logo in a separate merge request.