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.

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:

<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

• http://ipnx.cn/link/f663b8c9b8331a8c625007b4337601ec
• http://ipnx.cn/link/90e08c6d15d206857d4fd54fa2f334bc
• http://ipnx.cn/link/AE0DE04DA95F06C3C85934EA84BCCCC0
• http://ipnx.cn/link/a35e2f4a3fa64ee63ab18d8072b3a806
• http://ipnx.cn/link/3d4233a54Febe35fbf7749c3AffB8E15
• http://ipnx.cn/link/00b5d2692a781b6a9d3d1522c6e9d1ad
• http://ipnx.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!