Thursday, April 11, 2013

When Good Emails Render Bad

Houston, you have a wingdings problem

Your email newsletter may have been conceived in love and raised under a watchful eye, but now it's talking in wingdings and ignoring every golden layout rule in Yahoo, Outlook and Gmail.

So, how do you teach it to play nice?

Exhale: HTML is still your baby
HTML email campaigns are not only more visually cohesive and polished than Plain Text, but historically also produce more clicks, consumer interest and traceable sales. It's obviously more appealing to show product pictures to your customers or include live links to relevant information. In addition, the DOS-reminiscent presentation of Plain Text is never a match for the brand-reflective power of HTML.

But if you're not following some simple Web Standards, your well-intentioned email campaigns can look like more of a maniacal bomb threat than a customized handshake.

5 tough love solutions for your HTML emails:

1. Avoid background images.
To efficiently separate content and design elements, images should be displayed inline. The CSS property, background-image is often not supported.

<background image: supported>

<background image: unsupported>

2. Keep FLOAT and CLEAR in proper balance.
FLOAT is the glue to your layout, while CLEAR ensures your FLOAT doesn't mask any images. If in doubt, avoid using FLOAT all together. Read more details here.

3. Be careful with your use of MARGIN and PADDING.
MARGIN alignment is the key to avoiding all-out text chaos in a bad render. PADDING is similarly critical, especially when used in conjunction with BACKGROUND-COLOR, LIST-STYLE-IMAGE and BORDER. Render test your emails first and find some fixes here.

4. Consider a different code to denote LINE SPACING.
To create a new line space, try using <br/> (shift+enter) instead of <p> (enter). Some readers push together new paragraphs, making your text look like this:

5. Don't ignore the importance of WIDTH and HEIGHT.
WIDTH directly impacts FLOAT and TEXT-ALIGN, so it's crucial to the overall look and tightness of your email. HEIGHT also lends a firm hand to overall readibility.

Phew - your HTMLs just avoided military school. But if they ever get out of line again - or you just want to learn more ways to enhance your email marketing - contact our JangoMail Support. We'd love to hear from you.

Have an idea for a future JangoMail blog? Talk to us