We create several HTML newsletters each month. All have their own unique look and feel, but do share some general rules that provide compatibility across the majority of browsers, clients, platforms, and systems.

Here we will cover some of those rules. I will note, however, that these are my general rules, and not necessarily practiced or enforced by all.

Set a defined width
Since most emails are received within an email client or web-based email service, you can’t be guaranteed of the space available for your content. You could obviously set a width of 100%, and let your content scale with the user’s display area, but in reality this can wreak havoc on any design you are trying to retain. In general, you want to keep your layout within 550-650 pixels. I use a fixed width of 600 pixels. This allows me to create content that is exactly 600 pixels wide, and will look exactly the same regardless of who is viewing it.

Use inline styles
When developing a website, every developer would cringe at the thought of using inline styles, but in the email world, they are your best friend. On a website, you’d create classes and share them among all of the pages on your site from a central file. Unfortunately, in an email, clients strip or won’t render those classes. So, make sure to define all fonts, sizes, coloring, et cetera using inline styles.

Use tables
Again, another no-no in the website world, becomes very helpful with HTML emails. Email clients are dated applications. They don’t render global CSS very well, and don’t keep up on standards. It’s best to organize your content using tables, as opposed to DIVs or other structuring methods.

Forget about background images
This might seem like a good idea at first, but again, most email clients won’t render them, and you will be left with an email that is either a horrible design, or simply not readable.

Don’t set specific dimensions for your images
Most web-based email clients will not display inline images by default, and instead ask the user’s permission before displaying them. The best course here is to not define the image’s height and width. This will reduce the amount of white space that is seen before the user hopefully allows those images to load.

Use ALT tags
ALT tags are assigned to images and other elements. When the user has images turned off be default, and you have properly defined ALT tags, those tags will be used in place on those images until they load. Make sure to use ALT tags that describe or match the image.

Don’t use Javascript
Plain and simple, don’t even try. It won’t work, and will only increase the chances that your email gets flagged as spam.

Include a plain text option
I personally prefer to receive all email as plain text. If I want to view the HTML version, I turn it on. Plain text lets me get to the content quicker. It’s easy to include both versions as one, single email, and the recipient’s client displays the version based on their local settings.

Keep it simple
That means content-and-design-wise. Keep huge blocks of text to a minimum. If you need to share more of a story, include a read more option, and link it to your site. In general, it’s easy to keep your design simple – the outdated email clients are enforcing that. Keep the use of images to a minimum, and make sure they are optimized to speed download time. Make sure to host your images on a server that is fast, and always available.

There you have it, 9 tips for creating an HTML email. Again, not standards-based rules, just ones I prefer to enforce locally.

This has been today’s Clarified Butter.