Marchnata E-bost ac Awtomeiddio Marchnata E-bostMarchnata Symudol a Thabledi

16 Arferion Gorau E-bost HTML Cyfeillgar i Symudol sy'n Mwyhau Lleoliadau Mewnflwch ac Ymgysylltiad

Yn 2023, mae'n debygol y bydd ffôn symudol yn rhagori ar y bwrdd gwaith fel y brif ddyfais ar gyfer agor e-bost. Mewn gwirionedd, canfu HubSpot hynny 46 y cant o'r holl negeseuon e-bost sy'n agor bellach yn digwydd ar ffôn symudol. Os nad ydych chi'n dylunio e-byst ar gyfer ffôn symudol, rydych chi'n gadael llawer o ymgysylltu ac arian ar y bwrdd.

  1. Dilysu E-bost: Sicrhau eich e-byst yn cael eu dilysu i'r parth anfon a IP cyfeiriad yn hanfodol i gyrraedd y mewnflwch ac nid yn cael ei gyfeirio i ffolder sothach neu sbam. Mae hefyd yn hanfodol, wrth gwrs, eich bod yn darparu modd o optio allan o'r e-bost gan ddefnyddio platfform sy'n cynnwys dolen dad-danysgrifio.
  2. Dylunio Ymatebol: Roedd HTML e-bost ddylai fod wedi'i gynllunio i fod yn ymatebol, sy'n golygu y gall addasu i faint sgrin y ddyfais y mae'n cael ei weld. Mae hyn yn sicrhau bod yr e-bost yn edrych yn dda ar ddyfeisiau bwrdd gwaith a symudol.
  3. Llinell bwnc glir a chryno: Mae llinell bwnc glir a chryno yn bwysig i ddefnyddwyr ffonau symudol oherwydd efallai mai dim ond ychydig eiriau cyntaf y llinell bwnc y byddant yn eu gweld yn eu cwarel rhagolwg e-bost. Dylai fod yn gryno ac adlewyrchu cynnwys yr e-bost yn gywir. Gall hyd nod optimaidd llinell pwnc e-bost amrywio yn dibynnu ar nifer o ffactorau, megis y cynnwys e-bost, y gynulleidfa, a'r cleient e-bost sy'n cael ei ddefnyddio. Fodd bynnag, mae'r rhan fwyaf o arbenigwyr yn argymell cadw llinellau pwnc e-bost yn fyr ac i'r pwynt, fel arfer rhwng 41-50 nod neu 6-8 gair. Ar ddyfeisiau symudol, mae'n bosibl y bydd llinellau pwnc sy'n hwy na 50 nod yn cael eu torri i ffwrdd, ac mewn rhai achosion, efallai mai dim ond ychydig eiriau cyntaf y llinell bwnc y byddant yn eu dangos. Gall hyn ei gwneud yn anodd i'r derbynnydd ddeall prif neges yr e-bost a gall leihau'r tebygolrwydd y bydd yr e-bost yn cael ei agor.
  4. Rhagflaenydd: Mae rhag-bennawd e-bost yn grynodeb byr o gynnwys e-bost sy'n ymddangos wrth ymyl neu o dan y llinell bwnc ym mewnflwch cleient e-bost. Mae'n elfen bwysig a all effeithio ar gyfradd agored eich e-byst pan gaiff ei optimeiddio. Mae'r rhan fwyaf o gleientiaid yn ymgorffori HTML a CSS i sicrhau bod y testun rhag-bennawd wedi'i osod yn gywir.
<!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. Cynllun colofn sengl: Mae e-byst sydd wedi'u dylunio â chynllun un golofn yn haws i'w darllen ar ddyfeisiau symudol. Dylid trefnu'r cynnwys mewn trefn resymegol a'i gyflwyno mewn fformat syml, hawdd ei ddarllen. Os oes gennych chi sawl colofn, gall defnyddio CSS drefnu'r colofnau'n osgeiddig mewn cynllun un golofn.

Dyma Cynllun e-bost HTML hynny yw 2 golofn ar y bwrdd gwaith ac yn cwympo i un golofn ar sgriniau symudol:

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

Dyma Cynllun e-bost HTML hynny yw 3 golofn ar y bwrdd gwaith ac yn cwympo i un golofn ar sgriniau symudol:

<!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. Modd Golau a Tywyll: bont mae cleientiaid e-bost yn cefnogi modd golau a thywyll CSS prefers-color-scheme er mwyn darparu ar gyfer dewisiadau'r defnyddiwr. Gwnewch yn siŵr eich bod chi'n defnyddio mathau o ddelweddau lle mae gennych chi gefndir tryloyw. Dyma enghraifft cod.
<!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. Ffontiau mawr, darllenadwy: Dylid dewis maint ac arddull y ffont i wneud y testun yn hawdd ei ddarllen ar sgrin fach. Defnyddiwch o leiaf maint ffont 14pt ac osgoi defnyddio ffontiau sy'n anodd eu darllen ar sgriniau bach. Mae ffontiau a ddefnyddir yn gyffredin yn debygol iawn o rendro'n gyson ar draws gwahanol gleientiaid e-bost, felly mae defnyddio Arial, Helvetica, Times New Roman, Georgia, Verdana, Tahoma, a Trebuchet MS yn nodweddiadol yn ffontiau diogel. Os ydych chi'n defnyddio ffont wedi'i deilwra, gwnewch yn siŵr bod ffont wrth gefn wedi'i nodi yn eich 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. Defnydd gorau posibl o ddelweddau: Gall delweddau arafu amseroedd llwytho ac efallai na fyddant yn cael eu harddangos yn iawn ar bob dyfais symudol. Defnyddiwch ddelweddau'n gynnil, a gwnewch yn siŵr eu bod o faint a cywasgedig ar gyfer gwylio symudol. Gwnewch yn siŵr eich bod chi'n llenwi'r testun alt ar gyfer eich delweddau os bydd y cleient e-bost yn eu blocio. Dylid storio pob delwedd a chyfeirio ati o wefan ddiogel (SSL). Dyma god enghreifftiol o ddelweddau ymatebol mewn e-bost 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. Clirio galwad i weithredu (CTA): Mae CTA clir ac amlwg yn bwysig mewn unrhyw e-bost, ond mae'n arbennig o bwysig mewn e-bost sy'n gyfeillgar i ffonau symudol. Gwnewch yn siŵr ei bod yn hawdd dod o hyd i'r CTA a'i fod yn ddigon mawr i gael ei glicio ar ddyfais symudol. Os ydych chi'n ymgorffori botymau, gallwch chi sicrhau eich bod chi'n eu hysgrifennu yn CSS gyda thagiau arddull mewnol hefyd:
<!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. Cynnwys byr a chryno: Cadwch gynnwys yr e-bost yn fyr ac i'r pwynt. Gall y terfyn nodau ar gyfer e-bost HTML amrywio yn dibynnu ar y cleient e-bost a ddefnyddir. Fodd bynnag, mae'r rhan fwyaf o gleientiaid e-bost yn gosod terfyn maint uchaf ar gyfer e-byst, fel arfer rhwng 1024-2048 cilobeit (KB), sy'n cynnwys y cod HTML ac unrhyw ddelweddau neu atodiadau. Defnyddiwch is-benawdau, pwyntiau bwled, a thechnegau fformatio eraill i wneud y cynnwys yn hawdd ei sganio wrth sgrolio a darllen ar sgrin fach.
  2. Elfennau rhyngweithiol: ymgorffori elfennau rhyngweithiol bydd hynny'n dal sylw eich tanysgrifiwr yn cynyddu cyfraddau ymgysylltu, deall a throsi o'ch e-bost. GIFs wedi'u hanimeiddio, amseryddion cyfrif i lawr, fideos, ac elfennau eraill yn cael eu cefnogi gan y mwyafrif o gleientiaid e-bost ffôn clyfar.
  3. Personoli: Gall personoli'r cyfarchion a'r cynnwys ar gyfer tanysgrifiwr penodol ysgogi ymgysylltiad yn sylweddol, ond gwnewch yn siŵr eich bod chi'n ei gael yn iawn! ae. Mae cael wrth gefn os nad oes data mewn maes enw cyntaf yn bwysig.
  4. Cynnwys deinamig: Gall segmentu ac addasu'r cynnwys leihau eich cyfraddau dad-danysgrifio a chadw'ch tanysgrifwyr i ymgysylltu.
  5. Integreiddio Ymgyrch: Mae gan y rhan fwyaf o ddarparwyr gwasanaethau e-bost modern y gallu i atodi'n awtomatig Llinynnau ymholiad ymgyrch UTM ar gyfer pob dolen fel y gallwch weld e-bost fel sianel mewn dadansoddeg.
  6. Canolfan Dewis: Mae marchnata e-bost yn rhy bwysig ar gyfer dim ond dull optio i mewn neu optio allan o e-byst. Mae ymgorffori canolfan ddewis lle gall eich tanysgrifwyr newid pa mor aml y maent yn derbyn e-byst a pha gynnwys sy'n bwysig iddynt yn ffordd wych o gadw rhaglen e-bost gref gyda thanysgrifwyr ymroddedig!
  7. Prawf, prawf, prawf: Gwnewch yn siŵr eich bod chi'n profi'ch e-bost ar ddyfeisiau lluosog neu'n defnyddio cymhwysiad i rhagolwg eich e-byst ar draws cleientiaid e-bost i sicrhau ei fod yn edrych yn dda ac yn gweithio'n iawn ar wahanol feintiau sgrin a systemau gweithredu CYN i chi anfon. Litmws yn adrodd bod y 3 amgylchedd agored symudol mwyaf poblogaidd yn parhau i fod yr un fath: Apple iPhone (iOS Mail), Google Android, Apple iPad (iPadOS Mail). Hefyd, ymgorfforwch amrywiadau prawf o'ch llinellau pwnc a'ch cynnwys i wella'ch cyfraddau agor a chlicio drwodd. Mae llawer o lwyfannau e-bost bellach yn ymgorffori profion awtomataidd a fydd yn samplu'r rhestr, yn nodi amrywiad buddugol, ac yn anfon yr e-bost gorau at y tanysgrifwyr sy'n weddill.

Os yw'ch cwmni'n cael trafferth dylunio, profi a gweithredu e-byst ymatebol symudol sy'n ysgogi ymgysylltiad, peidiwch ag oedi cyn cysylltu â'm cwmni. Highbridge â phrofiad o weithredu bron pob darparwr gwasanaeth e-bost (CSA).

Douglas Karr

Douglas Karr yw sylfaenydd y Martech Zone ac arbenigwr cydnabyddedig ar drawsnewid digidol. Mae Douglas wedi helpu i ddechrau sawl cwmni newydd llwyddiannus ar gyfer MarTech, wedi cynorthwyo gyda’r diwydrwydd dyladwy o dros $5 bil mewn caffaeliadau a buddsoddiadau Martech, ac mae’n parhau i lansio ei lwyfannau a’i wasanaethau ei hun. Mae'n gyd-sylfaenydd Highbridge, cwmni ymgynghori trawsnewid digidol. Mae Douglas hefyd yn awdur cyhoeddedig canllaw Dummie a llyfr arweinyddiaeth busnes.

Erthyglau Perthnasol

Beth ydych chi'n feddwl?

Mae'r wefan hon yn defnyddio Akismet i leihau sbam. Dysgwch sut mae eich data sylwadau yn cael ei brosesu.

Cau

Adblock Wedi'i Ganfod

Martech Zone yn gallu darparu'r cynnwys hwn i chi heb unrhyw gost oherwydd ein bod yn rhoi arian i'n gwefan trwy refeniw hysbysebu, dolenni cyswllt, a nawdd. Byddem yn gwerthfawrogi petaech yn cael gwared ar eich rhwystrwr hysbysebion wrth i chi edrych ar ein gwefan.