Share and Conquer: Layout-Mailing damals und jetzt

    Bild

    Sie werden von Millionen Menschen auf der ganzen Welt gelesen. Sie werden zu Spam hinzugefügt, für immer gelöscht, aber ohne sie ist das moderne Internet undenkbar. Viele Front-Tender gehen zu allem, was sie von ihrer Arbeit abhalten wollen. In meiner Geschichte geht es um E-Mails, wie sie sich in 20 Jahren verändert haben und wie der moderne Frontline-Unterstützer nicht in Depressionen gerät und sie friert. Dies ist der erste Artikel in der Serie, in dem ich darüber sprechen werde, wie alles begann. In einigen Wochen werden wir über Entwicklungs- und Testwerkzeuge sprechen.

    Vor mehr als 20 Jahren waren E-Mails einfache Textnachrichten. Mit der Entwicklung des Internets und der Web-Technologien sind E-Mails sowohl hinsichtlich des Designs als auch hinsichtlich der technischen Umsetzung schwieriger geworden. Jetzt sehen sie aus wie vollwertige Site-Seiten oder Landing-Pages.




    E-Mail in WorldCast Email Client 2000

    Bild

    E-Mail in E-Mail-Client Gmail, 2018

    Wir entwickeln sowohl Briefe als auch Websites mit den gleichen Sprachen - HTML und CSS. Was im Quellcode von HTML-Briefen passiert, ähnelt in keiner Weise dem, was in der Entwicklungsumgebung eines modernen Frontendder zu sehen ist. Es scheint Ihnen sogar, dass Sie wieder im mittelalterlichen Web sind. Diejenigen, die den Brief erfunden haben, haben wahrscheinlich bereits verstanden, was ich meine. Der Rest werde ich nur ein Wort sagen: HTML-Tabelle.


    Geschichte: damals und heute oder warum ist alles so schlimm


    Erinnern wir uns zunächst daran, wie alles begann.
    In den späten 90ern erscheinen die ersten HTML-Buchstaben. Einfach, mit minimalem Einsatz von HTML 4.01 und CSS2 (der erste Entwurf von CSS3 wird in einigen Jahren erscheinen). 1996-1997 kamen die ersten browserbasierten E-Mail-Clients auf den Markt. Die Ära der kostenlosen Web-Clients, die HTML-Markup unterstützen, hat begonnen.



    Bild

    Schnittstelle Hotmail, 1997


    Der bekannteste davon war der HotMail-Dienst. Microsoft kaufte ihn ein Jahr nach dem Start. Übrigens wird Microsoft in unserer Geschichte nicht die letzte Rolle spielen. Nach dem Kauf von Hotmail startet Microsoft einen eigenen Desktop-E-Mail-Client, Outlook. Ziemlich schnell besetzte er seine Nische.


    Seit seiner Einführung wurden HTML-Briefe mehr als einmal kritisiert . Die Hauptansprüche lauten: Sie sind für Benutzer unsicher, werden lange Zeit gerendert, die Bandbreite des Internet-Kanals des Benutzers „aufgefressen“ und wirken von unerfahrenen Webdesignern wie gruseliges Handwerk. Zum Teil war dies wahr, aber alle diese Probleme wurden im Laufe der Zeit gelöst: Die Geschwindigkeit der Internetverbindung wuchs, der Blick auf das Design der Briefe wurde radikal überarbeitet, die Probleme der Entwickler von E-Mail-Clients und insbesondere die Sicherheitsprobleme wurden gelöst. Fortschritt und gesunder Menschenverstand haben gewonnen.


    Im Juni 1999 veröffentlicht Microsoft Outlook 2000, in dem das Browser-Engine Trident des Internet Explorer zum Rendern von Buchstaben verwendet wird.


    Unglaublich, aber Tatsache
    Beachten Sie, dass die Version von IE verwendet wurde, die zum Zeitpunkt der Installation von Outlook auf dem System des Benutzers verwendet wurde. Selbst wenn der Benutzer den Browser von 6 auf 7 aktualisiert, verwendet der E-Mail-Client die Engine noch vom ursprünglich installierten 6. IE.

    Die neue Engine hat sich von der besten Seite der Website-Entwickler bewährt und eine große Anzahl von Fehlern mit sich gebracht, von denen der bekannteste davon "in the line" mehrere weitere Versionen des E-Mail-Clients in einer Reihe blieb. Das automatische Blockieren aller Bilder und das Fehlen von Alternativtext, nicht funktionierende HTML-Formulare, eine fehlerhafte Vorschau des Briefs vor dem Senden ist nur der Tipp des Eisbergs von Outlook 2000/2002 / XP / 2003.


    Bild

    Bilder in Outlook 2003 automatisch blockieren


    Im Januar 2007 wurde eine neue Version des Microsoft E-Mail-Clients veröffentlicht. Diese Version hat die gravierendsten Änderungen in der Geschichte von Outlook gebracht. In der neuen Version des Microsoft Mailers wurden sie von der Internet Explorer-Engine zu der Engine ihres anderen Produkts - MS Word - verschoben. Die Notwendigkeit hierfür wurde vor allem durch "Fürsorge für Benutzer" und "Verbesserung der Sicherheit des E-Mail-Clients" erklärt. In der Tat hatte dies einen erheblichen Verlust bei der Unterstützung der CSS-Eigenschaften zur Folge und verursachte viele neue Fehler, wodurch das Leben sowohl der Mailinglisten-Hersteller als auch der normalen Benutzer verkompliziert wurde.


    Houston, wir haben Probleme

    Баги Outlook, появившиеся после перехода на движок MS Word:


    • отсутствие поддержки background-image в div и table-cell,
    • отсутствие поддержки в CSS float и position,
    • отсутствие поддержки text-shadow,
    • слабая поддержка padding и margin,
    • слабая поддержка в CSS width и height,
    • проблемы с background-color вложенных элементов.


    Tolle und schreckliche HTML-Tabellen


    Aufgrund der Unfähigkeit, die Blöcke zu positionieren und den Float zu verwenden, und auch wegen des Randes und der Polsterung, die gestoßen wurden, standen die Entwickler der Mailing-Liste vor einer schwierigen Aufgabe: Es war notwendig, die Buchstaben in der vorherigen Generation von Microsoft-E-Mail-Clients gleich gut anzuzeigen und in der aktuellen Generation nichts. während nicht brechen und andere populäre Mailer der Zeit nicht vergessen.


    Und die Lösung wurde gefunden: HTML-Tabellen. Das klingt einfach, aber es ist gleichbedeutend mit dem Verzicht auf die Verwendung moderner Features und Features von HTML 4 und CSS2 und das Zurückkehren zu veralteten (sogar damals) Ansätze zur Layouterstellung.


    Bild

    Typischer HTML-Buchstabe


    Die Verwendung von HTML-Tabellen war nicht die einzige Einschränkung: Es war notwendig, die in Mailern verwendeten Präprozessoren nicht zu vergessen. In Web-Clients durchläuft der HTML-Brief vor dem Rendern die Phase, in der der Code unter Sicherheits- und Stabilitätsgesichtspunkten analysiert wird (Vorverarbeitung), wodurch potenziell gefährliche Teile wie Javascript-Code, eingebetteter Inhalt und entfernt werden alles in den Kopf- und Stil-Tags und einige andere Dinge.


    Im Laufe der Zeit stand die Technologie nicht still, HTML- und CSS-Spezifikationen wurden neu, aber Outlook und damit 15% der Benutzer von E-Mail-Clients weltweit (zu dieser Zeit) blieben immer noch in Kraft. Erst mit dem Release von Outlook 2016 (das auf derselben antediluvianischen MS Word-Engine verbleibt) begann sich die Einstellung von MS gegenüber seinen Benutzern sowie den Entwicklern des Mailings zu ändern. Das Unternehmen Litmus , bekannt für seinen Service zum Testen von Mailings in verschiedenen E-Mail-Clients, ist eine Partnerschaft mit MS eingegangen .


    Litmus begann Outlook-Entwicklern bei der Priorisierung von Problemen und der Beschleunigung ihrer Lösung sowie der Benutzer von Diensten - mit der Möglichkeit, ihre E-Mails in diesem E-Mail-Client kostenlos abzurufen. Dies gab seine Früchte, veränderte die Situation jedoch nicht grundlegend: Der jüngste Kunde von MS war zum Zeitpunkt dieser Veröffentlichung der kürzlich angekündigte Outlook 2019. Das Interessante: Er fügte die Unterstützung für svg hinzu und die Schriftart Times New Roman ist kein Fallback für Webfonts. Es blutet aber immer noch MS Word mit allen daraus folgenden Problemen.


    Bild


    Unterschiede im Layout des Mailings vom Layout der Sites


    Heutzutage schließt Outlook die ersten drei mit ~ 10% der Nutzer (an erster Stelle - Apple Mail für Desktop / Handys, an zweiter Stelle - Gmail für Web / Mobiltelefone). Dies ist jedoch immer noch sehr viel. Daher können wir uns leider immer noch nicht von den Tischen lösen.


    Glücklicherweise sind uns die Funktionen von Outlook-Engines mittlerweile gut bekannt. Dies gab uns mehrere Werkzeuge, um das Leben mit Buchstaben zu erleichtern: Bedingte Kommentare und Vector Markup Language.


    Bedingte Kommentare


    Viele Oldfags, die die Zeiten von IE6-8 gefunden haben, erinnern sich daran, was es ist.
    "Bedingte Kommentare" ist ein Mechanismus zum Erweitern der IE-Engine, mit dem Sie bestimmte IE-Versionen auswählen und die für sie erforderlichen Regeln anwenden können. Wenn einige Stile nur für Outlook 2000 und höher hinzugefügt werden müssen, können wir schreiben:


    <!-- [if gte mso 9]>
        <style type="text/css">
            /* Стили для определенных версии Outlook */
        </style>
    <![endif]-->

    Mit bedingten Kommentaren können Sie das Modul außerdem zwingen, bestimmte Markup-Blöcke nur für bestimmte Versionen von Outlook wiederzugeben:


    <!--[if (gte mso 9)|(IE)]>
        <table width="640" align="center" cellpadding="0" cellspacing="0" border="0"><tr><td valign="top">
    <![endif]-->

    Versionierung
    • Outlook 2000 — версия 9
    • Outlook 2002 — версия 10
    • Outlook 2003 — версия 11
    • Outlook 2007 — версия 12
    • Outlook 2010 — версия 14
    • Outlook 2013 — версия 15
    • Outlook 2016 — версия 16


    Bedingte Kommentare werden häufig in Verbindung mit anderen Funktionen von Outlook - VML verwendet.


    Vektor-Auszeichnungssprache


    Vector Markup Language (VML) ist eine Vektor-Markup-Sprache, die von MS 1998 zur Beschreibung von Vektorgrafiken entwickelt wurde. Später wurde es eine der Sprachen, die als Grundlage für uns alle bekannte SVG-Sprache diente. Seit der Veröffentlichung von IE10 ist VML veraltet und wird nicht mehr unterstützt oder entwickelt.


    Wie hängen Vektorgrafiken, nicht unterstützte Auszeichnungssprache und HTML-Buchstaben zusammen? Alles ist einfach: Hintergrundbild ohne VML ist in Outlook 2007/2010/2013/2016 nicht möglich. Aber um einer solchen neuen Sprache willen zu lernen, ist überhaupt nicht notwendig: Sie können vorgefertigte Online-Tools verwenden , die alles für Sie tun.


    <body><divstyle="background-color:#7bceeb;"><!--[if gte mso 9]>
                <v:background xmlns:v="urn:schemas-microsoft-com:vml" fill="t">
                    <v:fill type="tile" src="https://i.imgur.com/YJOX1PC.png" color="#7bceeb"/>
                </v:background>
            <![endif]--><tableheight="100%"width="100%"cellpadding="0"cellspacing="0"border="0"><tr><tdvalign="top"align="left"background="https://i.imgur.com/YJOX1PC.png"></td></tr></table></div></body>

    Dies bedeutet jedoch nicht, dass Sie von Zeit zu Zeit immer noch selbst in der VML herumstochern müssen, da Sie in einigen Versionen von Outlook ein Hintergrundlayout haben.


    Schönheit herbeiführen


    In modernen Ezines gibt es Platz für verschiedene interaktive Elemente. Beispielsweise integriert jemand den Twitter-Feed direkt in den Brief. Ich werde über praktische und nützliche Dinge sprechen: Formen und Schieberegler.


    Formulare


    Die Autoren der Website emailmonks.com beschrieben eine Möglichkeit, dem Brief ein Arbeitsformular hinzuzufügen. Der Mechanismus ist wie folgt: Diese Formulare werden von der PHP-Funktion als URL-Attribut gesammelt. Dieses Attribut wird dann in einem Remote-Dokument oder einer Datentabelle gespeichert. Dieses Attribut wird später von der angegebenen Quelle angefordert und auf der Seite angezeigt.


    Die Unterstützung für solche Formulare ist ziemlich gut: Sie funktionieren problemlos in Apple Mail, iOS Mail, Outlook, Gmail für iOS / Android und im Standard-E-Mail-Client von Android.


    Bild

    Schieberegler


    Jeder weiß, was die Slider sind, und viele Leute stellen sich vor, wie man sie mit JS macht. Sie können jedoch auch einen Schieberegler mit reinem CSS / HTML-Code erstellen, damit er in modernen E-Mail-Clients ordnungsgemäß funktioniert (mit Ausnahme von Outlook für Windows - hier müssen Sie Foldback für Schieberegler verwenden).


    Bild

    Die Magie dieses Schiebereglers besteht aus 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 - dies sind lediglich verschachtelte Selektoren und die Verschiebung von Blöcken mit Bildern auf ihre Höhe, wenn der geprüfte Zustand der Elementwechselschieber geändert wird.


    Andere interaktiv


    Wie Sie sehen, können Sie mit diesem Ansatz nicht nur Schieberegler, sondern auch andere interaktive Elemente erstellen, bei denen der Benutzer mehrere Zustände nacheinander auswählen muss. Zum Beispiel Fragebögen.


    Bild

    Die Details zur Implementierung dieser Option finden Sie unter dem Link .


    Was weiter?


    Viele große Unternehmen versuchen, den Fortschritt aufzuholen und moderne Technologie in ihre Briefe zu bringen. Vor nicht allzu langer Zeit hat Google 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 einige interne Logik in der Mailingliste ohne jegliche Hacks oder komplexe Logik zu verwenden. Das Projekt befindet sich jedoch noch in einem frühen Stadium und alle diese Zauber sind nur in der Google Mail Developer Preview verfügbar.


    Nachdem wir viel von der glänzenden Zukunft geträumt haben, kehren wir vom Himmel auf die Erde zurück. In den letzten 10 Jahren sind HTML-Tabellen zu einem festen Bestandteil von Briefen geworden. Und obwohl die Innenseiten des Mailings nicht wesentlich verändert wurden, ist die Außenseite viel interessanter geworden. Jetzt sind wir in der Entwicklungsphase von E-Mail-Clients angekommen, wenn die interaktive Erfahrung in Briefen zum Haupttrend geworden ist. Es wurde zwar schwieriger, solche Buchstaben auszutippen. Im nächsten Artikel werde ich über die Tools zum Entwickeln und Testen von Mailings sprechen.


    Jetzt auch beliebt: