Menu icon Foundation
Zurb Sample Email Templates Responsive in Outlook?

Hi!

Just a quick question - does anyone know if the sample templates that come with the Zurb Foundation for Emails (SASS stack) are supposed to be responsive when viewed in Microsoft Outlook (2016 or earlier)?

The templates appear to be responsive on Thunderbird (mac) and Apple Mail, however when I view them on Outlook 2016, while they render okay (barring some issues I posted about earlier), none of the templates I've tried appear to be responsive. I've tried sidebar-hero.html as well as the default Index.html template (which is simply text only and you'd think that would work) but neither of these seem to be responsive.

Just thought I'd ask in order to save beating my self up trying to get them to be responsive when they weren't intentionally designed to be that way!

If those templates aren't responsive on outlook, are there any Zurb template samples (based on the sass/inky stack) that are?

Thanks!

Derek

OutlookinkysampletemplatesResponsiveresponsive emailemail

Hi!

Just a quick question - does anyone know if the sample templates that come with the Zurb Foundation for Emails (SASS stack) are supposed to be responsive when viewed in Microsoft Outlook (2016 or earlier)?

The templates appear to be responsive on Thunderbird (mac) and Apple Mail, however when I view them on Outlook 2016, while they render okay (barring some issues I posted about earlier), none of the templates I've tried appear to be responsive. I've tried sidebar-hero.html as well as the default Index.html template (which is simply text only and you'd think that would work) but neither of these seem to be responsive.

Just thought I'd ask in order to save beating my self up trying to get them to be responsive when they weren't intentionally designed to be that way!

If those templates aren't responsive on outlook, are there any Zurb template samples (based on the sass/inky stack) that are?

Thanks!

Derek

Jarryd Fillmore about 1 year ago

You would think they would! Lets wait on an answer from someone who's knowledgeable -- I'm curious as well.

Derek McDermott about 1 year ago

No takers on this?

From what I can see, the zurb system is not responsive on Outlook (2016) based on the following test.

Here is my inky content on my responsive.html page:-

---
layout: default
---
<container>
    <row>
        <columns large="6" small="12">
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nisi impedit sapiente delectus molestias quia.</p>
        </columns>
        <columns large="6" small="12">
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Veniam assumenda, praesentium qui vitae voluptate dolores.</p>
        </columns>
    </row>
</container>

I'm just using this with the default layout. When I view this on Outlook 2016, it shows two columns side by side and doesn't go responsive when you decrease the width. However, except for Windows Mobile, it's responsive on all other email clients I've tested.

Is this by design? Are there any plans to make the system work responsively on Outlook? Are there any reliable/recommended hacks that we can implement to make this responsive?

Thanks!

 

Corey Schaaf about 1 year ago

Are you referring to the desktop version of outlook 2016? Or outlook.com the website? 

Derek McDermott about 1 year ago

Hi Corey,

Currently I'm testing those on the desktop version of Outlook 2016 however, undoubtedly I shall also have to make my email templates render correctly on Outlook.com the website too, so it would be nice to know if they can be responsive there as well.

But my first priority at the moment is trying to see if they're supposed to render responsively on the Desktop version.

Thanks!

Derek

Corey Schaaf about 1 year ago

No desktop version of Outlook supports media queries. Outlook uses some old outdated rendering engine. In fact it's pretty much the same rendering engine it's been using since Outlook 2003.  Outlook.com (the artist formerly known as hotmail.com) also does not support media queries.  

Derek McDermott about 1 year ago

Thank you Corey,

That's good to know. I can stop trying to get it to work now!

Derek

Corey Schaaf about 1 year ago

No desktop version of Outlook supports media queries. Outlook uses some old outdated rendering engine. In fact it's pretty much the same rendering engine it's been using since Outlook 2003.  Outlook.com (the artist formerly known as hotmail.com) also does not support media queries.