NEWSLETTER

11 Gmail- Hindernisse während der E-Mail-Gestaltung

Dass Newsletter in Gmail perfekt dargestellt werden, ist für Programmierer sowie Designer eine Herausforderung. Ständig gibt es neue Updates und Features - teilweise ohne Vorankündigung. Wir haben die 11 häufigsten Stolpersteine, die während der Erstellung von E-Mails auftreten können, zusammengefasst. 


Verfasst von Hannah Krüger



HTML E-Mails für Gmail erstellen: Darauf sollten Sie achten

Neben den folgenden Punkten sollten Sie Ihre E-Mails vor dem Senden testen werden, um Fehler zu verringern. Das Tracken von wichtigen E-Mail Metrics verschafft Ihnen einen zusätzlichen Überblick über die Nutzung der E-Mail-Clients Ihrer Empfänger. Beispielsweise können Sie so sehen, wie viele Gmail verwenden. 

 

1. Gmail umfasst mehrere E-Mail-Clients

Gmail hat viele verschiedene Versionen. Hierbei gibt es zum einen die Mobil- und Desktop-Ansicht. Des Weiteren finden sich Unterschiede zwischen Android, Apple und Webmail sowie zwischen den Öffnen der E-Mails mit einem Gmail Account oder mit POP/IMAP. Kostenpflichtige Google Accounts wie G Suite Business und G Suite Basic bilden wieder neue Clients. Jeder einzelne Client muss perfekt dargestellt und werden, um die E-Mail-Experience so optimal wie möglich zu gestalten. 

 

2. Background Images werden bei nicht-Google Account nicht angezeigt

Die Gmail App für Android bietet ein spannendes Feature: E-Mail Accounts, die nicht mit Google verknüpft sind, lassen sich trotzdem in Gmail abrufen. Allerdings unterstützen diese E-Mails keine Style-Blöcke sowie keine Background Images.

    3. E-Mails werden abgeschnitten 

      Ist Ihre E-Mail größer als 102kB wird diese in den Postfächern Ihrer Subscriber nach den ersten 102kB abgeschnitten. Möchte ein User jedoch die gesamten E-Mail-Inhalte lesen, muss er auf einen folgenden Link klicken, um in ein neues Fenster mit den gesamten E-Mail-Inhalten weitergeleitet zu werden.

        

      4. Gmail unterstützt Styles nur im -Element

      Gmail unterstützt zwar eingebettete Styles (). Allerdings nur, wenn diese Bestands des -Elements des HTML Dokuments sind. Wenn jedoch E-Mails in der Gmail App über nicht-Google Accounts geöffnet werden, werden Styles (

       

      5. Gesamte Style-Blöcke werden entfernt

      Findet Gmail einen Error in Ihren Style-Blöcken, wird der gesamte Block entfernt. Verwenden Sie eine „@„-Deklaration innerhalb einer „@„-Deklaration, wird der dazugehörige Block entfernt. Um dieses Problem zu umgehen, erstellen Sie mehrere Style-Blöcke.

      Style-Blöcke, die über 8192 Zeichen beinhalten, werden ebenfalls von Gmail gelöscht sowie alle darauffolgenden Style-Blöcke. Falls dieses Problem bei Ihnen auftritt, können Sie den zu großen Style-Block einfach in zwei Teile aufteilen.

       

      6. Attributselektoren und Pseudo-Klassen werden nicht unterstützt

      Obwohl moderne E-Mail-Clients wie Apple Mail Attributselektoren unterstützten, werden diese von Gmail nicht supportet. Auch Pseudo-Klassen wie :checked und :active gehören dazu. Dynamische und interaktive E-Mail-Inhalte ohne AMP for email zu gestalten, ist daher schwierig. Pseudo-Klassen wie :hover werden nur im Webmail Client von Gmail unterstützt. Unser Tipp lauet daher, interaktive Mails mit dem Google Feature AMP for email zu erstellen.

       

      7. Images werden mit einem Download-Icon dargestellt

      Verwenden Sie große nicht-verlinkte Bilder, wird höchstwahrscheinlich ein Download-Icon unten rechts auf der Bildoberfläche angezeigt. Klickt man auf diesen Button, wird das Image automatisch auf den Desktop heruntergeladen. Solche Buttons können E-Mail-Designer reizen und den Newsletter unseriös wirken lassen. Die Lösung: Verknüpfen Sie Bilder, die größer als 300x150 sind, mit einem Link. 

       

      8. Negative CSS margin Werte werden nicht unterstützt

      Wie auch bei anderen Webmail Clients (z.B. Outlook und Yahoo! Mail) unterstützt auch Gmail keine negativen margin Werte.

       

      9. Telefonnummern, E-Mail-Adressen URLs werden automatisch verlinkt

      Auch dieses Problem erscheint ärgerlich für viele E-Mail-Designer. Schreiben Sie Ihre Telefonnummern, E-Mail-Adressen und URLs in HTML wie folgt um, sodass keine Links entstehen: 

       

      Bei Telefonnummern:

      Ändern Sie 040 1811 017 zu 040­-181­-017

       

      Bei E-Mail-Adressen:

      Ändern Sie info@juneapp.com zu info@juneapp­.com

       

      Bei URLs: 

      Ändern Sie www.juneapp.com zu www.juneapp­.com

      Ändern Sie http://www.juneapp.com zu http:­­//www.juneapp­­.com

       

      Sie können somit z.B. "­" vor jeder Einheit schreiben. Gmail erkennt nicht, dass es sich um eine Telefonnummer, E-Mail-Adresse oder URL handelt.

       

      10. Gmail verwendet HTML5 DOCTYPE

      Egal welchen DOCTYPE Sie verwenden, in Gmail werden Ihre Mails mit HTML5 DOCTYPE angezeigt, was zu Darstellungsproblemen führen kann.

       

      11. DOCTYPE löst zusätzliche Spaces unter Images aus 

      Das Problem taucht nicht nur bei Gmail auf, sondern auch bei Outlook.com und Yahoo! Beta. Die folgenden Tipps können bei allen drei Email Service Provider (ESP) angewendet werden. 

       

      • Fügen Sie style=“display:block” zu einem Image Element hinzu.
      • Fügen Sie align=“absbottom” im Image Element hinzu.
      • Fügen Sie align=” texttop ” im Image Element hinzu.
      • Fügen Sie eine line-height von 10px oder niedriger hinzu.
      • Fügen Sie eine font-size von 6px oder niedriger hinzu.