Students Save 30%! Learn & create with unlimited courses & creative assets Students Save 30%! Save Now
Advertisement
  1. Web Design
  2. Email Design
Webdesign

Erstellen einer einfachen Responsive HTML-E-Mail

by
Length:LongLanguages:

German (Deutsch) translation by Władysław Łucyszyn (you can also view the original English article)

In diesem Tutorial zeige ich Ihnen, wie Sie eine einfache responsive HTML-E-Mail erstellen, die in jedem E-Mail-Client funktioniert, einschließlich aller neuen Smartphone-E-Mail-Clients und -Apps. Es verwendet minimale Medienabfragen und einen Fluidbreitenansatz, um maximale Kompatibilität sicherzustellen.

Media Queries: Nur die halbe Lösung

Es gab eine Zeit, in der Medienanfragen ausreichend waren, um reaktionsschnelle E-Mails zu erhalten, die in iOS- und Android-Mail-Anwendungen arbeiten, die beide Medienabfragen unterstützen.

Seitdem hat sich die Zahl der Mail-Anwendungen, die sowohl für iOS- als auch für Android-Plattformen entwickelt wurden, stark erhöht, wobei die Responsive-E-Mail-Entwicklungsmethoden in unterschiedlichem Maße unterstützt werden.

Am auffälligsten ist das neueste Update der Google Mail-App für Android, das doppelt so beliebt ist wie die Standard-E-Mail-App für Android-Nutzer (die jetzt 11% aller geöffneten Apps umfasst). Es hat noch nie Medienabfragen unterstützt und tut dies auch jetzt noch nicht, aber es skaliert jetzt Ihre E-Mails, indem es die Größe der äußeren Tabelle so komprimiert, dass sie in den sichtbaren Bereich des Bildschirms passt. Es ist schwer zu kontrollieren, und wenn Ihre gesamte E-Mail von Medienabfragen abhängt, die auf dem Handy korrekt angezeigt werden, entstehen einige sehr unangenehme Ergebnisse.

Warum Fluid ist das neue Schwarz

Die gute Nachricht ist, dass Sie eine E-Mail entwerfen und erstellen können, die in jeder E-Mail-Anwendung hervorragend aussieht, einschließlich solcher, die keine Medienabfragen unterstützen. Sie können dies tun, indem Sie ein flüssiges Layout verwenden.

Es gibt jedoch ein paar Design-Kompromisse, die Sie machen müssen. Diese schönen gleichmäßigen Spaltenlayouts, die zu einer einzelnen Spalte gestapelt werden, funktionieren mit dieser Methode nicht so gut. Wenn Sie lernen können, ohne sie zu leben, gibt es einige sehr funktionelle Designs, die sehr gut funktionieren können.

Das schaffen wir heute:

Final-Product-Both

Anfangen

Ok, fangen wir mit unserer leeren Leinwand an.

Was wir hier erstellen, ist unsere Basisseite mit ihrer header-, doctype- und Containertabelle, auf die eine Hintergrundfarbe angewendet wird (sowohl auf den Body als auch auf eine große Wrapper-Tabelle, da das Styling des Body-Tags nicht vollständig unterstützt wird). Weitere Informationen zu dieser grundlegenden Einrichtung finden Sie unter Erstellen einer HTML-E-Mail-Vorlage von Scratch.

Ich habe dann unsere Hauptinhalts-Tabelle dem Zentrum mit einer Klasse von "Inhalt" hinzugefügt.

Passt auf

Hinweis: Sie werden feststellen, dass ich in diesem Tutorial CSS in den Kopf unseres Dokuments einfügen werde. Normalerweise platziere ich Stile in den Kopf, wenn ich sie wiederverwende, und halte einzelne Stile inline.

Wichtig: Wenn Sie im Kopf des Dokuments CSS-Regeln verwenden, müssen Sie am Ende des Prozesses ein Werkzeug verwenden, um alle Inline-Elemente in den Prozess zu integrieren. Wenn Sie einen Service wie MailChimp oder Campaign Monitor verwenden, bieten sie automatisch an, dass Sie Ihre Stile beim Importieren Ihres Designs inline einbinden. Sie müssen dies tun, da einige Clients, z. B. Google Mail, den Inhalt des <style>-Tags ignorieren oder entfernen oder sie ignorieren. Sie können auch ein Tool wie Premailer verwenden, um Ihr CSS inline zu bringen. Wenn Sie Premailer oder ein ähnliches Tool verwenden, denken Sie daran, Ihre Medienabfragen vor der Verarbeitung zu entfernen (da sie intakt bleiben sollen), und fügen Sie sie dann am Ende wieder ein. MailChimp und Campaign Monitor erledigen das automatisch für Sie.

Mobile Styles von Yahoo!

Sie werden bemerken, dass das Body-Tag ein zusätzliches Attribut hat. Yahoo Mail liebt es, Ihre Medienanfragen als Evangelium zu interpretieren. Um dies zu verhindern, müssen Sie Attributselektoren verwenden. Ich finde den einfachsten Weg, dies zu tun (wie von Email auf Acid vorgeschlagen) ist, einfach ein beliebiges Attribut zum Body-Tag hinzuzufügen. Ich benutze das vorgeschlagene "yahoo", aber es könnte alles sein, was du magst:

Sie können dann auf bestimmte Klassen abzielen, indem Sie den Attributselektor für Ihr body-Tag im CSS verwenden.

Zwei Tricks, um die flüssige Methode zu beherrschen

Wie Sie sehen können, ist unsere "Content" -Tabelle so eingestellt, dass sie 100% breit ist, sodass sie flüssig ist und die gesamte Breite von Smartphone- und Tablet-Bildschirmen ausfüllt. Wir legen auch eine maximale Breite von 600px fest, um zu vermeiden, dass die E-Mail bei größeren Geräten den gesamten Bildschirm einnimmt.

Es gibt jetzt zwei etwas knifflige Dinge, die wir angehen müssen, um sicherzustellen, dass alles über alle E-Mail-Clients hinweg wie geplant angezeigt wird. Diese beiden Verbesserungen sind Tina Yes exzellentem Tutorial zu dieser Methode zu verdanken, das im FogCreek Blog verfügbar ist.

1. Überwindung der fehlenden Unterstützung für maximale Breite

Leider wird max-width nicht von allen E-Mail-Clients unterstützt. Damit unsere E-Mails in Outlook und Lotus Notes 8 und 8.5 ordnungsgemäß angezeigt werden, müssen wir jede Tabelle in einen bedingten Code einbetten, der eine Tabelle mit einer festgelegten Breite erstellt, in der alles enthalten ist. Es richtet sich an IE (das von Lotus Notes verwendete Rendermodul) und Microsoft Outlook.

Wir werden unsere Tabelle in einen bedingten Code einbinden:

2. Ein Update für Apple Mail

Seltsamerweise unterstützt Apple Mail (normalerweise ein sehr progressiver E-Mail-Client) die Eigenschaft max-width auch nicht. Es unterstützt jedoch Medienabfragen, daher können wir eine hinzufügen, die es anweist, eine Breite für unsere 'content'-Klassentabelle festzulegen, solange das Darstellungsfeld die gesamten 600px anzeigen kann.

Erstellen der Kopfzeile

Jetzt fügen wir die erste Zeile unserer Tabelle hinzu - den Header. Fügen Sie der bereits erstellten Zeile den Stil hinzu:

Fügen Sie dann in Ihrem CSS das Padding für die Kopfzeile hinzu:

Hinzufügen der ersten antwortenden Zeile

Jetzt werden wir unsere allererste Reaktionsreihe erstellen. Die Art und Weise, wie wir dies tun, besteht darin, zwei Tabellen zu erstellen, die nebeneinander "schweben", indem wir die HTML-Eigenschaft "align" verwenden.

Linke Spalte

Ersetzen Sie unser kleines "Hallo!" Gruß mit folgendem:

Wir erstellen unsere 70px-Tabelle und fügen auch etwas Polsterung hinzu, die als unser Zwischensteg zwischen den zwei Spalten dient. Die Polsterung auf der Unterseite wird vertikalen Atmungsraum hinzufügen, wenn die beiden Säulen auf Mobilgeräten gestapelt werden.

Rechte Spalte

Wir erstellen die rechte Spalte, indem wir eine Tabelle erneut nach links ausrichten. Diese Tabelle wird 445px breit sein, was uns 25px auf der rechten Seite übrig lassen wird. Das ist sehr wichtig, da Outlook Ihre Tabellen automatisch stapelt, wenn in einer bestimmten Zeile nicht mindestens 25 Pixel übrig sind.

Responsive-AlignedTables

Solange Sie mindestens 25px Atmungsraum zulassen, verhalten sich Ihre Tabellen wie erwartet.

Allow at least 25px of breathing room to stop Outlook from stacking your tables
Ermöglichen Sie mindestens 25px Speicherplatz zum Atmen, um zu verhindern, dass Outlook Ihre Tabellen stapelt

Halt! Alternativer Tipp für das Trocken von Outlook

Um diese Eigenart zu umgehen, könnten Sie auch bedingten Code verwenden, um Outlook zu glauben, dass Sie eine Zelle geschlossen und eine neue geöffnet haben. Fügen Sie nach dem schließenden Tag Ihrer ersten Tabelle und vor dem Tag der ersten Tabelle für Ihre Sekunde einfach Folgendes hinzu:


Fortfahren..

In der breiteren, rechten Tabelle verwenden wir den gleichen Ansatz, den wir für unsere Containertabelle verwendet haben. Dazu gehört auch das Erstellen einer Klasse und das Hinzufügen des bedingten Wrapper-Codes. Wir wollen, dass dieser Tisch auf dem Handy 100% breit ist, wo er unterhalb des Tisches auf der linken Seite erscheint.

Hier können Sie sehen, dass ich eine Klasse namens 'col425' für diese Tabelle, unsere 425px breite Spalte, erstellt habe. Ich habe die Tabelle in den Bedingungscode verpackt, der sie in eine 425 px breite Tabelle einfügt. Wir fügen dann unsere Klasse zur Medienabfrage hinzu, die wir auch für Apple Mail erstellt haben.

Jetzt in unserer Zelle fügen wir die formatierte Überschrift hinzu.

Ich habe jeder Zelle zum Stylen einige Klassen hinzugefügt, sowie einige Stile, die ich später für andere Texttypen verwenden werde:

Unser Header ist nun vollständig und Sie können unten sehen, wie die beiden Spalten auf Mobilgeräten gestapelt werden. (Um während der Arbeit eine Vorschau anzuzeigen, müssen Sie die Medienabfragen mit minimaler Gerätebreite vorübergehend auskommentieren, da sie eine feste Breite auf dem Desktop erzwingen).

01-header

Erstellen der einspaltigen Textzeile

Um eine Zeile mit einer einzelnen Spalte zu erstellen, fügen wir einfach eine neue Zeile zu unserem '.content' hinzu. tabelle. Wir fügen diesen Zeilen eine 'Innerpadding'-Klasse mit einigen wiederverwendbaren Füllwerten hinzu. Wir fügen auch eine Klasse von 'borderbottom' hinzu, um einen Rahmen auf jede Zeile anzuwenden.

Unser CSS für diesen Bereich:

Erstellen des Doppelspalten-Artikels

Jetzt erstellen wir eine reaktive Reihe genau wie unsere Kopfzeile, aber mit etwas anderen Dimensionen, so dass wir ein größeres Bild haben können.

Wir haben hier einen Button mit der Klasse 'Buttonwrapper' hinzugefügt. Es enthält eine gepolsterte Zelle mit einer Hintergrundfarbe und anschließend eine Textverknüpfung. Ich bevorzuge es, diese Methode zu verwenden, da es Ihnen ermöglicht, Schaltflächen für die Flüssigkeitsbreite zu verwenden, was sehr nützlich ist, wenn Sie eine wiederverwendbare Vorlage erstellen, bei der die Breite jeder Schaltfläche bei jeder Verwendung unterschiedlich ist. Wenn Sie eine feste Breite für Ihre Schaltflächen haben, können Sie den Bulletproof Button Generator lieber im Kampagnenmonitor verwenden.

Unsere Stile für den Button:

Zusätzlich zu unserer Satzbreite für diese neue Klasse "col380" fügen wir unsere Größe zu unserer Liste von Stilen hinzu, die sich um Apple Mail kümmern. Es sieht jetzt so aus:

Email-TwoCol

Erstellen des einzelnen Spaltenbildes

Dies ist eine sehr einfache Reihe; Wir legen einfach ein Bild auf 100% der Breite der E-Mail fest und stellen sicher, dass die Höhe mithilfe von CSS automatisch festgelegt wird.

In unserem CSS:

Erstellen der letzten einfachen Textzeile

Schließlich fügen wir eine Textzeile ohne den unteren Rand hinzu:

Fußzeile erstellen

Um die Fußzeile zu erstellen, fügen wir eine neue Zeile mit einer Tabelle hinzu. Eine der Zeilen enthält eine weitere Tabelle für unsere Social-Media-Icons.

Wir fügen dem CSS die erforderlichen Stile für unsere Fußzeile hinzu:

Schaltflächen für Mobilgeräte optimieren

Auf Mobilgeräten ist es ideal, wenn der gesamte Button ein Link ist, nicht nur der Text, da es viel schwieriger ist, mit dem Finger auf einen winzigen Textlink zu zielen. Da dies nicht auf allen Desktopclients funktioniert (die Auffüllung wird von <a>-Tags nicht vollständig unterstützt), wird die mobile Version mithilfe von Medienabfragen hinzugefügt.

Wir müssen die Farbe aus dem <td> entfernen, auf das sie gerade angewendet wird, und sie dann zusammen mit einer Menge Padding auf das <a>-Tag anwenden.

Ich werde beide max-width und max-device-width in dieser Medienabfrage verwenden, um einen Fehler in Outlook.com auf IE9 zu vermeiden.

Wenn Sie jetzt auf die farbige Schaltfläche auf dem Handy tippen, ist das ein Link!

Weitere Verbesserungen bei Medienabfragen

Wenn Sie möchten, können Sie nun Verbesserungen an Ihrem Layout vornehmen, indem Sie Klassennamen auf Elemente anwenden, die Sie steuern möchten, und dann die neuen Regeln in der oben erstellten Medienabfrage erstellen.

Als Beispiel werden wir unseren Abmelde-Link in eine Schaltfläche umwandeln, indem Sie dem Link eine Klasse hinzufügen:

und Hinzufügen der folgenden CSS zur Medienabfrage:

Email-Footer-MQs

Sie könnten auch auf die Klassen .innerpadding, .header und .footer abzielen, um die Auffüllung auf Clients zu reduzieren, die Medienabfragen unterstützen.


Testen und los!

Schließlich, wie immer, stellen Sie sicher, Sie validieren (mit dem W3C Validator - Sie sollten nur einen Fehler für das proprietäre 'Yahoo' Attribut auf dem Body-Tag) und wirklich gut testen mit Live-Geräten und einem Web-Preview-Service wie Litmus oder E-Mail auf Acid.

Erstellen Sie reaktionsschnelle E-Mails, die in jedem E-Mail-Client gut aussehen!

Um das Gelernte auf die nächste Stufe zu bringen, lies dir die nächsten Tutorials durch:

Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.