Update: Gmail führt Unterstützung für Responsive Design, verbesserte Schriftarten + CSS für Barrierefreiheit ein

Veröffentlicht: 2016-09-30

In den frühen Morgenstunden des 30. Septembers begann Gmail mit der Einführung von Änderungen, um das zu unterstützen, wonach die E-Mail-Welt so lange schreit: eingebettete Stile und responsives Design.

Worüber reden wir?

Gmail hat bisher keine Klassen oder IDs im <head> einer E-Mail unterstützt, was E-Mail-Designer gezwungen hat, Inline-CSS zum Gestalten ihrer E-Mails zu verwenden. Gmail unterstützt jetzt eingebettetes CSS mit Klassen und IDs, wodurch Inline-CSS in Gmail überflüssig wird. Dies bedeutet auch, dass Gmail endlich Medienabfragen unterstützt – und responsive E-Mails.

Nur die Nachrichten nachholen? Verfolgen Sie unsere Updates im Live-Ticker, während wir die Einführung überwachen, oder lesen Sie unten eine Zusammenfassung aller erwarteten Änderungen und deren Bedeutung für E-Mail-Marketer.

Der Gmail-Update-Live-Ticker

Hier ist eine aktuelle Ansicht der aktualisierten Gmail-E-Mail-Clients:

Gmail-Client

Update ausgerollt

Desktop-Webmail

check-grün

Mobiles Webmail

check-X

Gmail Android-App (Gmail-Konto)

check-grün

Gmail Android-App (Gmailified-Konto)

check-grün

Gmail Android-App (POP/IMAP-Konto)

check-X

Gmail iOS-App

check-grün

Posteingang von Gmail (Webmail)

check-grün

Posteingang von Gmail (iOS)

check-grün

Posteingang von Gmail (Android)

check-grün

G Suite Basic (ehemals Google Apps for Work)

check-grün

Kostenlose Google Apps-Edition (alt)

check-X

  • 7. November, 11:30 Uhr EDT

Ein wichtiges Update der Gmail iOS App beinhaltet das Rendering-Update zur Unterstützung von <style> und Medienabfragen! Alle mobilen Gmail-Apps unterstützen jetzt responsive E-Mails. Wir sehen auch alle G Suite-Konten mit dem Rendering-Update.

  • 12. Oktober, 9:00 Uhr EDT

Wir sehen allmählich, dass G Suite-Konten außerhalb der USA (einschließlich Litmus Previews) das Rendering-Update erhalten. Wir werden das Rollout-Diagramm aktualisieren, wenn wir feststellen, dass alle unsere Konten über das Update verfügen.

  • 4. Oktober, 9:30 Uhr EDT

Wir haben oben ein vollständiges Rollout-Diagramm veröffentlicht. Beachten Sie, dass Gmail die Namen seiner Kontopläne umbenannt hat.

Bei G Suite Basic-Konten (ehemals Google Apps for Work) scheinen die Updates möglicherweise nur auf US-Konten ausgerollt worden zu sein. Bitte beachten Sie für Litmus-Nutzer, dass unsere G Suite Basic E-Mail-Vorschauen (derzeit noch unter dem Titel Google Apps) in Großbritannien ansässige Konten verwenden, die derzeit nicht aktualisiert wurden.

  • 4. Oktober, 4:00 Uhr EDT

Die Einführung zur Unterstützung von Medienabfragen scheint nun sowohl in der Gmail- als auch in der Inbox by Gmail-App auf Android abgeschlossen zu sein. Während einige Leute Änderungen bei der Unterstützung von Medienabfragen in ihren iOS-Apps bemerkt haben, ist die Unterstützung noch nicht für alle Konten einheitlich.

  • 30. September, 8:00 EDT

Auch für Android wurden Änderungen an der Gmail-App ausgerollt. Klassen und Ausweise werden im Kopf der E-Mail abgeholt. Wir sehen auch Unterstützung für Medienabfragen für einige Android Gmail App-Konten, aber die Unterstützung ist nicht für alle von uns getesteten Konten einheitlich. Die Unterstützung könnte schrittweise in allen Regionen eingeführt werden.

Updates werden jetzt auch in Inbox by Gmail bereitgestellt, mit Unterstützung für IDs und Klassen im Kopf der E-Mail.

  • 30. September, 5:30 Uhr EDT

Gmail scheint nach und nach Updates für seine Rendering-Engine einzuführen. Gmail-Webclients unterstützen Klassen und IDs im <head> in allen Browsern (Chrome, Safari und Firefox) und beide werden im HTML korrekt referenziert.

Wir sehen auch, dass Medienabfragen in den Webclients von Gmail unterstützt werden:

Gmail zur Unterstützung des responsiven E-Mail-Designs

Bisher werden jedoch weder Style-Tags im Kopf der E-Mail noch Medienabfragen von Inbox by Gmail oder der Gmail-App unterstützt.

  • 29. September, 23:55 Uhr EDT

Es passiert! Gmail hat mit der Einführung von Änderungen an seiner Rendering-Maschine begonnen. Bleiben Sie auf dem Laufenden, während wir die Einführung überwachen.

Teilen Sie die Neuigkeiten →

Was diese Änderungen für E-Mail-Geeks bedeuten

Am 31. August 2016 kündigte Gmail an, die CSS-Property-Anzeige zu unterstützen: keine; und Unterstützung von <style> und Medienabfragen.

Dies ist nur ein Teil der allgemeinen Bemühungen, die CSS-Unterstützung in Gmail zu erweitern und E-Mail-Designern mehr Kontrolle darüber zu geben, wie ihre Nachrichten gerendert werden.

– Pierce Vollucci, Produktmanager bei Google

Dies sind große Neuigkeiten für die E-Mail-Community und werden große Auswirkungen auf das E-Mail-Design und die E-Mail-Entwicklung haben.

GMAIL ZUR UNTERSTÜTZUNG RESPONSIVE E-MAIL UND <STYLE>

Gmail hat bisher keine Klassen oder IDs im <head> einer E-Mail unterstützt, was E-Mail-Designer gezwungen hat, Inline-CSS zum Gestalten ihrer E-Mails zu verwenden. Gmail unterstützt jetzt eingebettetes CSS mit Klassen und IDs, wodurch Inline-CSS in Gmail überflüssig wird. Dies bedeutet auch, dass Gmail endlich Medienabfragen unterstützt – und reaktionsschnelle E-Mails.

Mit anderen Worten, der folgende Code wird jetzt in Gmail richtig gerendert:

 <html> <head> <style> .colored { color: blue; } #body { font-size: 14px; } @media screen and (min-width: 500px) { .colored { color:red; } } </style> </head> <body> <div> <p>Hi Pierce,</p> <p class="colored"> This text is blue if the window width is below 500px and red otherwise. </p> <p>Jerry</p> </div> </body> </html>

Eine vollständige Liste der unterstützten CSS finden Sie am Ende dieses Beitrags oder in der offiziellen Dokumentation von Gmail. Hier ist eine vollständige Liste der bevorstehenden Unterstützung für Medienabfragen:

Unterstützte Typen

  • alle
  • Bildschirm

Unterstützte Abfragen

  • Mindestbreite
  • maximale Breite
  • minimale Gerätebreite
  • max-device-width
  • Orientierung
  • min-Auflösung
  • maximale Auflösung

Unterstützte Schlüsselwörter

  • und
  • nur

WAS DAS FÜR E-MAILS BEDEUTET

Diese Updates stellen einen wichtigen Wendepunkt in der E-Mail-Entwicklung und im Workflow dar und ermöglichen es Designern und Vermarktern, zugänglichere E-Mail-Kampagnen ohne CSS-Inlining zu erstellen.

Marktauswirkungen: Medienabfragen werden bald zum Standard

Viele E-Mails basieren auf Medienabfragen, um Inhalt und Design zu optimieren, um ein benutzerfreundlicheres Erlebnis über eine Vielzahl von Bildschirmgrößen hinweg zu schaffen. Allerdings funktionieren Medienabfragen nicht überall. Der bemerkenswerteste und frustrierendste Mangel an Unterstützung kam in der Vergangenheit von Gmail, das dafür bekannt ist, Code aus dem <head> zusammen mit allen darin enthaltenen Stilen und Medienabfragen zu entfernen.

Mit der Unterstützung von Gmail für Medienabfragen unterstützen über 75 % der E-Mail-Clients responsives Design . Wir hoffen, dass dies die Norm wird, wenn andere E-Mail-Clients wie Windows Phone nachziehen.

Reduzierter Bedarf an hackigen Layoutstrukturen wie Fab Four

Um die fehlende Unterstützung von Gmail für Medienabfragen zu bekämpfen, haben E-Mail-Freaks nach Workarounds gesucht. Eine solche Problemumgehung ist die Fab Four-Technik, die die CSS-Funktion calc() und die drei Eigenschaften width, min-width und max-width umfasst.

E-Mail-Designer, es ist Zeit, sich von diesen komplizierten Layoutstrukturen zu verabschieden. Beachten Sie jedoch, dass Sie weiterhin Tabellen für Outlook benötigen. (Wir haben noch keinen E-Mail-Standard erstellt….noch).

Die hybride/schwammige Entwicklung hat jedoch immer noch ihren Platz in der E-Mail-Entwicklung als Basisstruktur für problematische Clients wie Outlook.

Verabschieden Sie sich von CSS-Inlining

„Einfügen“ von Stilen verschiebt das CSS und die dazugehörigen Formatierungsanweisungen aus dem Stilblock im <head> Ihrer E-Mail in den <body> des HTML. Wenn Stile nicht inline verschoben wurden, wurde der Stil im Textkörper Ihrer E-Mail in der Vergangenheit nicht in Gmail angezeigt.

no-inline-edited-03

Mit diesen Updates ist das Inlining von CSS nicht mehr erforderlich. E-Mail-Designer können jetzt eingebettete Stile verwenden, die im <head> von HTML-Dokumenten platziert werden. Eingebettetes CSS wird in allen gängigen E-Mail-Clients unterstützt.

E-Mails werden zugänglicher

Barrierefreiheit in E-Mails ist für den Erfolg einer Kampagne unerlässlich. Wenn ein Abonnent Ihre E-Mails nicht lesen und nicht mit ihnen interagieren kann, gibt es keine Möglichkeit für ihn, Maßnahmen zu ergreifen.

Mit der eingebetteten CSS-Unterstützung können E-Mail-Designer das Styling vom Inhalt trennen und semantisches, barrierefreies Markup für ihre E-Mails verwenden.

Während großer Text und berührungsfreundliche Schaltflächen die Zugänglichkeit verbessern, hilft auch die Vorbereitung Ihres HTML-Codes für die Verwendung mit einem Screenreader. Achten Sie daher in Ihrem Design auf ein ausgewogenes Verhältnis von Text und Bildern und passen Sie den geschriebenen Inhalt Ihrer E-Mail an, um die Hauptbotschaft zu übermitteln.

Mit zusätzlicher Unterstützung für CSS-basierte Screenreader-Einstellungen wie Tonhöhe, Tonhöhenbereich, Sprechzeichen und Sprechgeschwindigkeit hat Gmail es Vermarktern noch einfacher gemacht, ihre E-Mails zugänglicher zu machen.

Typografie-Unterstützung wird zunehmen

Eine weitere wichtige Änderung, die mit diesen Updates einhergeht, ist die zusätzliche Unterstützung von CSS-Schrifteigenschaften. Gmail wird beispielsweise beginnen, Attribute wie Spaltenanzahl und Spaltenabstand zu unterstützen, was die Erstellung von Textspalten ohne Tabellen ermöglicht. Darüber hinaus ermöglichen font-kerning und font-variant-caps zusätzliche Schriftarten. Es scheint jedoch nicht, dass Webfonts in der kommenden Version unterstützt werden.

Zusätzliche Unterstützung für den Hintergrund ist in Vorbereitung

Gmail führt zusätzliche Unterstützung für CSS-Hintergrundeigenschaften wie Hintergrundclip, Hintergrundposition und vor allem Hintergrundgröße ein. Mit der Unterstützung der Hintergrundgröße können E-Mails skalierbare und reaktionsschnelle Hintergrundbilder haben.

TESTEN SIE IHRE E-MAILS IN GMAIL

Wie wirken sich diese Änderungen auf Ihre E-Mails aus? Verwenden Sie Litmus, um eine Vorschau Ihrer E-Mails in Gmail und über 70 anderen E-Mail-Clients anzuzeigen. Beachten Sie, dass diese Änderungen noch nicht live sind, aber in Litmus Instant Previews angezeigt werden, sobald Gmail sie live überträgt.

Testen Sie Lackmus kostenlos →

Offizielle Dokumentation

Zum ersten Mal hat ein großer E-Mail-Client eine offizielle CSS- und HTML-Unterstützungsdokumentation veröffentlicht. Dies ist eine wichtige Branchenneuheit. Danke, Google Mail!

Die folgenden CSS-Eigenschaften werden in Gmail und Inbox by Gmail unterstützt:

  • Azimut
  • Hintergrund
  • Hintergrund-Mischmodus
  • Hintergrund-Clip
  • Hintergrundfarbe
  • Hintergrundbild
  • Hintergrund-Herkunft
  • Hintergrundposition
  • Hintergrund Wiederholung
  • Hintergrundgröße
  • Grenze
  • Grenze-unten
  • Rahmen-unten-Farbe
  • rand-unten-links-radius
  • rand-unten-rechts-radius
  • Bordüre-unten-Stil
  • Rahmen-unten-Breite
  • Grenzkollaps
  • Randfarbe
  • rand-links
  • Rahmen-Links-Farbe
  • Bordüre-Links-Stil
  • Rahmen-Links-Breite
  • Grenzradius
  • Grenze-rechts
  • Rahmen-rechts-Farbe
  • Grenze-rechts-Stil
  • Rahmen-rechts-Breite
  • Grenzabstand
  • Bordüre-Stil
  • rand-top
  • Bordüre-Oberseite-Farbe
  • Rand-oben-Links-Radius
  • Rand-oben-Rechts-Radius
  • Bordüre-Top-Stil
  • Bordüre-Oben-Breite
  • Rahmenbreite
  • Kartongröße
  • Pause nach
  • Pause vor
  • einbrechen
  • Bildunterschrift
  • klar
  • Farbe
  • Spaltenanzahl
  • Spalten ausfüllen
  • Spaltenlücke
  • Spaltenregel
  • Spalten-Regel-Farbe
  • Spaltenregel-Stil
  • Spaltenregelbreite
  • Spaltenspanne
  • Spaltenbreite
  • Säulen
  • Richtung
  • Anzeige
  • Elevation
  • leere Zellen
  • schweben
  • Schriftart
  • Schriftfamilie
  • Font-Feature-Einstellungen
  • Schriftkerning
  • Schriftgröße
  • Schriftgröße anpassen
  • Schriftdehnung
  • Schriftstil
  • Schrift-Synthese
  • Schriftart-Variante
  • Schriftart-Variante-Alternativen
  • Schriftart-Variante-Großbuchstaben
  • Schriftart-Variante-Ost-Asiatisch
  • Schriftart-Variante-Ligaturen
  • Schriftart-Variante-Numerisch
  • Schriftstärke
  • Höhe
  • Bildorientierung
  • Bildauflösung
  • Isolation
  • Buchstaben-Abstand
  • Zeilenhöhe
  • Listenstil
  • Listenstilposition
  • Listen-Stil-Typ
  • Rand
  • Rand-unten
  • Rand-links
  • Rand-rechts
  • Rand-oben
  • maximale Höhe
  • maximale Breite
  • Mindesthöhe
  • Mindestbreite
  • Mix-Blending-Modus
  • objekttauglich
  • Objektposition
  • Opazität
  • Gliederung
  • Umrissfarbe
  • Umriss-Stil
  • Umrissbreite
  • Überlauf
  • Polsterung
  • Polster-Boden
  • Polsterung-links
  • polster-rechts
  • Polster-Oberseite
  • Pause
  • Pause-nach
  • Pause-vor
  • Tonhöhe
  • Tonhöhenbereich
  • Zitate
  • Reichtum
  • sprechen
  • Speak-Header
  • sprechen-Zahl
  • sprechen-Interpunktion
  • Sprechgeschwindigkeit
  • betonen
  • Tisch-Layout
  • Textausrichtung
  • text-kombinieren-upwrite
  • Text-Dekoration
  • Text-Dekoration-Farbe
  • Text-Dekorations-Zeile
  • Text-Dekoration-überspringen
  • Text-Dekoration-Stil
  • Textbetonung
  • Text-Hervorhebung-Farbe
  • Texthervorhebungsstil
  • Texteinzug
  • Textorientierung
  • Textüberlauf
  • Text-Transformation
  • Text-Unterstreichung-Position
  • Unicode-Bidi
  • vertikal ausrichten
  • Stimme-Familie
  • Breite
  • Wortabstand
  • Schreibmodus

ERHALTEN SIE DAS NEUESTE GERADE IN IHREN EINGANG ZUGESTELLT

Wir halten Sie über weitere Änderungen bei der Einführung von Google Mail und deren Auswirkungen auf Sie auf dem Laufenden. Abonnieren Sie unseren wöchentlichen Newsletter und erhalten Sie die neuesten Inhalte für E-Mail-Design-Profis direkt in Ihren Posteingang. Jede Woche.