Rules for creating email signatures

How to create almost unbreakable HTML email signatures. The first thing to remember is to keep it simple. Some mail clients remove images from signatures no matter what you do so, plan for this. The  fewer images the better. All set dimensions must be exact. No percentages.  Your coding must be as tight as possible and your design as simple as possible.

Please find some basic rules to follow below:

Use an initial <br> tag to signify the start of the signature.

All signatures MUST be enclosed in a global <table> – use colspans and additional tables inside the global table if necessary.

All tables must have at least the following attributes:

  • border
  • cellspacing
  • cellpadding
  • width (exact)
  • height (exact)
  • bgcolor (optional)

Use inline styles on each tag for styling.

<tr> tags MUST have NO attributes.

<td> tags must have at least the following attributes:

  • width (exact)
  • height (exact)
  • colspan (optional)
  • valign (optional)
  • All links should have a target=”_blank” attribute

Careful consideration must be given to images in emails as many mail clients remove them on replies leaving behind out of shape blocks of white space with text referring to the missing image, which renders the signature broken. In order to minimise breaking there is one trick:

  • All images must be placed with in <span> tags. This removes the block and leaves behind a simple underline. Keep this in mind during the design phase. (What will the signature look like with the image removed?)
  • If you sized your images to twice the shown size to ensure clarity, please also add in inline styles to the img tag, which specifies the resized height and width: <span><img src=”{{pic.jpg| }}” style=”display:block; width: 195px; height: 169px; max-width: 195px;” width=”195″ Height=”169″ alt=”” /></span>
  • Logos and icons should all be .gifs if possible .jpgs  are also good for photographs.

Some CSS style properties are not supported at all (or at least not by the major mail clients). These include:

  • padding
  • margin

And that is it – It is very simple and easy to do if you stick to the rules. If you would one of our pro’s to do this for you, get in touch at info@databias.co.za

Related KB articles