Tölvupóstmarkaðssetning og sjálfvirkniFarsíma- og spjaldtölvumarkaðssetning

16 Farsímavænn HTML tölvupóstur bestu starfsvenjur sem hámarka staðsetningu pósthólfs og þátttöku

Árið 2023 er líklegt að farsíminn fari fram úr skjáborðinu sem aðaltæki til að opna tölvupóst. Reyndar fann HubSpot það 46 prósent af öllum tölvupóstum sem opnast nú eiga sér stað í farsíma. Ef þú ert ekki að hanna tölvupóst fyrir farsíma skilur þú eftir mikla þátttöku og peninga á borðinu.

  1. Staðfesting tölvupósts: Tryggja þinn tölvupóstar eru staðfestir til sendilénsins og IP heimilisfang er mikilvægt til að komast í pósthólfið og ekki beint í rusl- eða ruslpóstmöppu. Það er líka nauðsynlegt, auðvitað, að þú veitir leið til að afþakka tölvupóstinn með því að nota vettvang sem inniheldur afskráningartengil.
  2. Móttækileg hönnun: The HTML tölvupóstur ætti að vera hannað til að vera móttækilegt, sem þýðir að það getur stillt sig að skjástærð tækisins sem það er skoðað á. Þetta tryggir að tölvupósturinn líti vel út á bæði borðtölvum og farsímum.
  3. Skýr og hnitmiðuð efnislína: Skýr og hnitmiðuð efnislína er mikilvæg fyrir farsímanotendur vegna þess að þeir sjá kannski aðeins fyrstu orðin í efnislínunni í forskoðunarrúðunni í tölvupósti. Það ætti að vera stutt og endurspegla nákvæmlega innihald tölvupóstsins. Ákjósanlegasta stafalengd efnislínu tölvupósts getur verið mismunandi eftir fjölda þátta, svo sem innihald tölvupósts, áhorfenda og tölvupóstforritsins sem verið er að nota. Hins vegar mæla flestir sérfræðingar með því að hafa efnislínur tölvupósts stuttar og markvissar, venjulega á milli 41-50 stafir eða 6-8 orð. Í farsímum geta efnislínur sem eru lengri en 50 stafir fallið af og í sumum tilfellum birtast aðeins fyrstu orðin í efnislínunni. Þetta getur gert viðtakandanum erfitt fyrir að skilja meginskilaboð tölvupóstsins og getur dregið úr líkum á að tölvupósturinn sé opnaður.
  4. Forhaus: Forhausur tölvupósts er stutt samantekt á innihaldi tölvupósts sem birtist við hliðina á eða fyrir neðan efnislínuna í pósthólfinu í tölvupósti. Það er mikilvægur þáttur sem getur haft áhrif á opnunartíðni tölvupósts þíns þegar hann er fínstilltur. Flestir viðskiptavinir nota HTML og CSS til að tryggja að forhaustextinn sé rétt uppsettur.
<!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. Skipulag eins dálks: Tölvupóstur sem er hannaður með eins dálki er auðveldara að lesa í farsímum. Innihaldið ætti að vera skipulagt í rökréttri röð og sett fram á einföldu formi sem auðvelt er að lesa. Ef þú ert með marga dálka getur notkun CSS skipulagt dálkana á þokkafullan hátt í eins dálkisskipulagi.

Hér er HTML tölvupóstskipulag það er 2 dálkar á skjáborði og hrynur saman í einn dálk á farsímaskjáum:

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

Hér er HTML tölvupóstskipulag það er 3 dálkar á skjáborði og hrynur saman í einn dálk á farsímaskjáum:

<!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. Ljós og dökk stilling: brú tölvupóstforrit styðja ljósa og dökka stillingu CSS prefers-color-scheme til að koma til móts við óskir notandans. Vertu viss um að nota myndagerðir þar sem þú ert með gagnsæjan bakgrunn. Hér er kóðadæmi.
<!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. Stórt, læsilegt letur: Leturstærð og -stíll ætti að vera valinn til að auðvelda lestur textans á litlum skjá. Notaðu að minnsta kosti 14 punkta leturstærð og forðastu leturgerðir sem erfitt er að lesa á litlum skjám. Algengar leturgerðir hafa miklar líkur á því að birtast stöðugt í mismunandi tölvupóstforritum, þannig að notkun Arial, Helvetica, Times New Roman, Georgia, Verdana, Tahoma og Trebuchet MS eru venjulega öruggar leturgerðir. Ef þú notar sérsniðið leturgerð, vertu viss um að hafa varaleturgerð auðkennd í 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. Besta notkun mynda: Myndir geta hægt á hleðslutíma og birtast kannski ekki rétt í öllum fartækjum. Notaðu myndir sparlega og vertu viss um að þær séu í stærð og þjappað fyrir farsímaskoðun. Vertu viss um að fylla út alt textann fyrir myndirnar þínar ef tölvupóstforritið lokar á þær. Allar myndir ættu að vera geymdar og vísað til þeirra frá öruggri vefsíðu (SSL). Hér er dæmi um kóða fyrir móttækilegar myndir í HTML tölvupósti.
<!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. Hreinsa ákall til aðgerða (CTA): Skýrt og áberandi CTA er mikilvægt í hvaða tölvupósti sem er, en það er sérstaklega mikilvægt í farsímavænum tölvupósti. Gakktu úr skugga um að auðvelt sé að finna CTA og að það sé nógu stórt til að hægt sé að smella því á farsíma. Ef þú fellir inn hnappa geturðu tryggt að þú hafir þá skrifaða í CSS með innbyggðum stílmerkjum líka:
<!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. Stutt og hnitmiðað efni: Haltu innihaldi tölvupóstsins stuttu og markvissu. Stafatakmörk fyrir HTML tölvupóst geta verið mismunandi eftir því hvaða tölvupóstforrit er notað. Hins vegar setja flestir tölvupóstforrit hámarksstærðarmörk fyrir tölvupóst, venjulega á milli 1024-2048 kílóbæti (KB), sem inniheldur bæði HTML kóðann og allar myndir eða viðhengi. Notaðu undirfyrirsagnir, punkta og aðrar sniðaðferðir til að gera efnið auðvelt að skanna á meðan þú flettir og lesið á litlum skjá.
  2. Gagnvirkir þættir: innlimun gagnvirkir þættir sem fanga athygli áskrifandans þíns mun auka þátttöku, skilning og viðskiptahlutfall frá tölvupóstinum þínum. Hreyfimyndir, niðurteljarar, myndbönd og aðrir þættir eru studdir af meirihluta snjallsímapóstforrita.
  3. Sérstillingar: Að sérsníða kveðjuna og innihaldið fyrir tiltekinn áskrifanda getur ýtt verulega undir þátttöku, vertu viss um að þú hafir það rétt! Td. Það er mikilvægt að hafa varahluti ef engin gögn eru í fornafnareit.
  4. Dynamic Content: Aðgreining og sérsníða efnisins getur dregið úr afskráningarhlutfalli þínu og haldið áskrifendum þínum við efnið.
  5. Samþætting herferðar: Flestar nútíma tölvupóstþjónustuveitur hafa getu til að bæta sjálfkrafa við UTM herferð fyrirspurnastrengir fyrir hvern hlekk svo þú getir skoðað tölvupóst sem rás í greiningu.
  6. Forgangsmiðstöð: Markaðssetning í tölvupósti er of mikilvæg til að geta valið eða afþakka aðferð við tölvupóst. Að setja inn valmiðstöð þar sem áskrifendur þínir geta breytt því hversu oft þeir fá tölvupósta og hvaða efni er mikilvægt fyrir þá er frábær leið til að halda öflugu tölvupóstforriti með trúlofuðum áskrifendum!
  7. Próf, próf, próf: Gakktu úr skugga um að prófa tölvupóstinn þinn á mörgum tækjum eða notaðu forrit til að forskoða tölvupóstinn þinn í gegnum tölvupóstforrit til að tryggja að það líti vel út og virki rétt á mismunandi skjástærðum og stýrikerfum ÁÐUR en þú sendir. Litmus segir að efstu 3 vinsælustu opnu farsímaumhverfin séu áfram þau sömu: Apple iPhone (iOS Mail), Google Android, Apple iPad (iPadOS Mail). Settu líka inn prófunarafbrigði af efnislínum þínum og efni til að bæta opnunar- og smellihlutfall þitt. Margir tölvupóstpallar innihalda nú sjálfvirkar prófanir sem munu sýna listann, bera kennsl á vinningsafbrigði og senda besta tölvupóstinn til áskrifenda sem eftir eru.

Ef fyrirtæki þitt á í erfiðleikum með að hanna, prófa og innleiða móttækilegur tölvupóstur fyrir farsíma sem ýtir undir þátttöku skaltu ekki hika við að hafa samband við fyrirtækið mitt. DK New Media hefur reynslu af innleiðingu nánast allra tölvupóstþjónustuaðila (ESP).

Douglas Karr

Douglas Karr er CMO af OpenINSIGHTS og stofnandi Martech Zone. Douglas hefur hjálpað tugum farsælra MarTech sprotafyrirtækja, hefur aðstoðað við áreiðanleikakönnun yfir $5 milljarða í kaupum og fjárfestingum Martech og heldur áfram að aðstoða fyrirtæki við að innleiða og gera sjálfvirkan sölu- og markaðsáætlanir sínar. Douglas er alþjóðlega viðurkenndur stafrænn umbreytingu og MarTech sérfræðingur og ræðumaður. Douglas er einnig útgefinn höfundur Dummie's guide og bók um leiðtogaviðskipti.

tengdar greinar

Til baka efst á hnappinn
Loka

Auglýsingablokk greind

Martech Zone er fær um að útvega þér þetta efni að kostnaðarlausu vegna þess að við afla tekna af síðunni okkar með auglýsingatekjum, tengdatenglum og kostun. Okkur þætti vænt um ef þú myndir fjarlægja auglýsingablokkann þinn þegar þú skoðar síðuna okkar.