E-Mail Marketing & AutomatiounMobile an Tablet Marketing

16 Mobile frëndlech HTML Email Best Practices déi Inbox Placement an Engagement maximéieren

Am Joer 2023 ass et méiglech datt den Handy den Desktop als primären Apparat fir E-Mail opmaache wäert. Tatsächlech huet HubSpot dat fonnt 46 Prozent vun all E-Mail opgemaach elo op Handy. Wann Dir net E-Maile fir Handy designt, da loosst Dir vill Engagement a Suen um Dësch.

  1. E-Mail Authentifikatioun: Assuréieren Är E-Maile ginn authentifizéiert op d'Send Domain an IP Adress ass kritesch fir an d'Inbox ze kommen an net an e Junk oder Spam Dossier geréckelt. Et ass och essentiell, natierlech, datt Dir e Mëttel ubitt fir d'E-Mail ofzeschléissen mat enger Plattform déi en Ofmeldungslink enthält.
  2. Responsiven Design: d' HTML E-Mail soll sinn entworf fir reaktiounsfäeger ze sinn, dat heescht datt et sech un d'Bildschirmgréisst vum Apparat upassen kann, op deem se gekuckt gëtt. Dëst garantéiert datt d'E-Mail gutt op Desktop a mobilen Apparater ausgesäit.
  3. Kloer a präzis Thema Linn: Eng kloer a präzis Thema Linn ass wichteg fir mobil Benotzer well se nëmmen déi éischt puer Wierder vun der Thema Linn an hirer E-Mail Virschau gesinn. Et sollt kuerz sinn a präzis den Inhalt vun der E-Mail reflektéieren. Déi optimal Zeechelängt vun enger E-Mail Thema Linn kann ofhängeg vun enger Zuel vu Faktoren variéieren, sou wéi den E-Mail Inhalt, d'Publikum an den E-Mail Client deen benotzt gëtt. Wéi och ëmmer, déi meescht Experten empfeelen E-Mail-Themalinnen kuerz an zum Punkt ze halen, typesch tëscht 41-50 Zeechen oder 6-8 Wierder. Op mobilen Apparater kënnen d'Themalinne méi laang wéi 50 Zeechen ofgeschnidden ginn, an a verschiddene Fäll kënnen nëmmen déi éischt puer Wierder vun der Themazeil weisen. Dëst kann et schwéier maachen fir den Empfänger den Haaptmessage vun der E-Mail ze verstoen a kann d'Wahrscheinlechkeet reduzéieren datt d'E-Mail opgemaach gëtt.
  4. Preheader: En E-Mail Preheader ass e kuerze Resumé vum Inhalt vun enger E-Mail, déi nieft oder ënner der Thema Linn an der Inbox vun engem E-Mail Client erschéngt. Et ass e wichtegt Element dat den Open Taux vun Ären E-Mailen beaflosse kann wann se optiméiert sinn. Déi meescht Clienten integréieren HTML an CSS fir sécherzestellen datt de Preheader Text richteg ageriicht ass.
<!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. Eenkolonn Layout: E-Mailen, déi mat engem eenzege Kolonne Layout entworf sinn, si méi einfach op mobilen Apparater ze liesen. Den Inhalt soll an enger logescher Sequenz organiséiert ginn an an engem einfachen, einfach ze liesen Format presentéiert ginn. Wann Dir verschidde Kolonnen hutt, benotzt CSS kann d'Säulen graziéis an engem eenzege Kolonne Layout organiséieren.

Hei ass en HTML E-Mail Layout dat ass 2 Kolonnen um Desktop a fällt op eng eenzeg Kolonn op mobilen Schiirme:

<!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>

Hei ass en HTML E-Mail Layout dat ass 3 Kolonnen um Desktop a fällt op eng eenzeg Kolonn op mobilen Schiirme:

<!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. Liicht an donkel Modus: Déi meescht E-Mail Clienten ënnerstëtzen hell an donkel Modus CSS prefers-color-scheme fir de Benotzer seng Virléiften z'empfänken. Gitt sécher Bildtypen ze benotzen wou Dir en transparenten Hannergrond hutt. Hei ass e Code Beispill.
<!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. Grouss, liesbar Schrëften: D'Schrëftgréisst an de Stil solle gewielt ginn fir den Text einfach op engem klengen Ecran ze liesen. Benotzt op d'mannst eng 14pt Schrëftgréisst a vermeit Schrëften ze benotzen déi schwéier op klenge Schiirme liesen. Allgemeng benotzt Schrëften hunn eng héich Wahrscheinlechkeet fir konsequent iwwer verschidden E-Mail Clienten ze maachen, sou datt d'Benotzung vun Arial, Helvetica, Times New Roman, Georgia, Verdana, Tahoma, an Trebuchet MS typesch sécher Schrëften sinn. Wann Dir eng personaliséiert Schrëft benotzt, gitt sécher datt Dir eng Fallback Schrëft an Ärem CSS identifizéiert hutt:
<!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. Optimal Notzung vu Biller: Biller kënnen d'Laaschtzäite verlangsamen a kënnen net op all mobilen Apparater richteg ugewise ginn. Benotzen Biller spuersam, a sécherstellen, datt si Gréisst an kompriméiert fir mobil kucken. Gitt sécher den Alt-Text fir Är Biller auszefëllen am Fall wou den E-Mail Client se blockéiert. All Biller solle gespäichert a vun enger sécherer Websäit bezeechent ginn (SSL). Hei ass e Beispill Code vu reaktiounsfäeger Biller an enger 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. Kloer Call-to-action (cta): Eng kloer a prominent CTA ass wichteg an all E-Mail, awer et ass besonnesch wichteg an enger mobilfrëndlecher E-Mail. Vergewëssert Iech datt den CTA einfach ze fannen ass an datt et grouss genuch ass fir op engem mobilen Apparat ze klickt. Wann Dir Knäppercher integréiert hutt, kënnt Dir suergen datt Dir se och an CSS mat Inline Style Tags geschriwwen hutt:
<!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. Kuerz a präzis Inhalt: Halt den Inhalt vun der E-Mail kuerz an zum Punkt. D'Zeechenlimit fir eng HTML E-Mail ka variéieren jee no dem E-Mail Client deen benotzt gëtt. Wéi och ëmmer, déi meescht E-Mail Clienten setzen eng maximal Gréisst Limit fir E-Mailen op, typesch tëscht 1024-2048 kilobytes (KB), déi souwuel den HTML Code an all Biller oder Uschlëss enthält. Benotzt Ënnertitelen, Kugelpunkten an aner Formatéierungstechniken fir den Inhalt liicht scannbar ze maachen beim Scrollen a Liesen op engem klengen Ecran.
  2. Interaktiv Elementer: ausschliisslech interaktiv Elementer déi d'Opmierksamkeet vun Ärem Abonnent erfaassen wäerten Engagement, Verständnis a Konversiounsraten vun Ärer E-Mail eropgoen. Animéiert GIFs, Countdown Timer, Videoen an aner Elementer ginn vun der Majoritéit vun de Smartphone E-Mail Clienten ënnerstëtzt.
  3. Personaliséierung: Personaliséierung vun der Begréissung an Inhalt fir e spezifesche Abonnent kann d'Engagement wesentlech féieren, gitt sécher datt Dir et richteg kritt! zB. Fallbacks ze hunn wann et keng Donnéeën an engem Virnummfeld ass wichteg.
  4. Dynamic Inhalt: Segmentatioun an Personnalisatioun vum Inhalt kann Är Abonnentraten reduzéieren an Är Abonnenten engagéieren.
  5. Campagne Integratioun: Déi meescht modern E-Mail-Déngschtleeschter hunn d'Fäegkeet automatesch ze addéieren UTM Kampagne Querystrings fir all Link sou datt Dir E-Mail als Kanal an der Analyse kuckt.
  6. Preferenz Center: E-Mail Marketing ass ze wichteg fir just eng Opt-in oder Opt-Out Approche fir E-Mailen. E Präferenzzentrum z'integréieren wou Är Abonnente kënnen änneren wéi dacks se E-Maile kréien a wéi en Inhalt fir si wichteg ass ass e fantastesche Wee fir e staarken E-Mailprogramm mat engagéierten Abonnenten ze halen!
  7. Test, Test, Test: Vergewëssert Iech Är E-Mail op verschiddenen Apparater ze testen oder eng Applikatioun ze benotzen Virschau Är E-Mailen iwwer E-Mail Clienten fir sécherzestellen, datt et gutt ausgesäit a funktionéiert op verschiddene Bildschirmgréissten a Betribssystemer IERT Dir schéckt. Litmus Rapporten datt déi Top 3 beléifste mobil oppen Ëmfeld weider déiselwecht sinn: Apple iPhone (iOS Mail), Google Android, Apple iPad (iPadOS Mail). Integréiert och Testvariatioune vun Ären Themalinnen an Inhalt fir Är oppen a Klickraten ze verbesseren. Vill E-Mail Plattformen integréieren elo automatiséiert Tester déi d'Lëscht probéieren, eng Gewënnvariatioun identifizéieren an déi bescht E-Mail un déi verbleiwen Abonnente schécken.

Wann Är Firma kämpft mam Design, Testen an Ëmsetzung vun mobilen reaktiounsfäeger E-Mailen déi Engagement féieren, zéckt net fir meng Firma ze kontaktéieren. DK New Media huet Erfahrung an der Ëmsetzung vu praktesch all E-Mail Service Provider (wier).

Douglas Karr

Douglas Karr ass CMO vun OpenINSIGHTS an de Grënner vun der Martech Zone. Den Douglas huet Dosende vun erfollegräiche MarTech Startups gehollef, huet an der Due Diligence vun iwwer $ 5 Bill bei Martech Acquisitioune an Investitiounen gehollef, a weider fir Firmen ze hëllefen fir hir Verkafs- a Marketingstrategien ëmzesetzen an ze automatiséieren. Den Douglas ass en international unerkannten digitale Transformatioun a MarTech Expert a Spriecher. Den Douglas ass och e publizéierten Auteur vun engem Dummie's Guide an e Business Leadership Buch.

Verbonnen Artikelen

Zréck erop zum Knäppchen
Zoumaachen

Adblock entdeckt

Martech Zone ass fäeg Iech dësen Inhalt ouni Käschten ze liwweren, well mir eise Site monetiséieren duerch Ad-Recetten, Partnerlinks a Sponsoren. Mir géifen appreciéieren wann Dir Är Annonce Blocker ewechzehuelen géif wéi Dir eise Site Vue.