Creating Email Signature Images that Work Everywhere

This problem has bugged me for ages. If you put an image into an email, you never know how it?s going to look when it arrives in someone?s inbox. Depending on what the person is using to get their email and what settings they have turned on, the images could end up as attachments, or as a box with a big red ?x?, or jumbled up somewhere, or in some very unusual circumstances the images may even show up as you intended.

I decided to sit down once and for all and see if I could come up with a way to make an email signature what looked pretty and would display the same for everyone. After a good half day of experimenting with different types of image links, base64 encoding, and half a dozen CSS approaches, I came up with a solution that involved very basic CSS and TABLES of all things.

Here?s what I came up with, displayed properly in Outlook, Gmail, and iPhone.

Email Signature in OutlookEmail Signature in GmailEmail Signature on iPhone

What I?ve done is created a table with one row and a bunch of square columns. Then I used CSS turn each of those square table cells into an icon for each of little area of the web that I inhabit. Since I couldn?t use images, I was limited to using actual text, font colors and styles, and background colors to try to recreate the graphic. I?m pretty happy with the result, so I thought I?d share it in-case anyone else was looking for this kind of thing. If you want to use it, download the HTML/CSS for this table and pull out the columns you want. I’ve also pasted the html/css at the bottom of this post.

It does display slightly differently in the three instances that I tested above, but at least it all holds together well enough not to look broken. I found on iPhone there is a minimum font size, so that screwed up my fancier 2-row YouTube icon Youtube Email Signature. And Gmail always turns replies into double-spaced paragraphs, so that also messes with it a bit. If you find that this doesn’t work in another program let me know. Or if you have a better solution, I?m all ears!

PS. If your looking for your html email signature file in outlook 2010 so you can edit it, it’s at:

Leave a Reply

Your email address will not be published. Required fields are marked *