Attractive Email With CSS
3 min readHTML email seems to be stuck in the dark ages of nonstandard, ugly formatting. Even some of the leading email service providers are still including old, deprecated and browser-specific markup. Creating and maintaining HTML email that looks correct in all browsers and is supported by the majority of free email providers can be challenging but is well worth the effort. To this end, Cascading Style Sheets formatting can be applied inline with the “style” attribute.
The key is to start with a well-formed document that is near the XHTML specification. This means outer HTML tags, a HEAD section, and a BODY section. All major free email providers strip or reformat these sections so your email will be displayed correctly in their interface, and most desktop email clients honor correct markup in this format to some degree. You need to include a TITLE tag, but most if not all email clients will ignore it.
Many email clients will essentially ignore the BODY tag, and display the markup within the BODY tag. To set your main or default formatting, the first element within the BODY should be a DIV. The “style” attribute should be applied to this DIV. For example, “text-align:center;font-size:12pt; will result in 12-point centered sans-serif text. Use markup that has conventional semantics within this DIV, such as H1 for the first header. The style attribute can be used with any markup that will be displayed in an HTML email. For example, “font-size: 18pt;background-color:yellow;color:white” applied to your H1 markup will make the text white on a yellow background at 18 points. The H1 will inherit the “” from the DIV containing it, so the text will still be centered.
Paragraphs and unordered lists should use the P tag and UL tag, respectively. A distinctive look for paragraphs is fully-justified text. A style attribute like “text-align: justify; line-height: 200%;” has an interesting, readable look. Adding “padding-left:10em;padding-right:10em” to the style attribute adds approximately 10 characters of space on either side of the paragraph, giving a “block quote” look.
You can even add borders. A style that results in a coupon-type look could be along the lines of “border: 2pt dashed black; margin:4em” applied to a DIV. Everything within that DIV could be formatted to look like a coupon.
Images are very powerful in HTML emails, but many email clients will not display images by default, and in some cases not at all. To maintain the look of your layout, it’s important to provide meaningful alt text and style attributes to the IMG markup. If, for example, you have an image of your newest book that is 200×200 pixels, good alt text might be the book’s title, but most important is a style attribute with “width:200px;height:200px” so that the missing image still occupies the space it would have if it was displayed. Compelling alt text will inspire readers to load images, allowing open tracking to work.
When you’ve achieved your desired formatting with inline style attributes, be sure to test the email as widely as possible. At minimum, you should test your email in the Gmail, AOL, Hotmail and Yahoo web interfaces with at least Internet Explorer 7 and Firefox, and also view it in the Thunderbird and Outlook Express email clients. That should cover the vast majority of recipients.
Following these tips, your HTML emails should render well in all browsers and clients, degrade gracefully in restrictive clients, and require less effort to maintain as opposed to a tangle of FONT and CENTER tags.
