Existe-t-il un équivalent de CSS max-width qui fonctionne dans les e-mails HTML?


115

J'essaie de créer un email HTML qui s'affichera correctement dans tous les clients de messagerie largement utilisés. J'emballe tout l'e-mail dans un tableau et j'aimerais qu'il ait une largeur pouvant atteindre 98% de la largeur disponible, mais pas plus de 800 pixels. Comme ça: <table style="width:98%; max-width:800px;">

Mais je ne le fais pas de cette façon, car selon cet Outlook 2007 ne prend pas en charge la propriété CSS width.

Au lieu de cela, je fais ceci: <table width="98%">

Existe-t-il un moyen de définir également une largeur maximale sans compter sur CSS?


1
J'ai mis à jour la réponse acceptée à celle de @MarkNugent car cela semble avoir attiré un consensus - même si cela est arrivé 4 ans trop tard pour me servir. :)
Tim Goodman

Réponses:


225

Oui, il existe un moyen d'émuler à l' max-widthaide d'un tableau, vous offrant ainsi une mise en page à la fois réactive et conviviale pour Outlook. De plus, cette solution ne nécessite pas de commentaires conditionnels.

Supposons que vous vouliez l'équivalent d'un centré divavec max-widthde 350px. Vous créez un tableau, définissez la largeur sur 100%. Le tableau comporte trois cellules d'affilée. Réglez la largeur du centre TDsur 350(en utilisant l' widthattribut HTML , pas CSS), et c'est parti.

Si vous voulez que votre contenu soit aligné à gauche au lieu d'être centré, laissez simplement de côté la première cellule vide.

Exemple:

<table border="0" cellspacing="0" width="100%">
    <tr>
        <td></td>
        <td width="350">The width of this cell should be a maximum of 
                  350 pixels, but shrink to widths less than 350 pixels.
        </td>
        <td></td>
     </tr>
</table> 

Dans le jsfiddle, je donne au tableau une bordure pour que vous puissiez voir ce qui se passe, mais évidemment vous n'en voudriez pas dans la vraie vie:

http://jsfiddle.net/YcwM7/


18
C'est la meilleure réponse ici tout le monde ^^^. Ignorez la réponse acceptée et la réponse conditionnelle.
Nick Manning

4
Juste pour gagner du temps à quelqu'un d'autre, au moins un de ces éléments <td> vides est nécessaire, sinon le <td> avec le contenu s'étendra pour remplir tout le <tr>. Mais c'est certainement la meilleure solution parmi celles proposées.
Chris Strickland

2
@Phyllis Sutherland Vous pouvez essayer de supprimer la taille de l'image en ligne et de la remplacer par:style="max-width: 100%; height: auto; width: auto; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; box-sizing: border-box;"
morespace54

5
attention à ne pas ajouter des unités à la largeur intérieure comme je l'ai fait sinon ça ne marche pas! ie ne pas faire width = "350px"
magritte

3
@PhyllisSutherland a trouvé un correctif pour les images: <img src="file.jpg" "width="350" alt="" style="display:block;width:100%" /> litmus.com/community/discussions
...

34

Il existe une astuce que vous pouvez faire pour Outlook 2007 en utilisant des commentaires html conditionnels.
Le code ci-dessous garantira que la table Outlook a une largeur de 800 pixels, sa largeur n'est pas maximale, mais cela fonctionne mieux que de laisser la table s'étendre sur toute la fenêtre.

<!--[if gte mso 9]>
<style>
#tableForOutlook {
  width:800px;
}
</style>
<![endif]-->

<table style="width:98%;max-width:800px">
<!--[if gte mso 9]>
  <table id="tableForOutlook"><tr><td>
<![endif]-->
    <tr><td>
    [Your Content Goes Here]
    </td></tr>
<!--[if gte mso 9]>
  </td></tr></table>
<![endif]-->
<table>

6
excellente suggestion, mais comme il s'agit d'un sélecteur d'identifiant et non d'une classe, vous économiseriez un peu de frappe en utilisant l'attr de largeur sur l'élément de table
Steve Wasiura

C'est bien. À l'exception d'un problème, en définissant la largeur, Outlook ne laissera pas l'e-mail se réduire plus petit que les dimensions données. En ne définissant pas la largeur, l'e-mail s'étendra à tout l'écran. Choisissez votre poison :)
The Coordinator

13

La réponse courte: non.

La réponse longue:

Les formats fixes fonctionnent mieux pour les e-mails HTML. D'après mon expérience, il vaut mieux prétendre que nous sommes en 1999 en ce qui concerne les e-mails HTML. Soyez explicite et utilisez des attributs HTML (width = "650") dans la mesure du possible dans vos définitions de table, pas CSS (style = "width: 650px"). Utilisez des largeurs fixes, pas de pourcentages. Une largeur de table de 650 pixels de large est une valeur sûre. Utilisez le CSS en ligne pour définir les propriétés du texte.

Ce n'est pas une question de ce qui fonctionne dans les «e-mails HTML», mais plutôt la pléthore de clients de messagerie et leur capacité limitée (et parfois délibérément dans le cas de Gmail, Hotmail, etc.) à rendre le HTML.


Ouais, c'est un peu ce à quoi je m'attendais, mais je me suis dit que je demanderais.
Tim Goodman

35
La définition d'une largeur fixe de 650 rendra vos e-mails terribles dans les clients de messagerie mobiles.
DrewB

6
-1: Cela a l'air terrible parce que les appareils mobiles ont des dimensions relativement petites dans le monde réel. Cela signifie que sans zoom ni panoramique, le texte de vos conceptions sera illisible. Jetez un œil au guide Campaign Monitor Responsive Email Design .
Karl Horky

1
-1 aussi parce que je viens de m'occuper de cela dans les clients mobiles et avoir une largeur fixe était exactement mon problème.
Brian FitzGerald

7
Nous sommes en 2015. Les appareils mobiles sont partout. Vous dites d'oublier les appareils mobiles pour les perspectives stupides? Je dis, oubliez les perspectives. Et tous les autres produits merdiques de Microsoft.
refaelio

5

Un peu tard à la fête, mais cela le fera. J'ai laissé l'exemple à 600, car c'est ce que la plupart des gens utiliseront:

Similaire à l'exemple de Shay, sauf que cela inclut également max-width pour travailler sur le reste des clients qui ont un support, ainsi qu'une deuxième méthode pour empêcher l'expansion (requête multimédia) qui est nécessaire pour Outlook '11.

Dans la tête:

  <style type="text/css">
    @media only screen and (min-width: 600px) { .maxW { width:600px !important; } }
  </style>

Dans le corps:

<!--[if (gte mso 9)|(IE)]><table width="600" align="center" cellpadding="0" cellspacing="0" border="0"><tr><td><![endif]-->
<div class="maxW" style="max-width:600px;">

<table width="100%" border="0" cellpadding="0" cellspacing="0" bgcolor="#FFFFFF">
  <tr>
    <td>
main content here
    </td>
  </tr>
</table>

</div>
<!--[if (gte mso 9)|(IE)]></td></tr></table><![endif]-->

Voici un autre exemple d'utilisation: des e-mails de confirmation de commande réactifs pour les appareils mobiles?


0

C'est la solution qui a fonctionné pour moi

https://gist.github.com/elidickinson/5525752#gistcomment-1649300 , merci à @ philipp-klinz

<table cellpadding="0" cellspacing="0" border="0" style="padding:0px;margin:0px;width:100%;">
    <tr><td colspan="3" style="padding:0px;margin:0px;font-size:20px;height:20px;" height="20">&nbsp;</td></tr>
     <tr>
        <td style="padding:0px;margin:0px;">&nbsp;</td>
        <td style="padding:0px;margin:0px;" width="560"><!-- max width goes here -->

             <!-- PLACE CONTENT HERE -->

        </td>
        <td style="padding:0px;margin:0px;">&nbsp;</td>
    </tr>
    <tr><td colspan="3" style="padding:0px;margin:0px;font-size:20px;height:20px;" height="20">&nbsp;</td></tr>
</table>

Pourriez-vous donner un exemple plus concis, il y a beaucoup de choses là-dedans qui ne sont pas nécessaires pour résoudre la question
EdL

@EdL l'idée est que c'est le moyen le plus concis de devenir convivial pour les e-mails max-width. Tout cela remplacerait <div style="max-width: ...px">...</div>. Pour l'e-mail sur lequel je travaillais lorsque j'ai trouvé l'essentiel, c'était la seule solution qui donnait un bon aspect aux choses dans Outlook 2010, 2013 et 2016.
henry

@henry Je faisais plus référence à tous les attributs de taille de police cellpadding, etc. le fichier image), cela donne généralement des largeurs fixes.
EdL

Laisser ceci tel quel parce que ce n'est pas mon code - je le cite simplement à partir de l'essentiel - mais j'en ai fait un wiki communautaire. Je crois qu'il est nécessaire de spécifier explicitement 0px paddings et margins ainsi que0 cellpadding et cellspacing. Il est possible que la spécification line-heightfonctionne comme un substitut font-sizeà remplir pour que les heures heightne soient pas respectées (je voudrais le tester sur tous les trs, puis sur tous les tds pour voir exactement où cela est nécessaire). @EdL si vous êtes en mesure de faire fonctionner une solution plus légère ainsi que celle qui serait géniale - veuillez la poster ici et dans ce lien
Henry
En utilisant notre site, vous reconnaissez avoir lu et compris notre politique liée aux cookies et notre politique de confidentialité.
Licensed under cc by-sa 3.0 with attribution required.