<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
</head>
<body text="#000000" bgcolor="#FFFFFF">
Folks,<br>
<br>
I've been having a dig into this topic this afternoon.<br>
<br>
Basically, the 2 major problem clients are:<br>
1. Outlook 2007 and later,<br>
2. Gmail.<br>
<br>
Outlook 2007 and later use a rendering engine designed for producing
paper documents (i.e. Word), and not a rendering engine designed for
displaying web pages. Whoever thought for 1 instant that that would
be a good idea clearly deserves taking out the back and shooting.
Slowly. So they can watch the bullet and have plenty of time to
contemplate the reason for their impending doom.<br>
<br>
Apparently if you give many versions of Outlook an HTML page which
is more than a certain height, it actually inserts page breaks as
well!<br>
Emails with page breaks. Yay.<br>
It also doesn't support most of the useful things I want to do, such
as background images, data URIs, border radii or right-aligning your
organisation's logo. And "teh interwebz" agree that making
nice-looking emails for Outlook is largely impossible, because the
rendering engine is so utterly awful. Google something like "design
html email for Outlook" and you'll see what I mean.<br>
<br>
Gmail doesn't display the email's HTML in an iframe to give it any
sense of isolation, they just insert the email's HTML straight into
the page. Because that is really dangerous, they strip out almost
every bit of formatting first so it can't break people's browsers.<br>
<br>
The only image for which I currently need a data URI is the mottled
grey background. And as that is a background image anyway, Outlook
is *never* going to render it at all, whatever method I use to
insert it into the message.<br>
<br>
Having played with all of this for an afternoon, I strongly suspect
the best outcome for Outlook (at least) is to just not attempt to
put any nice grey header or footer on the message at all. Every
single thing I have tried looks totally awful.<br>
<br>
I haven't tried Gmail (or Office365) yet. If anyone has experience
of either of those with ZendTo, please let me know.<br>
If you already have a working account on either/both of those,
please try sending yourself a drop-off and send me a screenshot of
what the resulting email looks like.<br>
<br>
Fortunately it is apparently fairly easy to detect that you're being
rendered in Outlook, so I can just hack out the header and footer
entirely.<br>
<br>
Gmail and Office365 will await more input...<br>
<br>
Thanks,<br>
Jules.<br>
<br>
<br>
<div class="moz-cite-prefix">On 10/05/2017 12:55, Everton Bruno
Bernardi wrote:<br>
</div>
<blockquote type="cite"
cite="mid:CAD1KJM5vXjqQMJVjX5eJ1=nOKP0b+sDy+UaA-M=1QbBSTbydxA@mail.gmail.com">
<div dir="ltr">
<div class="gmail_default"
style="font-family:tahoma,sans-serif;font-size:small;color:#20124d">Hi
Jules and Ricky.</div>
<div class="gmail_default"
style="font-family:tahoma,sans-serif;font-size:small;color:#20124d"><br>
</div>
<div class="gmail_default"
style="font-family:tahoma,sans-serif;font-size:small;color:#20124d">I've
tested what Ricky mentioned and it worked (I can change the
background to whatever color I want) so I assume Outlook isn't
looking at the CSS block Jules added to the template.</div>
<div class="gmail_default"
style="font-family:tahoma,sans-serif;font-size:small;color:#20124d"><br>
</div>
<div class="gmail_default"
style="font-family:tahoma,sans-serif;font-size:small;color:#20124d"><br>
</div>
<div class="gmail_default"
style="font-family:tahoma,sans-serif;font-size:small;color:#20124d">Thank
you so much for your attention.</div>
<div class="gmail_default"
style="font-family:tahoma,sans-serif;font-size:small;color:#20124d"><br>
</div>
<div class="gmail_default"
style="font-family:tahoma,sans-serif;font-size:small;color:#20124d">Everton
Bernardi</div>
</div>
<div class="gmail_extra"><br>
<div class="gmail_quote">On Wed, May 10, 2017 at 6:31 AM, Jules
<span dir="ltr"><<a href="mailto:Jules@zend.to"
target="_blank" moz-do-not-send="true">Jules@zend.to</a>></span>
wrote:<br>
<blockquote class="gmail_quote" style="margin:0 0 0
.8ex;border-left:1px #ccc solid;padding-left:1ex">But I
already override that CSS property at the top of<br>
email_header_html.tpl:<br>
<br>
<html><br>
<head><br>
<meta content="text/html; charset=utf-8"
http-equiv="Content-Type"><br>
<style><br>
{fetch file="../www/css/{#CSSTheme#}.<wbr>css"}<br>
{fetch file="../www/css/local.css"}<br>
{* Plus stuff we want to override for the emails *}<br>
{fetch file="../www/images/{#<wbr>CSSTheme#}/background.png"<br>
assign='background'}<br>
body {<br>
background-image:<br>
url(data:image/png;base64,{$<wbr>background|base64_encode});<br>
}<br>
<br>
The {fetch} instructions are done on the ZendTo server as
the email<br>
address is created. So the background-image is embedded as a
data URI in<br>
the email message (which PHPMailer may convert to an
attachment, which<br>
may be the cause of the problem).<br>
<br>
So even though the Outlook client cannot fetch the original
URL<br>
mentioned in the CSS, that property is overridden by an
explicit CSS<br>
statement before the message body ever starts. And it *does*
have the<br>
image that is mentioned in the new value of the
"background-image" property.<br>
<br>
So I think I'm saying that what I've written *should* work,
according to<br>
the rules. Whether Outlook is following the rules, that's
another matter<br>
entirely.<br>
<br>
I must admit I only tested it on Thunderbird, where it works
perfectly.<br>
<br>
Any thoughts, anyone?<br>
<br>
Cheers,<br>
Jules.<br>
<div class="HOEnZb">
<div class="h5"><br>
<br>
On 08/05/2017 18:42, Ricky Boone wrote:<br>
> I can see the same behavior in Outlook 2010. This
appears to be due<br>
> to the default CSS embedded in the message:<br>
><br>
> body {<br>
> font-family: "Helvetica Neue", Helvetica, Verdana,
Arial, sans-serif;<br>
> background-repeat: repeat;<br>
> background-image: url(../images/swish/<wbr>background.png);<br>
> background-color: #cbcccd;<br>
> font-size: 10pt;<br>
> margin:0;<br>
> }<br>
><br>
> Note, the background image doesn't work since it is
a relative path,<br>
> so you end up with just #cbcccd. This seems to be
dictated by<br>
> ./www/css/swish.css and
./templates/email_header_html.<wbr>tpl. Not sure<br>
> why it doesn't work in Gmail (or OWA 2013 from my
environment), but I<br>
> suspect it's due to either CSS processing rules
within Gmail. I<br>
> remember seeing somewhere that there are some
limits on CSS style<br>
> block sizes, content, etc.<br>
><br>
> Since the template appears to be pretty flexible,
you should be able<br>
> to edit the files to make them look the way you're
wanting/expecting<br>
> them to look.<br>
><br>
> On Mon, May 8, 2017 at 10:51 AM, Everton Bruno
Bernardi<br>
> <<a href="mailto:ebbernardi@gmail.com"
moz-do-not-send="true">ebbernardi@gmail.com</a>>
wrote:<br>
>> Hello Jules.<br>
>><br>
>> First of all I would like to thank you so much
for all the improvements<br>
>> you've made to ZendTo! It's now a lot easier to
setup and the HTML e-mails<br>
>> are a real upgrade!<br>
>><br>
>> I noticed a strange behaviour of HTML
formatting for messages sent by ZendTo<br>
>> in Microsoft Outlook.<br>
>><br>
>> Please take a look at the image <a
href="http://imgur.com/h0xDEuR" rel="noreferrer"
target="_blank" moz-do-not-send="true">http://imgur.com/h0xDEuR</a><br>
>> The grayish content doesn't appear in GMail.<br>
>><br>
>> Am I missing something?<br>
>><br>
>><br>
>> Kind regards.<br>
>><br>
>> --<br>
>> Everton Bruno Bernardi<br>
>><br>
>><br>
>><br>
>> ______________________________<wbr>_________________<br>
>> ZendTo mailing list<br>
>> <a href="mailto:ZendTo@zend.to"
moz-do-not-send="true">ZendTo@zend.to</a><br>
>> <a
href="http://mailman.ecs.soton.ac.uk/mailman/listinfo/zendto"
rel="noreferrer" target="_blank"
moz-do-not-send="true">http://mailman.ecs.soton.ac.<wbr>uk/mailman/listinfo/zendto</a><br>
> ______________________________<wbr>_________________<br>
> ZendTo mailing list<br>
> <a href="mailto:ZendTo@zend.to"
moz-do-not-send="true">ZendTo@zend.to</a><br>
> <a
href="http://mailman.ecs.soton.ac.uk/mailman/listinfo/zendto"
rel="noreferrer" target="_blank"
moz-do-not-send="true">http://mailman.ecs.soton.ac.<wbr>uk/mailman/listinfo/zendto</a><br>
<br>
</div>
</div>
<span class="HOEnZb"><font color="#888888">Jules<br>
<br>
--<br>
Julian Field MEng CEng CITP MBCS MIEEE MACM<br>
<br>
'The past is supposed to be a place of reference, not a
place of<br>
residence! There is a reason why your car has a big
windshield and<br>
a small rearview mirror. You are supposed to keep your
eyes on where<br>
you are going, and just occasionally check out where you
have been.'<br>
- Willie Jolley<br>
<br>
<a href="http://www.Zend.To" rel="noreferrer"
target="_blank" moz-do-not-send="true">www.Zend.To</a><br>
Twitter: @JulesFM<br>
PGP footprint: EE81 D763 3DB0 0BFD E1DC 7222 11F6 5947
1415 B654<br>
</font></span>
<div class="HOEnZb">
<div class="h5"><br>
______________________________<wbr>_________________<br>
ZendTo mailing list<br>
<a href="mailto:ZendTo@zend.to" moz-do-not-send="true">ZendTo@zend.to</a><br>
<a
href="http://mailman.ecs.soton.ac.uk/mailman/listinfo/zendto"
rel="noreferrer" target="_blank"
moz-do-not-send="true">http://mailman.ecs.soton.ac.<wbr>uk/mailman/listinfo/zendto</a><br>
</div>
</div>
</blockquote>
</div>
<br>
<br clear="all">
<div><br>
</div>
-- <br>
<div class="gmail_signature" data-smartmail="gmail_signature">
<div dir="ltr"><font face="georgia, serif"><i><a
href="http://google.com/+EvertonBrunoBernardi"
target="_blank" moz-do-not-send="true">Everton Bruno
Bernardi</a></i></font><br>
<br>
<br>
</div>
</div>
</div>
<br>
<fieldset class="mimeAttachmentHeader"></fieldset>
<br>
<pre wrap="">_______________________________________________
ZendTo mailing list
<a class="moz-txt-link-abbreviated" href="mailto:ZendTo@zend.to">ZendTo@zend.to</a>
<a class="moz-txt-link-freetext" href="http://mailman.ecs.soton.ac.uk/mailman/listinfo/zendto">http://mailman.ecs.soton.ac.uk/mailman/listinfo/zendto</a></pre>
</blockquote>
<br>
<pre class="moz-signature" cols="72">Jules
--
Julian Field MEng CEng CITP MBCS MIEEE MACM
'Every morning when I wake,
Dear Lord, a little prayer I make,
O please do keep Thy lovely eye
On all poor creatures born to die
And every evening at sun-down
I ask a blessing on the town,
For whether we last the night or no
I'm sure is always touch-and-go.
We are not wholly bad or good
Who live our lives under Milk Wood,
And Thou, I know, wilt be the first
To see our best side, not our worst.
O let us see another day!
Bless us all this night, I pray,
And to the sun we all will bow
And say, good-bye - but just for now!'
- Dylan Thomas
<a class="moz-txt-link-abbreviated" href="http://www.Zend.To">www.Zend.To</a>
Twitter: @JulesFM
PGP footprint: EE81 D763 3DB0 0BFD E1DC 7222 11F6 5947 1415 B654
</pre>
</body>
</html>