Email Template Guide

Code

There are many different ways to code your email template. Choose which way you're most comfortable with as that will become the most efficient way to do it over time. Learn by example by looking at other people's code. Take advantage of libraries, template systems and frameworks.

Different approaches to coding

Getting started with code

Email coding courses

Essential code snippets to start with

Reset styles – add to global styles:

img { border: 0; height: auto; line-height: 100%; outline: none; text-decoration: none; }
table { border-collapse: collapse !important; }
body { height: 100% !important; margin: 0 !important; padding: 0 !important; width: 100% !important; }

Client-specific styles – add to global styles:

body, table, td, a { -webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; }
table, td { mso-table-lspace: 0pt; mso-table-rspace: 0pt; }
img { -ms-interpolation-mode: bicubic; }

Preheader/preview text – add after opening body tag:

<div style="display: none; max-height: 0; overflow: hidden;">
Your interesting, but not too long, preview text goes here
</div>

Guidelines for using images

Testing

Thinking modularly and improving your development workflow


More options: Awesome frameworks, templates, tools, and workflows to build better emails →

Additional resources