Kostenlos testen Login
Home » Blog » Update: Gmail unterstützt ab sofort Responsive Design

Update: Gmail unterstützt ab sofort Responsive Design

4. Oktober 2016

Gmail-Responsive-Design

Inline-CSS bei Gmail wird endlich überflüssig

Im September verkündete Google eine sehr erfreuliche Nachricht: Der verbreitete E-Mail-Client Gmail bekommt ein Update, um für eine weitaus bessere Darstellung von E-Mails zu sorgen. Einer der wichtigsten Punkte ist dabei, dass Gmail in Zukunft Responsive Newsletter berücksichtigt und E-Mails an die mobile Darstellung angepasst werden können.

Das Drama um CSS-Klassen und Media Queries

An Gmail haben sich in der Vergangenheit schon viele E-Mail-Designer die Zähne ausgebissen. Bis vor kurzem wurden Klassen oder IDs im <head>-Teil von E-Mails nicht unterstützt. Deshalb musste beim E-Mail-Design auf Inline-CSS zurückgegriffen werden. Styles außerhalb des Inline-Bereichs wurden von Gmail schlichtweg nicht dargestellt. Selbst innerhalb des Inline-Bereichs gab es Einschränkungen, viele Styles wurden von Gmail überhaupt nicht berücksichtigt. Auch die Nutzung von Media Queries war nicht möglich.

Das führte dazu, dass Responsive Newsletter in Gmail nicht wie gewünscht dargestellt werden konnten. Bei einem derzeitigen Marktanteil Gmails von über 15% war dies für E-Mail-Designer und –Versender ein schwer zu fassender und sehr ärgerlicher Umstand. Responsive Design ist heute unersetzlich, denn bereits mehr als die Hälfte aller E-Mails werden auf mobilen Endgeräten gelesen. Es sorgt dafür, dass E-Mails sich an das jeweilige Endgerät und seine Bildschirmgröße anpassen. Deshalb müssen z.B. die Schriftgröße, Bilder, Buttons und Spalten auf das Endgerät „antworten“. Ohne Responsive Design kommt es zu Darstellungsproblemen und die Lesbarkeit ist generell stark eingeschränkt. Es wird hauptsächlich mithilfe von Media Queries umgesetzt.

Was sich durch das Gmail-Update ändert

Ab sofort unterstützt Gmail sowohl Media Queries als auch den <style>-Tag. Dies bedeutet für E-Mail-Designer eine enorme Erleichterung. Inline-CSS wird durch das Update unnötig. Nach dem Update gibt es insgesamt mehr Kontrolle über das Design. E-Mails kommen mit weniger Code aus, die Darstellung ist deutlich weniger fehleranfällig. Ein großer Teil bisheriger Workarounds für Gmail dürfte ab sofort unnötig werden.

Außerdem wird dadurch auch Responsive Design berücksichtigt. Responsive Newsletter für Gmail können endlich problemlos umgesetzt werden. Zum Beispiel können nun anhand der Breite, Bildschirmdrehung (hoch/quer) und Auflösung unterschiedliche Styles festgelegt werden. Auch Hintergrundbilder in E-Mails werden ab sofort besser dargestellt. Sie werden skalierbar und ebenfalls responsiv.

Neben der Darstellung auf verschiedenen Endgeräten wurde auch an der Barrierefreiheit von E-Mails gearbeitet. So berücksichtigt Gmail nach dem Update spezielle Styles für Screen Reader, mit denen Einstellungen wie Tonhöhe und Vorlesegeschwindigkeit gesteuert werden können.

Was bedeutet das für meinen Newsletter?

Der Großteil der Änderungen wurde von Google bereits zum 30. September 2016 umgesetzt. Da die E-Mail-Templates von Newsletter2Go schon immer responsive gestaltet waren, werden Ihre E-Mails mit unserer Newsletter Software weiterhin optimal dargestellt. Dank der Änderungen seitens Google verbessert sich jetzt die Lesbarkeit Ihrer E-Mails und die Darstellung auf unterschiedlichen Endgeräten wird einheitlicher. Im Client-Testing werden wir die Voransicht für Gmail so schnell wie möglich aktualisieren.

Nach und nach werden die Updates über alle Gmail-Versionen ausgerollt. Dazu zählen auch die mobilen Gmail-Apps und die Inbox by Gmail App. Zukünftig möchte Google den CSS-Support in Gmail noch mehr ausweiten. Ziel ist, E-Mail-Designern mehr Kontrolle über die Darstellung der E-Mails zu geben.

Eine vollständige Liste der unterstützten CSS-Styles und Media Queries finden Sie auf dieser Übersichtsseite von Google.

Hinterlasse eine Antwort

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind markiert *

Du kannst folgende HTML-Tags benutzen: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>