versafluid: outlook 2013 issues (social icon spacing, buttons padding, links color)

[CodingPeak]

Hi all,

I'm very happy to finally find an open source mail template editor, good job guys!

To help a little to perfect the html and css you're using, I'm posting two screenshots of what the email template looked like in the editor vs. how it looks in my mail client.

In the editor:

In my mail client (Outlook 2013)

Some big differences are:

• Colored links
• Buttons
• Social icons have no padding left

I think not all styles are also present inline. Many mail clients only support inline css markup.

[bago]

versafluid templated did not received the same care of versafix-1 template with regard to compatibility.
This is not about "inlining" but about Outlook using Word as the rendering engine and not supporting (or worse, supporting with a different behaviour) some basic CSS properties.

If you want the best experience you should use the versafix-1 template: it is very flexible and you can get a very similar result.

We'll probably update the versafluid template to include more compatibility fixes, but this is not an easy task and versafluid is not included in the opensource distro, yet.

[CodingPeak]

Online in the editor:

In my mail client:

Notice the social icons have changed places. You cannot use floats in mail templates. Please keep in mind that only a small set of CSS rules are accepted in most mail clients. For an overview, look here: https://www.campaignmonitor.com/css/

[bago]

It is not true you can't use floats: you can use it as long as you know what you do and you put workarounds for every client. BTW there is no "float" css property for that icons (it uses float: none, that it measn no float). It uses ALIGN="right" beucase it is the only way to let Outlook 2007/2010 take hspace attribute into consideration.

If you have solutions to the issue you are reporting please provide a PR, but don't simply think that following some rule from that campaign monitor link will get you somewhere. Whenever you make a change you have to test thousands of mail clients.

I know Outlook 2013 has more spacing issues than Outlook 2007/2010 and I guess you screenshot is from Outlook 2013: am i right? That campaign monitor table put all of them into a single compatibility "review" but they don't work the same, unfortunately.

Also, please tell me if your tests are from the opensource version downloaded/built and installed on your PC or are from the online mosaico.io demo (they are not always in sync).

[CodingPeak]

I was using the online demo version.

[bago]

I reopened #19, the issue for which I last changed the way we write social icons in versafix-1.
I keep this issue open for the versafluid layout issues, but I can't work on this soon.