Dos and Don'ts der HTML-E-Mail-Layout-Codierung

Text: Andy Chan | Inhalt: Edward Soetiono

In diesem Beitrag teilen wir einige der Herausforderungen, Tipps und Ressourcen, die wir beim Erstellen von E-Mail-Layouts entdeckt haben, die mit allen wichtigen E-Mail-Clients kompatibel sind.

Parents Gateway ist ein One-Stop-Portal, das die Partnerschaften zwischen Schule und Zuhause stärkt, um unsere Kinder auf ihrem Bildungsweg zu unterstützen.

Eltern können Schulankündigungen, Einverständniserklärungen und Einladungen zu Eltern-Lehrer-Meetings ihrer Kinder empfangen und darauf reagieren. Sie können sich auch dafür entscheiden, E-Mail-Benachrichtigungen zusätzlich zu dem zu erhalten, was sie auf ihrer PG-Anwendung erhalten.

Wir haben kürzlich unsere E-Mail-Benachrichtigungsvorlagen aktualisiert, um ihre Lesbarkeit und visuelle Attraktivität zu verbessern. Hier sind einige kleine Leckerbissen aus dieser Übung.

Lernen 1: Verwenden Sie Inline-CSS

<p style="font-size: 16px; color: red;">Some text</p>

Lernen 2: Halten Sie sich bei Layouts an Tabellen

<div>
  <!--[if (gte mso 9)|(IE)]>
  <table width="100%" cellpadding="0" cellspacing="0" border="0">
    <tr><td>
  <![endif]-->
  <div>Page layout</div>
  <!--[if (gte mso 9)|(IE)]>
    </td></tr>
  </table>
  <![endif]-->
</div>

Learning 3: Schreiben Sie immer das vollständige CSS

Wenn Sie bei älteren E-Mail-Clients auf Margin-Probleme stoßen, könnte dies an der Verwendung von CSS-Kürzeln liegen. Beispiel: „Rand oben: 10 Pixel;“ funktioniert, während „margin: 10px 0 0 0;“ möglicherweise nicht, also vermeiden Sie es, CSS in Kurzschrift zu schreiben, wenn möglich.

Lernen 4: Korrigieren von Layouts in bestimmten E-Mail-Clients

Leider scheint es immer diesen einen E-Mail-Client zu geben, der anders funktioniert als alle anderen. Auch wenn unser Styling für die meisten anderen Kunden funktioniert, müssen wir CSS schreiben, das auf den außergewöhnlichen E-Mail-Client abzielt.

Um beispielsweise einen Stil nur für Yahoo Mail anzuwenden, können wir den CSS-Wert mit Kommentarmarkierungen umgeben, die von anderen Clients ignoriert werden.https://howtotarget.email/ist eine großartige Ressource, wenn Sie auf einen bestimmten E-Mail-Client abzielen müssen.

.header {
   background-color: /* yellow */; // only applied in Yahoo mail
}

Beim Testen unserer E-Mails in Google Mail sind wir auf einige Macken gestoßen. E-Mail-Inhalte, die größer als 102 KB sind, werden automatisch abgeschnitten. Jeder Buchstabe belegt normalerweise ungefähr 1 bis 2 Bytes, aber wenn wir einen Textabschnitt kopieren und einfügen, kann sich die Anzahl der Bytes, die er belegt, unter bestimmten Bedingungen verdoppeln. Stellen Sie sicher, dass das Kopieren und Einfügen von Text nicht versehentlich die Größe Ihrer Nachricht verdoppelt und dazu führt, dass Ihre E-Mail abgeschnitten wird.

Eine weitere Macke, auf die wir gestoßen sind, war wegen eines Fehlers in dieser Zeile (können Sie ihn erkennen?):

@media screen and (max-width : 600px) {
   ...
}

Lernen 6: Unterstützung des dunklen Modus

Viele Menschen lesen gerne im Dunkelmodus, um die Belastung der Augen bei schlechten Lichtverhältnissen zu verringern. E-Mail-Clients wenden Dark-Mode-Renderings jedoch anders an:

Daher müssen Sie möglicherweise Problemumgehungen für bestimmte E-Mail-Clients festlegen und anwenden, damit alle Logos und Bilder für den Leser im dunklen Modus lesbar bleiben.

Die Erkenntnis daraus ist, dass Sie Ihre HTML-E-Mail immer in jeder Phase der Entwicklung testen, um sicherzustellen, dass sie mit verschiedenen E-Mail-Clients funktioniert. Es ist auch wichtig zu prüfen, ob ein CSS-Stil allgemein unterstützt wird —https://www.caniemail.com/search/ist eine großartige Ressource, um zu prüfen, ob ein bestimmter Stil verwendet werden kann. Es gibt auch Tools wie Lackmus , die eine E-Mail auf mehreren Clients in Echtzeit rendern können, aber beachten Sie, dass sie teuer sind.

Ich hoffe, Sie haben einige Erkenntnisse aus diesem Austausch mitgenommen! Wenn Sie mehr über ESTL und die Projekte, an denen wir arbeiten, erfahren möchten, besuchen Sie unsere Website hier .