Gibt es ein Äquivalent von CSS max-width, das in HTML-E-Mails funktioniert?

114

Ich versuche, eine HTML-E-Mail zu erstellen, die in allen weit verbreiteten E-Mail-Clients ordnungsgemäß angezeigt wird. Ich wickle die gesamte E-Mail in eine Tabelle ein und möchte eine Breite von bis zu 98% der verfügbaren Breite, jedoch nicht mehr als 800 Pixel. So was: <table style="width:98%; max-width:800px;">

Aber ich bin es nicht zu tun , dass die Art und Weise, da nach diesem Outlook 2007 nicht die CSS - Eigenschaft width unterstützen.

Stattdessen mache ich das: <table width="98%">

Gibt es eine Möglichkeit, auch eine maximale Breite festzulegen, ohne sich auf CSS zu verlassen?

Tim Goodman
quelle
1
Ich habe die akzeptierte Antwort auf die von @MarkNugent aktualisiert, da dies einen Konsens hervorgerufen zu haben scheint - auch wenn es 4 Jahre zu spät war, um für mich nützlich zu sein. :)
Tim Goodman

Antworten:

223

Ja, es gibt eine Möglichkeit, max-widthmithilfe einer Tabelle zu emulieren , sodass Sie sowohl ein ansprechendes als auch ein Outlook-freundliches Layout erhalten. Darüber hinaus erfordert diese Lösung keine bedingten Kommentare.

Angenommen, Sie möchten das Äquivalent eines zentrierten divmit max-widthvon 350px. Sie erstellen eine Tabelle und setzen die Breite auf 100%. Die Tabelle enthält drei Zellen in einer Reihe. Stellen Sie die Breite des Zentrums TDauf 350(mithilfe des HTML- widthAttributs, nicht CSS) ein und los geht's.

Wenn Sie möchten, dass Ihr Inhalt links statt zentriert ausgerichtet wird, lassen Sie einfach die erste leere Zelle weg.

Beispiel:

<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> 

In der jsfiddle gebe ich der Tabelle einen Rand, damit Sie sehen können, was los ist, aber offensichtlich möchten Sie im wirklichen Leben keinen:

http://jsfiddle.net/YcwM7/

Mark Nugent
quelle
18
Dies ist die beste Antwort hier alle ^^^. Ignorieren Sie die akzeptierte Antwort und die bedingte Antwort.
Nick Manning
4
Um jemand anderem Zeit zu sparen, ist mindestens eines dieser leeren <td> -Elemente erforderlich, oder das <td> mit dem Inhalt wird gedehnt, um das gesamte <tr> zu füllen. Aber dies ist definitiv die beste Lösung der angebotenen.
Chris Strickland
2
@Phyllis Sutherland Sie könnten versuchen, die Inline-IMG-Größe zu entfernen und sie zu ersetzen durch: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
Achten Sie darauf, dass Sie nicht wie ich Einheiten zur inneren Breite hinzufügen, sonst funktioniert es nicht! dh mach nicht width = "350px"
magritte
3
@PhyllisSutherland hat einen Fix für Bilder gefunden: <img src="file.jpg" "width="350" alt="" style="display:block;width:100%" /> litmus.com/community/discussions/…
cbron
34

Es gibt einen Trick, den Sie für Outlook 2007 mithilfe von bedingten HTML-Kommentaren ausführen können.
Der folgende Code stellt sicher, dass die Outlook-Tabelle 800 Pixel breit ist, nicht die maximale Breite, aber besser funktioniert, als die Tabelle über das gesamte Fenster erstrecken zu lassen.

<!--[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>
Shay Erlichmen
quelle
6
Ein ausgezeichneter Vorschlag, aber da es sich um einen ID-Selektor und nicht um eine Klasse handelt, sparen Sie sich die Eingabe, indem Sie das width attr für das Tabellenelement verwenden
Steve Wasiura,
Das ist toll. Mit Ausnahme eines Problems lässt Outlook durch Festlegen der Breite die E-Mail nicht kleiner als die angegebenen Abmessungen verkleinern. Wenn Sie die Breite nicht einstellen, wird die E-Mail auf den gesamten Bildschirm erweitert. Wählen Sie Ihr Gift :)
Der Koordinator
13

Die kurze Antwort: nein.

Die lange Antwort:

Feste Formate funktionieren besser für HTML-E-Mails. Nach meiner Erfahrung tun Sie am besten so, als wäre es 1999, wenn es um HTML-E-Mails geht. Seien Sie explizit und verwenden Sie HTML-Attribute (width = "650"), wo immer dies in Ihren Tabellendefinitionen möglich ist, nicht CSS (style = "width: 650px"). Verwenden Sie feste Breiten, keine Prozentsätze. Eine Tischbreite von 650 Pixel ist eine sichere Sache. Verwenden Sie Inline-CSS, um Texteigenschaften festzulegen.

Es geht nicht darum, was in "HTML-E-Mails" funktioniert, sondern um die Vielzahl von E-Mail-Clients und deren eingeschränkte (und manchmal absichtlich bei Google Mail, Hotmail usw.) Fähigkeit, HTML zu rendern.

Diodeus - James MacFarlane
quelle
Ja, das habe ich erwartet, aber ich dachte, ich würde fragen.
Tim Goodman
35
Wenn Sie eine feste Breite von 650 festlegen, sehen Ihre E-Mails in mobilen E-Mail-Clients schrecklich aus.
DrewB
6
-1: Es sieht schrecklich aus, weil mobile Geräte in der realen Welt relativ kleine Abmessungen haben. Dies bedeutet, dass der Text in Ihren Designs ohne Zoomen und Schwenken unleserlich klein ist. Schauen Sie sich das Campaign Monitor-Handbuch Responsive Email Design an .
Karl Horky
1
-1 auch, weil ich mich gerade auch in mobilen Clients damit befasst habe und eine feste Breite genau mein Problem war.
Brian FitzGerald
7
Wir schreiben das Jahr 2015. Mobile Geräte gibt es überall. Sie sagen, Sie sollten die mobilen Geräte für den dummen Ausblick vergessen? Ich sage, vergiss den Ausblick. Und jedes andere beschissene Produkt von Microsoft.
Refaelio
5

Etwas spät zur Party, aber das wird es schaffen. Ich habe das Beispiel bei 600 belassen, da dies die meisten Leute verwenden werden:

Ähnlich wie in Shays Beispiel, mit der Ausnahme, dass dies auch die maximale Breite für die übrigen Clients umfasst, die Unterstützung bieten, sowie eine zweite Methode, um die für Outlook '11 erforderliche Erweiterung (Medienabfrage) zu verhindern.

Im Kopf:

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

Im Körper:

<!--[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]-->

Hier ist ein weiteres Beispiel: Verwendete E-Mails zur Auftragsbestätigung für mobile Geräte?

John
quelle
0

Dies ist die Lösung, die für mich funktioniert hat

https://gist.github.com/elidickinson/5525752#gistcomment-1649300 , danke an @ 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>
Henry
quelle
Könnten Sie ein prägnanteres Beispiel nennen, es gibt eine Menge
Dinge,
@EdL die Idee ist , dass ist die prägnanteste Weise E - Mail-freundlich zu bekommen max-width. Diese ganze Sache würde ersetzen <div style="max-width: ...px">...</div>. Für die E-Mail, an der ich gearbeitet habe, als ich diesen Kern gefunden habe, war dies die einzige Lösung, mit der die Dinge in Outlook 2010, 2013 und 2016
Henry
@henry Ich bezog mich mehr auf alle Attribute der Cellpadding-Schriftgröße usw. Bilder sind schwierig, da die Bilder nicht in voller Größe angezeigt werden, wenn Sie nicht width = "500" als Attribut angeben, wobei 500 die Breite in Pixel Outlook ist. Dies führt im Allgemeinen zu festen Breiten.
EdL
Lassen Sie dies so, wie es ist, weil es nicht mein Code ist - ich zitiere es nur aus dem Kern -, aber ich habe es zu einem Community-Wiki gemacht. Ich glaube, es ist notwendig, 0px paddings und margins sowie 0 cellpaddingund explizit anzugeben cellspacing. Es ist möglich, dass line-heightdie Angabe als Ersatz für font-sizedas Ausfüllen für die Zeiten funktioniert, die heightnicht eingehalten werden (ich möchte es auf allen trs und dann auf allen tds testen , um genau zu sehen, wo es benötigt wird). @EdL , wenn Sie in der Lage eine leichtere Lösung zu erhalten sowie diese Arbeit , die genial würde - bitte hier posten und in diesem verknüpften Kern
henry