HTML Email design Guidelines
Text:Image ratio
- Emails containing large amount of images get a high SPAM score as the images can be used to hide SPAM messages. I suggest using at least 80:20 text:image ratio. If it is necessary to use a lot of images, there are techniques to make them less harmful.
- Always optimise the image file size. Make sure you use GIF and JPG correctly to get the lowest file size. Use JPG only for photos and images containing gradient colors. GIF - for plain sharp images.
Layout
- A standard email should not be wider than 600px.
- <table> is the most appropriate form of email layout.
CSS
- Go easy on CSS! There is absolutely no need to use CSS excessively. There is a thin line between an email that reaches the recipient and the email that ‘junks’. Many leading email clients got a poor CSS support. For example Outlook 2007 is using MS Word HTML rendering engine which means basic CSS support, no background images etc.
- Use only inline CSS.
A great article by CampaignMonitor about CSS support across different Email Clients:
http://www.campaignmonitor.com/blog/archives/2006/03/a_guide_to_css_support_in_emai.html
Link to HTML
- Never assume that the email will look exactly the same on all email clients even though you did all the necessary tests. Always include a “view online” or “can’t see this email?” link at the top for those that are struggling to see your message.
Multipart Email (HTML and Text)
- If possible always send multipart emails. If the recipient can’t see the HTML he will see the Text email. Think about those that use handheld devices to read their email!
Images
- Always use full path for the images.
For example: <img src=”http://yoursite.com/image.jpg” /> instead of <img src=”image.jpg” />
- Never put important information into the images. When designing an email always think what will the creative look like with the images missing, because this is what most recipients will see before pressing on “Download images”
- Alt tags are very important to describe the missing image. Never use spam messages in the alt tags like “Call now to claim your FREE DVD!!!” etc.
Image size parameters
- Be aware of what the missing image size parameters will do to your design. Also keep the filename neutral (don’t use “click_here.jpg”)
Image format
- The image format itself does not affect the email delivery in any way. It’s the image size that matters. Images containing solid colors should be saved as GIF’s and gradient images (photos) should be JPEG, JPG, PNG.
Can’t see this email?
- It does not matter how well you designed the email. There always be someone who is using a prehistoric email client and can’t see anything.
Source Code
- Keep the source code as tidy as possible. Remove all comments.
- Make sure the URL is as neutral as possible. www.your.site/greatfreeoffer.html. Make sure that the landing page URL is not Blacklisted. Happen to me three times so far when I spend hours of trying to resolve deliveribility issues by adding text and removing images when in fact the clients website was blacklisted.
“Textual links should be colored and underlined to achieve the best perceived affordance of clickability” Jakob Nielsen has written a great article about link colors. It is good practice to keep the URL’s blue as everyone will know that this is a link. This helps when dealing with “click here” buttons. Example “click to visit our online shop” can be changed into “visit our online shop”. It is a clear call to action that can not be misunderstood.
Unsubscribe link
- It is a legal requirement

March 11th, 2009 at 10:17 pm
[...] and whilst I’m at it, check out for more of the same, but in blog form by clicking here. Emarketing best practise :advertising, best practise, E-Marketing Blog, Email marketing, [...]
February 8th, 2010 at 9:51 pm
What a website you have here. You have a real knack for making a blog readable and easy on the eyes. Some sites look like train wrecks, but not this one ? it?s a pleasure to read. Don?t have time to read all the articles here, I found your site while looking for something else on Yahoo. But I?ve bookmarked your homepage and will visit it regularly to read what?s new
February 13th, 2010 at 9:53 pm
Ooh dang i just typed a big comment and as soon as i hit post it come up blank! Please please tell me it worked properly? I dont want to write it again if i do not have to! Either theblog glitced out or i am an idiot, the latter doesnt surprise me lol.
March 1st, 2010 at 10:19 pm
I am looking for the best autoresponder service I have been with with AWeber from the very beginning (for a couple of years now.) Thanks that you remind me I should write a post about their latest service updates. – Best regards
March 29th, 2010 at 8:27 pm
Great. Now i can say thank you
June 29th, 2010 at 7:51 pm
I have a different view, but I respect you for sharing this story.
August 14th, 2010 at 2:05 pm
Quer pagar R$0,39 por minutos com ligações para Celular DDD como se fossem ligações locais e DDD para fixo por R$0.09 por minutos. Acredite Ligações limpas e funcionais visite nosso site para conhecer os planos da ZigTelecom.