Responsiveness in Gmails Mobile App – mit diesen Tricks umgeht man die automatische Anpassung
Kommentare

Das mobile Surfen erfreut sich einer immer größeren Beliebtheit. Der Griff zum Smartphone, um schnell die eigenen E-Mails zu checken, ist schon zur Routine geworden. Für Webdesigner wird es deshalb immer wichtiger, dass ihre Newsletter nicht bloß auf Desktop-Anwendungen, sondern auch auf mobilen Geräten optimal angezeigt werden. Falsche Darstellung und Unleserlichkeit sind da nicht bloß lästig, sondern können den Verlust von Abonnenten zur Folge haben.

Auch Gmail hat sich diesem Problem gewidmet und setzt bei der Antwort darauf auf eine interne Lösung. Wird die Schriftgröße einer E-Mail als nicht leserlich eingestuft, passt Gmail sie automatisch an die Auflösung des Geräts an. Was in der Theorie sinnvoll klingt, erweist sich in der Praxis jedoch als problematisch.

Automatische Anpassung durch Gmail

Mit Blick auf die Erhöhung der Benutzerfreundlichkeit erscheint die automatische Anpassung der Inhalte als vielversprechende Idee; nerviges Zoomen und lästiges Hin- und Herschieben scheinen der Vergangenheit anzugehören. Allerdings hat der Eingriff von Dritt-Software in die Darstellung und Auflösung von Inhalten auch einen beträchtlichen Nachteil. Die Lösungsstrategie von Gmail lässt den Desigern kaum noch eine Möglichkeit, die richtige Ausgabe ihrer Werke aktiv beeinflussen zu können. Macht die App einen Fehler, kann das mitunter zu völligen Fehldarstellungen führen.

Erschwerend kommt hinzu, dass Gmail auch auf die Einbindung von Media Queries verzichtet. In CSS dienen Media Queries dazu, Breakpoints bei bestimmten Breiten und Höhen zu setzen. Sie werden verwendet, um geräteübergreifend eine optimale Auflösung zu gewährleisten. Die automatische Anpassung von Gmail kann also unter Umständen dazu führen, dass nicht die Responsivität von Inhalten gefördert, sondern im Gegenteil sogar eingeschränkt wird.

Drei Möglichkeiten, den Anpassungszwang zu umgehen

CSS-Tricks haben drei Möglichkeiten vorgestellt, um Gmails Anpassungszwang zu umgehen. Prinzipiell scheint die automatisierte Anzeige der App folgendermaßen zu funktionieren: Der Quelltext einer E-Mail wird nach Elementen und deren Abmessungen untersucht. Sollte die Abmessung eines Elements die Darstellungskapazität des Geräts übersteigen, wird die Schrift automatisch vergrößert. Soll ein Element zum Beispiel 600px breit sein, das Display des Geräts umfasst allerdings nur 320px, wird die Schriftgröße um 50% angehoben.

Erstellung einer durchgehenden Zeichenkette

Die erste Möglichkeit, den Anpassungszwang zu umgehen, besteht in der Erstellung einer durchgehenden Zeichenkette. Die Kette sollte die gleiche Breite und Hintergrundfarbe besitzen wie der Container, der dargestellt werden soll. Durch den Befehl white-space: nowrap wird Gmail daran gehindert, die Reihe zu unterbrechen. Sobald die App versucht, die Schrift zu vergrößern, sprengt die Zeichenkette den dafür vorgesehenen Container und verhindert die automatische Anpassung. Der Nachteil dieses Verfahrens liegt darin, dass der Einsatz unsichtbarer Elemente von manchen Diensten als Spam eingestuft werden kann.

Platzhalterbild einfügen

Die zweite Möglichkeit funktioniert ähnlich wie die erste. Statt einer Zeichenkette wird an den Anfang einer Tabelle ein Platzhalterbild mit 1px Höhe und der gewünschten Breite eingefügt. Die Breite des Bildes legt für Gmail die absolute Breite der Tabelle fest. Dadurch wird verhindert, dass die Tabelle verkleinert und der Text herangezoomt werden kann. Auf unterstützten Plattformen kann die Tabellenreihe durch die Verwendung von Media Queries ausgeblendet werden. Obwohl der Einsatz eines Platzhalterbildes den Tests bisher standgehalten hat, wird ihre universelle Einsetzbarkeit dennoch angezweifelt.

Die Anweisung !important

Die dritte und einfachste Methode stellt die Verwendung der Anweisung !important dar, die von Gmail anerkannt wird. Durch den Befehl kann die Schriftgröße innerhalb einer Tabelle konkret festgelegt werden. Allerdings schränkt der Gebrauch von !important die gerätespezifische Anpassung von Inhalten wiederum stark ein.

Das Ergebnis bleibt zwiegespalten. Manche E-Mails können von der automatischen Textanpassung profitieren. Gerade im Umgang mit Desktop-Anwendungen scheint die Technik von Gmail ihre Stärken zu besitzen; im mobilen Einsatz zeigt sie jedoch Schwächen. Ob die fehlende Unterstützung von Media Queries allerdings durch eine der hier vorgestellten Methoden kompensiert werden kann, bleibt abzuwarten.

Aufmacherbild: Responsive web design via Shutterstock / Urheberrecht: MPFphotography

Unsere Redaktion empfiehlt:

Relevante Beiträge

Meinungen zu diesem Beitrag

X
- Gib Deinen Standort ein -
- or -