Gmail's mobile-optimierte E-Mails überschreiben

Viele E-Mails sind für einen großen Bildschirm konzipiert. Text, der auf einem großen Bildschirm gut aussieht, kann auf einem mobilen Gerät jedoch schwer zu lesen sein.

Wenn Gmail der Meinung ist, dass die Schriftgröße eines Textes in einer E-Mail zu klein ist, um lesbar zu sein, wird die Größe erhöht und die Nachricht mit diesem Hinweis gekennzeichnet.

Das ist ziemlich nett. Was vielleicht unleserlich war, wurde lesbar gemacht, wodurch die Notwendigkeit entfällt, unsere Bildschirme zu vergrößern und zu zoomen.

Es kann auch ein wenig frustrierend sein. Als Designer haben wir oft eine Vorliebe dafür, wie unser Code gerendert wird. Wenn eine Drittpartei eingreift und das Design übernimmt, kann sich das ein wenig schmutzig anfühlen, oder es kann sogar ein ganzes Layout brechen, wenn Gmail es falsch macht.

Man könnte argumentieren, dass Gmail einfach Media Queries unterstützen sollte, wenn es die Lesbarkeit verbessern möchte. Geben Sie uns die Kontrolle, um ein besseres Leseerlebnis zu schaffen, richtig? Leider unterstützt Gmail keine Media Queries.

Schauen wir uns an, was diese Funktionalität auslöst und einige Methoden, um sie zu überschreiben.

Was löst die Vergrößerung der Schriftgröße aus?

Gmail scheint gezielt nach Elementen in der E-Mail zu suchen, die breiter sind als der Bildschirm, auf dem die E-Mail angezeigt wird. Wenn Gmail beispielsweise feststellt, dass ein table-Element 600 Pixel breit ist, der aktuelle Bildschirm aber nur 320 Pixel breit ist, erhöht die App die Schriftgröße um bis zu 50 %.

Wenn sich das table-Element innerhalb der Bildschirmgrenzen befindet, zeigt Gmail die E-Mail so an, wie sie entworfen wurde. Zum Beispiel kann dieselbe E-Mail, die vergrößert wird, tatsächlich normal angezeigt werden, wenn das Gerät in den Querformat gedreht wird.

Drei Wege, um dies zu umgehen

Einige E-Mails können von einer erhöhten Schriftgröße profitieren. Andere wiederum können davon profitieren, die Schriftgröße gar nicht erst ändern zu lassen. In diesen Fällen gibt es mehrere Möglichkeiten, Gmail aufzuhalten.

Methode 1: Verwenden von white-space: nowrap

Justin Khoo bietet eine clevere Technik an

Ich habe herausgefunden, dass, wenn der Stil white-space: nowrap auf Text angewendet wird und die Erhöhung der Textgröße dazu führen würde, dass die Breite der E-Mail über die Fensterbreite hinausgeht (wodurch die E-Mail sehr schlecht aussieht), Gmail dies irgendwie erkennt und die Anwendung der Schriftgrößenänderung rückgängig macht.

Die Idee ist, eine nicht-brechende Zeichenkette zu erstellen, so dass, wenn die Schriftgröße erhöht würde, die Zeichen aus dem Container überlaufen und verhindern würden, dass die Funktionalität von Gmail ausgelöst wird.

Das läuft auf ein Snippet hinaus, das in das breiteste Element des HTML eingefügt wird und ungefähr so aussieht:

<div style="display: none; white-space: nowrap; line-height: 0; color: #ffffff;">
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
</div>

Gmail ignoriert den Stil display: none. Dann sagt white-space: nowrap Gmail, den Text nicht in mehrere Zeilen zu brechen, was Gmail zwingt, den Schriftzoom zu stoppen.

Das Ziel ist es, eine Zeile zu bekommen, die knapp unter der Breite des Containers liegt. Und die Farbe sollte mit der Hintergrundfarbe übereinstimmen, damit sie unsichtbar ist.

Es wurden Bedenken geäußert, dass die Verwendung von unsichtbarem Text in einer E-Mail dazu führen könnte, dass sie als Spam markiert wird. Dies ist sicherlich eine Überlegung wert, wenn diese Methode versucht wird, und sie sollte in so vielen Clients wie möglich getestet werden.

Methode 2: Verwenden eines Platzhalterbildes

Wir können eine Zeile am Anfang der table hinzufügen, die als E-Mail-Container dient. Nehmen wir an, dieser Container soll 600 Pixel breit sein.

... 
  <tr class="gmail-fix">
    <td>
      <table cellpadding="0" cellspacing="0" border="0" align="center" width="600">
        <tr>
          <td cellpadding="0" cellspacing="0" border="0" height="1"; style="line-height: 1px; min-width: 600px;">
            <img src="spacer.gif" width="600" height="1" style="display: block; max-height: 1px; min-height: 1px; min-width: 600px; width: 600px;"/>
            </td>
          </tr>
      </table>
    </td>
  </tr>
...

Wir haben eine Zeile am Anfang der Tabelle erstellt, die ein Bild einbettet und das Layout auf 600 Pixel erzwingt. Gmail erkennt die Tabelle als 600 Pixel breit und kann sie nun nicht mehr schrumpfen, was das Text-Zoomen verhindert.

Dann können wir diese Zeile auf Clients verstecken, die Media Queries unterstützen, indem wir CSS zum <style>-Bereich des Dokumentenkopfes hinzufügen, der von Gmail ignoriert wird.

/* Hide spacer image in applications that support media queries */
@media only screen and (max-width: 600px) {
  *[class="gmail-fix"] {
    display: none !important;
  }
}

Bitte beachten Sie, dass diese Methode zwar in Tests standgehalten hat, es jedoch Berichte gibt, dass sie keine universelle Lösung für alle E-Mail-Clients ist. Der Schlüssel ist, wie immer: testen, testen, testen.

Methode 3: Deklarieren von !important

Dies ist wahrscheinlich die einfachste Methode.

...
  <td>
    <p style="font-size: 13px !important;">The text</p>
  </td>
...

Gmail respektiert die Deklaration !important für Inline-Stile. Die !important-Deklaration hat einen schlechten Ruf in CSS, zu Recht, da sie den Stil so stark anwendet, dass er schwer zu überschreiben ist. Das ist ein Problem, wenn Sie eine Website erstellen, die Sie langfristig pflegen müssen. Aber E-Mails sind nicht so. Sie sind Unikate mit sehr kurzer Lebensdauer. Ein Styling-Niemandsland, in dem nichts tabu ist!

Eine Sache, die man hier im Auge behalten sollte, ist, dass Outlook 2007 Elemente ignoriert, die mit !important inline gestylt sind. Als Workaround können wir diesen CSS-Code in den <style>-Bereich des Dokumentenkopfes aufnehmen.

p {
  font-size: 13px !important;
}

Zusammenfassend

Gmas Technik zur Vergrößerung von Schriftgrößen in E-Mails ist ein zweischneidiges Schwert. Einerseits ist es eine nette Verbesserung in Fällen, in denen für Desktops entwickelte E-Mails leichter zu lesen sind. Andererseits kann die "Verbesserung" unsere sorgfältig ausgearbeiteten Designs beeinträchtigen.

Jede der von uns behandelten Überschreibungsmethoden hat Vor- und Nachteile. Ist eine besser als die anderen? Haben Sie eine andere Methode ausprobiert? Bitte teilen Sie sie in den Kommentaren!