Creating HTML emails and newsletters

Written by Ironpaper | December 05, 2010

Creating and designing HTML emails and newsletters can be quite a frustrating experience. Perhaps the largest problem with HTML email design is the broad range of devices and software which render and read email messages from Outlook, Mac Mail, to free email clients like Hotmail and even mobile devices (each of which render email differently). Achieving cross-browser capability for email is a daunting task to say the least. Even after you get the basics figured out and gain a generally acceptable experience across a broad range of clients, you still need to consider the widths at which different clients and readers display your HTML newsletter design. To add to the frustrations, as many mail client providers have increased the support for HTML within email, Microsoft has sadly gone backwards and introduced less capabilities for rendering HTML email.

Two common ways of creating an HTML email or newsletter:

Coding by hand (our recommendation because it gives you the most control and ability to troubleshoot)
An existing email template plus the use of a WYSIWYG editor (less precision and control)

Two common methods for coding them:

Use HTML tables to create the structure and general layout (pure CSS web development does not work entirely for the email world, because the definitions and coding may be stripped out or ignored by the various clients
Use inline CSS to create both the structure and you can use it for styling elements throughout your presentation or design

Some things to remember ( here are a few no, nos):

Do not use CSS shorthand like "font: 14px/16px"
If you use CSS style declarations, you must not place them in the <head> tag
HTML tables should do most of the layout work: DIV and SPAN can be used, but tables are better for layout
Keep CSS inline

View full post