Table of contents

Introduction

This article is about the struggle of trying to create a working email template for Outlook.

In most cases, if you use a 3rd party to send out newsletters, something like MailChimp, Campaign Monitor or others you are safe. The templates that are offered by these services are already tested and work great when viewed on Outlook.

The problem appears when you start working on the email template from scratch.

One reason why you might want to do that is that you need to send weekly email updates to users on your platform with customized/personalized information that you don’t want to feed into a 3rd party via an API so you can use a template they have. You’ll have to create your own email template and send it out.

That’s when you also need to start testing that email on how renders on different devices, and you will have tons of surprises on Outlook.

Issues

You will quickly realize that the email template looks good on Gmail and other modern email readers, but as soon as you switch to Outlook it’s a very different story.

Things that will not work properly:

  • Usage of <div>s
  • Margin and padding
  • Border radius
  • Font families (external)
  • Width and alignment
  • Background images
  • Position absolute
  • Tons of CSS rules don’t work. Good luck using something like flex, we’re back to tables baby. See Resources below.

And the list can go on.

Solutions

I’ll just say this from the beginning: you will have to use tables for everything. You will start with a table and go down create another table and so on.

Here is an example

Copy Code 


<body  class="respond" leftmargin="0" topmargin="0" marginwidth="0" marginheight="0" style="background-color: #fef4d1;">

    <!-- pre-header -->
    <table style="display:none!important;">
        <tr>
            <td>
                <div style="overflow:hidden;display:none;font-size:1px;color:#ffffff;line-height:1px;font-family:Arial;maxheight:0px;max-width:0px;opacity:0;">
                    Weekly email update from MyApp
                </div>
            </td>
        </tr>
    </table>
    <!-- pre-header end -->

    <!-- header -->
    <table border="0" width="100%" cellpadding="0" cellspacing="0" bgcolor="fef4d1">

        <tr>
            <td align="center">
                <table border="0" align="center" width="590" cellpadding="0" cellspacing="0">

                    <tr>
                        <td height="25" style="font-size: 25px; line-height: 25px;">&nbsp;</td>
                    </tr>

                    <tr>
                        <td align="center">

                            <table border="0" align="center" width="100%" cellpadding="0" cellspacing="0">

                                <tr>
                                    <td align="center" height="70" style="height:70px;">
                                        <a href="" style="display: block; border-style: none !important; border: 0 !important;"><img width="300" border="0" style="display: block; width: 300px;" src="images/logo.png" alt="" /></a>
                                    </td>
                                </tr>

                            </table>
                        </td>
                    </tr>

                    <tr>
                        <td height="40" style="font-size: 25px; line-height: 40px;">&nbsp;</td>
                    </tr>

                </table>
            </td>
        </tr>
    </table>
    <!-- end header -->


    <!-- body -->
    <table border="0" width="100%" cellpadding="0" cellspacing="0" bgcolor="fef4d1">
        <tr>
            <td align="center">
                <table border="0" width="590" cellpadding="0" cellspacing="0" bgcolor="fef4d1">
                    <tr>
                        <td>
                            <h4 style="color: #181C32; font-size: 22px; line-height: 24px; font-family: Montserrat, Helvetica, sans-serif;">Some Title</h4>
            
                        </td>
                    </tr>
                    <tr>
                        <td height="15" style="font-size: 12px; line-height: 15px;">&nbsp;</td>
                    </tr>
                </table>
                
            </td>
        </tr>
    </table>
    <!-- body -->


    <table border="0" width="590" align="center" cellpadding="0" cellspacing="0" bgcolor="fef4d1">
        <tr>
            <td align="center" style="color: #3d3d3d; font-size: 16px; font-family: 'Nunito', Calibri, sans-serif; line-height: 24px; padding: 20px 0 25px 0;">
                You can update the preferences in your <a href="">Account</a>. The newsletter can be turned off from the same place. 
            </td>
        </tr>
    </table>
</body>

As you can quickly see there are nested tables a lot of inline styles. That is the bulletproof approach that you can take when it comes to Outlook.

In my example, I started with 3 tables placed at the same level (pre-header, header, body) and they are all set to a width of 100%. The tables that appear in the first <td> of these parent tables are set to a fixed width of 590px so I can easily control the aspect of the email template.

Make sure you easily understand how <table> works and what the <tr> and <td> tags do, and you will be able to adjust your layout to display content in a single row or multiple columns.

  • Container size
    Use a fixed width for the container table. In the example above I went for 590px.
Copy Code 


    <table border="0" width="100%" cellpadding="0" cellspacing="0" bgcolor="fef4d1">
        <tr>
            <td align="center">
                <table border="0" width="590" cellpadding="0" cellspacing="0" bgcolor="fef4d1">
                    <tr>
                        <td>
                            <h4 style="color: #181C32; font-size: 22px; line-height: 24px; font-family: Montserrat, Helvetica, sans-serif;">Some Title</h4>
            
                        </td>
                    </tr>
                    <tr>
                        <td height="15" style="font-size: 12px; line-height: 15px;">&nbsp;</td>
                    </tr>
                </table>
                
            </td>
        </tr>
    </table>

 

  • Rounded buttons
    If you want rounded buttons or other shapes you can use the VML option or just use images as buttons.
Copy Code 


<!--[if mso]>
<v:roundrect href="{{ full_pdf_url }}" style="width:140px;height:34px;v-text-anchor:middle;" arcsize="50%" stroke="f" fillcolor="#F3F6F9" xmlns:v="urn:schemas-microsoft-com:vml" xmlns:w="urn:schemas-microsoft-com:office:word">
    <w:anchorlock/>
    <v:textbox inset="0,0,0,0">
    <center>
<![endif]-->

<a href="{{ full_pdf_url }}" style="font-family: Nunito, Helvetica, sans-serif;font-size: 14px;margin: 0;padding: 0 14px;color: #7E8299;margin-top: 0;font-weight: bold;line-height: 34px;background-color: #F3F6F9;border-radius: 5000px; display: inline-block;text-align: center;text-decoration: none;white-space: nowrap;-webkit-text-size-adjust: none">View Full PDF</a>

<!--[if mso]>
    </center>
    </v:textbox>
</v:roundrect>
<![endif]-->

 

  • Empty spaces
    Can be added by placing <td> elements with a set height and line-height. This works best, margin and padding to separate tables don’t work perfectly.
Copy Code 


<tr>
    <td height="15" style="font-size: 12px; line-height: 15px;">&nbsp;</td>
</tr>

 

  • Font families
    Stick to the font families that are very common. You can add Google Fonts, and they will render correctly for other email readers, but you’ll need a fallback for Outlook.
Copy Code 


<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0;" />
    <!--[if !mso]--><!-- -->
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Montserrat&display=swap" rel="stylesheet">
    <link href="https://fonts.googleapis.com/css2?family=Nunito&display=swap" rel="stylesheet">
    <!-- <![endif]-->

    <title>Weekly Newsletter</title>
</head>

 

  • Background color
    Set the background color for the newsletter at the <body> level and first table parents.
Copy Code 


<body  class="respond" leftmargin="0" topmargin="0" marginwidth="0" marginheight="0" style="background-color: #fef4d1;">

    <table border="0" width="100%" cellpadding="0" cellspacing="0" bgcolor="fef4d1">

        <tr>
            <td align="center">
                <table border="0" align="center" width="590" cellpadding="0" cellspacing="0">

 

  • Test, test, test

A very simple way to do this is just to set your email account in Outlook and see how the emails come in. This is a very basic and free method of seeing progress.

Mailchimp offers you 25 previews per month, you can use that to preview the emails without sending them. It might limit you because you will not see the real data from your system pushed in here without some API connection, but you can at least see if the layout looks good.

Another option will be to use Litmus, which is a paid service.

Resources

Here are some articles that I found useful.

And a lot more out there, just a search away.

Conclusion

Creating HTML template emails that work on Outlook has its learning curve, especially if you’re coming from working with modern CSS. You will have to do a lot of downgrading and get back to a very basic approach.

As someone that uses flex and grid all the time, getting to use only tables to make things render correctly was the biggest challenge for me.

You can replace buttons and elements that are hard to render with images and place them correctly in the template. This will work fine if you don’t have personalized information for each email sent and that same asset can’t be reused.

I hope this little guide will help you with the struggle of getting a nice Outlook to render an email template.