There's a lot of information about best email marketing practices: best times to send, best programs to use and even niche ideas for good vs. bad subject lines, but the most recurring issue/question is, “Why does my email look differently in different email clients?”
You can find technical information about how different clients (Gmail, Yahoo, Outlook, etc.) read emails, but that can be hard to understand and doesn't necessarily explain the HTML tricks that make emails look the same cross-client.
To get your email aligned properly when you have a header, two or three columns, and a footer with four or five separate links spanning only 650px can be harder than a cat solving a rubik's cube.
Normal table markup looks something like what's provided below, and you can add more cells or <td>s depending on columns needed. However, most email clients won't read a table that has column or row spans. To work around that, make every table cell have its own table inside of it. That way, you can differentiate each table to have however many rows or columns necessary.*
Good Table
<table> <tbody> <tr> <td> </td> </tr> </tbody> </table>Bad Table (for email newsletters)
<table> <tbody>Best Table (for email newsletters)
<table cellpadding="0" cellspacing="0" border="0" width="600">*Note: This table within table setup can get long and tedious, so make sure you are organized. It can be helpful to actually draw on a print out of the email newsletter to see exactly where your break points should be (#oldschool but effective).
Make sure to identify the following attributes in the tables:
**Note: padding (set on the interior td) works but margin typically doesn't. If you're setting space on a paragraph or heading, use margin, but on a table, padding is what works cross-client.
It can seem a bit counter-intuitive that such a standard presentation of information ensues such frustration when it comes to making it look "right." Below are a few helpful snippets; some work well in certain email CMS HTML editors and some don't (i.e Outlook, which will strip the inline styles). Specifically the font-face attribute helped in the new HubSpot 3 email editor.
Standard OL or UL
<ul> <li> </li> </ul>Inline Styles can help for email newsletters
<ul style="margin: 0 0 0 40px;padding: 0;">Using Font attributes surrounding the UL can also help*
<font color="#434141" size="2">*Note: Save the font attributes for last; they prove most helpful when you're working in a system that has an HTML template editor and the email content separate from each other (i.e. HubSpot). If your HTML is directly in your tables without any separation, then the inline styles should work just fine.
If you've ever had the issue with Gmail or Yahoo displaying the footer with extra spacing, even though you set cellpadding and cellspacing to 0 already, try this:
Troubleshooting Gmail/Yahoo spacing issues = add font-size: 0;
<table cellpadding="0" cellspacing="0" border="0" width="600">So that's it! We've covered basic table within table to avoid col/row spans, using font attributes surrounding the unordered lists when your HTML template is separate from your content, and using a font-size: 0 on the td when Gmail won't recognize cellspacing and cellpadding. Hope it helps!
Had any luck with other troubleshooting techniques for cross-client emails in HTML? Let us know in the comments below!
Photo credit: anomalous4
Maddie Weber is a Web Developer for Kuno Creative. She truly enjoys being creative, drinking lattes, focusing on user experience for website design and development, and writing haikus. You can connect with her on Twitter.
