Why is my email breaking apart!?-Four Email Graphic Design Tips that will help

Let’s say you’re just about done putting together your email content. It’s approved to send out and you’re proud of how great it looks. You send yourself a test email for one final check… and it’s completely blown apart! What do you do? Before you light your computer on fire and throw it at the nearest intern, check to see if it’s one of these top 4 issues.

Are you using only inline CSS and HTML tables? If your text is displaying without all your fancy colors, sizes and fonts, you’ve probably formatted them using an embedded or linked style sheet. Make sure all your content is formatted with only inline CSS or HTML. Stay away from using CSS for positioning – use old-school tables instead.
Were your images saved at the correct size before you placed them in your HTML? An image saved at a size too big for your email template may break it apart… even after you’ve set the correct sizes in your HTML. A few email clients will ignore your HTML image attributes, so even though you’ve sized down your beautiful 1200px by 1700px banner, it may display at its original size – stretching out the rest of your email. Save your images at their final sizes before you place them in your email content (or Delivra’s Media Library).
Does your HTML contain lots of nested tables or tables with merged cells? Excessive use of nested tables (tables set inside tables) or complicated tables with merged cells can cause problems. Plan ahead and lay out your content before you take it into HTML. The more you tinker with your HTML as you put it together, the more likely it is that problem-causing invisible elements will be left in it.
Are you using background images or colors? Code placed in or above the <body> tag can be stripped out – so any background colors or images here may be lost. It’s safe to use background colors in your tables and table cells, but some clients won’t display background images regardless of whether it’s set in HTML or CSS. Place a background color along with your background image just in case (especially if you have white text over it).

For more tips on coding your email content, check out Delivra’s HTML Coding Guide or our HTML Editor Help Guide.

Celeste Odell | Graphic Design