Share
Die Tuts + E-Mails (Newsletter, Digests usw.) wurden kürzlich komplett überarbeitet, einschließlich neuer Designs und einer neuen Plattform. In dieser Fallstudie wird erläutert, wie ich sie in HTML und CSS erstellt habe, basierend auf den Designs des ersten Teils dieser Serie.
Als es an der Zeit war, die glänzenden neuen Tuts + E-Mail-Vorlagen zu erstellen, hatte ich das Glück, die Designs ziemlich gut zu kennen. Während der Entwurfsphase hatte Ian mich mit wichtigen Entscheidungen befasst und mir viele Fragen gestellt, um sicherzustellen, dass wir keine klassischen E-Mail-Gotchas hatten. Dieser Prozess war eine hervorragende Grundlage für mich und ich war bereit, direkt nach den Entwürfen einzutauchen.
Ian schickte mir die Designs, eine Übersicht der Layouts, einen Leitfaden für das Rasterlayout und einen Styleguide mit allen erforderlichen Schriftgrößen und Farben. Ich war bereit zu beginnen.
Mein erster Schritt ist immer das Skizzieren. Ziel ist es, alle unterschiedlichen Module zu identifizieren, wobei geringfügige kosmetische Unterschiede ignoriert werden. Dieser Prozess gibt mir einen abschließenden Satz von zu erstellenden Schlüsselmodulen, die ich einzeln durcharbeiten kann, um die Primärstruktur aufzubauen.
Nachdem ich diese identifiziert habe, baue ich sie in vielen Fällen in eine einzige Seite ein, bevor sie zu einem späteren Zeitpunkt getrennt wurde. Layouts sind in diesem Zustand jedoch sehr unpraktisch. Stattdessen habe ich jedes Layout gemäß den Entwürfen entwickelt, damit sie einfacher überprüft und genehmigt werden können.
In Bezug auf meine skizzierte Zusammenfassung der Module konnte ich berücksichtigen, wann ein Modul für mehrere Vorlagen wiederverwendbar sein musste, und es entsprechend zu erstellen. Später würde ich Klassen auf jeder Variante aufbauen, wie var-admin und Var-Digest, So kann ich für jedes Layout spezifische Stile erstellen.
Ich begann mit dem Einstellen einiger weniger Variablen für Elemente, von denen ich wusste, dass ich sie immer wieder verwenden würde, wie Farben und Maße.
Ein Leitfaden zu den meisten typografischen Stilen Einige meiner Variablen (in der LESS-Syntax) sind unten aufgeführt.
// Variablen @ bg-body: # f2f2f2; @ Paletten-Text: # 58595a; @ palette-navy: # 212a34; @ palette-design: # c94e4b; @ Palettencode: # 4cc1be; @ palette-web: # 49b293; @ palette-photography: # 8360a8; @ Palettenspiel: # 72BF40; @ Paletten-Computer: # 5d7dba; @ palette-business: # f38844; @ palette-3d: # f95858; @ palette-music: # 56a4ca; @ Palettenfußzeile: # 5a6e7a; @ Palettenadresse: # 999999; @ divider-color: #EAEAEA; @ link-color: # 136fd2; @ alt-color: @ paletten-text; @ Breite: 640px; @ äußere Rinne: 53px; @ content-width: @ width - (@ äußere Dachrinne * 2); @ Rastereinheit: 16px; .rund (@radius: 1px) Randradius: @radius; -webkit-border-radius: @radius;
Ich lege immer meine Farben voran Palette um sie zusammenzuhalten Dies erleichtert mir die Auswahl einer Farbe aus der Dropdown-Liste mit Vorschlägen in Sublime Text:
Der nächste wichtige Schritt war das Einrichten der in den Designs verwendeten Webfonts. Die Schrift ist Roboto von Google Fonts verfügbar, also habe ich dieses Tag zu der hinzugefügt der Vorlage:
Dies wird von Google Fonts und Links zu deren CSS für die vier verschiedenen Gewichtungen von Roboto generiert, die wir verwenden.
Ich habe die Schriftart auf das Body-Tag und meine Haupt-Wrapper-Tabelle für die Clients angewendet, die das Body-Tag ignorieren oder die Formatierung entfernen.
body, .wrapper font-family: 'Roboto', serifenlos;
Um zu verhindern, dass Outlook 2007-2016 unter Windows Times New Roman anzeigt, wie es bei einem unbekannten Schriftbild der Fall ist, habe ich im Outlook einen bedingten Outlook-Code eingerichtet der Vorlage:
Dadurch wird sichergestellt, dass jede Instanz des Webfonts in Outlook mit einer serifenlosen Datei überschrieben wird. Ich wende es auf Tabellen und Divs an, die einzigen Elemente, die verwendet werden, um Inhalte in der Vorlage zu enthalten. Es ist nicht notwendig, auf eine niedrigere Ebene als diese zu wechseln, da alle anderen Tags dies in Outlook erben.
Als nächstes ging es um strukturelle Codierung. Ich begann mit dem ersten Modul, das ich entworfen hatte: dem Mastkopf. Eine Herausforderung war hier das Logo, denn bei einigen Vorlagen sieht es auf dem Handy etwas anders aus:
Um dies zu erreichen, habe ich auf dem Handy das Hauptlogo und den Text oben versteckt. Ich versteckte auch das Logo und fügte das kleine Blatt als Hintergrundbild zum Mastkopf hinzu.
.logo img display: keine! wichtig; .logo Hintergrundbild: URL (images/[email protected]); Höhe: 17px; Hintergrundposition: Mitte Mitte; Hintergrundgröße: 15px 17px; Hintergrundwiederholung: keine Wiederholung;
Der nächste Abschnitt, den ich in Angriff nahm, war der "Helden" -Artikel in den Digest-E-Mails. Der erste schwierige Teil hier sind die Etiketten. In den Designs tauchten sie neben dem Überschriftentext auf dem Desktop auf über der Text auf dem Handy. Um dies im Code zu erreichen, können wir einige Anzeigeeigenschaften verwenden, um sie zu verschieben.
Zuerst erstellte ich das Überschrift-Tag, dessen Inhalt in zwei Bereiche aufgeteilt war, einen für den Text und einen für das Etikett.
Verwenden von Kurven in Adobe Photoshop AUSGEWÄHLTE KURSE
In Sachen Stil, die .Text span erbt das h2-Styling und dann das .Etikette span ist separat gestaltet, um es kleiner zu machen und einen farbigen Hintergrund zu geben:
.Beschriftung Anzeige: Inline-Block; Rand links: 5px; Polsterung: 3px 8px; vertikal ausrichten: 4px; Grenzradius: 3px; -webkit-border-radius: 3px; Farbe: #ffffff; Schriftgröße: 8px; Zeilenhöhe: 10px; font-style: normal; Buchstabenabstand: 0.1em;
Anschließend werden mithilfe von Medienabfragen die Elemente in kleineren Ansichtsfenstern ausgetauscht:
@media screen und (max-width: 700px) h2 display: table! important; h2 .text display: tabellenfußgruppe! wichtig; h2 .label margin-bottom: 12px! wichtig;
Das h2 ist unser Container, und wir haben es so eingestellt, dass es als Tabelle angezeigt wird, damit wir das erkennen können .Text span, um sich wie die Fußzeilengruppe dieser Tabelle zu verhalten und ganz nach unten zu gelangen. Das .Etikette span wird dann oben angezeigt, und wir fügen darunter einen Rand hinzu, um ihm etwas Raum zum Atmen zu geben.
Es ist nicht überraschend, dass Outlook unter Windows (2007-2016) die Beschriftungen nicht ordnungsgemäß anzeigen wollte, da der Randradius nicht beachtet wird und die Inline-Elemente nicht aufgefüllt werden. Die Ergebnisse waren wirklich nicht gut, also habe ich für Outlook ein alternatives Styling eingerichtet, das ich in der Vorlage mit bedingtem Code platziert habe:
Das bedeutet, dass sie in Outlook als einfacher farbiger Text angezeigt werden:
Die Werbe-Vorlage hat eine sehr charakteristische Funktion: einen randlosen Helden mit einem Hintergrundbild.
Dank an Marco Goran Romano für das brillante Bild, das als Platzhalter verwendet wird Hintergrundbilder in E-Mails werden nicht überall unterstützt. Die beiden wichtigsten E-Mail-Clients mit Problemen sind Outlook 2007-2016 (Windows) und Google Mail.
Ausblick Es werden keine regulären Hintergründe angezeigt, sodass eine spezielle Vektor-Markup-Sprache erforderlich ist, damit sie funktionieren. (Stig at Campaign Monitors backgrounds.cm ist ein großartiges Werkzeug zum Generieren dieses Codes). Das Problem dabei ist jedoch, dass Sie zwei Codeblöcke erhalten: einen in HTML und einen in VML. Dies ist riskant, wenn Sie wissen, dass andere Benutzer das Hintergrundbild auf einfache Weise aktualisieren können müssen: Wenn jemand versucht, dies zu tun, ohne die Anweisungen richtig durchzulesen, wird er wahrscheinlich falsch liegen.
Google Mail zeigt Hintergrundbilder an, respektiert jedoch nicht die Hintergrundgröße oder Hintergrundposition Eigenschaften, die das Styling erschweren können.
Wir haben uns die Teilnehmernummern angesehen und konnten den Anruf über Outlook tätigen: Es wäre in Ordnung, wenn Outlook-Benutzer anstelle des Bildes eine durchgehende Fallback-Farbe sehen würden.
Für Google Mail-Nutzer müssen bei der Verwendung von Vorlagen einige Richtlinien für akzeptable Bilder festgelegt werden. Der Hintergrund sollte entweder ein nahtloser, sich wiederholender Hintergrund sein oder so eingerichtet sein, dass er bei 100% immer gut aussieht und in der oberen linken Ecke fixiert ist.
Interessanterweise Gmail tut Unterstützung vertikal Hintergrundposition Eigenschaften auf der linken Seite: oben links , unten links und Mitte links . Leider können Sie nicht horizontal positionieren, was Sie normalerweise tun möchten, indem Sie es anzeigen lassen Mitte Mitte .
In einigen Anzeigenblöcken konnten wir Hintergrundbilder in Google Mail verwenden, da sie unten links verankert sind. Diese Blöcke haben auch in Outlook eine durchgehende Hintergrundfarbe erhalten.
Ich spielte mit zwei Möglichkeiten herum, den negativen oberen Rand des Mastkopfs zur Wirkung zu bringen, wobei der weiße Inhalt mit dem Inhalt des Mastkopfs überlagert erscheint.
In der Webentwicklung würden Sie ein Negativ hinzufügen Rand oben In die Inhaltsbox stäuben Sie Ihre Hände und machen Sie Ihren Tag mit.
In der E-Mail-Entwicklung ist dies jedoch nicht möglich. Negative Margen werden nur von einer Handvoll E-Mail-Clients unterstützt, sodass viele übliche Margen im Dreck bleiben (wie Google Mail, Yahoo und Outlook.com)..
Das blieb jedoch unsere erste Option: Verwenden Sie ein Negativ oberer Rand als progressive Erweiterung, die in allen nicht unterstützten Clients mit einem Spielraum von 0 angezeigt wird (siehe unten links). Der Nachteil ist, dass viele Kunden diese randlose Version sehen würden und das Layout ohne sie etwas verloren hätte.
Die andere Alternative bestand darin, den negativen Rand zu fälschen, indem ein leerer weißer Tisch in der richtigen Höhe und Breite erstellt wurde. Der Nachteil dieses Ansatzes besteht darin, dass die Google Mail-App oft winzige Haarlinien zeigt, wenn der Inhalt auf dem Handy herabgesetzt wird, wenn der Inhalt auf dunklem Hintergrund heller ist oder umgekehrt. Dies sind keine echten Linien oder Grenzen, sondern nur winzige Störungen, die nicht mit Code behoben werden können. Wir haben uns für dieses Szenario entschieden, weil es der größten Anzahl von Lesern zugute kam und die Haarlinien im Allgemeinen nicht wahrnehmbar waren. Wir haben uns auch entschieden, die Angelegenheit im Auge zu behalten und erneut zu besprechen, wenn wir mit den Ergebnissen nicht zufrieden sind. (Leider konnten diese Vorlagen nicht mit der Fluid-Hybrid-Methode erstellt werden, da sowohl MailChimp als auch Campaign Monitor große Probleme damit verursachen.)
Keine Überlappung
Überlappung mit der kleinen Linie von Google Mail zwischen den AbschnittenIch wusste, dass ich die Vorlagen an Ian zur Integration mit mehreren E-Mail-Versandplattformen übergeben würde: MailChimp und Kampagnenmonitor Da mein Code mit beiden Vorlagensprachen gut funktionieren musste, folgte ich ein paar Tipps, um diesen Prozess so reibungslos wie möglich zu gestalten.
Anmerkung des Herausgebers: Seit der Design- und Entwicklungsphase haben wir eigentlich von MailChimp gewechselt, stattdessen nur Campaign Monitor. Die folgenden Tipps sind jedoch sehr nützlich!
Zum Beispiel habe ich mit Textstyling alles auf das Format angewendet Für Kampagnenmonitorvorlagen ist ein Für eine der Vorlagen mussten verschiedene farbige Überschriften für jedes Thema vorhanden sein, die beim Erstellen eines Newsletters in MailChimp ausgewählt werden konnten. Ich habe einen Stapel von Überschriftenstilen eingerichtet, die aus einem Dropdown-Menü in MailChimp ausgewählt werden können, wobei die richtige Syntax zum Definieren der Stile verwendet wird Aber… Ich stellte dies Ian zur Verfügung, der herausfand, dass es überhaupt nicht funktionierte. Keiner dieser Überschriften wurde bei der Bearbeitung des Textes in der Dropdown-Liste angezeigt. Er bastelte daran und stellte fest, dass MailChimp diese Optionen nicht als auswählbare Überschriftenstile anzeigt, es sei denn, sie verfügen über eine Art font-abhängiger Eigenschaft wie Es funktionierte auch nicht, weil ich es separat geliefert habe und jeder spezielle MailChimp-Vorlagencode für bearbeitbare Bereiche oder benutzerdefinierte Stile in der angezeigt werden muss Nun, da alle unsere Layouts betrachtet und genehmigt wurden, Probleme sortiert und Kompromisse beschlossen wurden, war es an der Zeit, die Tests abzuschließen und alle Dateien für die Bereitstellung vorzubereiten. In Litmus und Email on Acid habe ich viele abscheuliche Tests gemacht. Ich verwende Trello, um Anforderungen, Aufgaben und Fehler für jedes Projekt, an dem ich arbeite, zu verfolgen. Ich habe meine Fehler- und Aufgabenlisten durchgearbeitet, bis nichts mehr übrig war und die Dateien bereit waren. Das Envato-Team wollte in den Code eintauchen, um verschiedene Layouts zu mischen und abzugleichen. Daher musste ich klare HTML- und CSS-Kommentare angeben und sicherstellen, dass die Übertragung von Modulen zwischen Vorlagen keine Katastrophe verursacht. Ich habe jede Vorlage mit einer eigenen Körperklasse eingerichtet: Richten Sie dann eine Klasse ein, die hinzugefügt werden kann, um leicht zwischen einem weißen und einem grauen Hintergrund zu wechseln: Ich habe auch layoutspezifische Styles (sowohl für Mobilgeräte als auch für Desktop) in einzelne Stylesheets aufgeteilt, um die Dateigröße zu sparen: Ich gab Anweisungen zum Hinzufügen eines Links zu jedem Stylesheet, bei dem Elemente aus diesem Layout verwendet wurden. Wenn zum Beispiel ein Digest-Modul in die Newsletter-Vorlage portiert wird, sollte der Link Digest-CSS zum hinzugefügt werden Bei allgemeinen Elementen, wie der Anzeigenleiste und den Anzeigenblöcken, habe ich darauf geachtet, dass die Gestaltung völlig unabhängig vom Layout ist, sodass sie frei verschoben werden können. Ich habe alle diese Anweisungen in eine README-Datei eingefügt und diese mit dem gesamten HTML-Code und den zu sendenden Bildern gepackt. Und dann waren wir fertig! Ich habe alles an Ian geschickt, der den Rest der Integration selbst übernommen hat. Es ist ein bisschen knifflig, Schablonendateien zu übergeben, ohne während der Integration obsessiv testen und erneut testen zu können, aber ich hatte natürlich das größte Vertrauen in Ian! Nachdem seine Arbeit abgeschlossen war und es Zeit war, mit dem Senden zu beginnen, schickte Ian Testexemplare an meine Litmus- und E-Mail-Konto auf Acid-Konten, damit ich die Vorschau des Renderings durchgehen und Probleme erkennen konnte. Hier und da sind ein paar Hintergrundbilder abgelegt, die wir repariert haben, bevor die Vorlagen endlich verschickt werden konnten. Im nächsten und letzten Teil dieser Serie werden wir unsere statischen Vorlagen auf die nächste Stufe bringen und zeigen, wie wir sie in Campaign Monitor integriert haben! , nicht untergeordnete Elemente. Wenn Sie Zellen oder Absätze in bearbeitbare Bereiche konvertieren, besteht keine Gefahr, dass Sie irgendwo Stil verlieren. Der Tabelleninhalt übernimmt den Textstil des übergeordneten Elements für alle E-Mail-Clients. Die einzige Ausnahme ist AOL-Mail, die die E-Mail häufig nicht erbt
Farbe Eigenschaft, es sei denn, Sie platzieren das in der einzelnen Zelle. Verwenden Sie Absätze für Text
mehrzeilig Element, das definiert werden soll, wenn ein bearbeitbarer Textblock verwendet werden soll, der Zeilenumbrüche, Fett- / Kursiv / Unterstriche, verknüpften ausgewählten Text usw. zulässt. Außerdem wird der gesamte Text automatisch in das Textfeld eingebettet mehrzeilig mit einer p Tag, der Ihr Layout wirklich beschädigen kann, wenn Sie keine Absätze zugelassen haben. Wenn Sie in Campaign Monitor einen Zeilenumbruch verwenden, wird der aktuelle Absatz beendet und ein neuer Absatz gestartet. MailChimp macht dies nicht, und wenn Sie einen Zeilenumbruch erstellen, wird einfach ein hinzugefügt Machen Sie Varianten für den Benutzer wählbar
@Stil Blöcke:/ ** * @style topic-design * / .topic-design color: # c94e4b; .topic-design a color: # c94e4b; / ** * @style Topic-Code * / .Topic-Code color: # 4cc1be; .Topic-Code a color: # 4cc1be; / ** * @style topic-web * / .topic-web color: # 49b293; .topic-web a color: # 49b293; / ** * @style topic-photography * / .topic-photography color: # 8360a8; .Topic-Fotografie a color: # 8360a8; / ** * @style Themenspiel * / .topic-game color: # 72BF40; .topic-game a color: # 72BF40; / ** * @style topic-computer * / .topic-computer color: # 5d7dba; .Topic-Computer a color: # 5d7dba; / ** * @style topic-business * / .topic-business color: # f38844; .topic-business a color: # f38844; / ** * @style topic-3d * / .topic-3d color: # f95858; .topic-3d a color: # f95858; / ** * @style topic-music * / .topic-music color: # 56a4ca; .topic-music a color: # 56a4ca;
Schriftfamilie oder Schriftgewicht . Ihrer Vorlage; Es kann keine externe Datei sein. Also haben wir ein hinzugefügt Schriftdicke: fett Deklaration zu unseren Überschriftenstilen, steckte das CSS in den Kopf und brachte alles zum Laufen.Abschließende Prüfung und Zusammenfassung
Muss Trello für die Aufgabenverwaltung lieben Einrichten von Vorlagen
Kopf der Newsletter-Vorlage vor dem Kopieren des Moduls HTML.
E-Mail-Zustellungen Versand
ähnliche Links
Accentsconagua