htmlemailhtml-email

My email template shows HTML in its excerpt on Gmail


I've never seen this before. My email template, when displayed in Gmail (ostensibly other clients too?), has HTML in its excerpt, like:

John Smith sent you a message width="155" height="55" title="Welcome" style="display: inline; float: none;"...

I've used bold for the email subject, and the italics is the excerpt.

What am I doing wrong? The whole template is below - I've just thrown in some dummy copy for title etc because that's generated by PHP.

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="viewport" content="width=device-width">
<title>
    Test title
</title>
</head>
<body style="width: 100% !important; min-width: 100%; -webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; color: #ffffff; font-family: 'Helvetica', 'Arial', sans-serif; font-weight: normal; text-align: left; line-height: 19px; font-size: 14px; margin: 0; padding: 0;">
<table class="body" style="border-spacing: 0; border-collapse: collapse; vertical-align: top; text-align: left; height: 100%; width: 100%; color: #ffffff; font-family: 'Helvetica', 'Arial', sans-serif; font-weight: normal; line-height: 19px; font-size: 14px; background: #f1f1f1; margin: 0; padding: 0;" bgcolor="#ffffff">
<tbody>
<tr style="vertical-align: top; text-align: left; padding: 0;" align="left">
    <td class="center" align="center" valign="top" style="word-break: break-word; -webkit-hyphens: auto; -moz-hyphens: auto; hyphens: auto; border-collapse: collapse !important; vertical-align: top; text-align: center; color: #222222; font-family: 'Helvetica', 'Arial', sans-serif; font-weight: normal; line-height: 19px; font-size: 14px; margin: 0; padding: 30px 0px;">
         <center style="width: 100%; min-width: 580px;">
        <table class="row header" style="border-spacing: 0; border-collapse: collapse; vertical-align: top; text-align: left; width: 100%; position: relative; background: transparent; padding: 0px;" bgcolor="transparent">
        <tbody>
        <tr style="vertical-align: top; text-align: left; padding: 0;" align="left">
            <td class="center" align="center" style="word-break: break-word; -webkit-hyphens: auto; -moz-hyphens: auto; hyphens: auto; border-collapse: collapse !important; vertical-align: top; text-align: center; color: #222222; font-family: 'Helvetica', 'Arial', sans-serif; font-weight: normal; line-height: 19px; font-size: 14px; margin: 0; padding: 0;" valign="top">
                 <center style="width: 100%; min-width: 580px;">
                <table class="container" style="border-spacing: 0; border-collapse: collapse; vertical-align: top; text-align: inherit; width: 580px; background: transparent; margin: 0 auto; padding: 0;" bgcolor="white">
                <tbody>
                <tr style="vertical-align: top; text-align: left; padding: 0;" align="left">
                    <td class="wrapper last" style="word-break: break-word; -webkit-hyphens: auto; -moz-hyphens: auto; hyphens: auto; border-collapse: collapse !important; vertical-align: top; text-align: left; position: relative; color: #222222; font-family: 'Helvetica', 'Arial', sans-serif; font-weight: normal; line-height: 19px; font-size: 14px; margin: 0; padding: 0 35px border-style: solid; border-width: 1px 1px 0;" align="left" valign="top">
                        <table class="twelve columns" style="border-spacing: 0; border-collapse: collapse; vertical-align: top; text-align: left; width: 500px; margin: 0 auto; padding: 0;">
                        <tbody>
                        <tr style="vertical-align: top; text-align: left; padding: 0;" align="left">
                            <td class="six sub-columns last" style="vertical-align: middle; word-break: break-word; -webkit-hyphens: auto; -moz-hyphens: auto; hyphens: auto; border-collapse: collapse !important; min-width: 0px; width: 50%; color: #222222; font-family: 'Helvetica', 'Arial', sans-serif; font-weight: normal; line-height: 19px; font-size: 14px; margin: 0; padding: 20px 0px 35px; text-align: center;" align="right" valign="middle">
                                <a href="https://example.com">
                                 <img src="https://app.example.com/images/logo.png" alt="Foo" width="155" height="55" title="Foo" style="width: 155px; height: 55px; display: inline; float: none; outline: none; text-decoration: none; -ms-interpolation-mode: bicubic; max-width: 100%; clear: both; opacity: 1" align="none">
                                </a>
                            </td>
                        </tr>
                        </tbody>
                        </table>
                    </td>
                </tr>
                </tbody>
                </table>
                </center>
            </td>
        </tr>
        </tbody>
        </table>
        <table class="container" style="border-spacing: 0; border-collapse: collapse; vertical-align: top; text-align: inherit; width: 580px; margin: 0 auto; padding: 0;">
        <tbody>
        <tr style="vertical-align: top; text-align: left; padding: 0;" align="left">
            <td style="word-break: break-word; -webkit-hyphens: auto; -moz-hyphens: auto; hyphens: auto; border-collapse: collapse !important; vertical-align: top; text-align: left; color: #222222; font-family: 'Helvetica', 'Arial', sans-serif; font-weight: normal; line-height: 19px; font-size: 14px; margin: 0; padding: 0 50px; background: #ffffff;" align="left" valign="top" bgcolor="#ffffff">
                <table class="row" style="border-spacing: 0; border-collapse: collapse; vertical-align: top; text-align: left; width: 100%; position: relative; display: block; padding: 0px;">
                <tbody>
                <tr style="vertical-align: top; text-align: left; padding: 0;" align="left">
                    <td class="wrapper last" style="word-break: break-word; -webkit-hyphens: auto; -moz-hyphens: auto; hyphens: auto; border-collapse: collapse !important; vertical-align: top; text-align: left; position: relative; color: #222222; font-family: 'Helvetica', 'Arial', sans-serif; font-weight: normal; line-height: 19px; font-size: 14px; margin: 0; padding: 50px 0px;" align="left" valign="top">
                        <table class="twelve columns" style="border-spacing: 0; border-collapse: collapse; vertical-align: top; text-align: left; width: 500px; margin: 0 auto; padding: 0;">
                        <tbody>
                        <tr style="vertical-align: top; text-align: left; padding: 0;" align="left">
                            <td style="word-break: break-word; vertical-align: top; text-align: left; margin: 0px; padding: 0px 0px 20px; border-collapse: collapse !important;" align="left" valign="top">
                                <p style="text-align: center; color: #444444; font-family: Helvetica, Arial, sans-serif; font-size: 18px; line-height: 27px; font-weight: 300; margin: 0px 0px 10px; padding: 0px;" align="center">
                                    Lorem ipsum dolor sit amet
                                </p>
                            </td>
                        </tr>
                        <tr style="vertical-align: top; text-align: left; padding: 0;" align="left">
                            <td style="word-break: break-word; vertical-align: top; text-align: left; margin: 0px; padding: 40px 0px 35px; border-collapse: collapse !important; border-top: 1px solid #cccccc; border-bottom: 1px solid #cccccc;" align="left" valign="top">
                                <p style="text-align: center; color: black; font-family: Helvetica, Arial, sans-serif; font-size: 25px; line-height: 1.5; font-weight: 300; margin: 0px; padding: 0px;" align="center">
                                    Test title
                                </p>
                                <p style="text-align: center; color: #444444; font-family: Helvetica, Arial, sans-serif; font-size: 14px; line-height: 19px; font-weight: 300; margin: 0px; padding: 0px; padding-top: 15px;" align="center">
                                    Test subtitle
                                </p>
                            </td>
                        </tr>
                        <tr style="vertical-align: top; text-align: left; padding: 0;" align="left">
                            <td style="word-break: break-word; vertical-align: top; text-align: left; margin: 0px; padding: 30px 0px 0px; border-collapse: collapse !important; text-align: center;" align="center" valign="top">
                                <table border="0" cellspacing="0" cellpadding="0" align="center">
                                    <tr>
                                        <td align="center" style="border-radius: 3px;" bgcolor="#17c68c">
                                            <a href="https://example.com" target="_blank" style="font-size: 16px; font-family: Helvetica, Arial, sans-serif; color: #ffffff; text-decoration: none; text-decoration: none; padding: 15px 40px; border-bottom: 3px solid #149369; display: inline-block; font-weight: 300;">
                                                Test label
                                            </a>
                                        </td>
                                    </tr>
                                </table>
                            </td>
                        </tr>
                        </tbody>
                        </table>
                    </td>
                </tr>
                </tbody>
                <!-- container end below -->
            </td>
        </tr>
        </tbody>
        </table>
        </center>
    </td>
</tr>
<tr>
    <td style="padding-top: 20px;">
        <p style="text-align: center; color: #444444; font-family: Helvetica, Arial, sans-serif; font-size: 14px; line-height: 19px; font-weight: 300; margin: 0px 0px 10px; padding: 0px; padding-bottom: 45px;" align="center">
            From your friends at <a style="color: #17c68c;" href="https://example.com">Foo</a>.
        </p>
    </td>
</tr>
</tbody>
</table>
</body>
</html>


Solution

  • Odd, I can't replicate in Gmail or desktop Outlook 2013.

    I did notice a couple of things that you could try though:

    1. No Doctype was included. Maybe try adding that in?
    2. I found an un-closed table. Where the comment '' is, either above or below that needs to be a closing table tag.


    No idea if either of those will help, but best to give the Doctype a go at least and test again on your end.