E-postmarketing en automatisearringMobyl- en tabletmarketing

16 Best Practices foar mobylfreonlike HTML-e-post dy't pleatsing en belutsenens fan Postfak maksimalisearje

Yn 2023 is it wierskynlik dat mobyl it buroblêd sil oertreffe as it primêre apparaat foar it iepenjen fan e-post. Yn feite, HubSpot fûn dat 46 prosint fan alle e-post iepent no op mobyl. As jo ​​gjin e-mails foar mobyl ûntwerpe, litte jo in protte belutsenens en jild op 'e tafel.

  1. E-postferifikaasje: Fersekerje jo e-mails wurde ferifiearre nei it stjoerende domein en IP adres is kritysk om nei it postfak te kommen en net trochstjoerd nei in junk- of spam-map. It is fansels ek essensjeel dat jo in middel leverje om jo e-post ôf te melden mei in platfoarm dat in unsubscribe-keppeling omfettet.
  2. Responsive ûntwerp: De HTML e-post moat wêze ûntworpen om responsyf te wêzen, wat betsjut dat it oanpasse kin oan 'e skermgrutte fan it apparaat wêrop it wurdt besjoen. Dit soarget derfoar dat de e-post der goed útsjocht op sawol buroblêd as mobile apparaten.
  3. Dúdlike en bondige ûnderwerpline: In dúdlike en bondige ûnderwerpline is wichtich foar mobile brûkers, om't se miskien allinich de earste pear wurden fan 'e ûnderwerprigel sjogge yn har e-postfoarbyldpaniel. It moat koart wêze en de ynhâld fan 'e e-post krekt reflektearje. De optimale karakterlingte fan in e-postûnderwerpline kin ferskille ôfhinklik fan in oantal faktoaren, lykas de e-postynhâld, it publyk en de e-postkliïnt dy't brûkt wurdt. De measte saakkundigen riede lykwols oan om e-postûnderwerp rigels koart en op it punt te hâlden, typysk tusken 41-50 tekens of 6-8 wurden. Op mobile apparaten kinne ûnderwerp rigels dy't langer binne as 50 tekens wurde ôfsnien, en yn guon gefallen, meie allinnich werjaan de earste pear wurden fan de ûnderwerp rigel. Dit kin it dreech meitsje foar de ûntfanger om it haadberjocht fan 'e e-post te begripen en kin de kâns ferminderje dat de e-post wurdt iepene.
  4. Preheader: In preheader foar e-post is in koarte gearfetting fan de ynhâld fan in e-post dy't neist of ûnder de ûnderwerprigel ferskynt yn it ynfak fan in e-postclient. It is in wichtich elemint dat kin beynfloedzje de iepen taryf fan jo e-mails as optimalisearre. De measte kliïnten befetsje HTML en CSS om te soargjen dat de preheader-tekst goed ynsteld is.
<!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. Single-kolom yndieling: E-posten dy't binne ûntworpen mei in yndieling mei ien kolom binne makliker te lêzen op mobile apparaten. De ynhâld moat wurde organisearre yn in logyske folchoarder en presintearre yn in ienfâldich, maklik te lêzen opmaak. As jo ​​​​meardere kolommen hawwe, kin it brûken fan CSS de kolommen sierlik organisearje yn in yndieling mei ien kolom.

Hjir is in HTML e-post yndieling dat is 2 kolommen op buroblêd en falt yn ien kolom op mobile skermen:

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

Hjir is in HTML e-post yndieling dat is 3 kolommen op buroblêd en falt yn ien kolom op mobile skermen:

<!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. Ljocht en tsjuster modus: Measte e-postkliïnten stypje ljochte en tsjustere modus CSS prefers-color-scheme om te foldwaan oan de foarkar fan de brûker. Wês wis dat jo ôfbyldingstypen brûke wêr't jo in transparante eftergrûn hawwe. Hjir is in koade foarbyld.
<!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. Grutte, lêsbere lettertypen: De lettertypegrutte en -styl moatte keazen wurde om de tekst maklik te lêzen op in lyts skerm. Brûk op syn minst in 14pt lettertypegrutte en foarkom it brûken fan lettertypen dy't lestich binne te lêzen op lytse skermen. Faak brûkte lettertypen hawwe in hege kâns om konsekwint te werjaan oer ferskate e-postkliïnten, dus it brûken fan Arial, Helvetica, Times New Roman, Georgia, Verdana, Tahoma en Trebuchet MS binne typysk feilige lettertypen. As jo ​​​​in oanpast lettertype brûke, wês dan wis dat jo in fallback-lettertype hawwe identifisearre yn jo CSS:
<!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. Optimaal gebrûk fan ôfbyldings: Ofbyldings kinne laadtiden fertrage en miskien net goed werjaan op alle mobile apparaten. Brûk ôfbyldings sparing, en soargje derfoar dat se grutte en komprimeard foar mobyl besjen. Wês wis dat jo de alt-tekst foar jo ôfbyldings ynfolje yn it gefal dat de e-postclient se blokkeart. Alle ôfbyldings moatte wurde opslein en ferwiisd fan in feilige webside (SSL). Hjir is in foarbyldkoade fan responsive ôfbyldings yn in HTML-e-post.
<!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. Oprop-to-aksje wiskje (CTA): In dúdlike en promininte CTA is wichtich yn elke e-post, mar it is benammen wichtich yn in mobylfreonlike e-post. Soargje derfoar dat de CTA maklik te finen is en dat it grut genôch is om op in mobyl apparaat te klikken. As jo ​​​​knoppen opnimme, kinne jo derfoar soargje dat jo se ek hawwe skreaun yn CSS mei ynline styltags:
<!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. Koarte en bondige ynhâld: Hâld de ynhâld fan 'e e-post koart en nei it punt. De karakterlimyt foar in HTML-e-post kin ferskille ôfhinklik fan it e-postprogramma dat brûkt wurdt. De measte e-postkliïnten stelle lykwols in limyt foar maksimale grutte foar e-post, typysk tusken 1024-2048 kilobytes (KB), dy't sawol de HTML-koade as alle ôfbyldings of taheaksels omfettet. Brûk subkoppen, kûgelpunten en oare opmaaktechniken om de ynhâld maklik scanber te meitsjen by it rôljen en lêzen op in lyts skerm.
  2. Ynteraktive eleminten: Foarbehâld ynteraktive eleminten dy't de oandacht fan jo abonnee fange, sille belutsenens, begryp en konverzjesifers fan jo e-post ophelje. Animearre GIF's, countdown timers, fideo's en oare eleminten wurde stipe troch de mearderheid fan smartphone-e-postkliïnten.
  3. Personalisaasje: It personalisearjen fan de groetnis en ynhâld foar in spesifike abonnee kin belutsenens signifikant driuwe, wês gewoan wis dat jo it goed krije! Bv. It hawwen fan fallbacks as der gjin gegevens yn in foarnamme fjild is wichtich.
  4. Dynamyske ynhâld: Segmentaasje en oanpassing fan 'e ynhâld kinne jo ôfskriuwtariven ferminderje en jo abonnees dwaande hâlde.
  5. Kampanje-yntegraasje: De measte moderne providers fan e-posttsjinsten hawwe de mooglikheid om automatysk taheakke UTM kampanje querystrings foar elke keppeling, sadat jo e-post as kanaal yn analytyk kinne besjen.
  6. Foarkarsintrum: E-postmarketing is te wichtich foar gewoan in opt-in of opt-out oanpak foar e-mails. It opnimmen fan in foarkarssintrum wêr't jo abonnees kinne feroarje hoe faak se e-mails ûntfange en hokker ynhâld wichtich is foar har is in fantastyske manier om in sterk e-postprogramma te hâlden mei ferloofde abonnees!
  7. Test, Test, Test: Soargje derfoar dat jo jo e-post op meardere apparaten testje of in applikaasje brûke om Foarbyld fan jo e-mails oer e-postkliïnten om te soargjen dat it der goed útsjocht en goed funksjonearret op ferskate skermgrutte en bestjoeringssystemen FOAR jo ferstjoere. Litmus meldt dat de top 3 meast populêre mobile iepen omjouwings itselde bliuwe: Apple iPhone (iOS Mail), Google Android, Apple iPad (iPadOS Mail). Meitsje ek testfariaasjes fan jo ûnderwerprigels en ynhâld op om jo iepen- en trochkliksifers te ferbetterjen. In protte e-postplatfoarms omfetsje no automatisearre testen dy't de list sille probearje, in winnende fariaasje identifisearje en de bêste e-post stjoere nei de oerbleaune abonnees.

As jo ​​​​bedriuw wrakselet mei it ûntwerpen, testen en ymplementearjen fan mobyl responsive e-mails dy't belutsenens driuwe, aarzel dan net om kontakt op te nimmen mei myn firma. DK New Media hat ûnderfining yn 'e ymplemintaasje fan praktysk elke provider fan e-posttsjinsten (ESP).

Douglas Karr

Douglas Karr is CMO fan OpenINSIGHTS en de oprjochter fan de Martech Zone. Douglas hat holpen tsientallen suksesfolle MarTech startups, hat holpen yn 'e due diligence fan mear as $ 5 miljard yn Martech oanwinsten en ynvestearrings, en bliuwt te helpen bedriuwen by it útfieren en automatisearjen fan harren ferkeap en marketing strategyen. Douglas is in ynternasjonaal erkend digitale transformaasje en MarTech-ekspert en sprekker. Douglas is ek in publisearre skriuwer fan in Dummie's gids en in boek foar bedriuwsliederskip.

Related Articles

Werom nei topknop
Slute

Adblock ûntdutsen

Martech Zone is yn steat om jo dizze ynhâld sûnder kosten te leverjen, om't wy ús side monetearje fia advertinsje-ynkomsten, affiliate keppelings en sponsoring. Wy soene it wurdearje as jo jo advertinsjeblokkerer fuortsmite as jo ús side besjen.