Search code examples
htmlurloutlookemail-templates

Urls automatically being removed from email newsletters in Outlook desktop app


We recently got a complain from our subscriber that there were no urls to click on in our newsletters.

After some follow up emails we found that the subscriber was using outlook desktop on a windows 10 os and it was removing the urls from our newsletters and showing on plain texts.

Is there any specific format for urls we need to use?

Here is there html code :

<style type="text/css">
body {
    margin: 0;
    padding: 0;
    background-color: #F0F2F5;
    color: #333333;
    font-family: 'Open Sans', sans-serif;
    font-size: 16px;
    -webkit-text-size-adjust: none;
    -ms-text-size-adjust: none;
    line-height: 18px;
}

h1,
h2,
h3 {
    color: #212121;
    margin-bottom: 15px !important;
    margin-top: 0;
}

h3 {
    margin-bottom: 0 !important;
}

h1 {
    margin-bottom: 0 !important;
}

a,
a:link,
a:visited {
    color: #2BAAEA;
    text-decoration: none;
    line-height: 18px;
}

p {
    margin: 0;
    padding: 0;
}

img {
    border: 0;
    margin: 0;
}

table td {
    border-collapse: collapse;
}

hr {
    display: block;
    height: 1px;
    border: 0;
    border-top: 1px solid #dddddd;
    margin: 0;
    padding: 0;
}

@media only screen and (max-width: 479px) {
    #templateColumns {
        width: 100% !important;
    }
    h1 {
        font-size: 20px;
    }
    h2 {
        font-size: 14px;
    }
    .leftColumnContent {
        font-size: 16px !important;
        line-height: 125% !important;
    }
    .rightColumnContent {
        font-size: 16px !important;
        line-height: 125% !important;
    }
}
</style>
<!--[if gte mso 9]>
<style type="text/css">
    #pageContainer {
        background-color: transparent !important;
    }
</style>
<![endif]-->

  <table id="pageContainer" width="100%" align="center" cellpadding="0" cellspacing="0" border="0" style="border-collapse: collapse; text-align: left; background-color: #f0f2f5;">
    <tbody>
        <tr>
            <td style="padding-top: 30px; padding-bottom: 30px;">
                <table bgcolor="#FAFAFA" width="600" align="center" cellpadding="0" cellspacing="0">
                    <tbody>
                        <tr>
                            <td width="100%" valign="center" align="center" style="padding-top: 30px; padding-bottom:30px; " class="leftColumnContent"><img alt="Logo" src="http://www.demo.com/file_uploads/5f723ea82828e16b7ddd79abf599279f_demo-logo.png" border="0" vspace="0" hspace="0" style="margin-left: 0; display: block; " /></td>
                        </tr>
                    </tbody>
                </table>
                <table bgcolor="#ffffff" width="600" align="center" cellpadding="0" cellspacing="0" style="border-collapse: collapse; text-align: left; font-family: 'Open Sans', sans-serif; font-weight: normal; font-size: 16px; line-height: 15pt; color: #212121;" id="templateColumns">
                    <tbody>
                        <tr>
                            <td width="100%" valign="top" style="padding-left: 30px; padding-right: 30px;">
                                <table width="100%" cellpadding="0" cellspacing="0" style="border-collapse: collapse; border-width: 0; border-spacing: 0; line-height: 0;margin-top: 30px; ">
                                    <tbody>
                                        <tr>
                                            <td valign="top">
                                                <h1 style="font-size: 22px; line-height: 22pt; color: #333333; padding: 20px 0 35px;">Hi John,</h1>
                                                <p style="line-height: 20pt; color: #7b7784; padding:0 0 20px;">Augue, bibendum congue sodales autem. Sunt, orci quasi nulla interdum, elit non cumque, proident similique eu, lobortis aperiam hymenaeos ut.</p>
                                                <p style="line-height: 20pt; color: #7b7784; padding:0 0 15px;">Read more on our new Blog Post below :</p>
                                            </td>
                                        </tr>
                                        <tr>
                                            <td valign="top"> 
                                                <div style="padding:15px 0 35px;" align="center">
                                                    <a href="https://google.com" style="display: inline-block; padding: 10px 18px; line-height: 18px; text-decoration:none; color: #fff; background: #2baaea;border-radius: 5px;border: 1px solid #2b99d0; word-wrap: break-word; ">This is a button example</a>
                                                    </div>
                                            </td>
                                        </tr>                                        
                                        <tr>
                                            <td valign="top">
                                                <p style="line-height: 20pt; color: #7b7784; padding:0 0 20px;">Like what you see? Share this article with your friends & colleagues.</p>
                                                <div style="padding:0 0 25px;" align="left">
                                                    <a href="#" title="" style="display: inline-block; padding: 5px 0;color: #2baaea; border-bottom: 1px solid #2baaea; text-decoration:none; line-height: 18px;">Share this post</a>
                                                </div>
                                                <p style="line-height: 20pt; color: #7b7784; padding:0 0 20px;"><strong style="color: #333333;">Warm Regards,</strong>
                                                    <br>The Team</p>
                                            </td>
                                        </tr>

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

                    </tbody>
                </table>
                <table width="600" align="center" cellpadding="0" cellspacing="0">
                    <tbody>

                        <tr>
                            <td colspan="3" style="padding-top: 25px; padding-bottom: 15px;">
                                <p style="text-align: center; color: #7B7784; line-height: 24px; font-size: 12px; padding-bottom: 10px;font-family: 'Open Sans', sans-serif;">
                                    ABC, 123 Street, Sydney NSW 1000
                                    <br/> &copy; Copyright 2016 - Company. All rights reserved.</p>
                            </td>
                        </tr>
                        <tr>
                            <td valign="top" style="padding:20px 30px;" colspan="2">
                                <hr>
                            </td>
                        </tr>
                        <tr>
                            <td valign="middle" colspan="3">
                                <p style="text-align: center; color: #7b7784; font-size: 9pt; margin-bottom: 8pt; margin-top: 5px; font-family: Tahoma, Helvetica, sans-serif;">
                                    No longer interested in receiving this email? <a style="text-decoration: underline;" href="{{{unsubscribe_link}}}">Unsubscribe.</a>
                                </p>
                            </td>
                        </tr>
                    </tbody>
                </table>
            </td>
        </tr>
    </tbody>
</table>

Solution

  • I had mistakenly placed

    line-height: 0;
    

    in the style for the main body table.