Email Design Essentials
Friday, August 29th, 2008The Absolute Beginning
The width of your email should be at a maximum 650px wide. This is so the subscriber doesn’t have to scroll left and right to view the emails message.
Also, another basic one which should never be forgotten. Try to keep all colours and fonts used in the email websafe. You may have a fantastic and weird font that suits your companies image, but that doesn’t mean the rest of your subscribers do.
Keep it websafe otherwise your text will revert to the default font for them and you don’t want that happening.
Try and keep your coding as clean and as minimal as possible. Don’t start putting tables in tables in tables (you get the idea)… You’re just asking for rendering issues!
Text to Image Ratio
Basic: A while back now email clients started to reject image rich emails as spammers were managing to avoid the spam word filters by just creating large images with their message in it.
As a basic rule, I usually suggest to clients that they have a 70% text to 30% image ratio in their emails to ensure that deliverability is kept to a high level. Though this may raise a designing problem, it’s something that any legitimate company should undertake to ensure that the recipients actually get the chance to read your message.
Advanced: There are of course ways to get around these problems; whitelisting and accreditation. Whitelisting is the cheapest solution to you and essentially requires your recipients to mark you as a safe sender in their inboxes. This way, it allows you to send whichever message you like to your subscribers and they will always receive them in their inboxes.
The only problem with the whitelisting technique is actually getting them to do this for your company and so, isn’t a viable option if you want image rich emails and a guarantee of inbox deliverability.
A way which does guarantee the delivery into an inbox is the accreditation method. This though, is a vastly more expensive method and usually is more viable for a medium to large company. The major accreditation companies are as follows:
Habeas - http://www.habeas.com/Services/For-Senders/SafeList/
Sender Score Certified - http://www.returnpath.net/senderscore/
Goodmail - http://www.goodmailsystems.com/
Surety Mail - http://www.isipp.com/suretymail.php
Certified Senders Alliance - http://www.certified-senders.eu/index_en.htm
Advanced Tip: Avoid 1px x 1px Spacer Gifs
Spacer Gifs have been used to force widths into tables in your email and you should try and avoid this – many clients mark these as spam.
Background Images
Basic: This is generally a no-no in todays email marketing world. A lot of you I’m sure, are wondering why I’m even mentioning this anymore but you’d be surprised by how many people still don’t know this.
A few of the email clients won’t show background images anymore which basically means that your email will look awful in about 30% of your recipients inboxes – a risk that isn’t worth taking.
Advanced: Okay, so you may still like to use background images as they can really improve the look of your template greatly. The best way I’ve found around this is to make a standard template that will look nice without the background images and then start to insert the background images after the basic template is created.
This way, you can feel safe that the 30% of recipients that won’t see the background images will still have a professional looking email message whilst the others will see an enhanced message.
Tip: Background Colours
Those pesky email clients may also remove your background colours as well. Best thing to do is put a 100% width table behind all of it and insert your background colour into that. Then place your newsletter within that table.
Advanced: CSS in Email Design
Quite a lot of the major email clients will block any css created within the <head> tags in the html code and will not render them in the email. This, can cause server issues with how your email looks and will leave the fonts defaulting back to its original state; usually black font, Times New Roman.
To avoid this, always use css as an inline tag instead if you are to use css at all. That way you can keep your css to below the <body> tags. Learn more about css inline tags here or just don’t use it at all and stick to the good old fashioned html font designing.
Basic Tip: Don’t Copy and Paste content from Microsoft Word
Microsoft Word tends to add extra code into the HTML code which can cause rendering issues in your email. This is also the case for creating whole HTML files in Word and then using them for an email campaign.
If you think you may have inadvertently done this for a campaign, use this link to try and remove the extra code.
Advanced Tip: Make sure the email is HTML Valid
A great way to ensure that you don’t have any rendering issues is to ensure that your email is html valid. You can check that here.
Design for an imageless preview
Most email clients don’t show your images as default. This is due to a point I previously mentioned about spammers using images to get their messages across or sending offensive material through to you.
The email clients decided that by initially blocking the images from being shown, they could let the subscriber decide whether or not they knew who the email was from and whether they wanted to view the images.
A clever email marketer will bare this in mind when they’re creating their campaign and will ensure that they can either get the message across or entice them to open the whole of the email.
This is another reason to adopt the text to image ratio I mentioned earlier.
Tip: Using Alt tags on images can help to deliver an extra message to people who have images turned off as default.
Remember the Preview Pane
Many of your recipients will view the email initially through their preview pane. As a designer, your job should be to try and get your message across to them in that short section of the email so as to entice them in further.
Tip: Try and include the main point of the email in this top bit to try and entice them to explore your email.
And there you have it. Keep to these guidelines and tips and you should be creating great-looking, effective emails. I hope this has helped you out and if I’ve missed any, please leave a comment to let everyone know.