Atomic Smash homepage splash

Getting started with HTML emails

Words by Tommy ParkerMarch 31, 2017

Anyone with development experience knows the frustration that is emails (I’m looking at you Outlook). Email clients can vary greatly, giving very different results therefore making the task more difficult than it should be.

As well as a download to a free email template at the bottom of this article, here are a few quick tips to get you started on your campaigning journey.

Desktop CSS has to be inlined eventually

Now this necessarily doesn’t mean you have to develop it inline. You can treat it like a regular web project and use an inliner such as Ink at the end.

We’ve taken our template even further and incorporated CodeKit into the process by making our main email file a .kit, allowing us to import the blocks we need, creating a flexible master template that’s quick to update.

As for mobile styling, you can keep that in a style tag and make your own classes accordingly for phones. Handheld devices are generally pretty good at rendering more advanced CSS but be wary of certain limitations by visiting sites such as Litmus, Email on Acid and Campaign Monitor.

Outlook giving you grief? Use the mso tag

It’s a god send. All those issues you had before, POOF…gone! By using the mso query tag, you can enter Outlook specific classes. Of course you can’t go to town on it but it can come in handy when you want floating tables (often used for stacking content for mobile) by containing them in cells so they stay put. Here’s an example of some basic code:

<table width="600">
    <tbody>
        <tr>
            <td>
                <!--[if mso ]>
                <table width="600" height="1" align="center" border="0" cellpadding="0" cellspacing="0" >
                <tr class="wr">
                <td width="290" height="1" align="left" valign="top" style="position:relative;">
                <![endif]-->
                <table align="left" width="290">
                    <tbody>
                        <tr>
                            <td>
                            </td>
                        </tr>
                    </tbody>
                </table>
                <!--[if mso ]>
                </td>
                </td>
                <td width="20" height="1" align="align="right" valign="top" style="position:relative;">
                <td width="290" height="1" align="left" valign="top" style="position:relative;">
                <![endif]-->
                <table align="right" width="290">
                    <tbody>
                        <tr>
                            <td>
                            </td>
                        </tr>
                    </tbody>
                </table>
                <!--[if mso ]>
                </td>
                </tr>
                </table>
                <![endif]-->
            </td>
        </tr>
    </tbody>
</table>

If you want to be super specific and fairly fancy, you can enter in the version of Outlook you’re having issues with by typing in the corresponding number. You can find the list on this Mailchimp post.

Use bullet-proof buttons

This is a great little resource to achieve fully functioning buttons that work across all the difficult clients. Don’t forget to enter your link in both the regular a href and the vml href.

Get clever with checkbox fields

By using sneaky techniques, you can mimic an expanding field often seen on accordions and mobile menus. You can find an example of this in the template and though it only works on mobile devices, it can really tidy up your email and make it look swish. Don’t be afraid to be creative with it!

HTML email template

An email template that shows off the advance techniques mentioned in this article you can use in email marketing.

2.04 Mb
Profile picture of Tommy Parker

Tommy ParkerDesigner

Tommy ensures there is always a high level craft across client projects. His creative quiver has also extended beyond the realms of digital design – working on a feature film, illustrating for various global magazines and specialist printing.

Go back to top

Keep up to date with Atomic news