Share
In diesem Tutorial zeige ich Ihnen, wie Sie eine einfache, reaktionsschnelle HTML-E-Mail erstellen, die in jedem E-Mail-Client verwendet werden kann, einschließlich aller neuen Smartphone-E-Mail-Clients und Apps. Es werden minimale Medienabfragen und ein Ansatz für die Fluidbreite verwendet, um maximale Kompatibilität zu gewährleisten.
Wenn Sie nach einer gebrauchsfertigen, professionellen Lösung suchen, nutzen Sie eine der meistverkauften responsiven E-Mail-Vorlagen von Envato Market. Wir haben hunderte ansprechende Optionen für nur 5 US-Dollar, mit einfachen Funktionen zum Einstieg.
Reaktionsschnellste E-Mail-Vorlagen für den Verkauf auf dem Envato-MarktNicht was Sie suchen? Kein Problem, dieses Tutorial zeigt Ihnen, wie Sie Ihre eigenen bauen.
Es gab eine Zeit, in der Medienabfragen ausreichend waren, um responsive E-Mails in iOS- und Android-E-Mail-Anwendungen abrufen zu können, die beide Medienabfragen unterstützen.
Seitdem gibt es eine zunehmende Verbreitung von E-Mail-Anwendungen, die sowohl für iOS- als auch für Android-Plattformen erstellt wurden, wobei die Reaktionsmethoden für die E-Mail-Entwicklung unterschiedlich unterstützt werden.
Am bemerkenswertesten 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-Benutzer (die nun 11% der Gesamtöffnungen ausmacht). Medienabfragen wurden bisher noch nie unterstützt, was jedoch immer noch nicht der Fall ist. Sie verkleinern jedoch jetzt Ihre E-Mails, indem Sie die Größe der äußeren Tabelle so verkleinern, dass sie in den sichtbaren Bereich des Bildschirms passt. Es ist schwierig zu kontrollieren und wenn Ihre gesamte E-Mail für die korrekte Anzeige auf dem Handy von Medienabfragen abhängig ist, werden sehr unangenehme Ergebnisse erzielt.
Die gute Nachricht ist, dass Sie können Entwerfen und erstellen Sie eine E-Mail, die in jeder E-Mail-App hervorragend aussieht, auch wenn diese keine Medienanfragen unterstützen. Sie können dies tun, indem Sie ein flüssiges Layout verwenden.
Es gibt jedoch einige Design-Kompromisse, die Sie treffen müssen. Diese schönen gleich großen Spaltenlayouts, die zu einer einzelnen Spalte zusammengefasst werden, funktionieren mit dieser Methode nicht so gut. Wenn Sie lernen können, ohne sie zu leben, gibt es einige sehr funktionale Designs, die sehr gut funktionieren.
Folgendes erstellen wir heute:
Ok, lass uns mit unserer leeren Leinwand beginnen.
Eine einfache Responsive HTML-E-Mail
|
Was wir hier erstellen, ist unsere grundlegende Seite mit ihrer Header, doctype und eine Containertabelle mit einer Hintergrundfarbe (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 Grund auf.
Ich habe dann unsere Hauptinhaltstabelle mit einer Klasse von "Inhalt" zum Center hinzugefügt..
Hinweis: Sie werden feststellen, dass ich in diesem Tutorial CSS in den Kopf unseres Dokuments einfügen werde. Normalerweise platziere ich Stile im Kopf, wenn ich sie wiederverwenden möchte, und halte einmalige Stile inline.
Wichtig: Wann immer Sie CSS-Regeln im Kopf Ihres Dokuments verwenden, werden Sie Muss Verwenden Sie ein Werkzeug, um alles am Ende des Prozesses inline zu machen. Wenn Sie einen Dienst wie MailChimp oder Campaign Monitor verwenden, wird automatisch angeboten, Ihre Stile beim Importieren des Designs für Sie inline zu bringen. Sie müssen dies tun, da einige Clients, z. B. Google Mail, Ihre Clients ignorieren oder entfernen Jetzt fügen wir die erste Zeile unserer Tabelle hinzu - die Kopfzeile. Fügen Sie der bereits erstellten Zeile Folgendes zum Stil hinzu: Fügen Sie dann in Ihrem CSS die Auffüllung für die Kopfzeile hinzu: Jetzt werden wir unsere allererste responsive Reihe erstellen. Wir erstellen dazu zwei Tabellen, die mithilfe der HTML-Eigenschaft 'align' nebeneinander "schweben". Ersetzen Sie unser kleines "Hallo!" Gruß mit folgendem: Wir erstellen unseren 70px-Tisch und fügen ein paar Polsterungen hinzu, die als Dach zwischen den beiden Säulen dienen. Die Polsterung an der Unterseite fügt vertikalen Atemraum hinzu, wenn sich die beiden Säulen auf dem Handy stapeln. Wir erstellen die rechte Spalte, indem Sie eine Tabelle erneut nach links ausrichten. Dieser Tisch wird 445px breit sein, was uns 25px auf der rechten Seite übrig lässt. Dies ist sehr wichtig, da Outlook Ihre Tabellen automatisch stapelt, wenn in einer Zeile nicht mindestens 25 Pixel vorhanden sind. Solange Sie mindestens 25 Pixel Atemraum zulassen, verhalten sich Ihre Tische wie erwartet. Um diese Umgehung zu umgehen, können Sie auch bedingten Code verwenden, um Outlook zu glauben, dass Sie eine Zelle geschlossen und eine neue geöffnet haben. Nach dem schließenden Tag Ihrer ersten Tabelle und vor dem öffnenden Tag der zweiten Tabelle fügen Sie einfach Folgendes hinzu: In der breiteren rechten Tabelle verwenden wir dieselbe Vorgehensweise wie in unserer Containertabelle, bei der eine Klasse erstellt und auch der Code für den bedingten Wrapper hinzugefügt wird. Wir möchten, dass diese Tabelle zu 100% breit ist, wenn sie auf dem Handy links unten angezeigt wird. Hier sehen Sie, dass ich eine Klasse namens 'col425' für diese Tabelle erstellt habe, unsere 425px-breite Spalte. Ich habe die Tabelle in den bedingten Code eingebunden, der sie in eine 425px-breite Tabelle einschließen wird. Dann fügen wir unsere Klasse zur Medienabfrage hinzu, die wir auch für Apple Mail erstellt haben. Jetzt fügen wir in unserer Zelle die Stilüberschrift hinzu. Ich habe jeder Zelle einige Klassen für das Styling hinzugefügt sowie einige Stile, die ich später für andere Texttypen verwenden werde: Die Kopfzeile ist jetzt vollständig und Sie können unten sehen, wie sich die beiden Spalten auf dem Mobile stapeln. (Um während der Arbeit eine Vorschau anzeigen zu können, müssen Sie die Medienabfragen mit der Breite der Breite eines Geräts vorübergehend auskommentieren, da sie eine feste Breite auf dem Desktop erzwingen.). Um eine einspaltige Textzeile zu erstellen, fügen wir unserer '.content'-Tabelle einfach eine neue Zeile hinzu. Wir fügen diesen Zeilen eine 'innerpadding'-Klasse mit wiederverwendbaren Auffüllwerten hinzu. Wir fügen auch eine Klasse von "Borderbottom" hinzu, um jeder Zeile einen Rahmen zuzuweisen. Unser CSS für diesen Abschnitt: Jetzt erstellen wir eine responsive Zeile genau wie unsere Kopfzeile, jedoch mit etwas anderen Abmessungen, um ein größeres Bild zu erhalten. Wir haben hier einen Button mit der Klasse 'buttonwrapper' hinzugefügt. Es enthält eine aufgefüllte Zelle mit einer Hintergrundfarbe und anschließend eine Textverknüpfung. Ich ziehe es vor, diese Methode zu verwenden, da Sie damit Schaltflächen mit fließender Breite haben können. Dies ist sehr nützlich, wenn Sie eine wiederverwendbare Vorlage erstellen, bei der die Breite jeder Schaltfläche bei jeder Verwendung anders ist. Wenn Sie für Ihre Schaltflächen eine feste Breite haben, können Sie den Bulletproof-Schaltflächengenerator in Campaign Monitor verwenden. Unsere Styles für den Button: Neben unserer eingestellten Breite für diese neue Klasse 'col380', werden wir unsere Liste der Stile für Apple Mail hinzufügen. Es sieht jetzt so aus: Dies ist eine sehr einfache Reihe; Wir setzen einfach ein Bild auf 100% der Breite der E-Mail und stellen sicher, dass die Höhe automatisch mit CSS eingestellt wird. In unserem CSS: Zum Schluss fügen wir eine Textzeile ohne den Rand unten hinzu: 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-Symbole. Wir fügen die erforderlichen Styles für unsere Fußzeile zum CSS hinzu: Für Handys ist es ideal, wenn die gesamte Schaltfläche ein Link ist, nicht nur der Text, da es sehr viel schwieriger ist, einen kleinen Textlink mit dem Finger anzuvisieren. Da diese Arbeit nicht auf allen Desktop-Clients möglich ist, wird das Padding nicht vollständig unterstützt Wir müssen die Farbe von der entfernen Ich werde beide verwenden Wenn Sie jetzt irgendwo auf die farbige Schaltfläche auf dem Handy tippen, ist dies ein Link! Wenn Sie möchten, können Sie jetzt Verbesserungen an Ihrem Layout vornehmen, indem Sie Klassennamen auf Elemente anwenden, die Sie steuern möchten, und dann die neuen Regeln in der gerade erstellten Medienabfrage erstellen. Als Beispiel verwandeln wir unseren Abmeldelink in eine Schaltfläche, indem wir dem Link eine Klasse hinzufügen: und fügen Sie der Medienabfrage das folgende CSS hinzu: Sie können auch auf die Klassen .innerpadding, .header und .footer abzielen, um die Auffüllung von Clients zu reduzieren, die Medienabfragen unterstützen. Stellen Sie schließlich wie immer sicher, dass Sie validieren (mithilfe des W3C-Validators - Sie sollten nur einen Fehler für das proprietäre 'yahoo'-Attribut am body-Tag erhalten), und testen Sie mit Live-Geräten und einem Webvorschau-Service wie Litmus oder E-Mail Acid. Erstellen Sie responsive E-Mails, die in jedem E-Mail-Client gut aussehen! Wenn Sie eine professionelle, einsatzbereite Lösung benötigen, ist eine responsive E-Mail-Vorlage die richtige Option für Sie. Um das Gelernte auf die nächste Ebene zu bringen, lesen Sie die nächsten Tutorials: Header erstellen
Hallo! .Header Auffüllen: 40px 30px 20px 30px;
Erste Responsive Row hinzufügen
Linke Spalte
Rechte Spalte
Lassen Sie mindestens 25 Pixel Atempause, um zu verhindern, dass Outlook Ihre Tische stapelt Halt! Alternativer Tipp zum Tricking von Outlook
Fortfahren…
style = "width: 100%; max-width: 425px;">
.col425 width: 425px! wichtig;
ERSTELLEN Responsive Email Magic .Untertitel Schriftgröße: 15px; Farbe: #ffffff; Schriftfamilie: serifenlos; Buchstabenabstand: 10px; .h1 Schriftgröße: 33px; Zeilenhöhe: 38px; font-weight: fett; .h1, .h2, .bodycopy color: # 153643; Schriftfamilie: serifenlos;
Erstellen der einspaltigen Textzeile
Willkommen in unserer responsiven E-Mail! Lorem ipsum dolor sitzt amet, consectetur adipiscing elit. In Tempus adipiscing felis sitzen Sie amet blandit ipsum volutpat sed. Morbi porttitor, eget accumsan dictum, nisi libero ultricies ipsum, in neuem Zustand in erat. .innere Polsterung Polsterung: 30px 30px 30px30px; .borderbottom Rand unten: 1px fest # f2eeed; .h2 Polsterung: 0 0 15px 0; Schriftgröße: 24px; Zeilenhöhe: 28px; font-weight: fett; .bodycopy font-size: 16px; Zeilenhöhe: 22px;
Doppelsäulenartikel erstellen
Lorem ipsum dolor sitzt amet, consectetur adipiscing elit. In Tempus adipiscing felis sitzen Sie amet blandit ipsum volutpat sed. Morbi porttitor, eget accumsan dictum, nisi libero ultricies ipsum, in neuem Zustand in erat.
Beanspruchen deine! .button text-align: center; Schriftgröße: 18px; Schriftfamilie: serifenlos; Schriftdicke: fett; padding: 0 30px 0 30px; .button a color: #ffffff; Textdekoration: keine;
@media only screen und (min-device-width: 601px) .content width: 600px! important; .col425 width: 425px! important; .col380 width: 380px! important;
Einspaltiges Bild erstellen
img height: auto;
Erstellen der abschließenden Klartextzeile
Lorem ipsum dolor sitzt amet, consectetur adipiscing elit. In Tempus adipiscing felis sitzen Sie amet blandit ipsum volutpat sed. Morbi porttitor, eget accumsan dictum, nisi libero ultricies ipsum, in neuem Zustand in erat. Erstellen der Fußzeile
® Jemand irgendwo 2013
Abmelden aus diesem Newsletter sofort
.footer padding: 20px 30px 15px 30px; .footercopy font-family: serifenlos; Schriftgröße: 14px; color: #ffffff; .footercopy a color: #ffffff; Textdekoration: Unterstrichen;
Schaltflächen für Handys optimieren
Tags), das ist etwas, das ich mithilfe von Medienabfragen zur mobilen Version hinzufüge. auf die es aktuell angewendet wird, und wenden Sie es dann wieder an tag mit viel polsterung. maximale Breite und max-gerätebreite in dieser Medienabfrage in einem Versuch, einen Fehler in Outlook.com auf IE9 zu vermeiden.@media only screen und (max-width: 550px), screen und (max-device-width: 550px) body [yahoo] .buttonwrapper hintergrundfarbe: transparent! wichtig; body [yahoo] .button a background -Farbe: # e05443; Polsterung: 15px 15px 13px! wichtig; Anzeige: Block! Wichtig;
Weitere Verbesserungen bei Medienabfragen
Abmelden aus diesem Newsletter sofort body [yahoo] .unsubscribe display: block; Rand oben: 20px; Polsterung: 10px 50px; Hintergrund: # 2f3942; Grenzradius: 5px; Textdekoration: keine! wichtig; Schriftdicke: fett;
body [yahoo] .hide display: keine! wichtig;
Testen Sie und gehen Sie!
Accentsconagua