Erin Reeve | |
October 4, 2017
No one wants to put together a stunning HTML email only to have it ruined by not rendering properly in a recipient’s inbox. More importantly, rendering problems affect critical campaign metrics (e.g., click-through and conversion rates) and can have a significant impact on the success of an email marketing campaign.
Rendering problems occur because every email client interprets and reads your email’s HTML code differently. Fortunately, there are steps you can take to combat these issues. In this post, we’ve listed 5 tips for avoiding some of the most frustrating rendering issues with the three most popular email clients: Apple, Outlook and Gmail.
Tip #1: Use a table-based layout: Using table (instead of div) tags can help you avoid positioning and box model issues that cause unique rendering issues in different email clients.
Tip #2: Apply padding to td tags: Collectively, both Gmail and Outlook do not support padding in paragraph, div and other tags. A common way to overcome this is by using a table-based layout and creating padding and margins in td tags. Additionally, using padding instead of margins can help you avoid common rendering issues that Outlook is known to cause. To ensure that your email renders properly across email clients, you will want to use tables and table cells for nearly everything in your email (this includes buttons!).
Tip #3: Keep your HTML file small: Gmail automatically clips emails that exceed 102kB. To overcome this, decrease your file size by removing unnecessary style tags and attributes by 1) going through the code and 2) not copying the code from text editors like Microsoft Word (which can add additional tags).
Tip #4: Shorten your CSS styling block: Gmail removes style blocks that exceed 8142 characters - so make sure that your style block does not exceed this limit!
Tip #5: Make sure that text is large enough: The iPhone native email app automatically resizes any body text that is under 14px and any header text under 22px. To avoid resizing issues (which can completely change the look of your email), make sure your body and header text meet this threshold.
These are just a couple of tips to help you avoid some of the most common rendering issues that email marketers experience when sending emails to clients that use Outlook, Gmail and Apple. If you have more time, the resources below provide more tips and an even deeper dive into why and how rendering problems occur. For more information on how to use the new CV Echion email editor embedded in ClearVantage Association Management Software, head to the Learning Resources page of Euclid's website.
Resources