E-poštno trženje in avtomatizacijaMobilno in tablično trženje

16 najboljših praks za mobilno uporabo prijazne e-pošte HTML, ki povečajo umestitev v mapo »Prejeto« in sodelovanje

Leta 2023 bo verjetno mobilni telefon presegel namizni računalnik kot primarno napravo za odpiranje elektronske pošte. Pravzaprav je HubSpot to ugotovil 46 odstotkov vseh e-poštnih sporočil se zdaj odpre v mobilni napravi. Če ne oblikujete e-pošte za mobilne naprave, pustite na mizi veliko angažiranosti in denarja.

  1. Preverjanje e-pošte: Zagotavljanje vašega e-poštna sporočila so overjena na domeno pošiljatelja in IP naslov je ključnega pomena za dostop do mape »Prejeto« in ni preusmerjen v mapo z neželeno ali vsiljeno pošto. Bistvenega pomena je seveda tudi, da zagotovite način za odjavo od e-pošte z uporabo platforme, ki vključuje povezavo za odjavo.
  2. Odziven dizajn: O HTML e-pošta bi morala biti zasnovan tako, da je odziven, kar pomeni, da se lahko prilagaja velikosti zaslona naprave, na kateri se gleda. To zagotavlja, da je e-pošta videti dobro tako na namiznih kot mobilnih napravah.
  3. Jasna in jedrnata zadeva: Jasna in jedrnata vrstica z zadevo je pomembna za mobilne uporabnike, saj lahko v podoknu za predogled e-pošte vidijo samo prvih nekaj besed vrstice z zadevo. Biti mora kratko in natančno odražati vsebino e-pošte. Optimalna dolžina znakov v vrstici z zadevo e-pošte se lahko razlikuje glede na številne dejavnike, kot so vsebina e-pošte, občinstvo in uporabljeni e-poštni odjemalec. Vendar pa večina strokovnjakov priporoča, da naj bodo zadeve v e-poštnem sporočilu kratke in jedrnate, običajno med 41–50 znaki ali 6–8 besedami. V mobilnih napravah so lahko vrstice z zadevo, ki so daljše od 50 znakov, odrezane in v nekaterih primerih lahko prikažejo le prvih nekaj besed vrstice z zadevo. To lahko oteži prejemniku razumevanje glavnega sporočila e-pošte in lahko zmanjša verjetnost, da bo e-poštno sporočilo odprto.
  4. Prednaslov: Predglavje e-pošte je kratek povzetek vsebine e-pošte, ki se pojavi poleg ali pod vrstico z zadevo v mapi »Prejeto« e-poštnega odjemalca. To je pomemben element, ki lahko vpliva na stopnjo odprtosti vaših e-poštnih sporočil, ko je optimizirana. Večina odjemalcev vključuje HTML in CSS, da zagotovi pravilno nastavitev besedila v prednaslovu.
<!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. Postavitev v enem stolpcu: E-poštna sporočila, ki so oblikovana s postavitvijo v enem stolpcu, je lažje brati na mobilnih napravah. Vsebina mora biti organizirana v logičnem zaporedju in predstavljena v preprosti, lahko berljivi obliki. Če imate več stolpcev, lahko z uporabo CSS elegantno organizirate stolpce v postavitvi enega stolpca.

Tukaj je HTML postavitev elektronske pošte to je 2 stolpca na namizju in se strne v en sam stolpec na mobilnih zaslonih:

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

Tukaj je HTML postavitev elektronske pošte to je 3 stolpca na namizju in se strne v en sam stolpec na mobilnih zaslonih:

<!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. Svetel in temen način: most e-poštni odjemalci podpirajo svetel in temen način CSS prefers-color-scheme da se prilagodi uporabnikovim željam. Prepričajte se, da uporabite vrste slik, kjer imate prozorno ozadje. Tukaj je primer kode.
<!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. Velike, berljive pisave: Velikost in slog pisave je treba izbrati tako, da bo besedilo enostavno berljivo na majhnem zaslonu. Uporabite vsaj velikost pisave 14pt in se izogibajte pisavam, ki jih je težko brati na majhnih zaslonih. Običajno uporabljene pisave imajo veliko verjetnost doslednega upodabljanja v različnih e-poštnih odjemalcih, zato so pisave Arial, Helvetica, Times New Roman, Georgia, Verdana, Tahoma in Trebuchet MS običajno varne. Če uporabljate pisavo po meri, poskrbite, da bo v vašem CSS navedena nadomestna pisava:
<!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. Optimalna uporaba slik: Slike lahko upočasnijo čas nalaganja in morda ne bodo pravilno prikazane na vseh mobilnih napravah. Slike uporabljajte zmerno in se prepričajte, da so velikosti in stisnjen za mobilni ogled. Ne pozabite izpolniti nadomestnega besedila za svoje slike, če jih e-poštni odjemalec blokira. Vse slike je treba shraniti in jih uporabiti na varnem spletnem mestu (SSL). Tukaj je primer kode odzivnih slik v e-pošti HTML.
<!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. Počisti poziv k dejanju (CTA): Jasen in viden CTA je pomemben v vsaki e-pošti, vendar je še posebej pomemben v mobilnih napravah. Prepričajte se, da je CTA enostavno najti in da je dovolj velik, da ga lahko kliknete v mobilni napravi. Če vključite gumbe, lahko zagotovite, da so napisani tudi v CSS z vgrajenimi slogovnimi oznakami:
<!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. Kratka in jedrnata vsebina: Vsebina e-pošte naj bo kratka in jedrnata. Omejitev znakov za e-poštno sporočilo HTML se lahko razlikuje glede na uporabljenega e-poštnega odjemalca. Vendar pa večina e-poštnih odjemalcev določa največjo omejitev velikosti za e-pošto, običajno med 1024-2048 kilobajti (KB), ki vključuje kodo HTML in vse slike ali priloge. Uporabite podnaslove, oznake in druge tehnike oblikovanja, da bo vsebina zlahka pregledljiva med pomikanjem in branjem na majhnem zaslonu.
  2. Interaktivni elementi: Vsebujejo interaktivni elementi ki pritegnejo pozornost vašega naročnika, bodo povečale angažiranost, razumevanje in stopnjo konverzije vaše e-pošte. Animirani GIF, odštevalnike, videoposnetke in druge elemente podpira večina e-poštnih odjemalcev za pametne telefone.
  3. Personalizacija: Prilagoditev pozdrava in vsebine za določenega naročnika lahko znatno poveča angažiranost, le poskrbite, da boste to naredili pravilno! Npr. Pomembno je imeti nadomestne možnosti, če v polju z imenom ni podatkov.
  4. Dinamična vsebina: Segmentacija in prilagajanje vsebine lahko zmanjšata vašo stopnjo odjav in ohranite angažiranost vaših naročnikov.
  5. Integracija oglaševalske akcije: Večina sodobnih ponudnikov e-poštnih storitev ima možnost samodejnega dodajanja Poizvedbeni nizi oglaševalske akcije UTM za vsako povezavo, tako da si lahko ogledate e-pošto kot kanal v analitiki.
  6. Center za nastavitve: Trženje po e-pošti je preveč pomembno za samo pristop privolitve ali zavrnitve e-pošte. Vključitev prednostnega središča, kjer lahko vaši naročniki spremenijo, kako pogosto prejemajo e-pošto in katera vsebina je zanje pomembna, je fantastičen način za ohranjanje močnega e-poštnega programa z angažiranimi naročniki!
  7. Test, Test, Test: Prepričajte se, da preizkusite svojo e-pošto na več napravah ali uporabite aplikacijo za predogled vaših e-poštnih sporočil v e-poštnih odjemalcih da zagotovite, da izgleda dobro in pravilno deluje na različnih velikostih zaslona in operacijskih sistemih, PREDEN pošljete. Lakmus poroča, da so top 3 najbolj priljubljena mobilna odprta okolja še vedno ista: Apple iPhone (iOS Mail), Google Android, Apple iPad (iPadOS Mail). Vključite tudi testne različice vrstic zadeve in vsebine, da izboljšate svojo stopnjo odprtosti in število klikov. Številne e-poštne platforme zdaj vključujejo avtomatizirano testiranje, ki bo vzorčilo seznam, prepoznalo zmagovalno različico in poslalo najboljšo e-pošto preostalim naročnikom.

Če se vaše podjetje spopada z načrtovanjem, testiranjem in uvajanjem mobilnih odzivnih e-poštnih sporočil, ki spodbujajo sodelovanje, ne oklevajte in stopite v stik z mojim podjetjem. DK New Media ima izkušnje z implementacijo tako rekoč vseh ponudnikov e-poštnih storitev (ESP).

Douglas Karr

Douglas Karr je CMO of Odpri INSIGHTS in ustanovitelj Martech Zone. Douglas je pomagal na desetine uspešnih startupov MarTech, pomagal je pri skrbnem pregledu več kot 5 milijard USD pri prevzemih in naložbah Martecha ter še naprej pomaga podjetjem pri izvajanju in avtomatizaciji njihovih prodajnih in trženjskih strategij. Douglas je mednarodno priznan strokovnjak in govorec za digitalno transformacijo in MarTech. Douglas je tudi objavljen avtor Dummie's guide in knjige o poslovnem vodenju.

Povezani članki

Nazaj na vrh
Zapri

Zaznan Adblock

Martech Zone vam lahko zagotovi to vsebino brezplačno, ker naše spletno mesto monetiziramo s prihodki od oglasov, pridruženimi povezavami in sponzorstvi. Hvaležni bi bili, če bi med ogledom našega spletnega mesta odstranili zaviralec oglasov.