Coding Pixel Perfect Emails [Part 1]

Like most anything else, there are a thousand different ways to code an email, the tips in this series are what we have found to be particularly effective. Here we go!

Make it Modular

The way an email is typically coded, is of course static tables, but with any design there are a number of ways to divide the layout within your tables. Take this email for instance:

It can be coded to render properly a number of ways, a common technique is one giant Mega-Table™ where “colspans” and “rowspans” are used throughout, like this:

There’s nothing necessarily wrong with this, it’ll render pretty well across most email clients, but as the developer, you should ask yourself how it can be coded in such a way to be more easily editable. Making small tweaks can become a nightmare. What if the client wants the order of one particular article switched or the spacing here or there adjusted? It becomes a tedious task to say the least.

If you happen to make one small mistake the whole house of cards can collapse:

There is a better way!

Make it modular. Essentially every independent element should be wrapped within it’s own table. This makes it far easier to do small tweaks, rearrange things at will, and any coding mistakes are generally localized to a small area that is easily located and fixed.

Spacers not Line Breaks

One more quick tip on creating pixel perfect emails is figuring out how to easily add vertical space anywhere you want, rather than using multiple “BR” tags, which can give unpredictable results across various email clients; Try using this.

Simply adjust the font size value and that will give you the exact pixel size you set. One thing to note is this tag will not work properly inside of a styled cell.

So code your cells like this (left) not like this (right).

—–

Read other “Pixel Perfect” posts:

• Part 4: Responsive Emails
• Part 3: Resetting styles and client bugs
• Part 2: Images