It’s not easy – but possible!

But i’m gonna tell you some things to have in mind, when developing a custom email template.

• Avoid anything super fancy, because it’s going to be hard to support in all major email clients.
• If you want something just a bit custom, then you need to use tables for your email templates.
• Don’t relay 100% on media queries, build the template with a technique called spongy/hybrid – This way we get a mobile first version and thereby force Gmail App to show a proper mobile version.
  And then we allow the other clients to render it differently, using specific ways to target those like Ghost Columns, Media Queries and client specific “bugs” or features.
• Never guess, just test it, even the smallest changes – be sure to isolate the css if you are trying to target a specific client
• There is a lot of difference in what css the clients support, so use a checklist to verify that the css is actually supported in the clients you are targeting. Campaignmonitor got this css lookup for email.
  
• Split up your css into multiple style tags, separated by client. Because Gmail tends to remove the entire style block, if a syntax error occurs or something they interpret as error, and sometimes we need to take advantage for a bug or similar to hit a specific email client target.
• Keep all style tags in the head tag, and do not use any link tags to fetch stylesheets
• And when you get to the debugging fun, I highly recommend using a email client targeting cheatsheet like howtotarget.email which list all the known “bugs”, that can be exploited in our favour to target the specific email clients in specific ways

 

Here’s a basic template to work with

<table border="0" width="100%" cellspacing="0" cellpadding="0">
    <tbody>
        <tr>
            <td align="center" bgcolor="#00a9f7">


                <!-- [if (mso)|(IE)]>
<table align="center" border="0" cellspacing="0" cellpadding="0" width="600">
<tr>
<td align="center" valign="top" width="600">
<![endif]-->


                <table style="max-width: 600px;" border="0" width="100%" cellspacing="0" cellpadding="0">
                    <tbody>
                        <tr>
                            <td style="padding: 40px 0px 40px 0px;" align="center" valign="top">
                                <!-- IMAGE -->
                                <img style="display: block; width: 100%; max-width: 100%;" src="https://placehold.it/600x300" alt="Example" width="600" border="0" />
                            </td>
                        </tr>
                        <tr>
                            <td style="padding: 0px 10px 20px 10px;" align="center" valign="top">
                                <!-- HEADLINE -->
                                <p style="color: #ffffff; font-family: sans-serif; font-size: 24px; font-weight: bold; line-height: 28px; margin: 0;">Announcing Some News  
                                </p>
                            </td>
                        </tr>
                        <tr>
                            <td align="center" valign="top">
                                <!-- SOME CONTENT IMAGE -->
                                <img style="display: block; width: 100%; max-width: 100%;" src="https://placehold.it/600x300" alt="Example" width="600" border="0" />


                                <!-- CONTENT -->
                                <p style="color: #b5e2f7; font-family: sans-serif; font-size: 16px; font-weight: normal; line-height: 24px; margin: 0;">Content paragrahs
                                </p>

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


                <!-- [if (mso)|(IE)]>
</td> 
</tr> 
</table> 
<![endif]-->


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

Notice the conditional comments, they are containing the Ghost table which is a table only shown on Outlook and IE clients, which helps to set some boundaries for the inner fluid table only in Outlook and IE.

This way we still have fluid and responsive tables in all other clients.

The concept can be taken further to include 2 columns – maybe even 3 or 4. but that would be a very complex HTML structure in the end.

Below i will show how to use the ghost column splitters, which can give you a very well responding 2 column in Outlook and IE – while still maintaining the mobile version for Gmail App and a responsive and fluid layout in Desktop clients.

Imagine we have a template setup like the one displayed above – here we just zoom in on one of the table rows (tr)

<tr>
    <td align="center" valign="top">
        <!-- SOME CONTENT IMAGE -->
        <img style="display: block; width: 100%; max-width: 100%;" src="https://placehold.it/600x300" alt="Example" width="600" border="0" />

<!--[if (mso)|(IE)]>
    </td>
<tr>
</tr>
    <td align="center" valign="top">
<![endif]-->

        <!-- CONTENT -->
        <p style="color: #b5e2f7; font-family: sans-serif; font-size: 16px; font-weight: normal; line-height: 24px; margin: 0;">Content paragrahs
        </p>

    </td>
</tr>

Enjoy!

Author: Stefan Vandel