[ZendTo] Strange HTML output in MS Outlook
Jules
Jules at Zend.To
Wed May 10 17:37:52 BST 2017
Folks,
I've been having a dig into this topic this afternoon.
Basically, the 2 major problem clients are:
1. Outlook 2007 and later,
2. Gmail.
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.
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!
Emails with page breaks. Yay.
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.
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.
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.
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.
I haven't tried Gmail (or Office365) yet. If anyone has experience of
either of those with ZendTo, please let me know.
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.
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.
Gmail and Office365 will await more input...
Thanks,
Jules.
On 10/05/2017 12:55, Everton Bruno Bernardi wrote:
> Hi Jules and Ricky.
>
> 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.
>
>
> Thank you so much for your attention.
>
> Everton Bernardi
>
> On Wed, May 10, 2017 at 6:31 AM, Jules <Jules at zend.to
> <mailto:Jules at zend.to>> wrote:
>
> But I already override that CSS property at the top of
> email_header_html.tpl:
>
> <html>
> <head>
> <meta content="text/html; charset=utf-8" http-equiv="Content-Type">
> <style>
> {fetch file="../www/css/{#CSSTheme#}.css"}
> {fetch file="../www/css/local.css"}
> {* Plus stuff we want to override for the emails *}
> {fetch file="../www/images/{#CSSTheme#}/background.png"
> assign='background'}
> body {
> background-image:
> url(data:image/png;base64,{$background|base64_encode});
> }
>
> The {fetch} instructions are done on the ZendTo server as the email
> address is created. So the background-image is embedded as a data
> URI in
> the email message (which PHPMailer may convert to an attachment, which
> may be the cause of the problem).
>
> So even though the Outlook client cannot fetch the original URL
> mentioned in the CSS, that property is overridden by an explicit CSS
> statement before the message body ever starts. And it *does* have the
> image that is mentioned in the new value of the "background-image"
> property.
>
> So I think I'm saying that what I've written *should* work,
> according to
> the rules. Whether Outlook is following the rules, that's another
> matter
> entirely.
>
> I must admit I only tested it on Thunderbird, where it works
> perfectly.
>
> Any thoughts, anyone?
>
> Cheers,
> Jules.
>
>
> On 08/05/2017 18:42, Ricky Boone wrote:
> > I can see the same behavior in Outlook 2010. This appears to be due
> > to the default CSS embedded in the message:
> >
> > body {
> > font-family: "Helvetica Neue", Helvetica, Verdana, Arial,
> sans-serif;
> > background-repeat: repeat;
> > background-image: url(../images/swish/background.png);
> > background-color: #cbcccd;
> > font-size: 10pt;
> > margin:0;
> > }
> >
> > Note, the background image doesn't work since it is a relative path,
> > so you end up with just #cbcccd. This seems to be dictated by
> > ./www/css/swish.css and ./templates/email_header_html.tpl. Not sure
> > why it doesn't work in Gmail (or OWA 2013 from my environment),
> but I
> > suspect it's due to either CSS processing rules within Gmail. I
> > remember seeing somewhere that there are some limits on CSS style
> > block sizes, content, etc.
> >
> > Since the template appears to be pretty flexible, you should be able
> > to edit the files to make them look the way you're wanting/expecting
> > them to look.
> >
> > On Mon, May 8, 2017 at 10:51 AM, Everton Bruno Bernardi
> > <ebbernardi at gmail.com <mailto:ebbernardi at gmail.com>> wrote:
> >> Hello Jules.
> >>
> >> First of all I would like to thank you so much for all the
> improvements
> >> you've made to ZendTo! It's now a lot easier to setup and the
> HTML e-mails
> >> are a real upgrade!
> >>
> >> I noticed a strange behaviour of HTML formatting for messages
> sent by ZendTo
> >> in Microsoft Outlook.
> >>
> >> Please take a look at the image http://imgur.com/h0xDEuR
> >> The grayish content doesn't appear in GMail.
> >>
> >> Am I missing something?
> >>
> >>
> >> Kind regards.
> >>
> >> --
> >> Everton Bruno Bernardi
> >>
> >>
> >>
> >> _______________________________________________
> >> ZendTo mailing list
> >> ZendTo at zend.to <mailto:ZendTo at zend.to>
> >> http://mailman.ecs.soton.ac.uk/mailman/listinfo/zendto
> <http://mailman.ecs.soton.ac.uk/mailman/listinfo/zendto>
> > _______________________________________________
> > ZendTo mailing list
> > ZendTo at zend.to <mailto:ZendTo at zend.to>
> > http://mailman.ecs.soton.ac.uk/mailman/listinfo/zendto
> <http://mailman.ecs.soton.ac.uk/mailman/listinfo/zendto>
>
> Jules
>
> --
> Julian Field MEng CEng CITP MBCS MIEEE MACM
>
> 'The past is supposed to be a place of reference, not a place of
> residence! There is a reason why your car has a big windshield and
> a small rearview mirror. You are supposed to keep your eyes on where
> you are going, and just occasionally check out where you have been.'
> - Willie Jolley
>
> www.Zend.To <http://www.Zend.To>
> Twitter: @JulesFM
> PGP footprint: EE81 D763 3DB0 0BFD E1DC 7222 11F6 5947 1415 B654
>
> _______________________________________________
> ZendTo mailing list
> ZendTo at zend.to <mailto:ZendTo at zend.to>
> http://mailman.ecs.soton.ac.uk/mailman/listinfo/zendto
> <http://mailman.ecs.soton.ac.uk/mailman/listinfo/zendto>
>
>
>
>
> --
> /Everton Bruno Bernardi <http://google.com/+EvertonBrunoBernardi>/
>
>
>
>
> _______________________________________________
> ZendTo mailing list
> ZendTo at zend.to
> http://mailman.ecs.soton.ac.uk/mailman/listinfo/zendto
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
www.Zend.To
Twitter: @JulesFM
PGP footprint: EE81 D763 3DB0 0BFD E1DC 7222 11F6 5947 1415 B654
-------------- next part --------------
An HTML attachment was scrubbed...
URL: http://mailman.ecs.soton.ac.uk/pipermail/zendto/attachments/20170510/10fde015/attachment-0001.html
More information about the ZendTo
mailing list