Responsive Email Template Broken In Outlook

I've been noticing that all default email templates break on outlook. The padding is missing and the widths get messed up.

I thought it was just my outlook until I did an email test using a service. Now I see that it's only the desktop outlook and not any of the online email services.

I can provide a screenshot to show what I mean, but it should be easy to replicate for anyone with outlook on their computer. I've tested both the receipt and category specific emails.
Comments
  • fc_adamfc_adam FoxyCart Team
    @Raul,

    Sorry about that. Outlook is notoriously painful when it comes to HTML emails. Could you confirm the versions you tested with?
  • RaulRaul Member
    I use Outlook 2016 which is where I originally saw the problem. The online tester I used had 2007, 2010, 2013, and 2016. All of which had similar problems.
  • fc_adamfc_adam FoxyCart Team
    @Raul,

    Thanks for confirming. We'll dig in.
  • njwfxnjwfx Member
    Looks as though you didn't get anywhere with this? The email looks pretty bad in my Outlook.

    I've started fixing .....

    The first thing to do is remove "padding: 30px;" from table here :


    <!-- MAIN -->
    <table cellspacing="0" cellpadding="0" id="fc-main" style="margin: 0;padding: 30px;font-family: Verdana, Helvetica, Arial, sans-serif;width: 100%;background-color: #ffffff;-webkit-border-radius: 0px 0px 5px 5px;border-radius: 0px 0px 5px 5px;">
    <tr style="margin: 0;padding: 0;font-family: Verdana, Helvetica, Arial, sans-serif;">
    <td style="margin: 0;padding: 0;font-family: Verdana, Helvetica, Arial, sans-serif;">


    and move it to the td two lines further down


    <!-- MAIN -->
    <table cellspacing="0" cellpadding="0" id="fc-main" style="margin: 0;font-family: Verdana, Helvetica, Arial, sans-serif;width: 100%;background-color: #ffffff;-webkit-border-radius: 0px 0px 5px 5px;border-radius: 0px 0px 5px 5px;">
    <tr style="margin: 0;padding: 0;font-family: Verdana, Helvetica, Arial, sans-serif;">
    <td style="margin: 0;padding: 0;font-family: Verdana, Helvetica, Arial, sans-serif; padding: 30px; ">



    Move the 'margin-bottom' setting from the p tag here

    <!-- MESSAGE -->
    <table cellspacing="0" cellpadding="0" id="fc-message" style="margin: 0;padding: 0;font-family: Verdana, Helvetica, Arial, sans-serif;width: 100%;">
    <tr style="margin: 0;padding: 0;font-family: Verdana, Helvetica, Arial, sans-serif;">
    <td style="margin: 0;padding: 0;font-family: Verdana, Helvetica, Arial, sans-serif;">
    <p style="margin: 0;padding: 0;font-family: Verdana, Helvetica, Arial, sans-serif;line-height: 20px;margin-bottom: 30px;">



    to the td tag above it and change to padding-bottom:


    <!-- MESSAGE -->
    <table cellspacing="0" cellpadding="0" id="fc-message" style="margin: 0;padding: 0;font-family: Verdana, Helvetica, Arial, sans-serif;width: 100%;">
    <tr style="margin: 0;padding: 0;font-family: Verdana, Helvetica, Arial, sans-serif;">
    <td style="margin: 0;padding: 0;font-family: Verdana, Helvetica, Arial, sans-serif; padding-bottom: 30px;">
    <p style="margin: 0;padding: 0;font-family: Verdana, Helvetica, Arial, sans-serif;line-height: 20px; font-size:13px;">



    You also need to set the font size on each TD

    Note that this improves things in Outlook (I'm testing on Outlook 2007), but leaves gmail the same (as we would want). I don't have access to multiple email clients to test, so can't guarantee it's not messing up something else. If any one else can confirm then that would be great

    No time to do more now. Next is the 'width' problem. Will post more here when I sort that out.
  • fc_adamfc_adam FoxyCart Team
    @njwfx,

    Thanks for posting and sharing your finding so far, that's very helpful! Unfortunately as you noticed we haven't been able to do some additional testing of our email template yet, but it is something on our list to tackle. I'll include your current findings as part of that ticket on our side for reference as we do dig in.
  • njwfxnjwfx Member
    re the email template in Outlook. On futher looking at it, it needs a LOT of work.
    Would it be worth your while outsourcing the formatting of the email template to someone who specialises in that sort of thing. There are quite a few companies out there that do that (I can whisper some names to you if you would like )
    You would get a very robust, professional template that worked well in all email clients in a very short timeframe.
    Thanks
  • fc_adamfc_adam FoxyCart Team
    @njwfx,

    Thanks for your notes - we're continuing to look into improving the support for Outlook with our default email templates.
Sign In or Register to comment.