E-Mail-Marketing & AutomatisierungMobile und Tablet Marketing

16 Best Practices für mobilfreundliche HTML-E-Mails, die die Platzierung und das Engagement im Posteingang maximieren

Im Jahr 2023 ist es wahrscheinlich, dass Mobilgeräte Desktops als primäres Gerät zum Öffnen von E-Mails überholen werden. Tatsächlich hat HubSpot das herausgefunden 46 Prozent aller E-Mail-Öffnungen erfolgen jetzt auf Mobilgeräten. Wenn Sie keine E-Mails für Mobilgeräte entwerfen, lassen Sie viel Engagement und Geld auf dem Tisch.

  1. E-Mail-Authentifikation: Sicherstellung Ihrer E-Mails werden authentifiziert an die sendende Domain und IP -Adresse ist wichtig, um in den Posteingang zu gelangen, und wird nicht in einen Junk- oder Spam-Ordner geleitet. Es ist natürlich auch wichtig, dass Sie über eine Plattform, die einen Abmeldelink enthält, die Möglichkeit bieten, sich von der E-Mail abzumelden.
  2. Sich anpassendes Design: Das HTML E-Mail sollte sein darauf ausgelegt, reaktionsfähig zu sein, was bedeutet, dass es sich an die Bildschirmgröße des Geräts anpassen kann, auf dem es angezeigt wird. Dadurch wird sichergestellt, dass die E-Mail sowohl auf Desktop- als auch auf Mobilgeräten gut aussieht.
  3. Klare und prägnante Betreffzeile: Eine klare und prägnante Betreffzeile ist für mobile Benutzer wichtig, da sie möglicherweise nur die ersten paar Wörter der Betreffzeile in ihrem E-Mail-Vorschaufenster sehen. Sie sollte kurz sein und den Inhalt der E-Mail genau wiedergeben. Die optimale Zeichenlänge einer E-Mail-Betreffzeile kann von einer Reihe von Faktoren abhängen, wie z. B. dem E-Mail-Inhalt, der Zielgruppe und dem verwendeten E-Mail-Client. Die meisten Experten empfehlen jedoch, die Betreffzeilen von E-Mails kurz und prägnant zu halten, typischerweise zwischen 41 und 50 Zeichen oder 6 bis 8 Wörtern. Auf mobilen Geräten werden Betreffzeilen, die länger als 50 Zeichen sind, möglicherweise abgeschnitten und in einigen Fällen werden möglicherweise nur die ersten paar Wörter der Betreffzeile angezeigt. Dies kann es dem Empfänger erschweren, die Hauptbotschaft der E-Mail zu verstehen, und die Wahrscheinlichkeit verringern, dass die E-Mail geöffnet wird.
  4. Vorkopf: Ein E-Mail-Preheader ist eine kurze Zusammenfassung des Inhalts einer E-Mail, die neben oder unter der Betreffzeile im Posteingang eines E-Mail-Clients angezeigt wird. Es ist ein wichtiges Element, das sich bei der Optimierung auf die Öffnungsrate Ihrer E-Mails auswirken kann. Die meisten Clients integrieren HTML und CSS, um sicherzustellen, dass der Preheader-Text richtig eingerichtet ist.
<!DOCTYPE html>
<html>
  <head>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <style>
      /* CSS for desktop styles */
      @media only screen and (min-width: 600px) {
        /* desktop styles here */
      }
      /* CSS for mobile styles */
      @media only screen and (max-width: 599px) {
        /* mobile styles here */
      }
    </style>
  </head>
  <body>
    <!-- Intro text for preview -->
    <div style="display:none; max-height:0px; overflow:hidden;">
      This is the intro text that will appear in the email preview, but won't be visible in the email itself.
    </div>
    
    <!-- Main email content -->
    <div style="max-width:600px; margin:0 auto;">
      <!-- Content goes here -->
    </div>
  </body>
</html>
  1. Einspaltiges Layout: E-Mails, die einspaltig gestaltet sind, sind auf Mobilgeräten besser lesbar. Der Inhalt sollte in einer logischen Abfolge organisiert und in einem einfachen, leicht lesbaren Format präsentiert werden. Wenn Sie mehrere Spalten haben, können Sie die Spalten mithilfe von CSS elegant in einem einspaltigen Layout organisieren.

Hier ist ein HTML-E-Mail-Layout das sind 2 Spalten auf dem Desktop und werden auf mobilen Bildschirmen zu einer einzigen Spalte reduziert:

<!DOCTYPE html>
<html>
  <head>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <style>
      /* CSS for desktop styles */
      @media only screen and (min-width: 600px) {
        .container {
          display: flex;
          flex-wrap: wrap;
        }
        .col {
          flex: 1;
          padding: 10px;
        }
        .col.left {
          order: 1;
        }
        .col.right {
          order: 2;
        }
      }
      /* CSS for mobile styles */
      @media only screen and (max-width: 599px) {
        .container {
          display: block;
        }
        .col {
          width: 100%;
          padding: 10px;
        }
      }
    </style>
  </head>
  <body>
    <div class="container">
      <div class="col left">
        <!-- Content for left column -->
      </div>
      <div class="col right">
        <!-- Content for right column -->
      </div>
    </div>
  </body>
</html>

Hier ist ein HTML-E-Mail-Layout das sind 3 Spalten auf dem Desktop und werden auf mobilen Bildschirmen zu einer einzigen Spalte reduziert:

<!DOCTYPE html>
<html>
  <head>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <style>
      /* CSS for desktop styles */
      @media only screen and (min-width: 600px) {
        .container {
          display: flex;
          flex-wrap: wrap;
        }
        .col {
          flex: 1;
          padding: 10px;
        }
        .col.left {
          order: 1;
        }
        .col.middle {
          order: 2;
        }
        .col.right {
          order: 3;
        }
      }
      /* CSS for mobile styles */
      @media only screen and (max-width: 599px) {
        .container {
          display: block;
        }
        .col {
          width: 100%;
          padding: 10px;
        }
      }
    </style>
  </head>
  <body>
    <div class="container">
      <div class="col left">
        <!-- Content for left column -->
      </div>
      <div class="col middle">
        <!-- Content for middle column -->
      </div>
      <div class="col right">
        <!-- Content for right column -->
      </div>
    </div>
  </body>
</html>
  1. Heller und dunkler Modus: brauchen E-Mail-Clients unterstützen den Hell- und Dunkelmodus CSS prefers-color-scheme um den Vorlieben des Benutzers gerecht zu werden. Stellen Sie sicher, dass Sie Bildtypen verwenden, bei denen Sie einen transparenten Hintergrund haben. Hier ist ein Codebeispiel.
<!DOCTYPE html>
<html>
  <head>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <style>
      /* Light mode styles */
      body {
        background-color: #ffffff;
        color: #333333;
      }
      .container {
        background-color: #f9f9f9;
      }
      .text {
        border: 1px solid #cccccc;
      }
      /* Dark mode styles */
      @media (prefers-color-scheme: dark) {
        body {
          background-color: #333333;
          color: #f9f9f9;
        }
        .container {
          background-color: #333333;
        }
        .text {
          border: 1px solid #f9f9f9;
        }
      }
      /* Common styles for both modes */
      .container {
        display: flex;
        flex-wrap: wrap;
        padding: 10px;
      }
      .col {
        flex: 1;
        margin: 10px;
      }
      img {
        max-width: 100%;
        height: auto;
      }
      h2 {
        font-size: 24px;
        margin-bottom: 10px;
      }
      p {
        font-size: 16px;
        line-height: 1.5;
        margin: 0;
      }
    </style>
  </head>
  <body>
    <div class="container">
      <div class="col">
        <img src="image1.jpg" alt="Image 1">
        <div class="text">
          <h2>Heading 1</h2>
          <p>Text for column 1 goes here.</p>
        </div>
      </div>
      <div class="col">
        <img src="image2.jpg" alt="Image 2">
        <div class="text">
          <h2>Heading 2</h2>
          <p>Text for column 2 goes here.</p>
        </div>
      </div>
      <div class="col">
        <img src="image3.jpg" alt="Image 3">
        <div class="text">
          <h2>Heading 3</h2>
          <p>Text for column 3 goes here.</p>
        </div>
      </div>
    </div>
  </body>
</html>
  1. Große, gut lesbare Schrift: Schriftgröße und -stil sollten so gewählt werden, dass der Text auf einem kleinen Bildschirm gut lesbar ist. Verwenden Sie mindestens eine Schriftgröße von 14pt und vermeiden Sie die Verwendung von Schriftarten, die auf kleinen Bildschirmen schwer lesbar sind. Häufig verwendete Schriftarten werden mit hoher Wahrscheinlichkeit in verschiedenen E-Mail-Clients konsistent wiedergegeben, daher sind die Verwendung von Arial, Helvetica, Times New Roman, Georgia, Verdana, Tahoma und Trebuchet MS in der Regel sichere Schriftarten. Wenn Sie eine benutzerdefinierte Schriftart verwenden, stellen Sie sicher, dass in Ihrem CSS eine Fallback-Schriftart identifiziert ist:
<!DOCTYPE html>
<html>
  <head>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <style>
      /* Custom font */
      @font-face {
        font-family: 'My Custom Font';
        src: url('my-custom-font.woff2') format('woff2'),
             url('my-custom-font.woff') format('woff');
        font-weight: normal;
        font-style: normal;
      }
      /* Fallback font */
      body {
        font-family: 'My Custom Font', Arial, sans-serif;
      }
      /* Other styles */
      h1 {
        font-size: 24px;
        font-weight: bold;
        margin-bottom: 10px;
      }
      p {
        font-size: 16px;
        line-height: 1.5;
        margin: 0;
      }
    </style>
  </head>
  <body>
    <h1>My Custom Font Example</h1>
    <p>This text uses the custom font 'My Custom Font'. If the font is not supported, the fallback font 'Arial' will be used instead.</p>
  </body>
</html>
  1. Optimale Verwendung von Bildern: Bilder können die Ladezeiten verlangsamen und werden möglicherweise nicht auf allen Mobilgeräten richtig angezeigt. Verwenden Sie Bilder sparsam und stellen Sie sicher, dass sie die richtige Größe haben Druckluft zum mobilen anschauen. Achten Sie darauf, den Alt-Text für Ihre Bilder einzugeben, falls der E-Mail-Client sie blockiert. Alle Bilder sollten auf einer sicheren Website (SSL). Hier ist ein Beispielcode für responsive Bilder in einer HTML-E-Mail.
<!DOCTYPE html>
<html>
  <head>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <style>
      /* CSS for desktop styles */
      @media only screen and (min-width: 600px) {
        .container {
          display: flex;
          flex-wrap: wrap;
        }
        .col {
          flex: 1;
          padding: 10px;
        }
        .col.left {
          order: 1;
        }
        .col.middle {
          order: 2;
        }
        .col.right {
          order: 3;
        }
        .single-pane {
          width: 100%;
        }
        img {
          max-width: 100%;
          height: auto;
        }
      }
      /* CSS for mobile styles */
      @media only screen and (max-width: 599px) {
        .container {
          display: block;
        }
        .col {
          width: 100%;
          padding: 10px;
        }
      }
    </style>
  </head>
  <body>
    <!-- 3-column section with images -->
    <div class="container">
      <div class="col left">
        <img src="image1.jpg" alt="Image 1">
        <!-- Content for left column -->
      </div>
      <div class="col middle">
        <img src="image2.jpg" alt="Image 2">
        <!-- Content for middle column -->
      </div>
      <div class="col right">
        <img src="image3.jpg" alt="Image 3">
        <!-- Content for right column -->
      </div>
    </div>
  </body>
</html>
  1. Klare Handlungsaufforderung (CTA): Ein klarer und auffälliger CTA ist in jeder E-Mail wichtig, aber besonders wichtig in einer für Mobilgeräte optimierten E-Mail. Stellen Sie sicher, dass der CTA leicht zu finden und groß genug ist, um auf einem mobilen Gerät angeklickt zu werden. Wenn Sie Schaltflächen einbauen, können Sie sicherstellen, dass Sie diese ebenfalls in CSS mit Inline-Style-Tags geschrieben haben:
<!DOCTYPE html>
<html>
  <head>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <style>
      /* Desktop styles */
      .button {
        display: inline-block;
        background-color: #4CAF50;
        color: #ffffff;
        padding: 10px 20px;
        text-align: center;
        text-decoration: none;
        border-radius: 5px;
        font-size: 16px;
        font-weight: bold;
        margin-bottom: 20px;
      }
      /* Mobile styles */
      @media only screen and (max-width: 600px) {
        .button {
          display: block;
          width: 100%;
        }
      }
    </style>
  </head>
  <body>
    <h1>Sample Responsive Email</h1>
    <p>This is an example of a responsive email with a button.</p>
    <a href="#" class="button" style="background-color: #4CAF50; color: #ffffff; text-decoration: none; padding: 10px 20px; border-radius: 5px; font-size: 16px; font-weight: bold;">Click Here</a>
  </body>
</html>
  1. Kurzer und prägnanter Inhalt: Halten Sie den Inhalt der E-Mail kurz und bündig. Die Zeichenbeschränkung für eine HTML-E-Mail kann je nach verwendetem E-Mail-Client variieren. Die meisten E-Mail-Clients legen jedoch eine maximale Größenbeschränkung für E-Mails fest, normalerweise zwischen 1024 und 2048 Kilobyte (KB), die sowohl den HTML-Code als auch alle Bilder oder Anhänge enthält. Verwenden Sie Unterüberschriften, Aufzählungszeichen und andere Formatierungstechniken, um den Inhalt beim Scrollen und Lesen auf einem kleinen Bildschirm leicht scanbar zu machen.
  2. Interaktive Elemente: Die Einbeziehung interaktive Elemente die die Aufmerksamkeit Ihres Abonnenten auf sich ziehen, steigern das Engagement, das Verständnis und die Konversionsraten Ihrer E-Mail. Animierte GIFs, Countdown-Timer, Videos und andere Elemente werden von den meisten Smartphone-E-Mail-Clients unterstützt.
  3. Personalisierung: Die Personalisierung der Anrede und des Inhalts für einen bestimmten Abonnenten kann das Engagement erheblich steigern, stellen Sie nur sicher, dass Sie es richtig machen! Z.B. Fallbacks zu haben, wenn es keine Daten in einem Vornamensfeld gibt, ist wichtig.
  4. Dynamischer Inhalt: Die Segmentierung und Anpassung des Inhalts kann Ihre Abmelderaten reduzieren und Ihre Abonnenten binden.
  5. Kampagnenintegration: Die meisten modernen E-Mail-Dienstanbieter können automatisch anhängen Abfragezeichenfolgen für UTM-Kampagnen für jeden Link, damit Sie E-Mails als Kanal in Analytics anzeigen können.
  6. Präferenzzentrum: E-Mail-Marketing ist zu wichtig für einen Opt-in- oder Opt-out-Ansatz für E-Mails. Die Integration eines Präferenzzentrums, in dem Ihre Abonnenten ändern können, wie oft sie E-Mails erhalten und welche Inhalte für sie wichtig sind, ist eine fantastische Möglichkeit, ein starkes E-Mail-Programm mit engagierten Abonnenten aufrechtzuerhalten!
  7. Testen, testen, testen: Stellen Sie sicher, dass Sie Ihre E-Mail auf mehreren Geräten testen oder eine Anwendung dafür verwenden Vorschau Ihrer E-Mails über E-Mail-Clients hinweg um sicherzustellen, dass es auf verschiedenen Bildschirmgrößen und Betriebssystemen gut aussieht und funktioniert, BEVOR Sie es senden. Lackmus berichtet, dass die Top 3 der beliebtesten mobilen offenen Umgebungen weiterhin dieselben sind: Apple iPhone (iOS Mail), Google Android, Apple iPad (iPadOS Mail). Integrieren Sie außerdem Testvariationen Ihrer Betreffzeilen und Inhalte, um Ihre Öffnungs- und Klickraten zu verbessern. Viele E-Mail-Plattformen beinhalten jetzt automatisierte Tests, die die Liste abtasten, eine erfolgreiche Variante identifizieren und die beste E-Mail an die verbleibenden Abonnenten senden.

Wenn Ihr Unternehmen Probleme mit dem Entwerfen, Testen und Implementieren von E-Mails hat, die das Engagement fördern, zögern Sie nicht, sich an meine Firma zu wenden. DK New Media hat Erfahrung in der Implementierung praktisch aller E-Mail-Dienstleister (ESP).

Douglas Karr

Douglas Karr ist CMO von Öffnen Sie EINBLICKE und Gründer der Martech Zone. Douglas hat Dutzenden erfolgreicher MarTech-Startups geholfen, war bei der Due Diligence von MarTech-Akquisitionen und -Investitionen im Wert von über 5 Milliarden US-Dollar behilflich und unterstützt weiterhin Unternehmen bei der Umsetzung und Automatisierung ihrer Vertriebs- und Marketingstrategien. Douglas ist ein international anerkannter Experte und Redner für digitale Transformation und MarTech. Douglas ist außerdem Autor eines Dummie-Ratgebers und eines Buchs über Unternehmensführung.

Ähnliche Artikel

Nach oben-Taste
Menu

Adblock erkannt

Martech Zone ist in der Lage, Ihnen diese Inhalte kostenlos zur Verfügung zu stellen, da wir unsere Website durch Werbeeinnahmen, Affiliate-Links und Sponsoring monetarisieren. Wir würden uns freuen, wenn Sie Ihren Werbeblocker entfernen würden, während Sie unsere Website besuchen.