Menu icon Foundation
Sidebar-Hero rendering issues on Outlook 2016

Hi Guys,

I'm having trouble with rendering the Zurb sample templates on Outlook 2016. The issues I'm having appear to be similar to those experienced by this user:-

Eric Viana - Outlook 2016 - incompatible?

I'm using the Gulp-Sass Email Stack/Framework btw.

Basically, I just paste in zurb's sidebar-hero.html template into the pages folder of my sass stack and it renders in the dist folder the corresponding fully in-lined sidebar-hero.html. That part is no problem, although, I'm not sure if I have to do anything with the CSS folder that's also output in that dist folder? I presume not as the css is already in-lined - note that I ran "npm run build" in order to get it to fully inline it.

As I understand it, during the build process this sidebar-hero.html page is incorporated into the default layout page which wraps it before spitting it out into the dist folder.

One small issue I ran into here was that the sample sidebar-hero template had an inline stylesheet at the top, so in order for these styles to take effect, I had to ensure that they all had the !important attribute added. Maybe this is where I'm going wrong? Was it necessary for me to do this or did I make a mistake somewhere?

Note that in all of these issues, the rendered output in my Outlook 2016 looks very similar to that of Outlook 2003 in the Zurb litmus tests e.g.

Zurb Litmus Test for Outlook 2003

Also note that I'm sending the email using an npm utility (send-html-email) which understands the email format and so shouldn't cause any problems. I've also sent the same file with the GroupMail application (GroupMail) and from MailChimp and the result was the same in all cases, so I don't think the sending application is screwing up the html - I can do that all by myself without any assistance ;)

Issue#1
Anyway, when I send the final generated sidebar-hero.html file to an Outlook 2016 client, I find that the header area, that uses the <wrapper class="header"> element doesn't seem to render well - it's rendered to the left of the page rather than centred, and it doesn't incorporate the grey header background. On Zurb's litmus tests, it actually renders more like Outlook 2003 in that respect.

Issue#2
Also, one other issue is that the 7 plain links all render horizontally rather than vertically which means that the right hand column width is forced out wider than it ought to be - in my outlook client it renders about twice the width of the 1st column.

Note that in other clients, Apple Mail, Thunderbird, etc it appears to render fine. Windows phone (v8.1) also has the same issue with regard to the 7 plain links rendering horizontally, although with this client, the header isn't causing problems and renders fine, funnily enough.

Issue#3
The colouring and format of the social buttons doesn't seem to work. In the Outlook 2016 client, they are all light blue backgrounds running together and appear a bit cramped up with no spacing between them. i.e. They lack the proper Navy, Blue and Orange button colouring.

 

The source Inky code that I'm using is basically the sidebar-hero template which I modified to include !important and added actual link targets to replace any empty links in case that was causing an issue.

See here:-

 

<style type="text/css">
  .header {
    background: #8a8a8a!important;
  }
  .header .columns {
    padding-bottom: 0!important;
  }
  .header p {
    color: #fff!important;
    padding-top: 15px!important;
  }
  .header .wrapper-inner {
    padding: 20px!important;
  }
  .header .container {
    background: transparent!important;
  }
  table.button.facebook table td {
    background: #3B5998 !important;
    border-color: #3B5998!important;
  }
  table.button.twitter table td {
    background: #1daced !important;
    border-color: #1daced!important;
  }
  table.button.google table td {
    background: #DB4A39 !important;
    border-color: #DB4A39!important;
  }
  .wrapper.secondary {
    background: #f3f3f3!important;
  }
  .sidebar .menu .menu-item {
    border-top: 1px solid #777777!important;
  }
</style>



<wrapper class="header">
  <container>
    <row class="collapse">
      <columns small="6">
        <img src="http://placehold.it/200x50/CCCCCC">
      </columns>
      <columns small="6">
        <p class="text-right">SIDEBAR HERO3</p>
      </columns>
    </row>
  </container>
</wrapper>

<container>

  <spacer size="16"></spacer>

  <row>
    <columns>
      <h1>Hi, Elijah D. Baily</h1>
      <p class="lead">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nisi impedit sapiente delectus molestias quia.</p>
      <center>
        <img src="http://placehold.it/570x300" alt="">
      </center>
      <callout class="primary">
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Veniam assumenda, praesentium qui vitae voluptate dolores. <a href="http://group-mail.com">Click it!</a></p>
      </callout>
    </columns>
  </row>
  <row>
    <columns large="7">
      <h3>Hello, Han Fastolfe</h3>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Laboriosam nobis velit, aliquid pariatur at fugit. Omnis at quae, libero iusto quisquam animi blanditiis neque, alias minima corporis, ab in explicabo?</p>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Maxime dignissimos voluptas minus, cupiditate voluptatem, voluptatum iste molestiae consectetur temporibus quae dolore nam possimus reprehenderit blanditiis laborum iusto sit. Perspiciatis, dolor.</p>
      <callout class="secondary">
        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Culpa quas optio totam quidem, placeat sunt, sit iusto fugit. Harum omnis deleniti enim nihil iure, quis laudantium veniam velit animi debitis. <a href="http://group-mail.com">Click It!</a>
      </callout>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolores minus eius amet alias odit accusantium, fugit perspiciatis nulla suscipit nisi. Laborum aliquid, voluptatum consectetur fugiat maxime architecto enim molestias aperiam!</p>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ex eveniet veritatis, magnam ipsam et vero necessitatibus. Deserunt facilis impedit, adipisci illo laboriosam assumenda fugiat dolorum nam odio aliquid, sit est.</p>
      <button class="expand" href="http://group-mail.com">Click Me!</button>
    </columns>
    <columns large="5" class="sidebar">
      <callout class="secondary">
        <h5>Header</h5>
        <p class="lead">Sub-header</p>
        <menu class="vertical">
          <item href="http://group-mail.com">Just a Plain Link &raquo;</item>
          <item href="http://group-mail.com">Just a Plain Link &raquo;</item>
          <item href="http://group-mail.com">Just a Plain Link &raquo;</item>
          <item href="http://group-mail.com">Just a Plain Link &raquo;</item>
          <item href="http://group-mail.com">Just a Plain Link &raquo;</item>
          <item href="http://group-mail.com">Just a Plain Link &raquo;</item>
          <item href="http://group-mail.com">Just a Plain Link &raquo;</item>
        </menu>
      </callout>
      <callout class="secondary">
        <h6>CONNECT WITH US:</h6>
        <button class="facebook expand" href="http://group-mail.com">Facebook</button>
        <button class="twitter expand" href="http://group-mail.com">Twitter</button>
        <button class="google expand" href="http://group-mail.com">Google+</button>
        <p>CONTACT INFO:</p>
        <p>Phone: 408-341-0600</p>
        <p>Email: <a href="mailto:foundation@zurb.com">foundation@zurb.com</a></p>
      </callout>
    </columns>
  </row>

  <center>
    <menu>
      <item href="http://group-mail.com">Terms</item>
      <item href="http://group-mail.com">Privacy</item>
      <item href="http://group-mail.com">Unsubscribe</item>
    </menu>
  </center>

</container>

The layout page I'm using is simply the unaltered layout page that comes with the sass stack.

The actual final rendered html page is too big to post here but there is a dropbox link to it here:-

Final Rendered Sidebar Hero Page (Dropbox)

So please help - I'm not sure if the issues are with my workflow and maybe I'm misunderstanding what I'm supposed to do with the templates, or if there is an actual incompatibility with Outlook 2016. It looks like the CSS isn't being applied properly for some reason, especially considering Issue#3.

Regards

Derek

 

Outlook2016sampletemplatesidebar-herowrapperheadercss

Hi Guys,

I'm having trouble with rendering the Zurb sample templates on Outlook 2016. The issues I'm having appear to be similar to those experienced by this user:-

Eric Viana - Outlook 2016 - incompatible?

I'm using the Gulp-Sass Email Stack/Framework btw.

Basically, I just paste in zurb's sidebar-hero.html template into the pages folder of my sass stack and it renders in the dist folder the corresponding fully in-lined sidebar-hero.html. That part is no problem, although, I'm not sure if I have to do anything with the CSS folder that's also output in that dist folder? I presume not as the css is already in-lined - note that I ran "npm run build" in order to get it to fully inline it.

As I understand it, during the build process this sidebar-hero.html page is incorporated into the default layout page which wraps it before spitting it out into the dist folder.

One small issue I ran into here was that the sample sidebar-hero template had an inline stylesheet at the top, so in order for these styles to take effect, I had to ensure that they all had the !important attribute added. Maybe this is where I'm going wrong? Was it necessary for me to do this or did I make a mistake somewhere?

Note that in all of these issues, the rendered output in my Outlook 2016 looks very similar to that of Outlook 2003 in the Zurb litmus tests e.g.

Zurb Litmus Test for Outlook 2003

Also note that I'm sending the email using an npm utility (send-html-email) which understands the email format and so shouldn't cause any problems. I've also sent the same file with the GroupMail application (GroupMail) and from MailChimp and the result was the same in all cases, so I don't think the sending application is screwing up the html - I can do that all by myself without any assistance ;)

Issue#1
Anyway, when I send the final generated sidebar-hero.html file to an Outlook 2016 client, I find that the header area, that uses the <wrapper class="header"> element doesn't seem to render well - it's rendered to the left of the page rather than centred, and it doesn't incorporate the grey header background. On Zurb's litmus tests, it actually renders more like Outlook 2003 in that respect.

Issue#2
Also, one other issue is that the 7 plain links all render horizontally rather than vertically which means that the right hand column width is forced out wider than it ought to be - in my outlook client it renders about twice the width of the 1st column.

Note that in other clients, Apple Mail, Thunderbird, etc it appears to render fine. Windows phone (v8.1) also has the same issue with regard to the 7 plain links rendering horizontally, although with this client, the header isn't causing problems and renders fine, funnily enough.

Issue#3
The colouring and format of the social buttons doesn't seem to work. In the Outlook 2016 client, they are all light blue backgrounds running together and appear a bit cramped up with no spacing between them. i.e. They lack the proper Navy, Blue and Orange button colouring.

 

The source Inky code that I'm using is basically the sidebar-hero template which I modified to include !important and added actual link targets to replace any empty links in case that was causing an issue.

See here:-

 

<style type="text/css">
  .header {
    background: #8a8a8a!important;
  }
  .header .columns {
    padding-bottom: 0!important;
  }
  .header p {
    color: #fff!important;
    padding-top: 15px!important;
  }
  .header .wrapper-inner {
    padding: 20px!important;
  }
  .header .container {
    background: transparent!important;
  }
  table.button.facebook table td {
    background: #3B5998 !important;
    border-color: #3B5998!important;
  }
  table.button.twitter table td {
    background: #1daced !important;
    border-color: #1daced!important;
  }
  table.button.google table td {
    background: #DB4A39 !important;
    border-color: #DB4A39!important;
  }
  .wrapper.secondary {
    background: #f3f3f3!important;
  }
  .sidebar .menu .menu-item {
    border-top: 1px solid #777777!important;
  }
</style>



<wrapper class="header">
  <container>
    <row class="collapse">
      <columns small="6">
        <img src="http://placehold.it/200x50/CCCCCC">
      </columns>
      <columns small="6">
        <p class="text-right">SIDEBAR HERO3</p>
      </columns>
    </row>
  </container>
</wrapper>

<container>

  <spacer size="16"></spacer>

  <row>
    <columns>
      <h1>Hi, Elijah D. Baily</h1>
      <p class="lead">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nisi impedit sapiente delectus molestias quia.</p>
      <center>
        <img src="http://placehold.it/570x300" alt="">
      </center>
      <callout class="primary">
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Veniam assumenda, praesentium qui vitae voluptate dolores. <a href="http://group-mail.com">Click it!</a></p>
      </callout>
    </columns>
  </row>
  <row>
    <columns large="7">
      <h3>Hello, Han Fastolfe</h3>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Laboriosam nobis velit, aliquid pariatur at fugit. Omnis at quae, libero iusto quisquam animi blanditiis neque, alias minima corporis, ab in explicabo?</p>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Maxime dignissimos voluptas minus, cupiditate voluptatem, voluptatum iste molestiae consectetur temporibus quae dolore nam possimus reprehenderit blanditiis laborum iusto sit. Perspiciatis, dolor.</p>
      <callout class="secondary">
        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Culpa quas optio totam quidem, placeat sunt, sit iusto fugit. Harum omnis deleniti enim nihil iure, quis laudantium veniam velit animi debitis. <a href="http://group-mail.com">Click It!</a>
      </callout>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolores minus eius amet alias odit accusantium, fugit perspiciatis nulla suscipit nisi. Laborum aliquid, voluptatum consectetur fugiat maxime architecto enim molestias aperiam!</p>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ex eveniet veritatis, magnam ipsam et vero necessitatibus. Deserunt facilis impedit, adipisci illo laboriosam assumenda fugiat dolorum nam odio aliquid, sit est.</p>
      <button class="expand" href="http://group-mail.com">Click Me!</button>
    </columns>
    <columns large="5" class="sidebar">
      <callout class="secondary">
        <h5>Header</h5>
        <p class="lead">Sub-header</p>
        <menu class="vertical">
          <item href="http://group-mail.com">Just a Plain Link &raquo;</item>
          <item href="http://group-mail.com">Just a Plain Link &raquo;</item>
          <item href="http://group-mail.com">Just a Plain Link &raquo;</item>
          <item href="http://group-mail.com">Just a Plain Link &raquo;</item>
          <item href="http://group-mail.com">Just a Plain Link &raquo;</item>
          <item href="http://group-mail.com">Just a Plain Link &raquo;</item>
          <item href="http://group-mail.com">Just a Plain Link &raquo;</item>
        </menu>
      </callout>
      <callout class="secondary">
        <h6>CONNECT WITH US:</h6>
        <button class="facebook expand" href="http://group-mail.com">Facebook</button>
        <button class="twitter expand" href="http://group-mail.com">Twitter</button>
        <button class="google expand" href="http://group-mail.com">Google+</button>
        <p>CONTACT INFO:</p>
        <p>Phone: 408-341-0600</p>
        <p>Email: <a href="mailto:foundation@zurb.com">foundation@zurb.com</a></p>
      </callout>
    </columns>
  </row>

  <center>
    <menu>
      <item href="http://group-mail.com">Terms</item>
      <item href="http://group-mail.com">Privacy</item>
      <item href="http://group-mail.com">Unsubscribe</item>
    </menu>
  </center>

</container>

The layout page I'm using is simply the unaltered layout page that comes with the sass stack.

The actual final rendered html page is too big to post here but there is a dropbox link to it here:-

Final Rendered Sidebar Hero Page (Dropbox)

So please help - I'm not sure if the issues are with my workflow and maybe I'm misunderstanding what I'm supposed to do with the templates, or if there is an actual incompatibility with Outlook 2016. It looks like the CSS isn't being applied properly for some reason, especially considering Issue#3.

Regards

Derek