So individualisieren Sie E-Mails für Benutzer

So funktioniert's

Sie können das Aussehen und den Inhalt folgender, für den Versand an Benutzer bestimmte E-Mails personalisieren:

  • Kontobestätigung,
  • Änderung der E-Mail-Adresse,
  • Passwortänderung.

E-Mails werden mittels HTML und CSS individualisiert.

Notice
Das Individualisieren von E-Mails ist nur nach Unterzeichnung der Produktlizenzvereinbarung möglich. Wechseln Sie dafür im Kundenportal zu Finanzen.

Für wen ist es

Partner, die bereits Login integriert haben und die Xsolla-Datenbank oder einen kundenseitigen Speicher nutzen.

Empfehlungen für das Erstellen von E-Mails

Für E-Mail-Programme gibt es keinen einheitlichen Standard bezüglich der E-Mail-Erstellung. Jedes Programm zeigt E-Mails auf seine eigene Weise an. Erstellen Sie ein einfaches und kompaktes Design, damit die E-Mails in verschiedenen E-Mail-Programmen gleich aussehen.

Allgemeine Struktur

JavaScript und CSS

Sie können keine Multimediainhalte über JavaScript in E-Mails einfügen. Verwenden Sie stattdessen GIF-Bilder, um E-Mails mit Animationen zu erstellen. Um ein Video zu einer E-Mail hinzuzufügen, verwenden Sie ein Bild samt Link, der zur URL mit dem Videoinhalt weiterleitet.

Nicht alle E-Mail-Programme unterstützen die komplette Liste der CSS3-Funktionen. Berücksichtigen Sie das bei der E-Mail-Erstellung.

Nutzen Sie nur Inline-Styles. Die meisten E-Mail-Programme schließen die im Tag style angegebenen Stile aus.

Copy
Full screen
Small screen
<div style="text-align: center;"></div>

Erstellung durch unabhängige Blöcke

Wir empfehlen, E-Mails über unabhängige Blöcke zu erstellen. Dabei handelt es sich um die sicherste Methode. Sie bietet folgende Merkmale:

  • Falsch dargestellte Blöcke auf einem Gerät haben keinen Einfluss auf die übrigen Blöcke.
  • Blöcke in bestehenden E-Mails lassen sich anpassen und das Ergebnis schnell testen.
  • Über Sammlungen von Blöcken lassen sich zügig E-Mails für verschiedene Zwecke verfassen.

Arbeit mit Tabellen

E-Mail-Programme haben Probleme mit Blockelementen und der Eigenschaft position: absolute. Verwenden Sie deshalb das Tabellenlayout und vergeben Sie den Tabellenzellen die Attribute align und valign, um eine E-Mail mit Blöcken zu erstellen. Tabellen eignen sich besser für die Darstellung auf verschiedenen Bildschirmen.

Vermeiden Sie es, Zellen über die Attribute colspan und rowspan zu verbinden. Nutzen Sie stattdessen eingefügte Tabellen.

Größe und verwendete Einheiten

Damit der Inhalt auf großen und kleinen Bildschirmen ohne Bildlaufleiste korrekt angezeigt wird, geben Sie die folgenden Einstellungen für alle Container mit dem Inhalt an:

  • Die Eigenschaft width: 100% sollte immer angegeben sein.
  • Die Breitenbegrenzung für den größten Bildschirm. Die empfohlene Breite sollte 800px nicht überschreiten, da dieser Wert eine optimale Leserlichkeit verspricht.

Geben Sie die Eigenschaft line-height nicht in % oder em an, sondern nur in Pixel, damit E-Mails in allen E-Mail-Programmen und auf verschiedenen Bildschirmen gleich aussehen.

Arbeit mit Schriftarten

Nutzen Sie standardmäßige Schriftarten. Die meisten E-Mail-Programme unterstützen keine externen Schriftarten.

Standardmäßige Schriftarten:

  • mit Serifen: Courier, Courier New, Georgia, Times, Times New Roman
  • ohne Serifen: Arial, Black, Tahoma, Verdana, Trebuchet MS

Preheader

Die meisten E-Mail-Programme zeigen einen Preheader als E-Mail-Vorschau an. Deshalb sollten Sie immer einen Preheader hinzufügen. Er motiviert Benutzer, empfangene E-Mails zu öffnen. In manchen E-Mail-Programmen wird der Betreff der E-Mail abgeschnitten bzw. unvollständig angezeigt, ein Preheader hilft daher den Benutzern, den Inhalt der E-Mail zu verstehen.

Codelänge

Reduzieren Sie die Codelänge, damit E-Mails korrekt angezeigt werden. Gmail und Yahoo haben z. B. Probleme, E-Mails anzuzeigen, die größer als 100 kB sind.

Arbeit mit Bildern

Beachten Sie beim Erstellen von E-Mails mit Bildern an Folgendes:

  • Benutzer können die Darstellung von Bildern in den Einstellungen der E-Mail-Programme deaktivieren.
  • Bilder verlängern mitunter die Ladezeiten.
  • Die Bildqualität variiert mitunter auf verschiedenen Bildschirmen.

Verwenden Sie die Bildformate PNG oder JPEG anstelle des SVG-Formats, da letzteres von den meisten E-Mail-Programmen nicht unterstützt wird.

Bilder für 4K-Monitore sollten doppelt so groß sein wie die empfohlene Größe. Bei einem 400px breiten Bild müssen Sie sich beispielsweise die 800px breite Version desselben Bilds besorgen und der E-Mail hinzufügen.

Copy
Full screen
Small screen
<img src="https://site.com/images/123.png" width="400" height="auto" style="width: 400px; height: auto" />

Jeder Link sollte das Schema und den Host enthalten. Zum Beispiel: https://site.ru/path. Verwenden Sie keine relativen Links (/path) und Links ohne Schema (://site.ru/path). Derartigen Links kann automatisch das Schema file zugewiesen werden, woraufhin der Browser versucht, die Datei herunterzuladen, anstatt sie zu öffnen.

Damit E-Mails nicht im Spam-Ordner landen, geben Sie für alle Links das Attribut title an. Dieses Attribut hilft Menschen mit Behinderung, die auf zusätzliche Software angewiesen sind, auf Webinhalte zuzugreifen.

Sie sollten immer die Schriftfarbe für Links angeben. Wenn Sie die Farbe nicht angeben, verwendet das E-Mail-Programm seine eigene Farbe.

E-Mail-Adressen und Telefonnummern sind als Links einzufügen. Die Stile der Programme können die korrekte Anzeige einer Telefonnummer beeinflussen.

Um einen Link aus einer E-Mail in einem neuen Tab oder Fenster zu öffnen, geben Sie das Attribut target="_blank" an.

Sonstige Empfehlungen

Weitere Empfehlungen für die Erstellung adaptiver E-Mails.

Wie komme ich dazu

Die E-Mail muss einen erklärenden Text und einen Link enthalten, damit Benutzer eine Aktion vornehmen können. Nutzen Sie folgende Platzhalter:

  • {{subject}} zum Platzieren des E-Mail-Headers.
  • {{text}} zum Platzieren des aufseiten von Xsolla genutzten E-Mail-Texts.
  • {{action_link}} zum Platzieren eines Links. Der Link selbst wird aufseiten von Xsolla generiert.
  • {{button}} zum Platzieren des Schaltflächentexts.

So erstellen Sie eine individuelle E-Mail:

  1. Wechseln Sie zum Kundenportal, und navigieren Sie zu Ihr Login-Projekt > Personalisierung > E-Mail-Benachrichtigungen.
  2. Befolgen Sie beim Hinzufügen eines HTML-Layouts für die E-Mail die Empfehlungen für das Erstellen von E-Mails.
  3. Lassen Sie sich die E-Mail als Vorschau in einem Browser anzeigen, und prüfen Sie den E-Mail-Code mit dem Markup Validation Tool.

Exemplarische E-Mail:

Copy
Full screen
Small screen
<!doctype html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
  <title>{{subject}}</title>
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
  <meta name="viewport" content="width=device-width,initial-scale=1">
</head>
<body style="background-color:#0a1e37;">
  <table align="center" border="0" cellpadding="0" cellspacing="0" class="" style="width:400px;" width="400">
    <tr>
      <td style="line-height:0px;font-size:0px;mso-line-height-rule:exactly;">
        <table align="center" border="0" cellpadding="0" cellspacing="0" role="presentation" style="width:100%;">
          <tbody>
            <tr>
              <td style="direction:ltr;font-size:0px;padding:60px 0 0;text-align:center;vertical-align:top;">
                <table align="center"
                       background="https://cdn.xsolla.net/xsolla-login-widget/images/mail/hero_background.jpg"
                       border="0" cellpadding="0" cellspacing="0" role="presentation"
                       style="background:url(https://cdn.xsolla.net/xsolla-login-widget/images/mail/hero_background.jpg) top center / auto repeat;width:100%;">
                  <tbody>
                    <tr>
                      <td style="direction:ltr;font-size:0px;padding:0;text-align:center;vertical-align:top;">
                        <table border="0" cellpadding="0" cellspacing="0" role="presentation" width="100%">
                          <tr>
                            <td align="center" style="font-size:0px;padding:10px 25px;word-break:break-word;">
                              <div style="font-family:Helvetica Neue, Helvetica, Arial, sans-serif;font-size:36px;line-height:42px;text-align:center;color:#fff;">
                                {{subject}}
                              </div>
                            </td>
                          </tr>
                        </table>
                      </td>
                    </tr>
                  </tbody>
                </table>
                <table align="center"
                       background="rgba(44,72,98,0.7)"
                       border="0" cellpadding="0" cellspacing="0" role="presentation"
                       style="background: rgba(44,72,98,0.7); width:100%;">    
                  <!-- Block with the email text -->            
                </table>
              </td>
            </tr>
          </tbody>
        </table>
      </td>
    </tr>
  </table>
</body>
</html>

Note
Wenn Sie E-Mails von einer eigenen E-Mail-Adresse aus versenden möchten, wenden Sie sich an Ihren Account Manager.
War dieser Artikel hilfreich?
Vielen Dank!
Gibt es etwas, das wir verbessern können? Nachricht
Das tut uns leid
Bitte erläutern Sie, weshalb dieser Artikel nicht hilfreich ist. Nachricht
Vielen Dank für Ihr Feedback!
Wir werden Ihr Feedback aufgreifen und dazu nutzen, Ihr Erlebnis verbessern.
Diese Seite bewerten
Diese Seite bewerten
Gibt es etwas, das wir verbessern können?

Jetzt nicht

Vielen Dank für Ihr Feedback!

Weitere Informationen

Letztmalig aktualisiert: 24. Dezember 2020

Haben Sie einen Tippfehler oder einen anderen Textfehler gefunden? Wählen Sie den Text aus und drücken Sie Strg+Eingabe.

Problem melden
Wir überprüfen unsere Inhalte ständig. Ihr Feedback hilft uns, sie zu verbessern.
Geben Sie eine E-Mail-Adresse an, damit wir Sie erreichen können
Vielen Dank für Ihr Feedback!