Signature mail HTML responsive

julie -  
 DoctorHow -
Bonjour,

Help, j'ai besoin d'aide concernant ma signature mail.

Lorsque je fais un mail depuis MAC vers un gmail par exemple, les images apparaissent uniquement sur la version mobile :/

De, plus comment faire pour que celle-ci soit responsive ?

Ci dessous le code : 
<p>Bien cordialement,</p>
<table cellpadding="0" cellspacing="0" class="sc-gPEVay eQYmiW" style="vertical-align: -webkit-baseline-middle; font-size: medium; font-family: Arial;"><tbody><tr><td><table cellpadding="0" cellspacing="0" class="sc-gPEVay eQYmiW" style="vertical-align: -webkit-baseline-middle; font-size: medium; font-family: Arial;"><tbody><tr><td style="vertical-align: top;">
<table cellpadding="0" cellspacing="0" class="sc-gPEVay eQYmiW" style="vertical-align: -webkit-baseline-middle; font-size: medium; font-family: Arial;"><tbody><tr><td class="sc-TOsTZ kjYrri" style="text-align: center;"><img src="https://img-19.commentcamarche.net/WNCe54PoGxObY8PCXUxMGQ0Gwss=/480x270/smart/d8c10e7fd21a485c909a5b4c5d99e611/ccmcms-commentcamarche/20456790.jpg" role="presentation" width="130" class="sc-cHGsZl bHiaRe" style="max-width: 128px; display: block;"></td></tr><tr><td height="30"></td></tr><tr><td class="sc-TOsTZ kjYrri" style="text-align: center;">
<img src="https://img-19.commentcamarche.net/WNCe54PoGxObY8PCXUxMGQ0Gwss=/480x270/smart/d8c10e7fd21a485c909a5b4c5d99e611/ccmcms-commentcamarche/20456790.jpg" role="presentation" width="130" class="sc-cHGsZl bHiaRe" style="max-width: 130px; display: block;">
</td>
</tr>
</tbody>
</table>
</td>
<td width="46">
<div></div>
</td>
<td style="padding: 0px; vertical-align: middle;"><h3 color="#000000" class="sc-fBuWsC eeihxG" style="margin: 0px; font-size: 18px; color: rgb(0, 0, 0);"><span>Jean </span><span> </span><span>DUPONT</span></h3><p color="#000000" font-size="medium" class="sc-fMiknA bxZCMx" style="margin: 0px; color: rgb(0, 0, 0); font-size: 14px; line-height: 22px;"><span>
qsdfqsdf
</span>
</p>
<p color="#000000" font-size="medium" class="sc-dVhcbM fghLuF" style="margin: 0px; font-weight: 500; color: rgb(0, 0, 0); font-size: 14px; line-height: 22px;">
<span>qsdfqdsf</span>
<span> | </span>
<span>dfqsdsf</span>
</p>
<table cellpadding="0" cellspacing="0" class="sc-gPEVay eQYmiW" style="vertical-align: -webkit-baseline-middle; font-size: medium; font-family: Arial; width: 100%;"><tbody><tr><td height="30"></td></tr><tr><td color="#f2547d" direction="horizontal" height="1" class="sc-jhAzac hmXDXQ" style="width: 100%; border-bottom-width: 1px; border-bottom-style: solid; border-bottom-color: rgb(242, 84, 125); border-left-style: none; display: block;"></td></tr><tr><td height="30">
</td>
</tr>
</tbody></table>
<table cellpadding="0" cellspacing="0" class="sc-gPEVay eQYmiW" style="vertical-align: -webkit-baseline-middle; font-size: medium; font-family: Arial;"><tbody><tr height="25" style="vertical-align: middle;">
<td width="30" style="vertical-align: middle;"><table cellpadding="0" cellspacing="0" class="sc-gPEVay eQYmiW" style="vertical-align: -webkit-baseline-middle; font-size: medium; font-family: Arial;"><tbody><tr>
<td style="vertical-align: bottom;">
<span color="#f2547d" width="11" class="sc-jlyJG bbyJzT" style="display: block; background-color: rgb(242, 84, 125);"><img src="https://cdn2.hubspot.net/hubfs/53/tools/email-signature-generator/icons/phone-icon-2x.png" color="#f2547d" width="13" class="sc-iRbamj blSEcj" style="display: block; background-color: rgb(242, 84, 125);"></span>
</td>
</tr>
</tbody>
</table>
</td>
<td style="padding: 0px; color: rgb(0, 0, 0);"><a href="tel:0600000000" color="#000000" class="sc-gipzik iyhjGb" style="text-decoration: none; color: rgb(0, 0, 0); font-size: 12px;">
<span>0600000000
</span>
</a>
</td></tr>
<tr height="25" style="vertical-align: middle;"><td width="30" style="vertical-align: middle;"><table cellpadding="0" cellspacing="0" class="sc-gPEVay eQYmiW" style="vertical-align: -webkit-baseline-middle; font-size: medium; font-family: Arial;">
<tbody>
<tr><td style="vertical-align: bottom;"><span color="#f2547d" width="11" class="sc-jlyJG bbyJzT" style="display: block; background-color: rgb(242, 84, 125);"><img src="https://cdn2.hubspot.net/hubfs/53/tools/email-signature-generator/icons/email-icon-2x.png" color="#f2547d" width="13" class="sc-iRbamj blSEcj" style="display: block; background-color: rgb(242, 84, 125);"></span></td></tr></tbody>
</table>
</td>
<td style="padding: 0px;"><a href="mailto:***@***" color="#000000" class="sc-gipzik iyhjGb" style="text-decoration: none; color: rgb(0, 0, 0); font-size: 12px;"><span>***@***</span></a></td></tr><tr height="25" style="vertical-align: middle;"><td width="30" style="vertical-align: middle;"><table cellpadding="0" cellspacing="0" class="sc-gPEVay eQYmiW" style="vertical-align: -webkit-baseline-middle; font-size: medium; font-family: Arial;"><tbody><tr><td style="vertical-align: bottom;"><span color="#f2547d" width="11" class="sc-jlyJG bbyJzT" style="display: block; background-color: rgb(242, 84, 125);"><img src="https://cdn2.hubspot.net/hubfs/53/tools/email-signature-generator/icons/link-icon-2x.png" color="#f2547d" width="13" class="sc-iRbamj blSEcj" style="display: block; background-color: rgb(242, 84, 125);"></span></td></tr></tbody></table></td><td style="padding: 0px;"><a href="//www.test.fr" color="#000000" class="sc-gipzik iyhjGb" style="text-decoration: none; color: rgb(0, 0, 0); font-size: 12px;"><span>www.test.fr</span></a></td></tr><tr height="25" style="vertical-align: middle;"><td width="30" style="vertical-align: middle;"><table cellpadding="0" cellspacing="0" class="sc-gPEVay eQYmiW" style="vertical-align: -webkit-baseline-middle; font-size: medium; font-family: Arial;"><tbody><tr><td style="vertical-align: bottom;"><span color="#f2547d" width="11" class="sc-jlyJG bbyJzT" style="display: block; background-color: rgb(242, 84, 125);"><img src="https://cdn2.hubspot.net/hubfs/53/tools/email-signature-generator/icons/address-icon-2x.png" color="#f2547d" width="13" class="sc-iRbamj blSEcj" style="display: block; background-color: rgb(242, 84, 125);"></span></td></tr></tbody></table></td><td style="padding: 0px;"><span color="#000000" class="sc-csuQGl CQhxV" style="font-size: 12px; color: rgb(0, 0, 0);"><span>2, place du test test test test test test  test test test </span></span></td></tr></tbody></table><table cellpadding="0" cellspacing="0" class="sc-gPEVay eQYmiW" style="vertical-align: -webkit-baseline-middle; font-size: medium; font-family: Arial;"><tbody><tr><td height="30"></td></tr></tbody></table><span style="display: block; text-align: left;"><a target="_blank" rel="noopener noreferrer" href="//" color="#6a78d1" class="sc-fAjcbJ byigni" style="border-width: 6px 12px; border-style: solid; border-color: rgb(106, 120, 209); display: inline-block; background-color: rgb(106, 120, 209); color: rgb(255, 255, 255); font-weight: 700; text-decoration: none; text-align: center; line-height: 40px; font-size: 12px; border-top-left-radius: 3px; border-top-right-radius: 3px; border-bottom-right-radius: 3px; border-bottom-left-radius: 3px;">prendre rdv</a></span><table cellpadding="0" cellspacing="0" class="sc-gPEVay eQYmiW" style="vertical-align: -webkit-baseline-middle; font-size: medium; font-family: Arial;"><tbody><tr><td height="30"></td></tr></tbody></table></td></tr></tbody></table></td></tr></tbody></table>
<img src="https://i.goopics.net/itxtzp.png" alt="Image"width="900" alt="" style="max-width:500px; height:auto; max-height:600px;"/></a>


EDIT : Ajout des balises de code

D'avance merci pour vos retours.

Configuration: Macintosh / Safari 15.3
A voir également:

2 réponses

Réponse 1 / 2
telliak Messages postés 3668 Date d'inscription   Statut Membre Dernière intervention   881
 
Salut,
Avec une mise en forme correcte et une coloration syntaxique (4e bouton de la barre de mise en forme), ce ne serait sans doute pas simple, mais là c'est totalement illisible !
0
Réponse 2 / 2
DoctorHow
 
Salut,
clair et bourré de fautes ce qui n'aidera pas à avoir un affichage correct surtout que dans un mail le HTML est vachement plus limité.
Déjà ça commence par une table qui contient des tr et td non refermés...et ensuite contient une autre table.
Il y a plus de 15 ans ce type de mise en page a été abandonné à cause d'une complexité inutile et illisibilité qui rends le code opaque...c'était une bonne chose et CSS a permis de prendre le relais pour faire des mises en pages correctes, avancées et compréhensible à lire.
Faire une indentation correcte et pas remplir une ligne de code avec plusieurs choses ça permettra déjà d'y voir plus clair pour vous et ensuite de corriger les erreurs.
0