E-posbemarking en outomatiseringMobiele en tabletbemarking

16 Mobiele vriendelike HTML-e-pos-beste praktyke wat inkassieplasing en -betrokkenheid maksimeer

In 2023 is dit waarskynlik dat selfoon die rekenaar sal oortref as die primêre toestel om e-pos oop te maak. Trouens, HubSpot het dit gevind 46 persent van alle e-pos wat oopgemaak word, vind nou op selfoon plaas. As jy nie e-posse vir selfoon ontwerp nie, laat jy baie betrokkenheid en geld op die tafel.

  1. E-posverifikasie: Verseker jou e-posse word geverifieer na die stuurdomein en IP adres is van kritieke belang om by die inkassie te kom en nie na 'n gemors- of strooiposlêer toe gestuur nie. Dit is natuurlik ook noodsaaklik dat u 'n manier verskaf om die e-pos te onttrek deur 'n platform wat 'n uittekenskakel insluit.
  2. Reaktiewe ontwerp: Die HTML e-pos moet wees ontwerp om responsief te wees, wat beteken dat dit kan aanpas by die skermgrootte van die toestel waarop dit bekyk word. Dit verseker dat die e-pos goed lyk op beide rekenaar- en mobiele toestelle.
  3. Duidelike en bondige onderwerpreël: ’n Duidelike en bondige onderwerpreël is belangrik vir mobiele gebruikers omdat hulle dalk net die eerste paar woorde van die onderwerpreël in hul e-posvoorskouvenster sien. Dit moet kort wees en die inhoud van die e-pos akkuraat weerspieël. Die optimale karakterlengte van 'n e-posonderwerplyn kan wissel na gelang van 'n aantal faktore, soos die e-posinhoud, die gehoor en die e-poskliënt wat gebruik word. Die meeste kenners beveel egter aan om e-posonderwerplyne kort en op die punt te hou, gewoonlik tussen 41-50 karakters of 6-8 woorde. Op mobiele toestelle kan onderwerpreëls wat langer as 50 karakters is, afgesny word, en in sommige gevalle sal dit dalk net die eerste paar woorde van die onderwerpreël vertoon. Dit kan dit vir die ontvanger moeilik maak om die hoofboodskap van die e-pos te verstaan ​​en kan die waarskynlikheid verminder dat die e-pos oopgemaak word.
  4. Vooropskrif: 'n E-pos-voorkopskrif is 'n kort opsomming van die inhoud van 'n e-pos wat langs of onder die onderwerplyn in 'n e-poskliënt se inkassie verskyn. Dit is 'n belangrike element wat die oop koers van jou e-posse kan beïnvloed wanneer dit geoptimaliseer word. Die meeste kliënte inkorporeer HTML en CSS om te verseker dat die voorkopteks behoorlik opgestel 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. Enkelkolom-uitleg: E-posse wat met 'n enkelkolom-uitleg ontwerp is, is makliker om op mobiele toestelle te lees. Die inhoud moet in 'n logiese volgorde georganiseer word en in 'n eenvoudige, maklik leesbare formaat aangebied word. As jy veelvuldige kolomme het, kan die gebruik van CSS die kolomme grasieus organiseer in 'n enkelkolom-uitleg.

Hier is 'n HTML e-pos uitleg dit is 2 kolomme op 'n rekenaar en vou in 'n enkele kolom op mobiele skerms in:

<!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 is 'n HTML e-pos uitleg dit is 3 kolomme op 'n rekenaar en vou in 'n enkele kolom op mobiele skerms in:

<!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. Lig en donker modus: brug e-poskliënte ondersteun lig en donker modus CSS prefers-color-scheme om die gebruiker se voorkeure te akkommodeer. Maak seker dat jy beeldtipes gebruik waar jy 'n deursigtige agtergrond het. Hier is 'n kode voorbeeld.
<!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. Groot, leesbare lettertipes: Die lettergrootte en -styl moet gekies word om die teks maklik op 'n klein skerm te lees. Gebruik ten minste 'n 14pt lettergrootte en vermy die gebruik van lettertipes wat moeilik is om op klein skerms te lees. Algemeen gebruikte lettertipes het 'n hoë waarskynlikheid om konsekwent oor verskillende e-poskliënte te vertoon, so die gebruik van Arial, Helvetica, Times New Roman, Georgia, Verdana, Tahoma en Trebuchet MS is tipies veilige lettertipes. As jy wel 'n pasgemaakte font gebruik, maak seker dat 'n terugvalfont in jou CSS geïdentifiseer word:
<!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 gebruik van beelde: Prente kan laaitye vertraag en sal dalk nie behoorlik op alle mobiele toestelle vertoon nie. Gebruik beelde spaarsamig, en maak seker dat hulle grootte en saamgeperste vir mobiele besigtiging. Maak seker dat u die alt-teks vir u beelde invul as die e-poskliënt dit blokkeer. Alle beelde moet gestoor word en na verwys word vanaf 'n veilige webwerf (SSL). Hier is 'n voorbeeldkode van responsiewe beelde in 'n HTML-e-pos.
<!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. Duidelike oproep tot aksie (GTA): 'n Duidelike en prominente GTA is belangrik in enige e-pos, maar dit is veral belangrik in 'n selfoonvriendelike e-pos. Maak seker dat die GTA maklik is om te vind en dat dit groot genoeg is om op 'n mobiele toestel geklik te word. As jy knoppies inkorporeer, kan jy verseker dat jy dit ook in CSS met inlyn-styletikette laat skryf:
<!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. Kort en bondige inhoud: Hou die inhoud van die e-pos kort en op die punt. Die karakterlimiet vir 'n HTML-e-pos kan wissel na gelang van die e-poskliënt wat gebruik word. Die meeste e-poskliënte stel egter 'n maksimum groottelimiet vir e-posse op, gewoonlik tussen 1024-2048 kilogrepe (KB), wat beide die HTML-kode en enige beelde of aanhangsels insluit. Gebruik subopskrifte, kolpunte en ander formateringstegnieke om die inhoud maklik skandeerbaar te maak terwyl jy op 'n klein skerm blaai en lees.
  2. Interaktiewe elemente: inkorporeer interaktiewe elemente wat die aandag van u intekenaar trek, sal betrokkenheid, begrip en omskakelingskoerse vanaf u e-pos verhoog. Geanimeerde GIF's, aftellers, video's en ander elemente word deur die meerderheid slimfoon-e-poskliënte ondersteun.
  3. persona: Deur die begroeting en inhoud vir 'n spesifieke intekenaar te verpersoonlik kan betrokkenheid aansienlik bevorder, maak net seker jy kry dit reg! Bv. Dit is belangrik om terugvalle te hê as daar geen data in 'n voornaamveld is nie.
  4. Dinamiese inhoud: Segmentering en aanpassing van die inhoud kan jou uittekenkoerse verlaag en jou intekenare betrokke hou.
  5. Veldtog-integrasie: Die meeste moderne e-pos diensverskaffers het die vermoë om outomaties by te voeg UTM-veldtognavraagstringe vir elke skakel sodat jy e-pos as 'n kanaal in analise kan sien.
  6. Voorkeursentrum: E-posbemarking is te belangrik vir net 'n opt-in of opt-out benadering tot e-pos. Om 'n voorkeursentrum in te sluit waar u intekenare kan verander hoe gereeld hulle e-posse ontvang en watter inhoud vir hulle belangrik is, is 'n fantastiese manier om 'n sterk e-posprogram met betrokke intekenare te hou!
  7. Toets, toets, toets: Maak seker dat u u e-pos op verskeie toestelle toets of 'n toepassing daarvoor gebruik voorbeskou jou e-posse oor e-poskliënte om te verseker dat dit goed lyk en behoorlik funksioneer op verskillende skermgroottes en bedryfstelsels VOORDAT jy stuur. lakmoes berig dat die top 3 gewildste mobiele oop omgewings steeds dieselfde is: Apple iPhone (iOS Mail), Google Android, Apple iPad (iPadOS Mail). Voeg ook toetsvariasies van jou onderwerpreëls en inhoud in om jou oop- en deurklikkoerse te verbeter. Baie e-posplatforms bevat nou outomatiese toetsing wat die lys sal proe, 'n wenvariasie identifiseer en die beste e-pos aan die oorblywende intekenare stuur.

As jou maatskappy sukkel met die ontwerp, toets en implementering van mobiele responsiewe e-posse wat betrokkenheid aanwakker, moet asseblief nie huiwer om my firma te kontak nie. DK New Media het ondervinding in die implementering van feitlik elke e-pos diensverskaffer (ESP).

Douglas Karr

Douglas Karr is CMO van Maak INSIGTE oop en die stigter van die Martech Zone. Douglas het tientalle suksesvolle MarTech-opstartondernemings gehelp, het gehelp met die omsigtigheidsondersoek van meer as $5 miljard in Martech-verkrygings en -beleggings, en gaan voort om maatskappye te help met die implementering en outomatisering van hul verkoops- en bemarkingstrategieë. Douglas is 'n internasionaal erkende digitale transformasie en MarTech deskundige en spreker. Douglas is ook 'n gepubliseerde skrywer van 'n Dummie-gids en 'n besigheidsleierskapboek.

verwante Artikels

Terug na bo knoppie
Sluiting

Advertensieblok bespeur

Martech Zone is in staat om hierdie inhoud gratis aan u te verskaf, want ons verdien ons webwerf deur advertensie-inkomste, geaffilieerde skakels en borgskappe. Ons sal dit waardeer as jy jou advertensieblokkering sal verwyder terwyl jy ons webwerf bekyk.