Hallo Habr!
Der Code toleriert keine Nachlässigkeit, sei es komplexe Datenverarbeitungsalgorithmen oder das Setzen von E-Mail-Newslettern.
Nachdem unser Leiter der Layoutabteilung einen Brief von einem der größten Einzelhändler erhalten hatte, stellte er fest, dass einige Elemente ungleichmäßig sind. Der professionelle Instinkt erlaubte es uns nicht, einfach vorbeizukommen, und da das Geschäft nicht zu unseren Kunden gehört, beschloss er, es gemäß unserem Layout-Qualitätskontrollprozess zu überprüfen. Ilya Kasterin
ikasterin , die Leiterin der Layout-Abteilung für Einzelhandelsraketen, berichtet über die Ergebnisse und wie Probleme im Display in der Entwicklungsphase des Newsletters erkannt werden können.

Für wen und warum ist es wichtig
Die Anzeige von Buchstaben ist wichtig für Online-Shops, wie Viele von ihnen kommunizieren mit Kunden hauptsächlich per E-Mail. Je weniger attraktiv der Newsletter ist, desto mehr Abmeldungen und weniger Bestellungen.
Sie können argumentieren: "Wenn ein Geschäft Qualitätsprodukte zu einem erschwinglichen Preis verkauft, sind Mailings nicht so wichtig." Ja es ist wahr. Die Preise für die beliebtesten Positionen sind jedoch überall gleich, plus oder minus, und die Waren selbst werden häufig von einem Hersteller gekauft. Dies gilt insbesondere für Online-Verbrauchermärkte und teilweise für eine Reihe von Marktplätzen. Es stellt sich also heraus, dass die Qualität des Service, die hervorragende Arbeit in der E-Mail-Kommunikation und das Marketing im Allgemeinen entscheidend sind. Und wenn es jemanden nicht interessiert, dass der Text schief ist oder der Zeilenabstand nicht gleich ist, wird ein anderer Käufer denken, dass solche Mängel im Service des Geschäfts oder in der Qualität des Produkts liegen können, und die Meinung des Geschäfts zum Schlechten wenden.
Wie organisiere ich den Arbeitsprozess, um Fehler zu minimieren?
Retail Rocket ist eine Personalisierungsplattform für Online-Shops, mit der Einzelhändler persönliche Kommunikation mit jedem Kunden auf der Website und im E-Mail-Kanal aufbauen können. Die personalisierte E-Mail-Marketing-Plattform umfasst Mailings jeglicher Art und Komplexität: von Trigger-E-Mails bis zur Erstellung intelligenter automatisierter Kampagnen mit dynamischen Inhalten.
Viele Einzelhändler entscheiden sich für unsere Plattform aufgrund des hohen Service- und Supportniveaus, das wir durch einen klar kalibrierten Arbeitsprozess bieten. Im Moment hat die Layoutabteilung die folgenden Indikatoren erreicht (und wird dies auch nicht tun):
- An einem Arbeitstag erledigen Spezialisten durchschnittlich 18,1 Aufgaben. Dies umfasst sowohl die Verfeinerung vorhandener Mailings als auch das Auferlegen einiger Dutzend Trigger-Kampagnen oder -Blöcke mit komplexer Logik und vielen Anzeigeszenarien für verschiedene Benutzersegmente.
- Die durchschnittliche Zeit für die Erledigung einer Aufgabe beträgt weniger als zwei Werktage (in den meisten Fällen ist an dem Tag, an dem die Aufgabe festgelegt wurde, alles fertig).
- Die Wahrscheinlichkeit einer fehlerhaften Anzeige von Briefen unserer Kunden ist praktisch Null.
Dieses Ergebnis wurde nicht zuletzt mithilfe eines optimierten Arbeitsprozesses erzielt, für den Retail Rocket in Trello Kanban-Boards verwendet:
Eine der Tafeln der LayoutabteilungMit Hilfe von Kanban-Boards kontrolliert das gesamte Team die Aufgabe und erkennt die Schwierigkeiten, wenn sie auftreten. Der gesamte Layoutprozess ist wie folgt:
- Sammlung von Informationen: Layouts, Texte, Links, Banner und andere Informationen aus dem Geschäft. Es ist notwendig, alle erforderlichen Eingaben so weit wie möglich zu erhalten, damit einige Änderungen in den Phasen des Layouts und Testens nicht angezeigt werden, da sich dort etwas ressourcenintensiver ändert.
- Layout Grundlage ist eine universelle Grundvorlage, die alle Errungenschaften und "Chips" des Unternehmens enthält, die bei der Gestaltung von Briefen verwendet werden können (leider nicht heute).
- Testen. Mit speziellen Tools werden Briefe auf fast allen E-Mail-Clients überprüft. Manchmal überprüfen wir sogar einige Punkte auf realen Geräten mit Android und iOS.
- Erneut testen. Zusätzliche Überprüfung der Anzeige und des Codes aller Buchstaben durch den Leiter der Layoutabteilung und den Projektmanager aller Buchstaben;
- Die Aufgabe ist abgeschlossen. Bereitschaftsbriefe werden an den Task-Manager gesendet.
Prüfungsschreiben
Bevor ich zeige, welche Probleme beim Layout auftreten können, möchte ich betonen, dass keine konkreten Lösungen angegeben werden, außer einer Sache: den Brief von Grund auf neu zu erstellen. Wenn Sie mehrere Phasen mit einer Überprüfung haben, ist es einfach, Fehler zu finden und zu beheben. Hier sind einige weitere Tipps, die Ihnen helfen, Ihre Arbeit zu verbessern:
- Planen eines Prozesses zur Kontrolle der Layoutqualität. Brainstorming mit Kollegen und erstellen Sie basierend auf Ihren Erfahrungen eine Test- und Layoutmethode, die ergänzt wird. Dies wird die Arbeit in Zukunft erheblich erleichtern, insbesondere bei neuen Mitarbeitern.
- Beim Testen jedes Buchstabens. Versuchen Sie, die Aufgabe in Blöcke zu unterteilen, in denen in jeder Phase eine Qualitätskontrolle durchgeführt wird.
- Bitte beachten Sie: Damit der Buchstabe für das Auge angenehm ist, muss das Verhältnis der Schriftgröße, der Bilder sowie der Intervalle und der Silbentrennung überwacht werden. Es klingt einfach, aber unten sehen Sie, dass eine falsche Anzeige nicht immer offensichtlich ist.
- Innovation unterstützen. Versuchen Sie, neue Chips in die Arbeit einzuführen. Bis vor kurzem lachten meine Kollegen und ich über Anfragen, einen Schieberegler in einen Brief einzufügen, aber AMP erschien und bald werden solche Tricks ein Muss sein.
Kommen wir zurück zum Audit. Wir haben den erhaltenen Brief bei mehreren Postkunden getestet, nachdem wir eine Bestellung für einen großen Einzelhändler gemäß den Standards von Retail Rocket aufgegeben hatten.
Betrachten wir zunächst die Anzeige der Buchstaben auf dem Desktop. Versuchen Sie, Layoutfehler selbst zu finden:

Auf den ersten Blick ist der Brief ziemlich übersichtlich, aber das liegt daran, dass die Hauptfehler sichtbar sind, wenn Sie den Brief auf Mobilgeräten öffnen. Obwohl hier Sie einige Mängel sehen können.
Viele Einzelhändler beschränken sich auf die Überprüfung auf dem Desktop und sind mit den Ergebnissen zufrieden. Aber mehr als die Hälfte der Briefe wird auf dem Handy geöffnet. Aus diesem Grund ist der Testprozess auf so vielen verschiedenen Geräten und E-Mail-Clients so wichtig.
Betrachten Sie die Fehler und Nachteile des Layouts genauer.
Allgemeiner Fehler in allen Briefen
Absolut alle E-Mail-Clients zeigen Textblöcke mit Preis, Menge und Eigenschaften des Produkts nicht korrekt an, z. B. falsche Silbentrennung oder eine unverhältnismäßige Schriftart in Bezug auf das Bild. In den meisten Fällen treten jedoch Probleme mit der Einrückung auf.

Dies ist im folgenden Beispiel deutlich zu sehen: In einer Produktkarte ist die Anzeige korrekt, und in der folgenden Karte befindet sich der Text auf verschiedenen Ebenen:

Anzeige auf iPhone 6 und iPhone 6+
Das Produktbild ist im Verhältnis zum Text zu klein und vor diesem Hintergrund wirkt die Schrift riesig. Das Rubelsymbol wird ebenfalls übertragen, was nicht sehr schön aussieht.
Es ist erwähnenswert: Der Preis und der Name des Produkts sind auf verschiedenen Ebenen, das gleiche Problem mit den Parametern des Produkts unter dem Namen.

Anzeige auf iPhone X und Pixel
Es gibt keine Probleme bei der Anzeige des Preises, aber wie im vorherigen Beispiel sehen das Produktbild und der Text zu klein bzw. zu groß aus. Der Preis und der Name variieren auch in der Höhe, das gleiche gilt für die Parameter.
Diese Probleme treten in Google Mail auf dem iPhone 7 iPhone 7+ und iPhone SE erneut auf.

Anzeige auf Samsung Mail
Der Buchstabe passt sich nicht an die Bildschirmgröße an, ohne Annäherung wird es schwierig sein, die Details der Bestellung zu berücksichtigen.

Zuordnung zu Lotus Notes 8.5 und Outlook 2003
Ja, einige Käufer verwenden diese Mailer immer noch und können daher nicht ignoriert werden. In unserem Fall fiel der Buchstabe sowohl in Lotus Notes 8.5 als auch in Outlook 2003 aufgrund der gigantischen Größe der Bilder auseinander.
Alle Bilder im Brief sollten die maximale Größe haben. In diesem speziellen Fall ist es 90px hoch und breit.

Zusammenfassung
Käufer sind sich nicht immer bewusst, dass es Probleme mit dem Abstand oder dem Schriftverhältnis im Newsletter gibt, aber dies wirkt sich definitiv darauf aus, wie die Nachricht als Ganzes wahrgenommen wird. Leider berücksichtigen dies nicht alle Einzelhändler. Der Brief würde ungefähr so aussehen, wenn er unseren Layoutprozess durchlaufen würde:

Unsere Mission ist es, den Umsatz von Online-Shops zu steigern. Deshalb teilen wir offen unsere Arbeitsmethoden und zeigen, wie Fehler vermieden werden können. Durch sorgfältige Tests können alle Anzeigeprobleme identifiziert und rechtzeitig behoben werden.
Vielleicht ist der Brief nach Abschluss der Bestellung nicht der bemerkenswerteste, aber wenn eine so einfache Struktur so viele Nachteile aufweist, wie hoch ist dann die Wahrscheinlichkeit, dass Massenmailings mit verschiedenen Designelementen perfekt zusammengestellt werden?
Was denkst du darüber? Wir warten auf Ihre Antworten und diskutieren das Thema gerne.