Sie werden von Millionen von Menschen auf der ganzen Welt gelesen. Sie werden zu Spam hinzugefügt und für immer gelöscht, aber ohne sie ist das moderne Internet undenkbar. Viele Front-End-Entwickler werden alles tun, um an ihnen zu arbeiten. Meine Geschichte handelt von E-Mails, wie sie sich über 20 Jahre verändert haben und wie das moderne Front-End nicht depressiv wird und sie ausmacht. Dies ist der erste Artikel in einer Reihe, in der ich darüber sprechen werde, wie alles begann. In ein paar Wochen werden wir über die Entwicklungs- und Testtools des Newsletters sprechen.
Vor mehr als 20 Jahren waren E-Mails reine Textnachrichten. Mit der Entwicklung des Internets und der Webtechnologien sind E-Mails sowohl in Bezug auf das Design als auch in Bezug auf die technische Implementierung komplexer geworden. Jetzt sehen sie aus wie vollständige Websiteseiten oder Zielseiten.
WorldCast Email Client, 2000Google Mail Email Client 2018
Wir entwickeln sowohl Briefe als auch Websites in denselben Sprachen - HTML und CSS. Was im Quellcode von HTML-Buchstaben passiert, ähnelt überhaupt nicht dem, was in der Entwicklungsumgebung eines modernen Frontends zu sehen ist. Sie könnten sogar denken, dass Sie wieder im Netz des Mittelalters sind. Diejenigen, die die Briefe verfasst haben, haben wahrscheinlich schon verstanden, was ich meine. Den Rest werde ich nur ein Wort sagen: HTML-Tabellen.
Geschichte: damals und heute oder warum alles so schlecht ist
Erinnern wir uns zunächst daran, wie alles begann.
In den späten 90ern erschienen die ersten HTML-Buchstaben. Einfach, mit minimaler Nutzung der Funktionen von HTML 4.01 und CSS2 (der erste Entwurf von CSS3 wird in einigen weiteren Jahren erscheinen). In den Jahren 1996-1997 wurden die ersten browserbasierten E-Mail-Clients angezeigt. Die Ära der kostenlosen Web-Clients, die HTML-Markups unterstützen, hat begonnen.
Hotmail-Schnittstelle 1997
Am beliebtesten war der HotMail-Dienst, den Microsoft ein Jahr nach dem Start kaufte. Microsoft wird übrigens nicht die letzte Rolle in unserer Geschichte spielen. Nach dem Kauf von Hotmail veröffentlicht Microsoft seinen eigenen Desktop-E-Mail-Client Outlook. Ziemlich schnell besetzte er seine Nische fest.
HTML-Briefe wurden von Anfang an mehr als einmal kritisiert . Die Hauptbeschwerden: Sie sind für Benutzer unsicher, rendern lange, "verbrauchen" die Bandbreite des Internetkanals des Benutzers und sehen aus wie unheimliches Handwerk von unerfahrenen Webdesignern. Dies stimmte teilweise, aber all diese Probleme wurden im Laufe der Zeit behoben: Die Geschwindigkeit der Internetverbindung nahm zu, der Blick auf das Design von E-Mails wurde grundlegend überarbeitet, die Probleme der E-Mail-Client-Entwickler und insbesondere die Sicherheitsprobleme wurden gelöst. Fortschritt und gesunder Menschenverstand haben gewonnen.
Im Juni 1999 veröffentlichte Microsoft Outlook 2000, in dem die Internet Explorer-Engine Trident zum Rendern von Briefen verwendet wurde.
Unglaublich aber wahrBeachten Sie, dass die Version des IE verwendet wurde, die zum Zeitpunkt der Installation von Outlook auf dem System des Benutzers installiert war. Selbst wenn der Benutzer den Browser von Version 6 auf Version 7 aktualisiert hätte, würde der E-Mail-Client weiterhin die Engine des ursprünglich installierten 6. IE verwenden.
Die neue Engine erwies sich für Website-Entwickler als nicht besonders gut und brachte eine große Anzahl von Fehlern mit sich, von denen der bekannteste mehrere Versionen des E-Mail-Clients hintereinander „außer Betrieb“ hielt. Das automatische Blockieren aller Bilder und das Fehlen von Alt-Text, nicht funktionsfähigen HTML-Formularfunktionen und fehlerhaften E-Mail-Vorschauen vor dem Senden sind nur die Spitze des Eisbergs der Probleme mit Outlook 2000/2002 / XP / 2003.
Bilder in Outlook 2003 automatisch sperren
Im Januar 2007 wurde eine neue Version des E-Mail-Clients von Microsoft veröffentlicht. Diese Version hat die schwerwiegendsten Änderungen in der Geschichte von Outlook gebracht. In der neuen Version des Microsoft Mailers wechselten sie von der Internet Explorer-Engine zur Engine ihres anderen Produkts - MS Word. Dieser Bedarf wurde in erster Linie durch „Pflege der Benutzer“ und „Erhöhung der Sicherheit des E-Mail-Clients“ erklärt. Tatsächlich verursachte dies schwerwiegende Verluste bei der Unterstützung von CSS-Eigenschaften und verursachte viele neue Fehler, wodurch das Leben sowohl der Setzer von Mailinglisten als auch der normalen Benutzer verkompliziert wurde.
Houston, wir haben ProblemeOutlook-Fehler, die nach dem Wechsel zur MS Word-Engine aufgetreten sind:
- Mangel an Hintergrundbildunterstützung in div und table-cell,
- mangelnde Unterstützung in CSS Float und Position,
- mangelnde Unterstützung für Textschatten,
- schwache Polsterung und Randunterstützung,
- schwache Unterstützung in CSS Breite und Höhe,
- Probleme mit der Hintergrundfarbe verschachtelter Elemente.
Tolle und schreckliche HTML-Tabellen
Aufgrund der mangelnden Fähigkeit, Blöcke zu positionieren und Float zu verwenden, sowie aufgrund von Rand und Abstand standen die Entwickler der Mailingliste vor einer schwierigen Aufgabe: Sie mussten dafür sorgen, dass E-Mails sowohl in der vorherigen Generation von E-Mail-Clients von Microsoft als auch in der aktuellen Generation gleich gut angezeigt wurden, nichts ohne andere beliebte Mailer dieser Zeit zu brechen oder zu vergessen.
Und es wurde eine Lösung gefunden: HTML-Tabellen. Es klingt einfach, aber in der Tat ist dies gleichbedeutend damit, die Verwendung moderner Funktionen und Merkmale von HTML 4 und CSS2 aufzugeben und zu veralteten (selbst zu diesem Zeitpunkt) Ansätzen zur Erstellung von Schriftsätzen zurückzukehren.
Typische HTML-E-Mail im Inneren
Die Notwendigkeit, HTML-Tabellen zu verwenden, war nicht die einzige Einschränkung: Es war notwendig, die Präprozessoren, die in Mailern verwendet wurden, nicht zu vergessen. In Web-Clients durchläuft HTML-Letter vor dem Rendern eine Phase, in der der Code unter dem Gesichtspunkt der Sicherheit und Stabilität analysiert wird - Vorverarbeitung -, wodurch potenziell gefährliche Teile wie Javascript-Code, eingebetteter Inhalt sowie alles im Kopf und Style-Tags und einige andere Dinge.
Die Zeit verging, die Technologie blieb nicht stehen, HTML- und CSS-Spezifikationen wurden mit neuen Funktionen überwachsen, aber auch Outlook und damit 15% der weltweiten E-Mail-Clients (zu dieser Zeit) blieben bestehen. Erst mit der Veröffentlichung von Outlook 2016 (das auf derselben antidiluvianischen Engine von MS Word verbleibt) begann sich die Haltung von MS gegenüber seinen Benutzern sowie gegenüber den Entwicklern des Newsletters zu ändern. Das Unternehmen Lackmus , das für seinen Service zum Testen von Mailings in verschiedenen E-Mail-Clients bekannt ist, ist eine Partnerschaft mit MS eingegangen .
Litmus begann Outlook-Entwicklern dabei zu helfen, Probleme zu priorisieren und ihre Lösung zu beschleunigen, und Benutzern des Dienstes, ihre E-Mails in diesem E-Mail-Client kostenlos abzurufen. Dies hat sich ausgezahlt, aber nichts an der Situation geändert: Zum Zeitpunkt des Schreibens war der neueste Client von MS der kürzlich angekündigte Outlook 2019. Interessant: Es wurde SVG-Unterstützung hinzugefügt, und die Times New Roman-Schriftart ist kein Fallback mehr für Web-Schriftarten. Aber es "blutet" immer noch MS Word mit all den daraus resultierenden Problemen.
Unterschiede zwischen Layout und Site-Layout
Heutzutage schließt Outlook die Top 3 mit ~ 10% der Benutzer (an erster Stelle - Apple Mail für Desktop- / Mobiltelefone, an zweiter Stelle - Google Mail für Web- / Mobiltelefone), aber das ist immer noch viel. Daher können wir leider noch nicht von den Tischen wegkommen.
Glücklicherweise sind uns die Funktionen der Outlook-Engines mittlerweile bekannt. Dies gab uns verschiedene Werkzeuge, um das Leben mit Buchstaben zu erleichtern: Bedingte Kommentare und Vektor-Markup-Sprache.
Bedingte Kommentare
Viele der Oldfags, die die Tage von IE6-8 geprägt haben, erinnern sich daran, was es ist.
"Bedingte Kommentare" ist ein Mechanismus zur Erweiterung der IE-Engine, mit dem Sie bestimmte Versionen des IE auswählen und die für sie erforderlichen Regeln anwenden können. Wenn wir einige Stile nur für Outlook 2000 und höher hinzufügen müssen, können wir schreiben:
Mithilfe von bedingten Kommentaren können Sie die Engine außerdem zwingen, bestimmte Markup-Blöcke nur für bestimmte Versionen von Outlook zu rendern:
Versionierung- Outlook 2000 - Version 9
- Outlook 2002 - Version 10
- Outlook 2003 - Version 11
- Outlook 2007 - Version 12
- Outlook 2010 - Version 14
- Outlook 2013 - Version 15
- Outlook 2016 - Version 16
Bedingte Kommentare werden häufig in Verbindung mit einer anderen Outlook-Funktion verwendet - VML.
Vektor-Markup-Sprache
Vector Markup Language (VML) ist eine Vektor-Markup-Sprache, die 1998 von MS zur Beschreibung von Vektorgrafiken entwickelt wurde. Später wurde es eine der Sprachen, die als Grundlage für die bekannte SVG-Sprache dienten. Seit der Veröffentlichung von IE10 ist VML veraltet und wird nicht mehr unterstützt oder befindet sich in der Entwicklung.
Wie hängen Vektorgrafiken, nicht unterstützte Auszeichnungssprache und HTML-Buchstaben zusammen? Es ist ganz einfach: Hintergrundbilder ohne VML sind in Outlook 2007/2010/2013/2016 nicht möglich. Das Lernen für eine solche neue Sprache ist jedoch völlig optional: Sie können vorgefertigte Online-Tools verwenden , die alles für Sie tun.
<body> <div style="background-color:#7bceeb;"> <table height="100%" width="100%" cellpadding="0" cellspacing="0" border="0"> <tr> <td valign="top" align="left" background="https://i.imgur.com/YJOX1PC.png"> </td> </tr> </table> </div> </body>
Leider negiert dies nicht die Tatsache, dass Sie von Zeit zu Zeit immer noch Ihre eigenen in VML auswählen müssen, da in einigen Outlook-Versionen ein Hintergrundlayout eingerichtet ist.
Schönheit bringen
Moderne Newsletter bieten Platz für verschiedene interaktive Elemente. Jemand integriert beispielsweise Twitter-Feeds direkt in den Brief. Ich werde über praktischere und nützlichere Dinge sprechen: Formulare und Schieberegler.
Formulare
Die Autoren von emailmonks.com haben eine Möglichkeit beschrieben, der E-Mail ein Arbeitsformular hinzuzufügen. Der Mechanismus ist wie folgt: Formulardaten werden von der PHP-Funktion als URL-Attribut gesammelt; Dieses Attribut wird dann in einem entfernten Dokument oder einer Datentabelle gespeichert. später wird dieses Attribut von der angegebenen Quelle angefordert und auf der Seite angezeigt.
Die Unterstützung für solche Formulare ist recht gut: In Apple Mail, iOS Mail, Outlook, Google Mail für iOS / Android und im Standard-Android-E-Mail-Client funktionieren sie sofort.
Schieberegler
Jeder weiß, was Schieberegler sind, und viele Leute wissen, wie man sie mit JS erstellt. Sie können den Schieberegler jedoch mit reinem CSS / HTML erstellen, damit er in modernen E-Mail-Clients ordnungsgemäß funktioniert (mit Ausnahme von Outlook für Windows benötigen Sie einen Fallback für Schieberegler).
Die Magie dieses Schiebereglers beträgt 20 Zeilen:
.slide1 { top: 10px; left: 321px;} .slide1-content {left: 0px;} .slide1:hover { background-color: #37B330;} #slide-1:checked ~ .slide1 {background-color: #37B330 !important;} #slide-1:checked + span + table .swoosh { left: 0px !important; } .slide2 { top: 66px; left: 321px; } .slide2-content { left: 600px; } .slide2:hover { background-color: #37B330;} #slide-2:checked ~ .slide2 {background-color: #37B330 !important;} #slide-2:checked + span + table .swoosh { left: -600px !important; } .slide3 { top: 122px; left: 321px; } .slide3-content { left: 1200px; } .slide3:hover { background-color: #37B330;} #slide-3:checked ~ .slide3 {background-color: #37B330 !important;} #slide-3:checked + span + table .swoosh { left: -1200px !important; }
Tatsächlich gibt es hier nichts Magisches - es sind nur verschachtelte Selektoren und das Verschieben von Blöcken mit Bildern auf ihre Höhe, wenn der aktivierte Status eines Elements geändert wird, das die Folien wechselt.
Andere interaktive
Wie Sie sehen, können Sie mit diesem Ansatz nicht nur Schieberegler erstellen, sondern auch andere interaktive Elemente, bei denen der Benutzer mehrere Status nacheinander auswählen muss. Zum Beispiel Fragebögen.
Die Details zur Implementierung dieser Option finden Sie hier .
Was weiter?
Viele große Unternehmen versuchen, den Fortschritt nachzuholen und moderne Technologie auf den Punkt zu bringen. Vor nicht allzu langer Zeit hat Google auch beschlossen, der Community zu helfen und die Situation zu korrigieren. Ihr AMP HTML-E-Mail- Projekt wird das Beste aus Google AMP herausholen und uns die Möglichkeit geben, Schieberegler, Leuchtkästen, Formulare und sogar interne Logik ohne Hacks oder komplexe Logik zu verwenden. Während sich das Projekt in einem frühen Stadium befindet und all diese Reize nur in der Google Mail-Entwicklervorschau verfügbar sind.
Nachdem wir von einer glänzenden Zukunft geträumt haben, werden wir vom Himmel auf die Erde zurückkehren. In den letzten 10 Jahren sind HTML-Tabellen ein wesentlicher Bestandteil von Briefen geworden. Und trotz der Tatsache, dass das Innere des Newsletters keine großen Veränderungen erfahren hat, ist das Äußere viel interessanter geworden. Jetzt haben wir das Stadium der Entwicklung von E-Mail-Clients erreicht, in dem das interaktive Erlebnis in Briefen zum Haupttrend geworden ist. Es ist wahr, dass es schwieriger geworden ist, solche Briefe zu verfassen. Im nächsten Artikel werde ich über die Entwicklungs- und Testtools für den Versand sprechen.