Web Development Blog

One of my day to day working requirements is the ability to code mailers that’s compatible with all the major email clients and that off course includes the new stubborn member of the family, Outlook 2007.

By following the following set of guidelines you will be able to code mailers that will not only look good, but will also work in most email clients.

1. Do not use divs or any styling associated with div layouts. That means no floating, no padding or even margins. Rather use table, I know its old school, but this tried and tested and it works

2. Do not use styles in the head section of your page. Some coders tell you that you can, but you need to move it inside the body section. I find this practice to be equally ineffective. Rather use inline styling… I know it can turn out to be a lot more code, but most of the time you can get away with a lot of copying and pasting.

3. Do not use any form of background images. Previously you could successfully call background images by using the background= command in tables, but Outlook 2007 killed that for us as well… so if you are in a company where your responsibility does not include design, you can create an email design guideline document for the designers to use when designing.

4. OK, so now we are using tables… now we have to learn to use these tables to the maximum. Try not to use tables within your tables. Try using single tables. The reason for this is that Outlook 2007 will discard background colors if it’s for a table within a table or if there is another table in that cell. I always try to use colspan= and rowspan= to their full potential, otherwise I will split the mailer code up into smaller tables.

5. Do not leave measurements open for misinterpretation. Rather use the width= and height= properties on all your tables, td and img tags. This is not as important as some of the other guidelines, but I find that the less I leave to chance the better the initial outcome.

6. Do not use the paragraph tag to space lines of copy, rather use double break tags where the spacing should go. Some coders insist on using the paragraph tag and then styling them inline with margin 0 and padding as desired, but I find these methods to fail horribly on the web based clients like gmail, yahoo and hotmail.

7. Do not use the border css property on tables, as it will not end well. If you need to insert table content in your mailer (like a pricelist or something similar) and it needs to have a border, make cellpadding what you think it should be and make cellspacing= 1 and give your table a bgcolor. Now give each td bgcolor= #ffffff . This will give your table cells a border that will work on most of the clients.

There we go, I can’t think of anymore at this present moment. Maybe there is guideline you use when coding mailer? Feel free to add your tips and guidelines in the comment section below!