Trouble with sending an HTML email with GMail

Question

I'm creating an HTML email for a client to send for follow ups with links to places his clients can leave reviews for his Realty service.

I'm having an issue with the formatting. I'm using a Chrome plugin, HTML Inserter for Gmail , and after pasting the code in to the email it looks correct in the composed message. However, when I send a test email to myself, it is not formatted correctly.

The HTML uses tags approved by Gmail's Whitelist , and style in the head is supported according to the Gmail docs . The style character count is well under Gmail's max of a little over 8000 characters.

After doing some research on here I'm not able to find anything wrong with my code.

This is my first time asking a question on Stack Overflow so I'm not sure if it's common for people to paste their entire code to the question? I've added the document to a Repl.it found here .

Apologies if this is a simple fix - I wasn't able to find anything online to help. Thank you!

Answer 1

Matthew,

I looked into the HTML inserter for gmail and it appears that after the last update to the plugin this is a common issue that people are having. Is it possible that it is the plugin and not your code?

Answer 2

I didn't know this google whitelist, or the google documentation about it but I realised multiple html emails, and gmail is just a client among others. And usualy it's more permissive than other like Outlook for exemple (I think it's the worst). If the purpose is for your client to send it to his client, you have to take in consideration there is multiple client with multiple render motor, because maybe one of his client will open it with Outlook or Thunderbird.

And here comes the sad part... If you want a full support on the different mail clients, it's like back in the old web. It's usualy something like this exemple from an old mail I send to get an internship:

<table style="border-collapse:collapse;width:500px;margin:0 auto">

    <tbody>
        <tr>

            <td>
                <img src="https://ci5.googleusercontent.com/proxy/rZJ68vGa_16qkkvRQ7gpG698xHm2qHxDGps3vTpHjqeN8hHjI6J9pqXpARCuzjb3XYsnCviGiLUBV8RQhvAxO2ZIdIPhrA=s0-d-e1-ft#http://boursbenjamin.be/_imgmail/superstrong.png"
                    alt="header" width="500" height="300" style="display:block" class="CToWUd">
            </td>

        </tr>

        <tr style="font-family:roboto,sans-serif;font-size:16px;line-height:20px">

            <td style="padding:40px 30px 40px 30px;background:#ffffff">
                <table style="width:100%">
                    <tbody>
                        <tr>
                            <td>
                                Je suis
                                <b style="color:#00bbfd">Benjamin Bours</b>,
                            </td>
                        </tr>
                        <tr>
                            <td style="padding:40px 0px 40px 0px">
                                je proviens de Liège et
                                <b style="color:#00bbfd">j'étudie à l'HEAJ de Namur</b> ou j'apprends le
                                <b style="color:#00bbfd">webdesign</b> et le
                                <b style="color:#00bbfd">front end development.</b>
                            </td>
                        </tr>
                        <tr>
                            <td style="padding:0px 0px 40px 0px">
                                Dans le cadre de ma dernière année, je dois réaliser un
                                <b style="color:#00bbfd">stage de 3 mois</b> (du 7 Novembre au 27 Janvier).
                            </td>
                        </tr>
                        <tr>
                            <td style="padding:0px 0px 40px 0px">
                                J'aimerais vraiment
                                <b style="color:#00bbfd">améliorer</b> mes compétences de développement et
                                <b style="color:#00bbfd">travailler</b> sur des
                                <b style="color:#00bbfd">projets avec vous</b>, et c'est pourquoi je pense que vous,
                                <b>
                                    <span class="il">SUPERSTRONG</span>
                                </b>, êtes
                                <b style="color:#00bbfd">l'agence parfaite pour moi.</b>
                            </td>
                        </tr>
                        <tr>
                            <td>
                                Si vous désirez en savoir plus sur moi, je vous invite à
                            </td>
                        </tr>
                        <tr>
                            <td style="padding:80px 0px 80px 0px">
                                <div style="width:200px;height:100px;border:solid #00bbfd 3px;margin:0 auto">
                                    <a href="http://boursbenjamin.be" style="display:block;text-align:center;text-decoration:none;color:#00bbfd;box-sizing:border-box;margin:0 auto;width:200px;line-height:100px;font-weight:600"
                                        target="_blank" data-saferedirecturl="https://www.google.com/url?q=http://boursbenjamin.be&amp;source=gmail&amp;ust=1534023364151000&amp;usg=AFQjCNEltkO1A2HaWdPFPTkNbFw3PhHfrQ">Visiter mon site</a>
                                </div>
                            </td>
                        </tr>
                        <tr>
                            <td style="padding:0px 0px 40px 0px">
                                Dans l'attente de votre réponse.
                            </td>
                        </tr>
                        <tr>
                            <td>
                                Je vous prie de bien vouloir agréer, mes sincères salutations, Benjamin Bours.
                            </td>
                        </tr>
                    </tbody>
                </table>
            </td>

        </tr>

    </tbody>
</table>

Here, some interesting links about it

https://litmus.com/help/email-clients/rendering-engines/

https://caniuse.email/

https://www.nurturehq.com/tips/why-html-email-can-be-a-pain

https://medium.com/connect-the-dots/10-steps-for-effective-cross-client-browser-html-emails-e69a78da1b13