Wir entscheiden uns für Medienabfragen. Das Stripo-Manifest

Dieses Dokument ist unser Manifest zur Layoutmethode, für die sich Stripo entschieden hat. Wir legen die Gründe, warum wir diese Layoutmethode verwenden, dar und auch unsere Vision für diese Branchenentwicklung.

Problembericht

Hier geht es um die Adaptivität von E-Mails auf mobilen Geräten. In der E-Mail-Entwicklungsbranche gibt es zwei Methoden: eine von ihnen ist mit der Nutzung von CSS-Medienabfragen verbunden, nennen wir sie „Adaptiv“ und die zweite ist — ohne Medienabfragen und wird „Fluid-Hybrid“ genannt.

Das Problem ist, dass es immer noch mobile E-Mail Clients gibt, die das adaptive E-Mail-Layout nicht unterstützen. 2015 hat daher Nicole Merlin die Fluid-Hybrid-Methode vorgeschlagen, die es erlaubt, Adaptivität in E-Mail Clients zu imitieren, die Medienabfragen nicht unterstützen. Aber diese Methode ist nicht allgemein gültig.

Das Stripo-Manifest

Als wir die Strategie für unsere Editor-Erstellung ausgearbeitet haben, haben wir beide Layoutmethoden mit verschiedenen Arten von E-Mails untersucht und getestet. Gemessen an den erhaltenen Ergebnissen und der weltweiten Tendenz der Produktentwicklung haben wir uns bewusst für die adaptive Methode mit Medienabfragen entschieden. Die Wahrheit ist, dass es in der Entwicklungsindustrie keine klaren Standards gab und aufgrund dieser Tatsache konnten Entwickler Code so interpretieren, wie sie wollten. Sogar der E-Mail-Gigant Google hat bis vor kurzem Medienabfragen in seiner Gmail-App nicht unterstützt.

Im November 2016 hat Google angefangen, in seiner Anwendung eine große Auswahl an Stilen zu unterstützen, einschließlich Medienabfragen! Und im Oktober 2017 informierte das Unternehmen Mail.ru über die Unterstützung von Medienabfragen in seinen Anwendungen.

Mit anderen Worten ist die Tendenz, dass sich das Problem sehr bald von selbst lösen wird und dass es keine Notwendigkeit mehr für die alternative Fluid-Hybrid-Methode geben wird. Derzeit – Mitte 2018 – wird die Adaptivität nicht unterstützt von: 

• Der Gmail-App IMAP Android

E-Mails werden wie auf Desktops angezeigt - die Online-Version wird heruntergeladen.

• Yandex.Mail

Wir nehmen an, dass Yandex dem Beispiel von Google und Mail.ru bald folgen wird. Derzeit wird die Online-Version heruntergeladen.

• Gmail Mobile Webmail

Wir glauben, dass die Verwendung eines Smartphone E-Mail Clients ein seltener und merkwürdiger Fall ist.

• Altes Android 5.1 und 6.0 Vanilla

In diesen Versionen gibt es einen Mechanismus, der Adaptivität imitiert. Das bedeutet, dass E-Mails adaptiv aussehen werden, aber mit einigen problematischen Aspekten.

Zum Beispiel ist in unserer adaptiven Layoutmethode der dritte oder vierte (der letzte) Baustein innerhalb der Struktur immer rechtsbündig. Mit der Fluid-Hybrid-Methode sind diese Bausteine alle in einer Linie ausgerichtet, aber selbst das hat uns nicht davon überzeugt, diese Methode zu verwenden.

Da es bei beiden Layoutmethoden ein Problem gibt, wird der Inhalt nie die volle Bildschirmbreite haben. Je mehr Container es in der Struktur gibt, desto schmaler werden sie sein. Und das bedeutet, dass es "Raum" geben wird, der nicht ausgefüllt werden kann. 

Am Ende sieht man kurze unlesbare Textzeilen, kleine Bilder und Buttons, auf die man nur schwer klicken kann. Leider konnten wir das nicht beheben.

All die oben erwähnten Probleme im Zusammenhang mit der adaptiven Layoutmethode erscheinen uns nicht wesentlich – in jedem Fall sehen die E-Mails großartig aus, sind lesbar und transportieren die Hauptidee an die Leser.

Es scheint, dass die Fluid-Hybrid-Methode Nachteile hat, die genauso wesentlich für uns sind, aber zusätzlich können diese nicht endgültig behoben werden. Hier sind einige davon:

• Um die Ränder innerhalb von Containern festzulegen, werden die Stile Rand-links und Rand-rechts verwendet. Sie funktionieren im Allgemeinen auf den meisten E-Mail-Clients einwandfrei. Sie beeinflussen nicht die Adaptivität des Containers oder die Art und Weise, wie er dargestellt wird, solange der Container nicht breiter ist als der Bildschirm.

Wenn er breiter ist, sehen wir den folgenden Effekt: Randeinzüge werden aus Containern hinzugefügt und werden bei allgemeinen Breitenberechnungen, wie z.B. Paddings, nicht berücksichtigt.

• Wenn es nur Text in Containern gibt, dann ergibt sich in Outlook, welches von 7% der meisten Firmenkunden verwendet wird, ein Problem mit den Containergrößen. Das Problem ist, dass der Tabellenbaustein nicht auf 100% Breite angepasst werden kann und der Text selbst kann die Tabelle nicht wie ein Bild auf die angegebene Größe vergrößern. Dies ist der Grund, warum die Einrückungen zwischen den Containern kleiner sein können als vorgegeben.

Dieses Problem könnte behoben werden, indem man eine feste Breite für den Tabellenbaustein festlegt, aber dann ergibt sich in einigen E-Mail Clients ein anderes Problem – die E-Mail verliert ihre Adaptivität. Die Hybrid-Methode erfordert feste Abmessungen für den Tabellenbaustein.

• Bedingt durch die Schriftgröße: O, das in Containern zu <div> hinzugefügt wird. Es ist erforderlich, Textstile in das übergeordnete Element zu duplizieren, um Leerräume zwischen den Zellen zu beseitigen. Zum Beispiel in eine Zelle des Textblocks in einer Tabelle. Andernfalls ist der Text in Lotus Notes maximal klein. (Maßstab 1:1)

Dies kann automatisch behoben werden, indem man CSS-Stile für den Text in allen Blöcken festlegt. Wenn ein Benutzer jedoch z.B. in einem Block manuell Textänderungen vornimmt, funktioniert diese Änderung bei Lotus Notes nicht.

• Das Fluid-Hybrid-Verfahren erfordert die Verwendung gleicher Einrückungen um alle Container herum, um bei der mobilen Version vertikal ausgerichtet zu sein. Das bedeutet, dass es bei Desktop-Versionen doppelte Einrückungen geben kann.

Bei einfachen E-Mails mag dies nicht kritisch sein, aber bei Strukturen mit einer großen Anzahl von Containern und verschiedenen Einrückungen wird es zu einem echten Problem.

Die Probleme mit der adaptiven Layoutmethode werden durch spätere Aktualisierungen der E-Mail-Clients von selbst gelöst. Allerdings müssen wir akzeptieren, dass die Probleme mit der Fluid-Hybrid-Layoutmethode immer bestehen bleiben werden. Wir schauen weit in die Zukunft und setzen auf Medienabfragen.

Wenn Sie ein oder zwei einfache Nachrichten erstellen müssen, können Sie natürlich die Fluid-Hybrid-Methode verwenden. Aber wenn es um das strategische Wachstum unseres seit Jahren aufgebauten Editors geht, entscheiden wir uns für die Medienabfragen-Methode. Wenn Sie Ideen, konstruktive Kritik oder Lösungsansätze zu den oben genannten Themen haben, teilen Sie uns diese Informationen auf Facebook oder senden Sie uns eine E-Mail an contact@stripo.email – wir werden sie gerne berücksichtigen.

Wir sind offen für Diskussionen.