HTML based Email

Emails should be 600-800 pixels maximum width. This will make them look better within the preview-pane size provided by many clients.Design for simplicity is a plus and less is more. Use grid-based layers and avoid complicated elements that require HTML floats or positioning. Assume images will be initially blocked by email clients, or that certain images background images, an example will completely fail to load.Don’t design an email that’s one large, blurry images. While these kinds of emails look pretty, they perform poorly and don’t loot that great.Use the cross-platform fonts such as Arial, Verdana, Georgia, and Times New Roman.Avoid elements that require Flash or JavaScript. If you need motion in an email, a .gif is your best option.Don’t forget about the mobile experience. That can help a lot.Asking these questions is good’ Is your email readable at arm’s length on a small screen? Will the images slow its load time on a mobile device? Are your links easy to press with a thumb?

Much like with design, there are best practices to follow when coding HTML email.Code all structure using the table element. For more complicated layouts, you should nest tables to build complex structures.Use element attributes (such as cellpadding, valign, and width) to set table dimensions. This forces a box-model structure.Keep your CSS simple. Avoid compound style declarations (IE: “font:#000 12px Arial, Helvetica, sans-serif;”), shorthand code (IE: #000 instead of #000000), CSS layout properties (IE: slot, position, clear, visibility, etc.), complex selectors (IE: descendant, child or sibling selectors, and pseudo-elements)Inline all CSS before sending. Use only absolute links for images, and host those images on a reliable server. Don’t bother with JavaScript or Flash—those technologies are largely unsupported by email clients.Account for mobile-friendliness, if possible. Use media queries to increase text sizes on small screens, provide thumb-sized (~46x46px) hit areas for links. Make an email responsive if the design allows for it.Test, test, test. Create email accounts across various services, and send emails to yourself. Do this in conjunction with services such as Litmus.(

HTML email newsletters have come a long way since this article was first published back in 2006. HTML email is still a very successful communications medium for both publishers and readers. Publishers can track rates for email opens, forwards, and clickthroughs, and measure reader interest in products and topics; readers are presented with information that’s laid out like a web page, in a way that’s more visually appealing, and much easier to scan and navigate, than plain text email.(


Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s

%d bloggers like this: