Create your very own Auto Publish News/Blog Site and Earn Passive Income in Just 4 Easy Steps
Dies ist eine schwierige Situation, mit der E-Mail-Entwickler bestens vertraut sind. Sie erhalten von einem Designer ein E-Mail-Kampagnenmodell. Um es sowohl funktional als auch zugänglich zu machen, müssen Sie überlappende Elemente verwenden.
Als Entwickler ist es unsere Aufgabe, die E-Mail so nah wie möglich am vorgeschlagenen Design zu gestalten. Allerdings ist das Codieren überlappender Elemente in einer HTML-E-Mail im Vergleich zur Webentwicklung viel komplizierter. Allerdings ist es nicht unmöglich.
Dieses Mal werden wir in Notes from the Dev: Video Edition eine Technik zum Codieren überlappender Elemente in E-Mails untersuchen, die als „ falsche absolute Positionierung. Mein Gast für diese Folge ist Niven Ranchhod von mailix by Mayoris AG. Er wird uns diese Methode in Aktion zeigen.
Schauen Sie sich das Video unten an, um zu sehen, wie Niven eine falsche absolute Positionierung nutzt, um Rendering-Engines auszutricksen, damit er E-Mails mit separatem, aber überlappendem Text, Hintergrund und Grafiken erstellen kann.
Was ist die absolute Position in CSS?
Die CSS-Positionseigenschaft wird verwendet, um Objekte neben- oder übereinander zu platzieren und ihre Platzierung auf andere Weise zu steuern. Es gibt fünf verschiedene Arten der CSS-Positionierung (weitere Informationen finden Sie auf CSStricks.com):
- Absolut: Ermöglicht die Platzierung eines Elements an einer beliebigen Stelle.
- Fest: Behält ein Element beim Scrollen im Ansichtsfenster.
- Relativ: Verwendet oben, links, unten und rechts, um die Position eines Elements relativ zu sich selbst anzupassen.
- Statisch: Die Standard-CSS-Position für jedes Element.
- Klebrig: Eine Kombination aus relativ und fest, die ein Element im Blickfeld behält, bis Sie über einen bestimmten Punkt (außerhalb eines übergeordneten Elements) scrollen.
position:absolute ist also ziemlich leistungsfähig, da es dem Programmierer viel Flexibilität hinsichtlich der Platzierung von Elementen bietet. Es gibt nur ein großes Problem für E-Mail-Entwickler …
Warum Sie es „vortäuschen“ müssen
Wie uns „Can I Email“ zeigt, wird die Positionseigenschaft in E-Mails (überhaupt) nicht allgemein unterstützt.
Die Technik, über die wir heute sprechen, wird „falsche absolute Positionierung“ genannt, weil wir einen Hack verwenden, um E-Mail-Client-Rendering-Engines dazu zu bringen, Elemente auf eine ähnliche Weise wie „position:absolute“ zu behandeln. Fake es, bis du es schaffst, oder?
Die ersten Leute, die eine falsche absolute Positionierung für die E-Mail-Entwicklung herausfanden, waren Mark Robbins und Steven Sayo. Weitere Informationen finden Sie in Marks Blogbeitrag und Stevens Artikel auf Medium.
Doch zunächst wollen wir untersuchen, wie Niven diese Technik anwendet. All das finden Sie auch in einem Artikel, den er für mailix der Mayoris AG geschrieben hat.
So erreichen Sie überlappende Elemente in E-Mails
In seiner umfassenden Erklärung der falschen absoluten Positionierung sagte uns Niven, dass wir die Rendering-Engines im Wesentlichen täuschen, indem wir entweder „max-height“ oder „max-width“ auf Null setzen und diese Werte anpassen, um die benötigte genaue Position zu erhalten. Das Anpassen der Breite ist eigentlich eine neue Methode, die Niven aus dem ursprünglichen Ansatz von Mark und Steven übernommen hat.
Bei Verwendung einer falschen absoluten Positionierung bewegt sich das Element (oder der Block), das Sie darunter hinzufügen, in diesen Raum, um die Lücke zu füllen, und der erste Block wird schließlich über dem Element angezeigt, das Sie darunter codiert haben. Wie Niven uns im Video gezeigt hat, können Sie mit diesem Trick ein Element von oben, unten, links oder rechts neu positionieren.
Hier ist ein Blick auf die überlappenden Elemente, die Niven zum Codieren in einer E-Mail benötigte, und wie diese aussah, bevor er eine falsche absolute Positionierung anwendete:
Das ursprüngliche Design
Vor der falschen absoluten Positionierung
Wenn Sie sich das jetzt ansehen, fragen Sie sich vielleicht, warum es sich nicht um eine einzelne, anklickbare Grafik in der E-Mail handeln konnte. Oder vielleicht denken Sie, dass das Zusammenfügen von Bildern in der E-Mail ein akzeptabler Ansatz wäre. Es gibt einige Gründe, warum eine einzige Grafik eine schlechte Idee ist.
- Sie benötigen Live-Text: Da diese Grafik eine Call-to-Action-Schaltfläche (CTA) enthält, wird sie für Abonnenten, bei denen das Herunterladen von Bildern deaktiviert ist, überhaupt nicht angezeigt. Das gilt auch für den Text. Sie können es einfach nicht lesen und klicken nicht auf die Schaltfläche. Vergessen Sie nicht, dass Bilder in Outlook standardmäßig deaktiviert sind.
- Es ist unzugänglichHinweis: Wenn Sie keinen Live-Text verwenden, kann die Bildschirmlesesoftware die E-Mail-Kopie für Personen mit Sehbehinderungen nicht interpretieren. Das bedeutet, dass diese Abonnenten die Nachricht nicht erhalten und auch nicht mit der E-Mail interagieren können.
- Es ist möglicherweise nicht für Mobilgeräte geeignet: Wenn Sie ein Bild wie dieses zusammenfügen und wie ein Puzzle zusammensetzen, könnten Probleme mit der Reaktionsfähigkeit auftreten. Die Teile könnten sich auf Mobilgeräten stapeln und ein hässliches Durcheinander hinterlassen.
Niven wies darauf hin, dass man das Foto und den Hintergrund auch kombinieren könne, um ein einzelnes Hintergrundbild mit Live-Text darüber zu erstellen. Das Problem dabei ist jedoch, dass Sie mehrere Medienabfragen verwenden müssen, um die Größe von Text und Hintergrund für verschiedene Bildschirmgrößen genau anzupassen.
Dafür wäre viel zusätzlicher Code erforderlich, und Niven musste diese E-Mail einfach halten, damit ein Mailix-Client Elemente für verschiedene Marken aktualisieren konnte. Darüber hinaus gab es auch Herausforderungen im Dunkelmodus zu berücksichtigen. Daher bietet die falsche absolute Positionierung eine ideale alternative Lösung.
Erstellen eines E-Mail-Blocks mit überlappenden Elementen
Unten sehen Sie, wie und wo sich die Elemente in dieser kombinierten Blocküberlagerung befinden. Niven wusste, dass es schwierig werden würde. Das Bild muss am unteren Rand der Hintergrundkachel ausgerichtet sein und gleichzeitig über den oberen Rand hinausragen. Der Text muss auf dem Hintergrund liegen und das Bild überlappen, und alle Elemente müssen ausreichend Abstand haben.
Überlappende E-Mail-Elemente
Im E-Mail-Code von Niven werden der Text und die Schaltfläche mit dem Bild kombiniert, um einen Inhaltsblock zu erstellen, der in ein eingeschlossen ist
Um dies zu erreichen, legt Niven die maximale Höhe des fest
Wie Sie im Video sehen werden, bewegt sich die Hintergrund-VML nach oben und der Text und das Bild werden darüber eingeblendet. Dennoch ist es nicht ganz perfekt. Niven musste die Dinge anpassen, um sie in Einklang zu bringen und dem ursprünglichen Design zu entsprechen. Um das zu erreichen, experimentierte er einfach, bis er herausfand, dass die Einstellung der maximalen Höhe auf 20 Pixel das Problem für dieses spezielle Design löste.
Als es darum ging, den Inhalt horizontal anzupassen, verwendete Niven dasselbe Konzept, wandte es jedoch auf die maximale Breite an. Anschließend verwendete er eine größere interne Breite für den Text, sodass der Inhalt nach außen verschoben und eine Überlappung erzeugt wurde.
Wie Niven im Video erklärt, versteckt er sich gewissermaßen im Code, um Elemente dorthin zu verschieben, wo sie platziert werden sollen:
„Alles, was es tut, ist, die Rendering-Engine auszutricksen, indem es sagt: ‚So groß soll ich sein: 225 Pixel breit.‘ Und dann bin ich drinnen tatsächlich 600 Pixel breit. Aber das werde ich der Rendering-Engine nicht sagen.“
~Niven Ranchhod
Wenn Sie diese Methode zur horizontalen Positionierung in Ihrem E-Mail-Code verwenden, müssen Sie experimentieren, um herauszufinden, mit welcher falschen Breite überlappende Elemente so ausgerichtet werden, wie es Ihr Design erfordert.
Bewältigung der Codierungsherausforderungen für Outlook
Wie jeder E-Mail-Entwickler weiß, steckt viel zusätzliche Arbeit darin, die Dinge in Outlook zum Laufen zu bringen. Dieses Mal müssen wir einige bedingte CSS-Anweisungen für den Outlook-Desktop für Windows hinzufügen, da dieser keine verschachtelten VMLs unterstützt.
Aber rate mal was? In dieser Situation können wir position: absolute verwenden, ohne es vorzutäuschen, da die Verwendung der absoluten Positionierung mit VMLs in Outlook unterstützt wird. Allerdings sagte uns Niven, dass er glaubt, dass dies nur in Bezug auf VML zutrifft.
Niven benutzte a
Wie bei der Anpassung der maximalen Höhe musste er auch am bedingten Code einige Anpassungen vornehmen. Es stellte sich heraus, dass die 20 Pixel, die zur korrekten Ausrichtung des Bildes in anderen Clients erforderlich waren, bei Verwendung der Absolutionspositionierung für Outlook -16 Pixel betrugen. Anschließend machte er dasselbe für die Breite.
Auch dies ist etwas, was Niven durch Versuch und Irrtum herausgefunden hat, und Sie müssten dasselbe mit Ihrem Code tun.
Es gibt eine andere Möglichkeit, mit Outlook und VMLs zu arbeiten, die Steven Sayo in Teil 2 seiner Tipps zur falschen absoluten Positionierung beschreibt. Es geht um die Verwendung
Der vollständige Code
Hier ist die vollständige Ansicht von Nivens E-Mail-Code. Es enthält alles, was er verwendet hat, um sowohl eine vertikale als auch eine horizontale, pseudo-absolute Positionierung zu erreichen:
Eine Sache am Design, die nicht erreicht wurde, waren abgerundete Ecken für Outlook. Niven und ich waren uns einig, dass es sich um eine progressive Verbesserung handelt, die zu viel Zeit, zusätzliche Arbeit und zusätzlichen Code erfordern würde, um den Aufwand wert zu sein. Die gute Nachricht ist, dass die Mehrheit der Abonnenten eine E-Mail sehen wird, die das ursprüngliche Designkonzept nahezu perfekt widerspiegelt.
Es ist wichtig zu testen, wie überlappende Elemente dargestellt werden. Wenn Sie also versuchen, eine falsche absolute Positionierung durchzuführen, stellen Sie sicher, dass Sie eine Lösung wie Email on Acids Vorschauen verwenden, um zu sehen, wie Ihr Code auf mehr als 90 Clients und Geräten funktioniert.
Finde mehr heraus
Ich habe den Trick mit der falschen absoluten Positionierung bereits für vertikale Überlappungen verwendet, aber ich freue mich darauf, ihn für die horizontale Anpassung überlappender Elemente in E-Mails auszuprobieren.
Wie immer ist es großartig, mit anderen E-Mail-Freaks in Kontakt zu treten und ihre Entwicklungstipps auszutauschen. Sind Sie nicht einverstanden? Ein großes Dankeschön geht an Niven Ranchhod für die Erläuterung seines Ansatzes zu Notes for the Dev: Video Edition.
Vernetzen Sie sich mit Niven auf Twitter, um herauszufinden, was er vorhat. Sie können auch Nivens Portfolio besuchen, um mehr von seiner erstaunlichen Arbeit zu sehen. Und das Beste von allem? Er hat kürzlich eine neue Website Bare-Bones.dev gestartet, auf der Sie Code-Tutorials, Design-Teardowns und mehr finden.
Hier sind einige Links, um mehr über die falsche absolute Positionierung für E-Mails zu erfahren:
Wenn Ihnen diese Tipps und Tutorials gefallen, abonnieren Sie unbedingt den YouTube-Kanal von Email on Acid. Auf diese Weise erfahren Sie als Erster, wenn neue Notes from the Dev-Episoden erscheinen.
Autor: Megan Boshuyzen
Megan ist Grafikdesignerin und E-Mail-Entwicklerin, die an allen Aspekten des E-Mail-Marketings gearbeitet hat. Sie glaubt, dass gute E-Mails für gute Zwecke einen positiven Unterschied in der Welt bewirken. Megan arbeitet derzeit als E-Mail-Entwicklerin für Sinch Email. Besuchen Sie ihre Website und erfahren Sie mehr unter megbosh.com.
Autor: Megan Boshuyzen
Megan ist Grafikdesignerin und E-Mail-Entwicklerin, die an allen Aspekten des E-Mail-Marketings gearbeitet hat. Sie glaubt, dass gute E-Mails für gute Zwecke einen positiven Unterschied in der Welt bewirken. Megan arbeitet derzeit als E-Mail-Entwicklerin für Sinch Email. Besuchen Sie ihre Website und erfahren Sie mehr unter megbosh.com.
Create your very own Auto Publish News/Blog Site and Earn Passive Income in Just 4 Easy Steps
