Share This:
Modern coding is to email coding as a laptop is to a VHS player. Although coding websites today has evolved to have amazing capabilities, email coding is still in the Be Kind, Please Rewind mindset and supports very little modern coding techniques. To assist you with becoming a better email developer, I have come up with a collection of best practices, tips and tricks.
Tables > Divs
Think of the <table> as the skeleton structure of your email coding. It is much more reliable and consistent across all email clients. Almost all positioning and display CSS attributes do not apply in Outlook 2007-2013 as well as many other email clients.1 Be sure to set table dimensions in the <td> to accurately display widths.
Quick Tip: When using padding in your layout, be sure to create a separate nested one-column, one-row table with its own padding. If you add padding to a table with multiple columns/rows, it will add padding to everything.
Background Images
Regular images and background images need some attention when used in email coding. Not all email clients support background images and need to have a backup background color (say that 10 times fast). You simply add the background-image: and background-color: CSS attributes to the same <td> — that way when the background image isn’t supported, there will still be a solid color.
Quick Tip: If you are coding an email and you are randomly getting extra pixels around your image, try adding style=”display:block;” attribute to the image.
Inline CSS
I know it’s been a while if you are a modern developer, but there is a reason to use inline CSS and it’s a good one: When an email arrives in your inbox, many times the entire <head> and everything inside it gets stripped out as well as any attributes inside <body>.2 Using inline CSS ensures that none of your styles are compromised and looks great across all email clients.
Quick Tip: If you want a background color for the entire email, be sure to create a container using a one-column, one-row table with the <table> attributes height and width set to 100% (not the <td> attributes). Put the background-color: attribute inside the <body> and inside the container table <td> to ensure the background color works across the board.
Nothing Fancy
Although it would be great to include a video or some cool Flash content in your email, these techniques as well as Forms, JavaScript and iFrames aren’t supported in all inboxes.3 These modern coding techniques are not widely accepted but are, in fact, possible. It is better to avoid them and, as an alternative, create a link to a page online where you have free range of any modern coding.
Quick Tip: Although not supported by all email clients, you can use an animated GIF to create some movement in your email. If an email doesn’t support your animated GIF, be sure the first slide is relevant because that’s the only slide that will appear in the non-supported email client.
Sources:
1: CSS Support Guide for Email Clients | Campaign Monitor
2: Coding your Emails - Campaign Monitor | Campaign Monitor
3: The Do's and Don'ts of Email HTML | Tutorials | VerticalResponse How To Do Everything
Mitch is a central figure of Miles’ email marketing team. When he’s not developing PHP email templates, making revisions to e-newsletters, publishing MySQL databases or deploying emails to millions of subscribers, you can find him scoring goals on the soccer field or enjoying other outdoor activities.
