Tag Archives: email

Yellow Bird missing. Ransom note found.

I received a rather ominous email the other day from Yellow Bird Project. If you haven’t heard of them, Yellow Bird Project is an organisation that sells t-shirts that have been designed by an array of indie rock musicians. The profits from the shirts go to the charity of the musician’s choice. Their mascot is a little bird who, until now, has been safely residing across their branded materials. As part of a very cool new campaign to get their Facebook ‘likes’ up, the yellow bird has been abducted. According to the demands of the ransom note, the only way to possible to save his life is to ‘like’ the Facebook page. If they get 10,000 likes, the bird might be spared!

The campaign is supported by a range of ‘have you seen this bird’ and ‘save the bird’ posters.

This online social media campaign is effective because it makes you feel emotionally involved with the situation. Will it work? Well, I liked it.

Yours in online marketing,



HTML Email Campaigns

When it comes to HTML email campaigns, what you want to keep in mind is that tables are your friend… actually, your best friend! I generally use tables for every email I create at Brio Group. You need to make sure that you know the limitations of your users’ email client, whether it be GMail, Yahoo, Hotmail, Outlook etc.

A key point is to set the width in your table <td> tags. Don’t assume that if you don’t specify a width, the cell will just work it out, as I can tell you now, it won’t. Stick to pixels, percentages are not rendered properly in some email clients, especially Outlook 2007 which seems to have gone back in time. Avoid using CSS padding and margins on your cells –  if you can get away with using a nested table to do it, then use that. You will get a much better result in the real picky email clients.

When setting a background colour to your email, avoid doing it in the <body> and <head> tags using CSS. Use it in a table that is stretched 100% with the <td> cell background. E.g. <td bgcolor=”#000000″> for a black background. Unfortunately, Windows Live is not playing nice and requires a little more additional coding. Simply place the below code into the <head> section of the HTML email and that should do the trick.

<style type=”text/css”>
.ReadMsgBody { width: 100%;}
.ExternalClass {width: 100%;}

Never use CSS style in the <head> tag. As much as you want to, and are used to, stay away from it. It generally gets stripped by the email client. Use inline styles instead, you will be surprised on what does work with CSS inline styles on <p> tags for example. Most developers like to keep using the horrible and outdated (this really should have the same standing as ye faithful <blink>), <font> tag.

With your CSS styles, don’t use shorthand! Email clients might not accept that as a proper colour for instance. E.g. <p style=”color: #000;”>. Always use #000000 instead of #000.

Images in emails … well, try not to use to many of them! Using excess images may well cause your email campaign to end up in the spam bin. Also, most clients these days by default do not show images when the email is received, the user has to enable them.

Hotmail, for some baffling reason, adds some extra pixels of padding below images. A simple hack for this is to give a style of the image display as block. E.g. <img src=”your image in here” style=”display: block;” /> This should remove the padding and still give you results in other email clients.

There you go, some basics to HTML email creations. On a last note, just be wary of screen resolutions and the fact that there is an outside container for email clients such as folder listings, tool bars etc… so keep your design within a 650 pixel width.

And… Don’t forget to test!

Yours in HTML,