Reaktionsschnelle HTML-E-Mail-Entwicklung

1. Willkommen!: Hallo, mein Name ist Vanessa Bias und ich werde Ihnen eine ansprechende E-Mail-Entwicklung beibringen. Ihr Klassenprojekt wird es sein, eine statische HTML-E-Mail-Vorlage zu nehmen und es skalierbare und mobile Geräte mit den Techniken zu machen , die ich in meiner täglichen Arbeit verwende. Diese Klasse richtet sich an Studenten, die die Grundlagen von HTML und CSS verstehen. Aber ich werde die Konzepte erklären, die in dieser Klasse verwendet werden, während wir weitergehen. Für einen Primer zur Entwicklung statischer HTML-E-Mails können Sie meine vorherige Skulpturenklasse anzeigen, Intro zur HTML-E-Mail-Entwicklung. Lasst uns anfangen. Glückliche Codierung. 2. Projektschritt 1: Füge die Medien hinzu: Sie können diese Projektdateien von unten und der Skill Share Klasse herunterladen.So wie Sie sehen können, ist diese E-Mail-Datei nicht mobile responsive.So werden wir beginnen, indem Sie die Medienabfragen zu dieser E-Mail hinzufügen. Sie können so viele Haltepunkte hinzufügen, wie Sie möchten. Aber für diese Klasse werden wir nur einen Haltepunkt abdecken. Also innerhalb der Style-Tags, werden wir eine Medienabfrage mit einer max-Breite von 480 Pixel hinzufügen. Wenn Sie also für das Web entwerfen, möchten Sie sicherstellen, dass Sie zuerst Mobilgeräte entwerfen und dann zu Ihren Desktop-Breakpoints wechseln. Aber für E-Mail tun wir normalerweise Desktop zuerst und dann brechen Sie es für mobile. Wenn Sie also sicherstellen möchten, dass Ihre Medienabfrage funktioniert, besteht ein guter Test darin, die Hintergrundfarbe oder etwas dieser Art zu ändern, damit Sie tatsächlich sehen können , dass die Medienabfrage ON ist und das bei der Fehlerbehebung später nach unten hilft die Zeile, wenn Ihr CSS nicht funktioniert. Also werden wir eine Hintergrundfarbe von Rot machen und hier habe ich den universellen Selektor hinzugefügt, also wird es die Hintergrundfarbe jedes Elements in der E-Mail ändern. Also dann werde ich das „Speichern“ und gehen Sie zurück zum Browser und „Aktualisieren“. Wenn ich die Bildschirmgröße kleiner mache, können Sie sehen, dass sie in eine rote Hintergrundfarbe geändert wurde. Das sagt mir also, dass die Medienabfrage funktioniert. Also brauchen wir das nicht mehr, also können wir das löschen und ich werde erneut „Speichern“ drücken. Im nächsten Video werden wir anfangen, diese E-Mail auf eine mobile Größe zu zerlegen. 3. Project 2: Füge die display hinzu: Jetzt werden wir das CSS ändern, um dieses dreispaltige Layout so zu machen , dass jede einzelne Spalte auf einer mobilen Bildschirmgröße stapelt. Um zu beginnen, werden wir eine Zeile für Tabellen, Tabellenzeilen und Tabellenzellen erstellen und wir geben ihm eine Breite von 100 Prozent so dass es skalierbar ist und wir werden ihm eine Anzeigeeigenschaft mit dem Wert von Block geben. Was das tun wird, ist dies der Schlüssel hier, um sicherzustellen, dass alles auf Handy stapelt. Da wir dann einige Bilder haben, die breiter sind als andere und wir einige Bilder haben, die breiter als der Haltepunkt sind, werden wir diese Bilder skalierbar machen, indem wir eine Breite von 100 Prozent geben und wir aktualisieren und Ändern Sie die Größe des Bildschirms und Sie können sehen, dass sich die Spalten jetzt untereinander stapeln. Aber wir bekommen immer noch eine Bildlaufleiste für links nach rechts und sie enthalten sich nicht wirklich innerhalb des Tisches. Was wir jetzt tun können, ist das Hinzufügen eines universellen Selektors, also des Sternchens, und wir werden ihm eine Box-Größeneigenschaft mit dem Wert von border-box geben und was dies tut, ist, dass es die Polsterung und die Grenze in die -Elemente Gesamtbreite. Also wird es das für alles tun. Also gehen wir zurück und drücken Aktualisieren, und Sie können sehen, dass wir keine Bildlaufleiste mehr haben und die Bilder jetzt in der Tabelle enthalten sind. 4. Projektschritt 3: Füge die 3: hinzu: Es gibt bestimmte Elemente, die Sie mit CSS anvisieren möchten , anstatt nur auf jedes einzelne Bild oder jede einzelne Tabelle zu zielen. Also in diesem Fall haben wir das Bild auf 100 Prozent Web eingestellt ist, so dass sie skalierbar sind. Aber leider zielt das auch auf die Social-Media-Icons ab, mit denen wir nicht 100 Prozent am Ende der E-Mail sein wollen. So können wir eine CSS-Klasse verwenden, um dies zu beheben. Wenn wir also bis zum Ende des HTML scrollen, können wir eine Klasse hinzufügen, und wir werden dieser Klasse einen Namen geben, der später erkennbar ist. Also werden wir soziale Symbole machen und wir können einfach kopieren, damit Sie es nicht neu schreiben müssen, und fügen Sie es auf jedes einzelne dieser Bilder ein. Speichern und scrollen Sie zurück zum CSS und dem Kopf, und wir können innerhalb der Medienabfrage diese Klasse mit einer Breite von hinzufügen , möchte ich sagen, etwa 30 Pixel klingt richtig. Wir möchten, dass sie alle in eine Zeile passen und die Seite speichern und dann aktualisieren, und Sie können sehen, dass die Bilder oder die Social-Media-Symbole jetzt alle 30 Pixel sind. Also müssen wir nur diese eine CSS-Regel tun, um alle von ihnen anzusprechen. Manchmal ist es kein Bild, das Sie ändern möchten, manchmal gibt es andere Dinge. Zum Beispiel, dieses dreispaltige Layout hier und dieses zweispaltige Layout, dieses hat, wenn Sie es ändern, weniger Abstand unterhalb der Bilder oder weniger von einem Rand unterhalb der Bilder als die anderen Spaltenelemente dort. Also möchte ich ein wenig Platz über dieser Unterüberschrift hinzufügen , damit es mit dem übereinstimmt, wie die anderen aussehen. Was wir also tun können, ist, ich denke, wir sollten diesem Bild hier einen Spielraum hinzufügen, um diese Unter-Überschrift zu drängen. Also, wenn wir gehen, um es hier zu finden, Observatorium, und wir können dies eine Klasse von geben, sagen wir Sternwarte Bild und speichern. Dann sichern Sie sich im CSS. Könnte Observatorium Bild hinzufügen, und dann könnten wir einen Rand unten tun, sagen wir etwa 15 Pixel und speichern und aktualisieren. Jetzt können Sie sehen, dass der Raum über dem Unterkopf und unter dem Bild mit den anderen Spalten übereinstimmt. Aber wenn Sie die Größe auf die volle Desktopbreite ändern, gab es keine Änderung. Es gilt nur für die mobile Größe. Also im nächsten Video, deckt die Verwendung von Display keine für, wenn wir ein Element ausblenden wollen , die wir nicht wollen, auf einem mobilen Bildschirm Größe zu sehen. 5. Projektschritt 4: Verblende unbenutzte Elemente: Manchmal gibt es ein Element Ihrer E-Mail, das Sie nicht auf mobilen Größen anzeigen möchten. Das könnte alles von, sagen wir, ein Bild sein, das nur für dekorative Zwecke auf dem Desktop vorhanden ist und es wird zu viel Platz auf dem Bildschirm auf Mobilgeräten beanspruchen, oder vielleicht gibt es einen Link, den Sie verstecken möchten, der nur auf dem Desktop ist -Erfahrung, auf die Sie nicht möchten, dass Ihre mobilen Benutzer klicken. In diesem Fall gibt es einen zusätzlichen Platz über der E-Mail, oberhalb des View-in-Browser-Link, der durch einige ungenutzte Tabellenzellen hier im HTML verursacht wird. Auf der Desktop-Größe dient dies einem Zweck, wenn Sie einenlinksbündigen Pre-Header-Text hier oder vielleicht einen anderen Linkhaben möchten linksbündigen Pre-Header-Text hier oder vielleicht einen anderen Link und dann Ihren View-in-Browser-Link rechtsbündig ausgerichtet haben. Das ist, wo Sie es in dieser Vorlage platzieren würden. Da wir brauchen, dass es auf der Desktop-Größe, aber nicht auf der mobilen Größe, was wir tun werden, ist, dass wir es mit einer Anzeige keine Eigenschaft ausblenden. Ich habe meine Display-None-Regel genannt, keine anzeigen. Es hat eine Eigenschaft von display und einen Wert von none, und was dies tut, ist, dass es dem Browser oder dem E-Mail-Client sagt , dieses Element zu verstecken, wenn es um diesen Bruchpunkt geht. Wir können hier zu dieser ersten Tabellenzelle gehen. Wir werden ihm die Klasse der Anzeige keine geben, und wir werden diese Klasse auch auf diese anwenden und speichern, aktualisieren und die Größe ändern. Sie können sehen, dass es jetzt keinen zusätzlichen Platz über dem View-in-Browser-Link gibt. 6. Danke!: Danke, dass Sie diese Klasse absolviert haben. Vergessen Sie nicht, ein Projekt in dieser Klasse zu erstellen, um Ihre neue responsive HTML-E-Mail zu zeigen. Wenn Sie Fragen zu Konzepten haben in dieser Klasse behandelt werden oder etwas, das ich verpasst habe, hinterlassen Sie einen Kommentar unten oder senden Sie mir einen Tweet. Wie immer, glückliche Codierung.