Do's and Dont's of HTML Email Blasts.

Hey everyone, after a week off we are back with more helpful hints.

With the proliferation of email-blast software and websites all over the internet, its becoming increasingly popular for people to turn to these avenues in order to drive sign ups, direct to seasonal events, and really reach out and impress where a regular email would fall short.

One of the best aspects of these sites is their ability to let you craft a beautiful email-blast whether you have skills in HTML or not. Many people though can sometimes be a little to ambitious when diving into the HTML editors as they tend to carry their skill sets in designing websites into crafting their email blasts and they can be frustrated when the results do not match their efforts

Email clients such as Hotmail, Yahoo, Outlook, Gmail, etc., can render your emails in different ways. What looks one way in Yahoo or Outlook 2003 may appear very different in Gmail or Entourage.
The root of this problem is the variance among email clients in the level of support for CSS (Cascading Style Sheets).

There is no real standard for what an email client should support and how it should go about supporting it. Every email client takes its own approach to rendering HTML and CSS – which is why an email that looks fine in one email client can look different in another.

So how can you or your designer ensure an email design remains consistent and looks great across all these different email clients? Here's a helpful list of "Do's and Dont's" on email blasts and HTML.

Don't

Don’t link to an external .css file. This will simply be ignored or stripped by many email clients.

Don’t use CSS within the <style> section of your HTML code. Similar to an externally referenced .css file, many elements from this section will be stripped or ignored by a number of email clients.

Don’t use Divs to manage your layout.

Don’t rely on background images within your design. These are sometimes ignored, so you’ll end up with a plain white background instead of one that shows off your lovely background image.

Don’t rely solely on graphical HTML editors, even great ones like Dreamweaver. They generally default to use external CSS or header CSS to style the design (which is only natural, since this is exactly how you should create the style and layouts for a website). So no matter how good the design looks within the editor itself, you’ll end up running into issues with various email clients.

Don’t post forms, such as opt-in forms or surveys, within your message. Many email clients lack support for forms, so the submit button won’t do anything when your recipient clicks on it.

Don’t include videos within your message. A number of email clients have trouble with embedded video, and this will lead to the video either not working or being stripped out of the email entirely.

Don’t rely on an image-only / image-heavy design. Many email clients turn images off by default, requiring the recipient to click a button or link to turn the images on. So too much image content could leave your email in a bad state when the images are off.

Don’t use Flash elements in your design. Most email clients ignore / strip Flash.

Don’t use Javascript. It will be ignored or even treated as a security risk. Once someone receives a security notice about one of your emails, they’ll be unlikely to ever open another one.

Do

Do all of your styling via inline style attributes within the body of the document (i.e. < p style="border:1px solid #c00; font-size:12px;">).

Do use Tables for your layout. This is no longer common in web design and may sound archaic to anyone who has been designing web sites over the past several years, but it is the only way to be absolutely confident that your layout isn’t going to break somewhere.

Do use background colors, as they’re more reliable than background images. But even then, consider how your message will look against a white background, because it’s possible the background color will be ignored occasionally as well.

Do hand-code your own design. Or use our Canvas Editor if hand-coding is not something you know how to do.

Do link to forms that are hosted on your website, since these will always work just fine.

Do link recipients to the video on your site. A great method for doing this is to use an image overlaid with a play button (as you would see on a YouTube video before you start playing it) so that recipients automatically think to click the image to start the video.

Don’t rely on an image-only / image-heavy design. Many email clients turn images off by default, requiring the recipient to click a button or link to turn the images on. So too much image content could leave your email in a bad state when the images are off.

Do follow the 80/20 rule for balancing images with other content. If roughly 20% of your content is image-based and the roughly 80% is text / other stuff then you’re doing alright. You can certainly have a smaller percentage of images, this is just good to keep in mind.

Don’t use Flash elements in your design. Most email clients ignore / strip Flash.

Don’t use Javascript. It will be ignored or even treated as a security risk. Once someone receives a security notice about one of your emails, they’ll be unlikely to ever open another one.

I hope this has been helpful see you next week guys.
-Cheers!