foundation
htmlmin breaks Outlook (and how to fix it)
I'm refering to https://github.com/zurb/foundation-emails-template
How can we reproduce this bug?
- download/clone
- create minified version of an example template (
npm run build) - upload it to Litmus and check the Outlook Clients, it will look like this: http://imgur.com/a/TY2SG
You will notice that this layout-break does not happen with non-minified HTML.
To fix the problem, insert a line break between </head> and <body> in your minified HTML.
To automate this, I added this line to the very end of the inliner function (after htmlmin!):
.pipe($.replace, '</head><body', '</head>\n<body');
I remember this quirky fix from years ago, when we crafted newsletters by hand.
What did you expect to happen?
correct rendering of template
What happened instead?
broken rendering of template
What email clients does this happen in?
Outlook 2007/2010/2013/2016
@timohausmann I just want to take a moment to let you know how much of a legend you are!!
:D thanks. I also stumbled upon this post, which claims the problem is actually line length and not the line break between head and body. I haven't looked further into this, maybe it's worth checking out: https://www.emailonacid.com/blog/article/email-development/line-length-in-html-email
@timohausmann @michaelsmyth94 My custom template works good on everything except for Outlook 2007, 2010, 2013, 2016 on Windows OS. I don't understand where to place your suggestion. Does that go in my gulp file? Can you show a code example? Any ASAP help will be much appreciated.
@bespinoza-quore yes it goes in your gulpfile. Search for "htmlmin" (line 224) and put it below the htmlmin pipe so it looks like this:
.pipe($.htmlmin, {
collapseWhitespace: false,
minifyCSS: false,
maxLineLength: 800
})
.pipe($.replace, '</head><body', '</head>\n<body');
return pipe();
@timohausmann I added your suggestion but it still looks horrible on outlook for Windows. Every other device looks good except for Outlook. It completely messes up the layout and styling. Also, on my gulpfile under collapseWhitespace and minifyCSS it shows true. That doesn't doesn't matter right?
@bespinoza-quore well try it out. I just copied these lines from the gulpfile on github, I don't have the working files no longer,
This issue has been open since a year and a half ago and Foundation still claims that their email framework works "even on outlook" but it still breaks completely on Microsoft Outlook 2000+.
Hi so I added the .pipe($.replace, '<body', '\n<body'); to my gulpfile but it still breaks in Outlook. I also added maxLineLength: 900 as the article suggested and still doesn't work. Any help would be appreciated.
You will notice that this layout-break does not happen with non-minified HTML.
This is probably due to html-minifier that we use. I think we may have to adjust this a bit.
So far we had no such issues in our own email campaigns. So how exactly can we reproduce this? Does anyone have a small repository as reproducible testcase?
Does anyone have a small repository as reproducible testcase?
Hi Daniel, when I opened the ticket the layout corruption happened even to the boilerplate templates that come with the repo (see screenshots in first post), so you can simply test the default layouts.