Eine Schachtel mit Tricks zum Erstellen reaktionsschneller E -Mails

Reaktionsschnellem Mail -Designhandbuch: Machen Sie Ihre E -Mails auf einer Vielzahl von Geräten perfekt präsent

Kernpunkte

Wenn mobile Geräte beim Lesen von E -Mails beliebt werden, muss das Responsive Mail -Layout die Eigenschaften von mobilen Geräten berücksichtigen. Dies erfordert, dass die Mail-Inhalte neu angeordnet und die ursprünglich horizontal arrangierten Zellen vertikal auf dem mobilen Gerät arrangiert werden.
Einspalten-Mail-Layout (normalerweise ein einzelnes Titelbild) erfordert keine Umordnungselemente. Passen Sie einfach die Breite an die Gerätegröße an. Dies ist eher ein skalierbares Design als ein reaktionsschnelles Design.
• Das Multi-Säulen-Mail-Layout für das Multi-Säulen muss die Spalten nach Abneiung der Gerätebreite neu ordnen. Dies kann durch die Verwendung verschachtelter Tabellen oder das Ändern der display Eigenschaft der Tabellenzelle erreicht werden. Letzteres ist eleganter und verwendet native CSS -Regeln.
• Bilder in reaktionsschnellen E -Mails erfordern nur eine klassische reaktionsschnelle Technologie (img {max-width: 100%;}). Mithilfe von Medienabfragen kann jedoch ein Bild versteckt und ein anderes Bild stattdessen als Hintergrundbild verwendet werden.

Bild bereitgestellt von: fishbulb1022

In früheren Artikeln zum Schreiben von Pressemitteilungen haben wir einige Tipps gelernt, die die Erscheinen Ihrer E -Mails in verschiedenen Kunden erheblich ändern können.

Zusätzlich müssen wir mobile Geräte berücksichtigen, die im E -Mail -Lesen zunehmend verwendet werden. Dies wirft das Problem auf, reaktionsschnelle Layouts für E -Mails zu erstellen.

Da wir wissen, dass E -Mail -Vorlagen mit HTML -Tabellen erstellt werden und Inline -CSS haben, ist unsere Arbeit etwas komplizierter als gewöhnlich:

• Inline -CSS -Regeln haben hohe Spezifitätswerte (sie gewinnen immer).
• Tabellen sind nicht für Layoutkombinationen ausgelegt. Daher müssen wir auf die Kombination von E -Mails achten und daran denken, dass Zellen (natürliche horizontale Positionierung) vertikal auf mobilen Geräten angeordnet werden sollten.
• Natürlich können wir JavaScript nicht verwenden.

Glücklicherweise haben die meisten mobilen Geräte eine hohe Kompatibilität mit modernen CSS -Regeln, sodass wir alle diese Probleme mit Medienfragen leicht lösen können, eine Menge !important Deklarationen verwenden (um Inline -Stile zu überschreiben) und auf die Arrangement zu achten von Inhalten sorgfältig.

Für solche Projekte ist es wichtig, einen "mobilen" Ansatz zu verfolgen, der Layouts vermeidet, die nicht korrekt auf kleinen Geräten angeordnet werden können.

Bitte beachten Sie, dass reaktionsschnelle mobile Mails auch in diesem Artikel nur reaktionsschnelle Probleme diskutieren, sondern nicht unbedingt eine gute Mail ist. Effektives mobiles E -Mail -Design umfasst viele Elemente, einschließlich Schriftstellungsgröße, Layoutkombinationen und vielem mehr: Dies sind sehr wichtige Aufgaben, die wir in einem anderen Artikel behandeln werden.

Mail -Layout -Modus

Über die Reaktionsfähigkeit können wir zwei E -Mail -Arten identifizieren: Einzelspalten und mehrere Spalten.

Einspaltlayout

Einspalten-Layout (normalerweise nur ein Titelbild) hat keine besonderen Bedürfnisse. Da sie Elemente nicht neu ordnen müssen, müssen wir nur beachten, dass alle Breiten elegant nach Gerätegrößen herabgestuft werden. Dies ist kein reaktionsschnelles Design, sondern ein klassisches Beispiel für ein skalierbares Design (siehe skalierbar, flüssig oder reaktionsschnell: Verständnis, wie man Mail verschiebt).

Einspaltlayout

Um sicherzustellen, dass Ihre E -Mail korrekt geändert wird, müssen Sie nur die Tabellenbreite anpassen:

<table> cellspacing="0" cellpadding="0" border="0" width="600">

</table>

Sie müssen auch das Bild ändern (siehe den Absatz "About Bild" am Ende dieses Artikels) und die Größe der Schriftart ändern, aber es gibt keine anderen besonderen Bedürfnisse.

@media screen and (max-width:480px) {
    table {
        width: 100%!important;
    }
}

Multi-Säulen-Layout

Multi-Säulen-Layout erfordert die Umlagerung der Säulen, wenn die Gerätebreite abnimmt. Unabhängig davon, ob Sie zwei, drei oder mehr Spalten verwenden, müssen Sie sie vertikal anstelle von horizontal anzeigen.

Es gibt zwei einfache Möglichkeiten, dies zu erreichen:

Verwenden verschachtelter Tabellen

1. Ändern Sie die
Eigenschaft der Tabellenzelle.
2. display
verschachtelte Tabellenlayout

E -Mail -Kombinationen erfordern normalerweise die Verwendung verschachtelter Tabellen. Dies gilt immer als der beste Weg, um die Kundenkompatibilität zu gewährleisten, aber andererseits ist der generierte Code sehr verwirrend und tatsächlich schwer zu lesen.

Der Trick besteht darin, das Attribut

zu verwenden, wodurch die Tabelle horizontal ausgerichtet ist.

Jedes Element muss eine table align="left" spezifische

Breite haben, und seine Summe muss mit ihrem Containerwert übereinstimmen.

Wenn die Gerätebreite abnimmt, müssen wir den Behälter ändern und alle Tabellenspalten auf 100% Breite erzwingen.

Diese Technik sorgt für die Kompatibilität bei den meisten Kunden: Ich habe die Demo -Dateien in Lackmus getestet und alle Kunden erzielen gute Ergebnisse, sodass die folgende Warnung zugelassen werden kann:

table[class="body_table"] {
    width: 600px;
}

table[class="column_table"] {
    width: 180px;
}

table[class="spacer_table"] {
    width: 30px;
    height:30px;
}

@media only screen and (max-width: 480px) {
    table[class="body_table"] {
        width: 420px!important;
    }
    table[class="column_table"] {
        width: 100%!important;
    }
}

Outlook 2007, 2010 und 2013 (diese Versionen von Outlook verwenden Microsoft Word als Rendering -Engine: Siehe Microsoft Outlook Client -Rendering -Differenzhandbuch im Litmus -Blog);

Die älteste Version von Lotus Notes;

Google Mail Android App.
• Dies ist ein guter Ausgangspunkt (siehe unten für einige der Ergebnisse des Tests) müssen wir auch bedenken, dass dieser Test mit leeren Tabellen erstellt wird: Inhalte hinzufügen (und mehr verschachtelte Tabellen !!) Sie sollten in der Lage sein, in der Lage zu sein Beheben Sie alle Fehler und lassen Sie diese Technologie mit allen Kunden ordnungsgemäß funktionieren.

Teil der Lackmuskompatibilitätstestergebnisse

Ändern Sie die Anzeigeeigenschaft einer Tabellenzelle

Die zweite Methode zum Aufbau von Multi-Säulen-Nachrichten ist eleganter und verwendet native CSS-Regeln.

Diese Technik beinhaltet das Ändern der display Eigenschaften der Standardtabellenzelle, wenn die Gerätebreite reduziert ist (Sie können viele Beispiele auf ResponsiveMailPatterns.com finden). Dies führt dazu, dass Zellen vertikal neu streichen:

Ändern Sie den Anzeigeplan

<table> cellspacing="0" cellpadding="0" border="0" width="600">

</table>

Die Ergebnisse dieses Tests sind sehr gut: Alle Clients machen die Testpost richtig (manchmal gibt es subtile Fehler), aber denken Sie daran, dass wir leere Mails ausprobiert haben und die Ergebnisse nach dem Hinzufügen von Inhalten variieren können.

über Bilder

In responsivem Mail erfordern Bilder nur die klassische reaktionsschnelle Technologie, die wir derzeit im Web verwenden (img {max-width: 100%;}).

Wie im Responsive Mail -Designhandbuch von Campaign Monitor unter Verwendung von Medienabfragen vorgeschlagen, können Sie jedoch ein Bild ausblenden und durch ein anderes Bild als Hintergrundbild ersetzen.

@media screen and (max-width:480px) {
    table {
        width: 100%!important;
    }
}

Denken Sie daran, dass selbst Bilder, die durch CSS versteckt sind, den Client geladen werden. Achten Sie also darauf.

Eine gute Option ist die Verwendung des gleichen Bildes für das img -Tag und background-image Quelle. Sie müssen ein Mehrzweck-Bildes für die Verwendung in all diesen Bereichen wie das folgende Beispiel vorbereiten:

Nachdem Sie das entsprechende Bild ausgewählt haben, können Sie es für viele Haltepunkte für Medienabfragen verwenden. Sobald Sie fertig sind, müssen Sie nur eine kleine Menge CSS -Regeln hinzufügen:

table[class="body_table"] {
    width: 600px;
}

table[class="column_table"] {
    width: 180px;
}

table[class="spacer_table"] {
    width: 30px;
    height:30px;
}

@media only screen and (max-width: 480px) {
    table[class="body_table"] {
        width: 420px!important;
    }
    table[class="column_table"] {
        width: 100%!important;
    }
}

Sie können auch das Attribut

hinzufügen, um jede Haltepunktansicht anzupassen (beachten Sie die Unterstützung des Kunden für diese Regel). background-size

Leider ist es unwahrscheinlich, dass alle Ihre Anforderungen an Geräte mit hoher Dichte gelöst werden-aber es kann die Anzahl der für alle anderen Fälle geladenen Dateien verringern.

Schlussfolgerung

Gibt es also eine einzelne, vielseitige und beste reaktionsschnelle E -Mail -Erstellungstechnologie aller Zeiten?

Normalerweise lautet die Antwort nein. Jedes Projekt erfordert einen anderen Ansatz und es gibt verschiedene

beste Lösungen . Die eigentliche Antwort besteht darin, eine Reihe nützlicher Techniken zu beherrschen und ständig neue Methoden auszuprobieren.

Ressourcen

• https://www.php.cn/link/f663b8c9b8331a8c625007b4337601ec
• https://www.php.cn/link/90e08c6d15d206857d4fd54fa2f334bc
• https://www.php.cn/link/AE0DE04DA95F06C3C85934EA84BCCCC0
• https://www.php.cn/link/a35e2f4a3fa64ee63ab18d8072b3a806
• https://www.php.cn/link/3d4233a54Febe35fbf7749c3AffB8E15
• https://www.php.cn/link/00b5d2692a781b6a9d3d1522c6e9d1ad
• https://www.php.cn/link/7006bc554a1a9de85c416551c10368e2

häufig gestellte Fragen zum Erstellen von reaktionsschnellem Mail

(Der im Originaltext bereitgestellte FAQ -Abschnitt wird hier weggelassen, da der Inhalt dieses Teils weniger schwierig zu schreiben ist und länger als andere Teile des Originaltextes ist. Um eine zu lange Ausgabe zu vermeiden, wird er hier weggelassen.)

Das obige ist der detaillierte Inhalt vonEine Schachtel mit Tricks zum Erstellen reaktionsschneller E -Mails. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!