Ideen hinter responsiven E-Mails

Nehmen wir an, Sie haben eine HTML-E-Mail mit 3 Spalten entworfen. Aufgrund der eingeschränkten und seltsamen CSS-Unterstützung in E-Mail-Clients erfolgt das E-Mail-Design mit Tabellen. Dieses 3-Spalten-Design sieht auf größeren Bildschirmen gut aus, wird aber auf kleinen Bildschirmen unbeholfen gequetscht. Theoretisch würde eine Media Query uns hier retten, aber da wir nicht einmal auf Floats zählen können, können wir uns erst recht nicht auf diese verlassen. Es gibt jedoch noch einen Weg.

In diesem Artikel werde ich einige Ideen rund um responsive E-Mails ansprechen. Dies sind keine robusten, produktionsreifen Ideen, ich fand es einfach nur unterhaltsam, darüber nachzudenken. Inspiriert hat mich ein Vortrag von Fabio Carneiro. Fabio arbeitet bei MailChimp und kümmert sich um die ganze harte Arbeit des E-Mail-Layouts und teilte in diesem Vortrag einige der Ideen hinter responsiven E-Mails. Er hat auch einen Treehouse-Kurs über E-Mail.

Jason Rodriguez hat kürzlich auch ein wenig zu diesem Thema geschrieben.

Zeilen mit align=”left”

Hier sind einige Blöcke in einem Layout

Sie denken vielleicht: Jeder dieser Blöcke wird eine <td> sein. Aber nein, wenn das der Fall wäre, könnten Sie sie in der eingeschränkten CSS-Welt von E-Mails niemals zum Umbrechen bringen.

Tatsächlich ist jeder Block eine <table align="left">. Align ist ein alter, veralteter Attribut, aber es wird immer noch in allen E-Mail-Clients unterstützt. Es ist so ähnlich wie float, aber wir können float nicht verwenden. Ich stelle es mir eher so vor, als ob Sie die Tabelle wie ein inline-block Element verhalten lassen. Sie können ihre Breite kontrollieren, sie kann auf der gleichen Zeile wie andere Elemente stehen und sie kann trotzdem umbrechen.

Das wäre also so

<table class="main-wrapping-table">
  
  <tr>
 
     <td>
  
         <table align="left" style="width: 33.33%">
         </table>

         <table align="left" style="width: 33.33%">
         </table>

         <table align="left" style="width: 33.33%">
         </table>

    </td>

  </tr>

</table>

Es gäbe auch eine Menge anderer Inline-CSS, die Zentrierung und so weiter erledigen, aber dies ist das Layout-Konzept.

Wenn wir diese Idee auf andere Zeilen mit unterschiedlicher Anzahl von Blöcken ausdehnen, erhalten wir dies

Keine schlechte Basis, wenn man nichts verwendet, was kein E-Mail-Client kann.

Umbrechbare Zeilen mit min-width

Einige E-Mail-Clients unterstützen min-width. Wenn wir dies also auf die Blöcke anwenden, die es benötigen, können wir diese Zeilen an einer sinnvollen Stelle umbrechen lassen.

Sie könnten das CSS direkt auf den Tabellenblock anwenden, so wie

<table align="left" style="width: 33.33% min-width: 200px;" class="chunk">
<table>

Ein bisschen besser. Jetzt bricht jeder Block dort, wo er muss, und wird nie zu gequetscht.

Platz ausfüllen mit @media query

Einige E-Mail-Clients unterstützen @media Queries. Wenn dies der Fall ist, zielen wir auf diese Blöcke ab und stellen sicher, dass sie den Platz besser ausfüllen, wenn diese Umbrüche auftreten.

/* Figure out where the breaks happen and use that in the media query */
@media (max-width: 400px) {
  .chunk {
    width: 100% !important;
  }
}

Ein bisschen besser. Sie könnten das besser machen als ich, indem Sie sicherstellen, dass alle Umbrüche genau so erfolgen, wie Sie es planen.

Nicht zu breit mit max-width

Genauso wie zu gequetscht schlecht ist, kann zu breit auch schlecht sein. Warum nicht die Container-Tabelle in Browsern, die max-width unterstützen, begrenzen.

<table style="max-width: 600px; margin: 0 auto;" class="main-table">

</table>

Demo

Auch dies ist noch nicht ganz produktionsreif, es demonstriert nur die Ideen.

Siehe den Pen „Responsive“ E-Mail von Chris Coyier (@chriscoyier) auf CodePen.

Wenn Sie etwas Produktionsreifes wünschen, würde ich wahrscheinlich Email Blueprints von MailChimp verwenden. Es scheint, dass sie einen starren, festen Haltepunkt verwenden. So werden entweder eine „Desktop“- oder eine „Mobile“-Version angezeigt, je nachdem, wie viel Platz verfügbar ist. „Adaptives“ Design, sozusagen. Ich kann mir vorstellen, dass das im HTML-E-Mail-Design wünschenswert ist.