15 Gorgeous and Effective HTML Emails

Notice: This is a discussion thread for comments about the SitePoint article, 15 Gorgeous and Effective HTML Emails.


What’s your favourite example of great HTML email design?

Great article with excellent examples!

Skeptic magazine also has a great looking newsletter called e-skeptic which goes out as an HTML email.

I think that it may be difficult to do so and mostly depends on the web mail services you are using.

I took a break from free-lancing and from Sitepoint, but I am back having been developing my skills as an email for over 18 months now, overseeing and sending out around 80 campaigns a month. So perhaps my experience might be useful…

As Force Flow suggests it’s back to basics. Across the different Webmails and browsers you can only reliably use the following attributes/styles if you want your creations to be reliable :
background color, bgcolor, border, color, font-size, font-style, font-family, font-weight, line-height, padding, text-decoration, text-indent and text-transform, (rarely used but also ok : letter-spacing, font-variant, table-layout, border-collapse.)

If you stray outside of these you run into problems.

When you have several images side by side in a line (e.g. a menu), best to put the “tr” and “td” in its own isolated table. Avoid rowspans like the plague and use colspans with care. Images should usually be put in their own tds with out any spaces between the <td> and <img src=“”> because it gets messy and creates gap lines if you leave spaces between the brackets. For example:

<td width="xxx" height="yyy"><img src="b.gif" style="display:block;" border="0" width="xxx" height="yyy"></td>

is the best rendering code structure.

For Outlook (and generally) ensure that: [LIST]
[]The width and height are defined (as in code above) at the “img” and “td” level or images wont render reliably.
[
]Remove “height” defined at the <table> level.
[]Equally, you cannot reliably declare and render padding in all four directions (i.e. style=“padding:2px,7px,0,3px;”) it simply doesn’t work.
[
]Avoid paragraphs <p> and lists <ul> and <ol> - the rendering can explode images that encircle free text - use <div> instead.
[*]Even if gmail removes all styles in the head it is good practice to reinforce your rendering in other zones by putting <style type=“text/css”> img{border:0;display:block;} </style> in the head of the document.
[/LIST]
Hope these tips are useful if you are stuck. Happy to help with other particular rendering issues.

Interesting little site I stumbled across related to the rendering engine choice of outlook: http://fixoutlook.org/

And a side-by-side comparison of an example email: http://farm4.static.flickr.com/3322/3637814200_a2aa59bc89_o.jpg

Easily create the message that’s right for you With our Email Marketing, you don’t need special technical or design skills to create html emails. If you can cut, paste, point and click, you’re good to go!

Customize it to make it look like your brand Start with any of our 400+ professional email templates, then make it your own with your logo, colors, and photos. Use your own imagery to start from scratch, or let us help you get you started with our custom services.


http://knowyourart.info/

The reasoning (supposedly) behind switching to the Word rendering engine was to make it easy for non-technical authors to create their content in Word and then be able to paste it easily into an email and have it render the same. So that’s why they didn’t use Webkit, or even Trident. I’m not sure how much of the noise made about that decision in recent times has influenced MS to do anything about changing it in future versions.

OE and outlook were using IE’s trident rendering engine. Outlook 2007 now uses Word’s own HTML rendering engine to render HTML.

Many are talking about email software or firewalls blocking images from being automatically displayed. I don’t think there is a way around it, these are just the features of the email programs or the firewalls. But these things shouldn’t really stop you from creating good HTML emails. I think Yahoo has an option to block images or display them. It’s up to the user - the way it should be anyway.

This is why I hate coding HTML emails… I feel handi-capped - I want to spend as little time as possible doing so.

Here’s an idea. Why doesn’t outlook and co. use Webkit or something for HTML email?

Stepping stone to what? Flash or a ‘real programming language’ like PHP? :slight_smile:

HTML email design and development is always a tricky one! The major headache is usually when it comes to the testing stage.

As MikeVision says, Outlook 2003 and Outlook 2007 are the source of most problems because they use the Word HTML rendering engine to display emails. On top of that each have their own little quirks too.

The more you work with HTML emails the better you become at ironing out all these quirks in each email client, but you’re still likely to come across something that doesn’t render quite right.

Unfortunately quite often you have to compromise, but thats the nature of the beast!

Having said all that, it is still possible to push the boundaries a little. Take ‘Panic’ (the guys that make coda and transmit apps for mac) for instance. This case study of their latest campaign is an interesting read;
http://www.campaignmonitor.com/blog/post/3116/what-you-can-learn-from-panics-email-marketing/

Most of the time, code the email like it’s 1999. And send it as a multipart message–HTML for folks who can read it, and text for those who can’t or won’t.

Coding like it’s 1999 again means: nothing fancy with CSS, mostly inline styles attribute tags (since webmail tends to strip linked style sheets or style tags in the head), and tables for layout (and sliced images if you choose to go that route).

Then, there’s also the practice of at the top of the email, including a link to the newsletter on your website. “If this newsletter doesn’t display correctly, click here to view it in your browser”, or some such thing. Although, I’ve seen this feature fall in and out of practice several times.

Gmail design is very simple yet very faster to access. I never like clumsy designs which take too long to load mails.

I have been dealing with HTML e-mails for years now and have found that Outlook and Hotmail are the two worst of the bunch. I have had little to no problem with AOL. I would consider the former the dreaded ones! It’s too bad Microsoft can’t get their own products to render the same. They also do not care about developers all that much with their decision to still use Word to render their HTML e-mails in Outlook. Such a shame they completely ignored a huge blog posting on their site with people practically begging and pleading for them to stop them from using Word. *sigh
[URL=“http://www.mikevision.com”]

MikeVision, welcome to SitePoint. I’ve had similar experiences, Hotmail and Outlook are bugbears for mailings. Currently the organization I work with uses a MailChimp template that seems to work well in most e-mail clients, but I’d like to be able to do more without breaking someone’s display.

I think almost web mail will block all the images from the email, so is there anything better way to do that?

These are all important questions to ask, and they represent the “low hanging” fruit of email marketing. It’s relatively easy to change a subject line or reschedule a mailing.

It’s much harder --but equally important – to get your email design right. And it’s a sad truth that designing great HTML emails is 10 times harder than designing regular web pages. Unlike the web, with its relatively small number of browsers and quirks, HTML emails get rendered in all sorts of odd places. Gone is Firefox and Internet Explorer, and enter Outlook, Outlook Express, Mac Mail, Gmail, HotMail, Yahoo Mail, and the dreaded AOL Mail. And you thought the browser wars were tough!
[URL=“http://gpsreviewed.com/garmin/”]

I put a lot of thought on this and that is why in all of our newsletters we make sure to include a link to an online version of the newseletter. Also we try our best to make the email look as good as possible without the use of images. Of course images are necessary but steps are taking to insure the design does not fall apart merely because images are turned off.

One question that has always piqued my interest is how should we think about the design of the email with regard to users who accept html email but may have images turned off by default? For example, this seems to be the default setting in gmail. So in essence I think that sometimes we need to design an email that would lead users to select to view the images in the email, yes? Just curious how much thought is usually put into this aspect.