HTML email Check List

Tips for designing

So you’ve got your content ready and your images picked out and you want to get started right away with putting your template together and get it out to your contacts. Here are some tips to increase the chances of your email template getting through. First of all if you have your text typed up or your message laid out in Microsoft Word I’m here to stop you from a copy paste nightmare.

No Word
Microsoft Word is a typing tool NOT an html editor. Its not meant to be used in this manner. The reason Word is not good to use in your html email is this; Word adds its own code that only it understands. It doesn’t like to play nice with others and can cause formatting issues in some WYSISUG (What You See Is What You Get) editors. If you don’t understand html then you are probably going to be using one of these types of editors because you can put your content in and it will ‘spit out’ the code on the other end for you to use in your email.

Also, Spam filters go nuts over this special Word code. If they find it in the html of your message. This can get your message caught in filters. Especially if you copy/ paste your subject line from Word… a BIG no no! I’ll cover this more in depth in another post so for now lets just say its better to type your text directly into your html editor or code for the die hards out there.

Time Out
Give your self time to design and build your template, especially if this is your first one. Don’t wait till the very last minute you’ll drive your self crazy! I would recommend actually working on the template a at least two days before it actually has to go out this way if you run into any snags you don’t have your boss or client asking every 20 minutes “is it done yet?” You’ll also not have to worry about hitting your dead line.

I know this stuff sounds more like common since but its good to put it out there. The more common since something is the more likely it can be forgotten especially if you have waited till the last minute. So on to the meat of the matter.

Preview Panes
Ignoring preview pane sizes when designing your template is a bad idea. Most people hardly ever view their email fully opened. The majority of them will read your message in their email client’s preview pain. Each email client has there own standard size and orientation for their preview pains. For example, Mozilla’s Thunderbird’s preview pain is Horizontal while Outlook’s is vertical. Aol’s preview pain is one of the smallest out there at 194 pixels while Mac Mail’s preview pain defaults to 570pixels.

What to do:

• • Don’’t design your emails too wide. Keep in mind that people don’t mind scrolling up and down. So you don’t have to worry about height. But they really don’t like scrolling left to right. Actually most of them will not even notice they have to all they will notice is that some of the words or an image are cut off to the right of the message. I would recommend the max width for your design be no larger than 600 pixels.

• • Your call to action’ should be above the fold line. This is an old print term used mainly in the newspaper industry. It refers to the area above the actual fold line of the paper and the content you see there. When you look at a folded newspaper the publications logo is there along with the headlines and the cover story. This is were the most important information is printed this is what they want you to see first. If you turn that folded paper over that side usually has the table of contents and the rest of the top story continued.

They have been known to attach viruses, spy ware, and code that will track the open of the images in there email so they can figure out which email addresses on the list they bought are going to in boxes that are checked so they can continue to spam them and not waist there time with the bad email addresses. Pretty tricky stuff I know and this is why it is hard to get legitimate email with images though. Spam filters look for this kind of thing.

• • Left-align your company logo. This will make sure that it is seen in the preview pain and will add credibility to your email.

Images
Assuming images will work on the first try is another mistake when designing an email template. Many email clients computer based as well as web based are by default not allowing images to render when the email first gets to the in box. The number of email clients that are doing this is constantly increasing. This is part of security and privacy protection settings. Even virus scanning software like Norton are not allowing emails with images hosted externally to be opened. We can thank the dirty spammers out there for this.

They have been known to attach viruses, spy ware, and code that will track the open of the images in there email so they can figure out which email addresses on the list they bought are going to in boxes that are checked so they can continue to spam them and not waist there time with the bad email addresses. Pretty tricky stuff I know and this is why it is hard to get legitimate email with images though. Spam filters look for this kind of thing.

What to do:

• • Make sure you use the Alt attribute on all of your <img> tags. You can ask them to please allow the images to render, you can give a general suggestion on how to render them like ‘click on the link above or select for images to render’ and you can always add a description of the image. But be careful of giving too much away about the image. You say too much and they have no real reason to allow it.
• • Do NOT put important stuff in as an image. Always use text for this. If the image doesn’t render then they’ll never find out that the meeting is at 9am Monday.
• • Always use the full URL/address for all of your images! Your email client and the email clients of others need to know exactly were to go to get the image. An example of this would be: http://www.yoursite.com/myimage.jpg

• You could get email certification but this coast money and is no guarantee it will get to all the contacts. What happens with this is your message will arrive into the in box with the images turned on by default. If this will fit into the budget of the project and your boss or client feels this is worth it then go for it.

The Golden Ratio
The golden ratio of Text to images is a balance of images to text in your html email. If you’re too heavy on the images with not enough text then the spam filters are going to get you. There is a current trend, I think because a lot of designers don’t know any better, were the email is being created in something like Photoshop. All the layers are merged together including the text and then it’s sliced up in to strips or into many small bits. Then fed into an html editor to put humpty dumpty back together again. Honestly this takes a lot of time and effort to create a message this way. And if you are one of these designers you should use the time more wisely and learn html.

Your message will more than likely get caught in a spam filter. There are also issues of all the bits not coming back together again properly. You could end up with gaps between the bits and that’s not very professional looking. This is a classic spammer move. Filters look for key words so they try to get around this by making there message one big image with the text part of the image so it can’t be read. But the filters have caught on and they can’t tell between a super pixilated spammy eflier and your legitimate email as of yet so its not discriminating. Some filters are placing the image to text ratio even higher than the key word criteria.

What to do:

• • Don’’t create the war and peace of email. Use your email to entice them to your web site. Less is more in email if you can try only using a hand full of images (1 or 2 for thoughts of you with big hands) and a lot of text talking up your web site. Post the rest of the pictures there.
• • Using thumbnails in place of larger images can work better than trying to come up with more text to balance out the larger images.
• • If your text is just one or two lines don’t insert more than one or two images. If you are using a bulk email service a lot of them will supply a spam check. You can use this to gage if you need to add more text to balance out the images. Keep in mind though that these things are just estimations of the probability your message would get caught in a spam filter. It’s not set in stone or a guarantee that it wont if you have a low spam score. You may also be able to find some software you could use on your own for this.
• • If your html code is impeccable and your one jenormus image is quite compressed you might get away with getting it through with just a line or two of text. If you don’t even know html I would stick to the less is more theory with your images.

Test Time
Not testing your email in at least the key email clients is a big boo boo in email design. There are a few dozen email clients out there and there is no standardization on how email is rendered across them. It’s a free for all with all of them having there own ideas on how to render messages. Its like designing a web page were you should test across web browsers accept there are more of them and there is no sign of standardization anytime soon. So pulling hens teeth might be more fun but its not going to get that email out.

What to do:

• • Test your email in as many email clients as you can. Most of the online emails are free or relatively cheap so it may be in your best interest to get an account with as many as you can. Because they are free or cheap a lot of people have them. If your messages are business to Client emails it would be good to test in these types of accounts. This will help you avoid getting that email or phone call from your boss or client “ um ya I had a few aol people say they didn’t get the message” or “why dose it look funny in my gmail account?”
• • If you can get to some computer based email clients to test that would be good too. Once like Outlook Express or Eudora. A lot of businesses use these so if you’re doing Business to Business email it’s a good idea the test with these.
• • If you have access to a PC and a Mac it would be a good idea to test in both platforms. Especially if you know you have some Mac users in your contacts list. Sometimes things will look good on your pc in your outlook account but look totally different on a Mac in gmail.

• Unless you know that everyone on your list is using just one email client you should code with more than one email client in mind. This is a very rare instance unless your mailing your co- workers internal email addresses. I’ve seen a lot of designers that have a list of contacts they collected from a mailing list sign up form and they just try to design for outlook when the list is a bunch of web based email clients but there using outlook. They can get the message to look good in their outlook account but they have not taken into account that their contacts are probably not going to be looking at the email in the same email client. Don’t be this person.

CAN SPAM Act of 2003
If you are creating legitimate email then you can not forget about the footer. You must always have a way for your contacts to unsubscribe and your physical address in the footer of every single email you design, it’s the law! The Can Spam Act of 2003 outlines what is considered legitimate email by the US government. If you break the law you can get sued (up to $11K for each recipient)!!! The FTC has already been actively suing some well known companies for breaking the law. They don’t care if it was an accident or not.

Here is what you need to have:

• • Always include an unsubscribe link.
• • Always include your physical (postal) mailing address. P.O. Boxes are not sufficient.
• • Bonus points for including a permission reminder to prevent the any ‘Stop sending me this S$%#!!! I didn’t sign up for it!’ situations.

• Your footer is not just for your recipient to read. Assume an abuse desk or a deliverability department at some major anti-spam organization is checking your message out. Trying to figure out if it’s legit and was opted into. The more details you can provide the better.
• If you have a privacy policy, link to it in the footer.

Scripting Languages In email
Don’t get to Fancy Shmancy with your email. Email doesn’t support things like Flash, JavaScript, ActiveX, etc. These things were designed for web sites that stay in one place. Not your email that’s going to have to travel through many servers and filters before it gets to its destination. These types of things can loose bits and pieces of them selves along the way and show up not working, get your message caught in a spam filter, or just show up as a blank page. Don’t send a you tube video or an MP3 or your favorite song in your email.

What you can do:

• • Post them on your web site and hyper link to them in your message.
• • Add an image from the video to your message and use that to link to the video online.
• • Post your video or sound file to a landing page and link to the landing page in your email.

Hope this helps get you started just a few things to think about while your creating email templates.

Filed under code, design, learn, resource, web design, xhtml | Comment (0)