Outlook Signature Distorted in Other Email Clients

[blashmet]

I created an Outlook signature here (http://www.exclaimer.com/email-signature-creator/) and it works fine when someone views an email I send in Outlook. However, if I send email to a gmail address, the signatures font changes and the pictures get distorted.

The .html file and pictures the signature uses are in a local folder so I can edit them.

Is there a way to make sure the signature will work with other email clients and mobile devices?

Thanks for any help.

 

[blashmet]

Any ideas for this? I'm basically wondering how to make an Outlook signature compatible with all other email clients (including mobile)

 

[Diane Poremsky]

I'm guessing it's due to the way the CSS is added. Open the HTML page in Notepad - the CSS needs to be in every element, not as classes.

good:
style="font-size: 11px; color: #969696"

not good:
class="disclaimer"

On the picture, did you use one the exact size you wanted it, preferably no wider than about 500 px. You need to use the exact size - don't count on height and width measurements to resize it.

 

[blashmet]

It looks like there are some classes in the .htm file (attached). I specified the exact height/width for pictures. Do you see anything else that might be wrong?

 

[blashmet]

Any ideas?

 

[Diane Poremsky]

Focusing on the image first - how large is it? (in pixels) Can you post a picture of what it looks like in use so i can compare it?

 

[blashmet]

Different email clients are below. It appears to only work with Outlook addresses within the company. Any idea how to standardize it?

Gmail:

Outlook (sent to an address within the company, Outlook 2010):

Outlook (sent to Outlook 2013 at different company):

 

[Diane Poremsky]

Whoa. Is that really the size in Gmail? Is the browser zoomed? Do you have an HTML editor? I'd save the file you posted as an html file and tweak it - you can do it in notepad if you don't have an editor, but an editor with WYSIWYG mode would be easier.

Start with this:
<span style='font-family:"Eras Medium ITC","sans-serif"; mso-fareast-font-family:"Times New Roman"
Remove mso-fareast-font-family:"Times New Roman"

I'd either replace this: mso-bidi-font-size with font-size or add font-size: to the style, using the same values used for mso-bidi.

I guess Eras is a common font, at least in windows, but if it is not available, it should be replaced with sans-serif.

 

[blashmet]

I removed all references to Times New Roman and changed to static widths for the tables. It still shows up as large in gmail. I initially edited the file in Word, but am now using Dreamweaver. Any idea what else I can change?

 

[Diane Poremsky]

what are the dimensions of the image? Gmail won't use the height and width to resize the image - you need to use an image that is the exact size.