Pages

samedi 9 avril 2011

Coding Horror: HTML in Gmail

I am OK with badly written HTML on a daily basis if I have to. But a signature is something one has time crafting properly. And so, I would like to be able to create a clean HTML signature. Plus, experience told me that even the signature is not that clean when copied and pasted from a mail. Pure HTML is so much better.

I WANT to be able to instert my HTML signature in code way, not WYSIWYG way!

Not convinced? See for yourself:

First the result:
David Latapie

Informatique
Email : david.latapie@adnfrance.org
Agence du don en nature — 35, avenue d’Eylau 75116 Paris

Standard : 01 76 21 10 50 | web: http://adnfrance.org

Vous n'avez pas lu notre dernière newsletter ? Cliquez ICI !



Pensez à l'environnement : n'imprimez ce courriel que si nécessaire.


Then the clean code:

<div><img src="http://dl.dropbox.com/u/20188079/LOGO-ADN-sig.jpg" height="55" width="96"></div></div>
<address> style="font-style:normal";<strong>David Latapie<br />
Informatique
Email : <a href="mailto:david.latapie@adnfrance.org" style="color:#36F">david.latapie@adnfrance.org</a>
Agence du don en nature — 35, avenue d’Eylau 75116 Paris<br />
Standard : 01 76 21 10 50 | web: <a href="http://adnfrance.org/" style="color:#36F" target="_blank">http://adnfrance.org</a><br />
<a href="http://dl.dropbox.com/u/20188079/ADNImpact/ADNImpact-2011-03.pdf" target="_blank" style="color:#C3C">Vous n'avez pas lu notre dernière newsletter ? Cliquez ICI !</a><br />
<br />
Pensez à l'environnement : n'imprimez ce courriel que si nécessaire.</strong>

Then (beware), Gmail’s horrible code:

<img src="http://dl.dropbox.com/u/20188079/LOGO-ADN-sig.jpg" height="55" width="96"></div>
</b></span></span></div></b></span></div></b></span></div></b></span></span></div></b></span></span></div></b></span></div></b></span></div></b></span></span></div></b></span></span></div></b></span></div></div></b></span></span></div>
</b></span></div></b></span></div></b></span></span></div></b></span></span></div></b></span></div></b></span></div></b></span></span></div></b></span></span></div></b></span></div><div style="font-weight: bold;"><span style="font-family: arial; border-collapse: separate; font-weight: normal;"><b><div style="display: inline ! important;">
<span style="border-collapse: collapse; font-family: arial,sans-serif;"><span style="font-size: 13px; font-weight: normal;"><b><div style="display: inline ! important;"><span style="font-weight: normal;"><span style="font-size: 13px;"><b><div style="display: inline ! important;">
<span style="font-weight: normal;"><b><div style="display: inline ! important;"><span style="font-family: arial; border-collapse: separate; font-weight: normal;"><b><div style="display: inline ! important;"><span style="border-collapse: collapse; font-family: arial,sans-serif;"><span style="font-size: 13px; font-weight: normal;"><b><div style="display: inline ! important;">
<span style="font-weight: normal;"><span style="font-size: 13px;"><b><div style="display: inline ! important;"><span style="font-weight: normal;"><b><div style="display: inline ! important;"><span style="font-family: arial; border-collapse: separate; font-weight: normal;"><b><div style="display: inline ! important;">
<span style="border-collapse: collapse; font-family: arial,sans-serif;"><span style="font-size: 13px; font-weight: normal;"><b><div style="display: inline ! important;"><div style="display: inline ! important;"><span style="font-family: arial; border-collapse: separate; font-weight: normal;"><b><div style="display: inline ! important;">

<span style="border-collapse: collapse; font-family: arial,sans-serif;"><span style="font-size: 13px; font-weight: normal;"><b><div style="display: inline ! important;"><span style="font-weight: normal;"><span style="font-size: 13px;"><b><div style="display: inline ! important;">
<span style="font-weight: normal;"><b><div style="display: inline ! important;"><span style="font-family: arial; border-collapse: separate; font-weight: normal;"><b><div style="display: inline ! important;"><span style="border-collapse: collapse; font-family: arial,sans-serif;"><span style="font-size: 13px; font-weight: normal;"><b><div style="display: inline ! important;">
<span style="font-weight: normal;"><span style="font-size: 13px;"><b><div style="display: inline ! important;"><span style="font-weight: normal;"><b><div style="display: inline ! important;"><span style="font-family: arial; border-collapse: separate; font-weight: normal;"><b><div style="display: inline ! important;">
<span style="border-collapse: collapse; font-family: arial,sans-serif;"><span style="font-size: 13px; font-weight: normal;"><b><div style="display: inline ! important;">David Latapie</div></b></span></span></div></b></span></div></b></span></div>
</b></span></span></div></b></span></span></div></b></span></div></b></span></div></b></span></span></div></b></span></span></div></b></span></div></div></b></span></span></div></b></span></div></b></span></div></b></span></span></div>
</b></span></span></div></b></span></div></b></span></div></b></span></span></div></b></span></span></div></b></span></div><div style="font-weight: bold;">Informatique</div><div style="font-weight: bold;">Email : <a href="mailto:david.latapie@adnfrance.org" style="color: rgb(17, 37, 8);" target="_blank"><font color="#3366FF">david.latapie@adnfrance.org</font></a></div>
<div style="font-weight: bold;">Agence du don en nature — 35, avenue d’Eylau 75116 Paris</div><div style="font-weight: bold;">Standard : 01 76 21 10 50 | web: <a href="http://adnfrance.org/" target="_blank"><font color="#3366FF">http://adnfrance.org</font></a></div>
<div style="font-weight: bold;"><span style="font-family: arial; border-collapse: separate; font-weight: normal;"><b><div><span style="border-collapse: collapse; font-family: arial,sans-serif; font-weight: normal;"><div><div style="display: inline ! important;">
<b><a href="http://dl.dropbox.com/u/20188079/ADNImpact/ADNImpact-2011-03.pdf" target="_blank"><font color="#CC33CC">Vous n'avez pas lu notre dernière newsletter ? Cliquez ICI !</font></a></b></div></div></span></div></b></span></div>

<div style="font-weight: bold;"><br></div></span></span></div></span></div></div><span style="font-size: 10pt; color: black; font-weight: bold;"><div style="display: inline ! important;">Pensez à l'environnement : n'imprimez ce courriel que si nécessaire.</div>

Still with me? Please Google, do something! It is not just a matter of aesthetics or bandwith: It also made it very hard or even impossible to manage HTML signature for all employees in my company!

1 commentaire:

  1. Just to let you know I found a way of doing this easily... Copy and paste your html initial signature, then go use DOM inspector of chrome/safari/firefox to edit the HTML source to your exact needs!

    I have a problem with Gmail not saving the --a href="tel:XXXX"-- tag correctly (well, weirdly it saves correctly initially, then when i go back to visit the settings page it deletes the tag).. Do you have any idea of how to report a bug?

    Jose

    RépondreSupprimer