Strict Multi-Device Formatting for Email Signature via Gmail
New here? Learn about Bountify and follow @bountify to get notified of new bounties! x

I’m designing an email signature for my company. It’s nearly complete, but I’m having an issue that I can’t find a solution for.

This HTML code (below) is meant to prevent our email signature from showing links for the phone numbers, address and URL when it is read with email clients and email apps on smartphones. It is also meant to force the signature to show in a fixed table width so that the long address line doesn’t extend wider than a smartphone’s screen. The code works well in most cases, but when it comes to using the email signature in Gmail, I’m unable to get it to work properly when viewed on a smartphone. All the design constraints work with the exception of the fixed table width.

From my understanding, the only way to create a customized HTML signature in Gmail is to open your HTML in a browser, Select All, Copy, go into the email settings in Gmail, and to Paste into the signature field. When I review the code after it’s gone through Gmail, it seems like Gmail reconfigures the code in a way that ignores the fixed table width, and therefore renders the email signature incorrectly on a smartphone (see attached image #01).

So, this is the coding task: to find a way to force the email signature, after it’s gone through the Gmail signature settings page, to show properly on a smartphone (please test in Mail on an iPhone). The signature should look like this (see attached image #02); which was made using the HTML in Apple Mail.

Also, if you find a way to clean up the code in any way while still achieving the desired result, please do so. Although this isn’t necessary.

Image #01
http://s32.postimg.org/3zqmi1e2t/example_01_via_Gmail_signature.png

Image #02
http://s32.postimg.org/p5ph9qv7p/example_02_via_Apple_Mail_signature.png


HTML (My code is 36 lines, but Bountify seems to be reading and converting the code in the preview window. If you don't have all the code, let me know of a way to get it to you, please.)

<!doctype html>



* {-webkit-text-size-adjust: none}
a[x-apple-data-detectors] {
color: inherit !important;
text-decoration: none !important;
font-size: inherit !important;
font-family: inherit !important;
font-weight: inherit !important;
line-height: inherit !important;
}





MICHAEL FRANKFURT
Head of Relations


9000 Banksway, Santa Marria, CA 90000
P 888.775.7777  C 888.775.7777


ThisIsMyURL.com







If a more elegant solution is presented, I will definitely tip. Actually, I'll probably tip either way (if it's I get a proper solution) because I really just need this done.
Thanks!

Hi, I don't get the full HTML code from your email, could you please insert it in a fiddle ? https://jsfiddle.net/
kerncy over 3 years ago
awarded to kerncy
Tags
css
html
email

Crowdsource coding tasks.

2 Solutions

Winning solution

It seems that I achieved it by using Gmail Labs with "Canned Response" utility.
Then you will have to edit the HTML directly in your browser using the "inspect mode" and copy/paste your HTML signature with style and html code directly in the gmail source page.
The "Canned Response" Utility will be used to store the response with HTML format.

Here is a screencast of how to do it with all the steps : https://www.dropbox.com/s/1088910xjosc7hb/Gmail-Signature.mp4?dl=0

I don't have an iphone to test, but on my old ipad in the email app, it displays well.

Sorry for the "hacky" solution, but it is the only one I found that seems to manage your problem
kerncy over 3 years ago
Hi kerncy. I was excited to test your solution, as it seemed like it might do the trick. Unfortunately, I still get the same result on my iPhone (http://s32.postimg.org/dzzwx2005/IMG_5430.png). When I view the Raw Source of the message in Apple Mail, here's what it shows (https://jsfiddle.net/#&togetherjs=E3P6c0QrrN). This is a better result than what I've seen when I've tested it before using the 'Canned Response' approach. But it's still making the iPhone not recognize the 'fixed width' command in the code, whereas when I use the same HTML in an Apple Mail signature, the command is respected. It's possible that I didn't follow your screencast perfectly, but I’m pretty sure I got it. I’ll try again, but wanted to get back to you. Thanks!
techweather over 3 years ago
Hi kerncy. Just letting you know that I tried it again and stayed very true to what you did in your screencast this time. On the first try, I hadn't typed 'right click' so what I was seeing was slightly different. Anyway, this time around yielded the same result on the iPhone.
techweather over 3 years ago
Hi, thé fiddle you posted for comment is empty. Could you please send it again ?
kerncy over 3 years ago
Sorry about that. Try this https://jsfiddle.net/znjs89g3/#&togetherjs=hDISEfUymN
techweather over 3 years ago
It seems that GMail remove all style element when including a signature, that's why the -webkit-text-size-adjust: none doesn't seems to work. You can try to inline it in your table with a style="-webkit-text-size-adjust: none;" in the table declaration
kerncy over 3 years ago
I've tried this before using the Optimizer fuction on Email on Acid’s site (https://www.emailonacid.com/). It inlines all style elements into the HTML. I went ahead and tried this again, but this time using your ‘Canned Response’ approach. Still doesn’t work. I did some new research and found this posting (http://freshinbox.com/blog/gmail-on-ios-increases-font-size-on-some-emails/). I gave it a try, but it’s still not working. There’s a possibility I didn’t apply their recommended fix correctly. Since they’re not talking about a Gmail email signature, but a custom HTML email (for newsletters and such), their fix might not apply.
techweather over 3 years ago
A possible solution would be to create the signature as an image and making clickable area for the different links. Could this fit to you ? Should I make a try ?
kerncy over 3 years ago
I don't want to use a solution that involves turning the text into images because I need to use this signature template for several team members, as well as potential new team members in the future. Editing text in HTML, instead of editing text within a Photoshop file and exporting, is preferred. Thanks for offering it as a possible solution.
techweather over 3 years ago
If you have a webserver that allows PHP to run, you can dynamically create your image signature using gd by passing parameters like "signature.php?firstname=Michael&lastname=FRANKFURT&tel=..&mail=...". This will allow to use a fixed image width with clickable map but dynamic content. You will juste have to pass all the dynamic datas to the script. http://www.phpforkids.com/php/php-gd-library-adding-text-writing.php
kerncy over 3 years ago
I really like this suggestion, but it's probably making the setup process just a little too complicated for me. I'd rather find a different workaround that still utilizes html. Thanks so much for all of your thoughts on this problem. I really think that Google's code for their signature just makes what I want impossible to do.
techweather over 3 years ago

I've managed to create nice signature in Plunker with media queries, but copy/paste into gmail copies only one state, so i did a research and found that it is not possible, or very buggy to include media queries in email.

Also, another way would be with javascript, but it is not recommended since it has some serious security risks.

The only possible way would be tweaking design a little bit, and if it is not desired to split address in two lines, i propose this as a solution:

<style>
* {-webkit-text-size-adjust: none}
a[x-apple-data-detectors] {
color: inherit !important;
text-decoration: none !important;
font-size: inherit !important;
font-family: inherit !important;
font-weight: inherit !important;
line-height: inherit !important;
}
</style>
<table border="0" style="font-family:'times new roman';font-size:medium;line-height:normal;table-layout:fixed">
<tbody>
<tr valign="top">
<td><a href="http://www.worldwatch.org/splash-page-test" style="text-decoration:none;color:rgb(128,128,128)" target="_blank" ><img height="108" width="96" src="http://s32.postimg.org/57m76o1s5/TEMP_logo_108px_x2.png"></a></td>
<td style="font-size:8.5px;font-family:gotham,'helvetica neue',helvetica,arial,sans-serif;color:rgb(128,128,128);white-space:nowrap">
<div style="font-size:11px;letter-spacing:0.2px;margin-bottom:4px">MICHAEL FRANKFURT</div>
<div style="margin-bottom:8px;letter-spacing:0.1px">Head of Relations<br></div>
<div style="line-height:1.6">
<a href="https://www.google.com/maps/place/Eiffel+Tower/@48.8583701,2.2922926,17z/data=!3m1!4b1!4m5!3m4!1s0x47e66e2964e34e2d:0x8ddca9ee380ef7e0!8m2!3d48.8583701!4d2.2944813" style="font-size:8.3px;text-decoration:none;color:rgb(128,128,128)" target="_blank">9000 Banksway, Santa Marria, CA 90000</a>
<span>&nbsp;</span><br>P&nbsp;<a href="tel:8887757777" style="text-decoration:none;color:rgb(128,128,128)" target="_blank">888.775.7777</a><span>&nbsp;</span>&nbsp;C<span>&nbsp;</span><a href="tel:8887757777" style="text-decoration:none;color:rgb(128,128,128)" target="_blank">888.775.7777</a><br></div>
<div style="margin-bottom:12px"><a href="http://www.worldwatch.org/splash-page-test" style="text-decoration:none;color:rgb(128,128,128)" target="_blank">ThisIsMyURL.com</a></div>
<a href="https://www.facebook.com/Test-Page-301396262700/" style="text-decoration:none;color:rgb(128,128,128)" target="_blank"><img height="12" width="13" src="http://s32.postimg.org/hsa9qzd35/social_v001_fb_x2.png"></a><span>&nbsp;</span>
<a href="https://twitter.com/page99test" style="text-decoration:none;color:rgb(128,128,128)" target="_blank"><img height="12" width="19" src="http://s32.postimg.org/sfrichl35/social_v001_tw_x2.png"></a><span>&nbsp;</span>
<a href="http://www.electricstyles.com/pages/instagram-feed-test-page" style="text-decoration:none;color:rgb(128,128,128)" target="_blank"><img height="12" width="21" src="http://s32.postimg.org/xrtdtwq2p/social_v001_inst_x2.png"></a>
</td>
</tr>
</tbody>
</table>

Screenshot with working example:
http://s32.postimg.org/6tw2ebwat/13225070_10209266094826713_1109229611_o.jpg

If you need help implementing this signature, please don't hesitate to ask.

Best wishes,

Alekandar Gajic

Alekandar, Thanks for trying to help. I've already spent countless hours trying to make this work without changing the signature design. But thanks for offering that up as a possible solution. I'm holding out for a fix. Maybe it's just not possible because of what Google does to the coding on their end.
techweather over 3 years ago
View Timeline