1477 sujets

Web Mobile et responsive web design

Rendre une signature mail HTML responsive

Bonjour à tous,

Je suis tout nouveau sur ce forum et à vrai dire, je n'ai jamais codé de ma vie et ne sais pas le faire.
Mais malgré ça, je gère quand même quelques trucs dans l'asbl dans laquelle je travaille au niveau informatique.

J'essaie actuellement d'intégrer une signature à l'échelle de l'organisation (on est sous office 365) et j'ai vu qu'il était préférable de l'écrire en html. Du coup, je me suis lancé dans l'expérience et je suis arrivé à quelque chose qui me plait bien. Mon problème, c'est que ça donne bien sur un ordi, mais sur un smartphone, c'est pas trop ça. Du coup, je me demandais s'il était possible de la rendre responsive et, si c'est sur un tél, de mettre par exemple tout le texte en dessous du logo ? Ou si vous avez d'autres solutions ou propositions je suis évidemment preneur.

Je vous mets le code ci dessous : 


<html>
<div>
<table border="0" cellspacing="0" cellpadding="0">
<tbody>
<tr>
<td width="94" rowspan="6">
<p><span><br><img width="90" height="117" src="https://www.lesolbosch.be/images/logo-lesolbosch.png" alt="logo-lesolbosch" v:shapes="Image_x0020_1" /></span><b><span></span></b></p>
</td>
<td width="340" colspan="2">
<p><b></b></p>
<p><b><span><br>C.A.T.S. &ndash; Le Solbosch <span>asbl</span></span></b></p>
</td>
</tr>
<tr>
<td width="340" colspan="2">
<p><b><span>204 &ndash; 208 Chauss&eacute;e d&rsquo;<span>Alsemberg</span>, 1190 Forest</span></b></p>
</td>
</tr>
<tr>
<td width="151">
<p><b><span>T&eacute;l&nbsp;: 02 649 79 01</span></b></p>
</td>
<td width="189">
<p><b><span>Fax&nbsp;: 02 639 08 22</span></b></p>
</td>
</tr>
<tr>
<td width="151">
<p><a href="http://www.lesolbosch.be"><b><span>www.lesolbosch.be</span></b></a><b><span></span></b></p>
</td>
<td width="189">
<p><a href="mailto:info@lesolbosch.be"><b><span>info@lesolbosch.be</span></b></a><b><span></span></b></p>
</td>
</tr>
<tr>
<td width="151">
<p><b><span>RPM&nbsp;: 0861.748.691</span></b></p>
</td>
<td width="189">
<p><b><span>INAMI&nbsp;: 7-73-019-71</span></b></p>
</td>
</tr>
<tr>
<td width="151">
<p><b><span>Compte bancaire&nbsp;: </span></b></p>
</td>
<td width="189">
<p><b><span>BE62 1325 1989 2961</span></b></p>
</td>
</tr>
</tbody>
</table>
<p><b></b></p>
</div>
</html>


Davance merci à ceux qui pourront m'aider ou ceux qui auront essayé. Bonne journée à tous.

Jojodb
Coucou Jojodb,
Je penses que tu t'es lancé un peu trop vite dans le html.
Tu fais beaucoup d'erreur et ton code n'est pas beau, tu devrais aussi séparer le css du html pour une meilleure lisibilité !
Pour ce qui est du responsive utilise des unités de mesure responsive comme le % ou le vw.
Et renseigne toi sur les media queries même si ce n'est pas encore tout à fait de ton niveau.
Passe une bonne après-midi.
Modifié par vzytoi (17 Apr 2020 - 16:12)
Hello vzytoi,

Merci pour tes réponses. Oui je me doute que mon code doit vraiment pas être optimal, loin de là.
Je vais essayer de voir ce que je trouve sur le vw et le % pour voir si je parviens à les utiliser.
J'avais essayé des sites dédiées mais les possibilités sont vraiment limitées en version gratuite (et on a peu de moyens) et du coup je ne parvenais pas à avoir ce que je voulais.

Merci quand même.

Jojodb
Bonjour Jean-Pierre Bruneau,

Un grand merci déjà d'avoir regardé. Je vais regarder ce que vous avez déjà fait Smiley lol
vzytoi a écrit :
Coucou Jojodb,
Je penses que tu t'es lancé un peu trop vite dans le html.
Tu fais beaucoup d'erreur et ton code n'est pas beau, tu devrais aussi séparer le css du html pour une meilleure lisibilité !
Pour ce qui est du responsive utilise des unités de mesure responsive comme le % ou le vw.
Et renseigne toi sur les media queries même si ce n'est pas encore tout à fait de ton niveau.
Passe une bonne après-midi.


Je ne suis pas d’accord ... le HTML dans les mails est très capricieux selon le client mail.
La bonne pratique est d’utiliser les tableaux et se styliser sur les balises et non pas justement de séparer le CSS .
Ce code est donc tout a fait pertinent .
Sujet clos
Aller à