The Dark Art of HTML email build

So designers out there, at some stage in your career, it’s likely you’ll be asked by a client to design a HTML email, that's the easy bit, more to the point you'll be asked to build that design into a working, cross email client HTML email. Therein lies the problem the biggest challenge for designers still remains building an email that renders well across all the popular email clients. Here are some top tips on the dark art of email build.


How wide should me email be?

Each email client uses up real estate for stuff like menus, the inbox on the left in outlook and advertsing. So the amount of space you have to play with is limited. Create an outer table and centre it. That should be a fixed width of between 550px - 600px wide, this ensures that there is no annoying horizontal scrolling for the user.

Keep it simple

That means bin javascript, ajax and definitely bin flash. The only client to recognise and display flash is mac mail and whilst Apple mail is on the increase it's still not a majority player. Check your client base see which browsers and email clients they are generally using. Not surprisingly mobile devices are on the up and so is gmail.

Lowest Denominator

Here's the think there are A LOT of email clients and the more complicated the design the less people will be able to view it correctly. So keep the design simple, keep the graphics small and put key information outside graphical format.

HTML Rules

• Use tables for layout
• Use a container table to set background colours
• Use nested tables and remember for each nested table you'll need to redefne the font family, font size and colour.
• Move all CSS inline
• Avoid shorthand CSS including hexdec values
• Beware the paragraph. Whilst clients are now starting to support tags, beware they all interpret them differently. Try and set padding on 's rather than
  tags. Set margins inline on each tag.
• Links: you'll need to specify the colour of each link inline in the href.
• Don's use float it don't work!

Images

Remember a lot of email client turn off images by default so if you have big grabbing headlines try and use text not graphics. This goes for any other important information. Whilst it is tempting to design a large graphical email and chop it up into tiny winy bits in a table and call it an email, it's a bit of a lazy solution. You can't think web design when designing email you have to think email design and the limitations that brings. Make sure your client is aware of those limitation too and you'll avoid all sorts of trouble and disappointments.

Hotmail adds pixels of padding below any image! Yeah go hotmail. So in the header (because hotmail reads the header) set this workaround  img {display:block;} and don't ask it'll drive you mad.

Don't use PNG's lotus certainly ignores them and I image other client fuss over them too. Stick to JPG's and GIF's.

Always including the dimensions of your images but remember that many clients will also ignore those so make sure your images are the right size too.

Make sure you have alt text assigned to your images, see above for blocked images on many clients. 

Alternative Viewing

I always try and have a "Can't see this then click here" at the very top of the email in text only and then load an HTML version onto a server so people can see the email even if they use the world's worst email client.

Testing

Finally TEST RETEST and TEST again. Litmus is a fabulous (if slightly pricey) piece of software which allows you to run HTML through most email clients and see the (often very frustrating) results.