Signature Outlook responsive

**jpg75014** · 16/02/2018, 15h48

Bonjour,

Nous avons créé en html une signature responsive (qui s'adapte à tout support, ordi, iPhone, android...).

Cette signature se compose de 3 tableaux côte à côte (3 colonnes en quelques sortes) et fonctionne très bien sur l'iphone (par exemple) en empilant 1, 2 ou 3 tableaux (verticalement) en fonction de la résolution du téléphone.

En revanche Outlook interprète bizarrement ce code et ajoute un retour chariot supplémentaire avant le second tableau et 2 avant le troisième. Ce qui décale le texte comme l'illustre la capture suivante : Nom : Signature outlook.jpg
Affichages : 1913
Taille : 41,7 Ko

Nom : Signature outlook.jpg
Affichages : 1913
Taille : 41,7 Ko

(j'ai affiché volontairement les bordures et les marques de paragraphe).

Dans le code, ces retours n'existent pas.

Quelqu'un s'est-il déjà retrouvé confronté à cette situation et existe-t-il une manière efficace de développer une signature html compatible avec tous les supports ?

Merci beaucoup pour votre aide.

JPG

**Oliv-** · 19/02/2018, 11h36

Bonjour,
A quel moment OUtlook fait il cela, lors de la composition ou lors de la lecture ?

Peux tu publier le code HTML STP ?

**jpg75014** · 20/02/2018, 10h39

Bonjour,

En fait il ne le fait plus que quand quelqu'un répond (ou transfère) avec un autre éditeur qu'Outlook (un iPhone ou un Webmail par exemple).

Voici le code (j'ai supprimé volontairement la colonne de gauche qui donnait trop d'indication sur la société, désolé. Sécurité, sécurité

)

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8"><title></title>
  <style type="text/css">
    table td { border-collapse: collapse; }
    .msoFix { mso-table-lspace:-1pt; mso-table-rspace:-1pt; }
  </style>
</head>
<body style="margin: 0px; padding: 0px; background-color: #FFFFFF;" bgcolor="#FFFFFF">
 
 
<table width="100%" border="0" align="center" cellpadding="0" cellspacing="0">
  <tr>
    <td align="center">
      <div style="max-width:640px !important;">
 
 
 
        <table class="msoFix" width="300" cellpadding="0" cellspacing="0" align="left" style="width: 300px; max-width: 300px;">
           <tr>
              <td class="bodycopy">
			  <br />
						<span style="font-size:16.0pt; color:#ABC200;font-family: Arial, Helvetica, sans-serif;">TOTO</span>
						<br /><br />
						<span style="font-size:12.0pt; color:#002e49;font-family: 'Goudy Old Style', Arial, sans-serif;">Direction</span>
						<br />
						<span style="font-size:12.0pt; color:#002e49;font-family: 'Goudy Old Style', Arial, sans-serif;"></span>
						<br />
						<span style="font-size:12.0pt; color:#002e49;font-family: 'Goudy Old Style', Arial, sans-serif;">Tél : 01 XX XX XX XX</span>
						<br />
						<span style="font-size:12.0pt; color:#002e49;font-family: 'Goudy Old Style', Arial, sans-serif;">06 XX XX XX XX</span>
 
              </td>
            </tr>
        </table>
		<table class="msoFix" width="300" cellpadding="0" cellspacing="0" align="left" style="width: 300px; max-width: 300px;">
          <tr>
              <td class="bodycopy">
			  <br />
						<a href="http://www.toto.fr" target="_blank" rel="noopener noreferrer" style="text-decoration:none;">
							<span style="font-size:16.0pt; color:#ABC200; font-family: Arial, Helvetica, sans-serif;">www.toto.fr</span>
						</a>
                        <br />
						<br />
						<span style="font-size:12.0pt; color:#002e49;font-family: 'Goudy Old Style', Arial, sans-serif;">Maison...</span>
						<br />
						<br />
						<span style="font-size:12.0pt; color:#002e49;font-family: 'Goudy Old Style', Arial, sans-serif;">46, boulevard de Toto</span>
						<br />
						<span style="font-size:12.0pt; color:#002e49;font-family: 'Goudy Old Style', Arial, sans-serif;">75999 Toto Cedex</span>
              </td>
            </tr>
        </table>
      </div>
    </td>
  </tr>
</table>
 
</body></html>

Merci beaucoup pour ton aide.

JPG

**Oliv-** · 20/02/2018, 11h39

Bonjour,
Désolé mais je n'ai pas compris où était ton problème, chez moi ta signature est bien responsive et alignée correctement (sauf lorsqu'on affiche les marques de paragraphe)

**jpg75014** · 20/02/2018, 12h55

En effet, c'est ce dont je me suis rendu compte après ta réponse d'hier.

En revanche, si tu l'envoies sur un Webmail (style gmail) ou sur ton iPhone et que tu réponds à ton message (via le Webmail ou l'iPhone) , tu devrais voir sur Outlook ce décalage.

Merci.

JPG

**jpg75014** · 27/02/2018, 16h00

Bonjour,

As-tu pu reproduire ce décalage ?

Si non, je considère ce post résolu car au final, c'est surtout les marques de paragraphe qui posaient problème.
(si oui et qu'il n'existe pas de solution pour l'annuler, je clique sur Résolu aussi

)

Et surtout merci pour ton aide.

JPG

**Oliv-** · 27/02/2018, 21h55

Bonsoir,
Tu ne peux pas maîtriser ce qui est fait avec ton mail selon le logiciel de messagerie utilisé par le destinataire.
le rendu diffère de l'un à l'autre c'est ainsi

**jpg75014** · 28/02/2018, 11h46

Bonjour,

Tant pis.

Merci encore.

JPG

Signature Outlook responsive [OL-2016]

Outlook

Discussions similaires

Partager

Partager