Retpoŝta Merkatado kaj AŭtomatigoMobile kaj Tablojda Merkatado

16 Poŝtelefonaj Amikaj HTML-Retpoŝto Plej Bonaj Praktikoj Kiu Maksimumas Enirkesto Lokigo kaj Engaĝiĝo

En 2023, verŝajne poŝtelefono superos labortablon kiel la ĉefa aparato por malfermi retpoŝton. Fakte, HubSpot trovis tion 46 procento de ĉiuj retpoŝtoj malfermiĝas nun sur poŝtelefono. Se vi ne desegnas retpoŝtojn por poŝtelefono, vi lasas multe da engaĝiĝo kaj mono sur la tablo.

  1. Retpoŝta Aŭtentikigo: Certigante vian retpoŝtoj estas aŭtentikigitaj al la senda domajno kaj IP adreso estas kritika por atingi la enirkeston kaj ne direktita al rubo aŭ spamdosierujo. Ankaŭ nepras, kompreneble, ke vi provizas rimedon por elekti ekster la retpoŝton uzante platformon, kiu enhavas malabonan ligon.
  2. Respondema Dezajno: la HTML retpoŝto devus esti desegnita por esti respondema, kio signifas, ke ĝi povas adaptiĝi al la ekrangrandeco de la aparato, sur kiu ĝi estas rigardata. Ĉi tio certigas, ke la retpoŝto aspektas bone en ambaŭ labortablaj kaj porteblaj aparatoj.
  3. Klara kaj konciza temlinio: Klara kaj konciza temlinio estas grava por poŝtelefonaj uzantoj ĉar ili povas vidi nur la unuajn malmultajn vortojn de la temlinio en sia retpoŝta antaŭrigardfenestro. Ĝi devus esti mallonga kaj precize reflekti la enhavon de la retpoŝto. La optimuma signolongo de retpoŝta temlinio povas varii depende de kelkaj faktoroj, kiel ekzemple la retpoŝta enhavo, la spektantaro kaj la retpoŝta kliento uzata. Tamen, plej multaj fakuloj rekomendas teni retpoŝtajn temliniojn mallongajn kaj al la punkto, tipe inter 41-50 signoj aŭ 6-8 vortoj. Sur porteblaj aparatoj, temlinioj kiuj estas pli longaj ol 50 signoj povas esti fortranĉitaj, kaj en iuj kazoj, povas nur montri la unuajn malmultajn vortojn de la temlinio. Ĉi tio povas malfaciligi por la ricevanto kompreni la ĉefan mesaĝon de la retpoŝto kaj povas redukti la verŝajnecon de la retpoŝto malfermita.
  4. Antaŭkapo: Retpoŝta antaŭkapo estas mallonga resumo de la enhavo de retpoŝto, kiu aperas apud aŭ sub la temo en la enirkesto de retpoŝta kliento. Ĝi estas grava elemento, kiu povas influi la malferman indicon de viaj retpoŝtoj kiam optimumigita. Plej multaj klientoj inkluzivas HTML kaj CSS por certigi, ke la antaŭkapa teksto estas ĝuste agordita.
<!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. Unu-kolumna aranĝo: Retpoŝtoj kiuj estas dezajnitaj kun unu-kolumna aranĝo estas pli facile legeblaj sur porteblaj aparatoj. La enhavo estu organizita en logika sinsekvo kaj prezentita en simpla, facile legebla formato. Se vi havas plurajn kolumnojn, uzi CSS povas gracie organizi la kolumnojn en unu-kolumna aranĝo.

Jen an HTML-retpoŝta aranĝo tio estas 2 kolumnoj sur labortablo kaj kolapsas al ununura kolumno sur porteblaj ekranoj:

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

Jen an HTML-retpoŝta aranĝo tio estas 3 kolumnoj sur labortablo kaj kolapsas al ununura kolumno sur porteblaj ekranoj:

<!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. Luma kaj Malhela Reĝimo: plej retpoŝtaj klientoj subtenas lumon kaj malhelan reĝimon CSS prefers-color-scheme por akomodi la preferojn de la uzanto. Nepre uzu bildspecojn kie vi havas travideblan fonon. Jen ekzemplo de kodo.
<!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. Grandaj, legeblaj tiparoj: La tiparo kaj stilo estu elektitaj por ke la teksto facile legebla sur malgranda ekrano. Uzu almenaŭ 14pt tiparon kaj evitu uzi tiparojn malfacile legeblajn sur malgrandaj ekranoj. Ofte uzataj tiparoj havas altan verŝajnecon bildigi konstante tra malsamaj retpoŝtaj klientoj, do uzi Arial, Helvetica, Times New Roman, Kartvelio, Verdana, Tahoma kaj Trebuchet MS estas tipe sekuraj tiparoj. Se vi ja uzas kutiman tiparon, nepre havi faltiparo identigita en via 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. Optimuma uzo de bildoj: Bildoj povas malrapidigi ŝarĝtempojn kaj eble ne aperos ĝuste en ĉiuj porteblaj aparatoj. Uzu bildojn ŝpareme, kaj certigu, ke ili estas grandaj kaj kunpremita por poŝtelefona spektado. Nepre plenigu la alttekston por viaj bildoj en la okazo, ke la retpoŝta kliento blokas ilin. Ĉiuj bildoj estu konservitaj kaj referitaj de sekura retejo (SSL). Jen ekzemplokodo de respondemaj bildoj en HTML-retpoŝto.
<!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. Klara alvoko (CTA): Klara kaj elstara CTA estas grava en ajna retpoŝto, sed ĝi estas precipe grava en poŝtelefona retpoŝto. Certiĝu, ke la CTA estas facile trovebla kaj ke ĝi estas sufiĉe granda por esti klakita sur movebla aparato. Se vi enkorpigas butonojn, vi povas certigi, ke vi havas ilin skribitaj en CSS kun enliniaj stiletikedoj ankaŭ:
<!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. Mallonga kaj konciza enhavo: Tenu la enhavon de la retpoŝto mallonga kaj al la punkto. La signolimo por HTML-retpoŝto povas varii depende de la retpoŝta kliento uzata. Tamen, plej multaj retpoŝtaj klientoj trudas maksimuman grandlimon por retpoŝtoj, kutime inter 1024-2048 kilobajtoj (KB), kiu inkluzivas kaj la HTML-kodon kaj iujn ajn bildojn aŭ aldonaĵojn. Uzu subtitolojn, kuglopunktojn kaj aliajn formatajn teknikojn por fari la enhavon facile skaneblan dum rulumado kaj legado sur malgranda ekrano.
  2. Interagaj elementoj: korpigante interagaj elementoj tio kaptas la atenton de via abonanto pliigos engaĝiĝon, komprenon kaj konvertajn indicojn de via retpoŝto. Viglaj GIF-oj, retronombraj temporiziloj, filmetoj kaj aliaj elementoj estas subtenataj de la plimulto de saĝtelefonaj retpoŝtaj klientoj.
  3. Personigo: Personigi la saluton kaj enhavon por specifa abonanto povas signife stiri engaĝiĝon, nur certigu, ke vi bone akiras! Ekz. Havi fallbacks se ne estas datumoj en antaŭnomo kampo estas grava.
  4. Dinamika Enhavo: Segmentado kaj personigo de la enhavo povas redukti viajn malabonajn tarifojn kaj konservi viajn abonantojn engaĝitaj.
  5. Kampanja Integriĝo: Plej modernaj retpoŝtaj servaj provizantoj havas la kapablon aŭtomate almeti Demandoŝnuroj de UTM-kampanjo por ĉiu ligo por ke vi povu rigardi retpoŝton kiel kanalon en analizo.
  6. Prefera Centro: Retpoŝta merkatado estas tro grava por nur elekt-en- aŭ for-eliro al retpoŝtoj. Enkorpigi prefercentron, kie viaj abonantoj povas ŝanĝi kiom ofte ili ricevas retpoŝtojn kaj kia enhavo estas grava por ili, estas bonega maniero konservi fortan retpoŝtan programon kun engaĝitaj abonantoj!
  7. Testo, Testo, Testo: Nepre testi vian retpoŝton sur pluraj aparatoj aŭ uzi aplikaĵon por antaŭrigardu viajn retpoŝtojn tra retpoŝtaj klientoj por certigi, ke ĝi aspektas bone kaj funkcias ĝuste sur malsamaj ekrangrandoj kaj operaciumoj ANTAŬ vi sendas. Tornasol raportas, ke la supraj 3 plej popularaj moveblaj malfermaj medioj daŭre estas la samaj: Apple iPhone (iOS Mail), Google Android, Apple iPad (iPadOS Mail). Ankaŭ, korpigu testajn variojn de viaj temolinioj kaj enhavo por plibonigi viajn malfermajn kaj alklakajn indicojn. Multaj retpoŝtaj platformoj nun inkluzivas aŭtomatajn provojn, kiuj specimenos la liston, identigos venkan variaĵon kaj sendos la plej bonan retpoŝton al la ceteraj abonantoj.

Se via kompanio luktas kun desegnado, testado kaj efektivigo de moveblaj respondemaj retpoŝtoj, kiuj kondukas engaĝiĝon, ne hezitu kontakti mian firmaon. DK New Media havas sperton pri efektivigo de preskaŭ ĉiu provizanto de retpoŝtaj servoj (ESP).

Douglas Karr

Douglas Karr estas CMO de OpenINSIGHTS kaj la fondinto de la Martech Zone. Douglas helpis dekduojn da sukcesaj MarTech-noventreprenoj, helpis en la konvena diligento de pli ol $ 5 miliardoj en Martech-akiroj kaj investoj, kaj daŭre helpas firmaojn en efektivigado kaj aŭtomatigo de siaj vendaj kaj merkatigstrategioj. Douglas estas internacie agnoskita cifereca transformo kaj MarTech-eksperto kaj parolanto. Douglas ankaŭ estas publikigita verkinto de la gvidisto de Dummie kaj komerca gvidadlibro.

rilataj Artikoloj

Reen al la supra butono
Fermi

Adbloko Detektita

Martech Zone kapablas provizi al vi ĉi tiun enhavon senkoste ĉar ni monetigas nian retejon per reklamaj enspezoj, filiaj ligiloj kaj sponsorado. Ni dankus se vi forigus vian reklamblokilon dum vi rigardas nian retejon.