VAN
DEL
.IO

Email templating like a pro

It’s not easy – but possible!

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

 

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