Many designers and developers struggle with creating HTML email designs that are functional yet aesthetically pleasing; especially when images have been disabled by an email client or web browser. Making sure your email design ‘degrades gracefully’ is a compromise that so many of the creative community have been forced to make.

Even the team at Greensky have spent countless hours on design tweaks and hacks that allow for real cross browser and email client compatibility. And after 16 coffees and 3 sleepless nights (and in a manner of speaking – giving up on the lack of ‘support’ from the email clients themselves), we said what if? What if we aimed for a truly image free HTML email design?

The rewards would be vast for a design that met these criteria:

• Lighter HTML (for page loading)
• No image hosting worries
• No grey boxes or misalignment due to disabled images
• Better joy with SPAM filters
• Quicker HTML builds
• Greater flexibility over design changes

Nonetheless one must still worry about the same CSS styling problems that would occur when creating image based HTML email design. For example height, width, and spacing should be referenced definitively in order to force tables and containers to display as per your original design. Also, inline-CSS is the only sure fire way to make sure your styling information is interpreted and rendered correctly (it’s a pain, we know!).

But enough talk and more action we hear you say! Well we accept the challenge. Below you will see the working layout for our new newsletter meeting said requirements: Appealing design, consistent layout, cross browser and email client tested, and most importantly without using any images whatsoever.

If you would like to have access to the HTML code that makes up this design or to see the live page in action – fill in the simple form below; we’ll add you to our mailing list, where you will then receive design, technical and creative updates from greensky as well as access to exclusive offers and discounts.

ShareThis

Tags: design, development, email, html, image-free, images, technical

This entry was posted on Wednesday, March 31st, 2010 at 6:45 am and is filed under blogs. You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.