It’s a great idea to have a branded email template for your campaigns. They are a bit of a mine field so you may be better utilising the pre-made templates that you get with Mailchimp or Aweber. Other email clients are available!!
So today I’m going to share a little info about the design and what you can expect from an HTML email written for something like Campaign Monitor. Campaign monitor recommend that you choose which browsers you are coding for first as getting perfect results in all clients is impossible. This sounds like good advice to manage expectation from the start… The trickiest to get right are GMAIL, Lotus and Outlook 2007…
General Coding
Under 600px wide, this is supposed to help the scalability in the mobile browsers but not all will cope well. Iphones and Blackberry should be OK. To stop text resizing add -webkit-text-size-adjust: none;
Forget CSS layout, we need tables and nested tables.
Keep CSS inline – Start with a style sheet in the head if you have to you can then run it through a tool that can take the header CSS and place in-line. Campaign Monitor recommend this one Premailer…
Avoid shorthand coding, keep colours 6 digit and other css that can shorted like fonts.
Set margins and padding for as many elements as possible, especially paragraphs.
Set colours on every link as many browser override link colour to their own. Use an empty span around the link text.
Images
Design
Not all email clients can see images – if the main part of your design is made up of images you need to be aware that the reader may just see an email full of empty boxes. That is hardly going to encourage them to make that essential click to read on. Assume no-one can see images in the first instance.
Background images that are used in web cannot be read by some clients so these need to be avoided or replaced with a fall back background colour.
.pngs cannot be read by some clients, only use .jpgs or .gif files
Code issues
Background images that are used in web cannot be read by some clients so these need to be avoided or replaced with a fall back background colour. This is an issue for both design and code.
Some Outlook versions have a bug that adds white space – use img {display: block; } to avoid.
On images always add the dimensions in pixels and add alt text too – remember those images are likely to break.
Never float images, always use the align tag and align top where you don’t think you need to align.
Good Luck!!
