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.
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.
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.
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.