Optimizing an Email Signature

HTML & CSS
1

I realize my signature is never going to show up the same for everyone, but I was wondering if I could get some help here with maybe getting it to a point where it’s closest to the same for everyone.
Currently im using span styling. Below is the html i’m using for it right now and below that is what it looks like for me.

<span style="display:block;line-height:1;font:11px/11px Helvetica;margin:0;padding:0;color:#222;">
	Regards,
</span>
<span style="display:block;clear:both;60px;height:60px;margin:0;padding:0;"><img src="http://i.imgur.com/wntBurs.png" width="106px" height="60"></span>
<span style="display:block;line-height:1;font:11px/11px Helvetica;margin:0;padding:0;color:#222;">
	Danny Michel<br>
	Editor | VAR Magazine, Inc.<br>
	521 5th Avenue, 17th Floor | NY NY 10175<br>
	+1-347-762-1512<br>
	<a href="http://varmag.com/">http://varmag.com/</a> | <a href="http://twitter.com/VarMagazine">http://twitter.com/VarMagazine</a> | <a href="https://www.facebook.com/pages/VAR-Magazine/306301159458333">http://www.facebook.com/VARMagazine/</a><br>
</span>
<span style="display:block;clear:both;line-height:1;font:italic 10px/10px Helvetica;margin:0;padding-bottom:5px;color:#666;">
	CONFIDENTIALITY NOTICE: This email, including any attachments, contains information from VAR Magazine, which may be confidential or privileged. The information is intended to be for the use of the individual or entity named above. If you are not the intended recipient, be aware that any disclosure, copying, distribution or use of the contents of this information is prohibited. If you have received this email in error, please notify VAR Magazine, Inc. immediately by forwarding message to <a href="mailto:info@varmag.com">info@varmag.com</a> and destroy all electronic and hard copies of the communication, including attachments.
</span>
<span style="display:block; max-width:100%;height:99px;position:relative;"><img style="width:auto;max-width:100%;" src="http://i.imgur.com/DqsCMFg.jpg"></span>


Thanks in advance for any help.

2

Out of curiosity, why the <span> tags? Every one is styled {display:block}. Why not use block tags like <div> or <p> to start with?

3

<p> leaves the signature as “quoted text”

4

Hi,

For best results you would be better off putting the elements into an old fashioned table/table-cell structure and let the positioning be handled by the table cells themselves. Email clients don’t much like any form of positioning so its best to arrange their layout via table formatting instead. e.g. when you want horizontal alignment use table-cells and not floats or othe positioning schemes.

It’s always a a bit hit and miss with email so a lot is trial and error and seeing what works best with the content in hand. The Campaign monitor site has some good resources for email and its worth just looking at the code in their templates to get an idea of the best way forward.

5

Thank you. Other than putting it into tables and table cells, the css i use is valid and works well, cross email client/website?

6

The campaign monitor site has support tables here but in the end it really is a matter of testing in the email clients that you want to support.

The code you posted looks simple enough but as Ron said using spans and then setting them to display:block could be hit and miss as some older email clients don’t support ‘display’ so you get inline spans instead. If you used divs where you wanted block level elements then that issue would not arise.

Margins and dimensions are also awkward in html email which is why its often better to pad out a cell rather than using a margin when you want space.

It al depends on the problems you are seeing and some simple html may be ok in most modern email clients but generally content is best inside a table.