Margaíocht Ríomhphoist & UathoibriúMargaíocht Soghluaiste agus Táibléad

16 Cleachtais is Fearr le Ríomhphoist HTML Soghluaiste a Uasmhéadaíonn Socrúchán Bosca Isteach agus Rannpháirtíocht

In 2023, is dócha go sáróidh fón póca an deasc mar an phríomhghléas chun ríomhphost a oscailt. Go deimhin, d'aimsigh HubSpot é sin 46 faoin gcéad de gach ríomhphost a osclaíonn anois ar soghluaiste. Mura bhfuil tú ag dearadh ríomhphoist le haghaidh soghluaiste, tá tú ag fágáil go leor rannpháirtíochta agus airgid ar an mbord.

  1. Fíordheimhniú Ríomhphoist: A chinntiú do ríomhphoist atá fíordheimhnithe chuig an bhfearann ​​seolta agus IP tá an seoladh ríthábhachtach chun an bosca isteach a bhaint amach agus gan é a chur chuig fillteán dramhphoist nó turscair. Tá sé riachtanach freisin, ar ndóigh, go soláthróidh tú bealach le díliostáil ón ríomhphost ag úsáid ardán a chuimsíonn nasc díliostála.
  2. Dearadh Sofhreagrach: An HTML ba chóir go mbeadh ríomhphost deartha le bheith sofhreagrach, rud a chiallaíonn gur féidir é a choigeartú le méid scáileáin an fheiste ar a bhfuil sé á fheiceáil. Cinntíonn sé seo go bhfuil cuma mhaith ar an ríomhphost ar ghléasanna deisce agus soghluaiste araon.
  3. Líne ábhar soiléir agus gonta: Tá líne ábhair shoiléir agus bheacht tábhachtach d’úsáideoirí fón póca toisc nach bhfeiceann siad ach an chéad chúpla focal den líne ábhair ina bpána réamhamhairc ríomhphoist. Ba chóir go mbeadh sé gearr agus go léireodh sé go cruinn ábhar an ríomhphoist. Féadfaidh an fad carachtair is fearr is féidir le líne ábhair ríomhphoist a bheith éagsúil ag brath ar roinnt fachtóirí, amhail an t-ábhar ríomhphoist, an lucht féachana, agus an cliant ríomhphoist a úsáidtear. Mar sin féin, molann an chuid is mó de na saineolaithe línte ábhair ríomhphoist a choinneáil gearr agus go pointe, go hiondúil idir 41-50 carachtar nó 6-8 focal. Ar ghléasanna soghluaiste, féadfar línte ábhair atá níos faide ná 50 carachtar a ghearradh amach, agus i gcásanna áirithe ní fhéadfaidh siad ach an chéad chúpla focal den líne ábhair a thaispeáint. Is féidir leis seo a dhéanamh deacair don fhaighteoir príomhtheachtaireacht an ríomhphoist a thuiscint agus d’fhéadfadh laghdú a dhéanamh ar an dóchúlacht go n-osclófar an ríomhphost.
  4. Réamhtheideal: Is éard atá i réamhtheideal ríomhphoist ná achoimre ghearr ar ábhar ríomhphoist a fheictear in aice le líne an ábhair nó faoina bhun i mbosca isteach an chliaint ríomhphoist. Is gné thábhachtach é a d'fhéadfadh tionchar a bheith aige ar ráta oscailte do ríomhphoist nuair a bhíonn tú optamaithe. Ionchorpraíonn formhór na gcliant HTML agus CSS chun a chinntiú go bhfuil an téacs réamhtheidil socraithe i gceart.
<!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. Leagan amach aon cholúin: Tá sé níos éasca ríomhphoist atá deartha le leagan amach aoncholúin a léamh ar ghléasanna soghluaiste. Ba chóir an t-ábhar a eagrú i seicheamh loighciúil agus a chur i láthair i bhformáid shimplí atá éasca le léamh. Má tá colúin iolracha agat, is féidir le CSS na colúin a eagrú go galánta i leagan amach aoncholúin.

Seo an Leagan amach ríomhphoist HTML is é sin 2 cholún ar an deasc agus a thiteann go colún amháin ar scáileáin mhóibíleacha:

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

Seo an Leagan amach ríomhphoist HTML is é sin 3 cholún ar an deasc agus a thiteann go colún amháin ar scáileáin mhóibíleacha:

<!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. Mód Solas agus Dorcha: droichead tacaíonn cliaint ríomhphoist le modh éadrom agus dorcha CSS prefers-color-scheme chun freastal ar roghanna an úsáideora. Bí cinnte úsáid a bhaint as cineálacha íomhá áit a bhfuil cúlra trédhearcach agat. Seo sampla cód.
<!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. Clónna móra inléite: Ba chóir an clómhéid agus an stíl a roghnú ionas go mbeidh an téacs éasca le léamh ar scáileán beag. Úsáid clómhéid 14pt ar a laghad agus seachain clónna atá deacair a léamh ar scáileáin bheaga. Tá an-dóchúlacht ag clónna a úsáidtear go coitianta go ndéanfar iad a rindreáil go comhsheasmhach ar fud na gcliant ríomhphoist éagsúla, mar sin is clónna sábháilte go hiondúil úsáid a bhaint as Arial, Helvetica, Times New Roman, Georgia, Verdana, Tahoma agus Trebuchet MS. Má úsáideann tú cló saincheaptha, cinntigh go n-aithneofar cló cúltaca i do 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. Úsáid optamach íomhánna: Is féidir le híomhánna moill a chur ar amanna ualaigh agus seans nach dtaispeánfar i gceart iad ar gach gléas soghluaiste. Bain úsáid as íomhánna go coigilteach, agus cinntigh go bhfuil siad de mhéid agus comhbhrúite le haghaidh féachana soghluaiste. Bí cinnte an téacs alt a líonadh isteach do d’íomhánna sa chás go gcuireann an cliant ríomhphoist bac orthu. Ba cheart gach íomhá a stóráil agus tagairt a dhéanamh dó ó shuíomh Gréasáin slán (SSL). Seo cód samplach d'íomhánna sofhreagracha i ríomhphost 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. Glan glao-go-gníomh (CTA): Tá CTA soiléir agus feiceálach tábhachtach in aon ríomhphost, ach tá sé thar a bheith tábhachtach i ríomhphost soghluaiste-chairdiúil. Déan cinnte go bhfuil an CTA éasca le fáil agus go bhfuil sé mór go leor chun cliceáil ar ghléas soghluaiste. Má ionchorpraíonn tú cnaipí, is féidir leat a chinntiú go bhfuil tú scríofa i CSS le clibeanna stíl inlíne freisin:
<!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. Ábhar gairid agus gonta: Coinnigh ábhar an ríomhphoist gearr agus go pointe. Féadfaidh an teorainn charachtair do r-phost HTML athrú ag brath ar an gcliant ríomhphoist a úsáidtear. Mar sin féin, cuireann formhór na gcliant ríomhphoist uasteorainn mhéide i bhfeidhm do ríomhphoist, go hiondúil idir 1024-2048 cilibheart (KB), a chuimsíonn an cód HTML agus aon íomhánna nó ceangaltáin. Úsáid fo-cheannteidil, pointí le hurchair, agus teicnící formáidithe eile chun an t-ábhar a scanadh go héasca agus tú ag scrollú agus ag léamh ar scáileán beag.
  2. Eilimintí idirghníomhacha: Ionchorprú eilimintí idirghníomhacha a tharraingeoidh aird do shíntiúsóra, méadóidh sé rannpháirtíocht, tuiscint agus rátaí comhshó ó do ríomhphost. GIFanna beoite, timers comhaireamh síos, físeáin, agus gnéithe eile tacaíocht ag formhór na gcliant ríomhphoist smartphone.
  3. Pearsanú: Má dhéantar pearsantú ar an salutation agus ar an ábhar do shíntiúsóir ar leith is féidir rannpháirtíocht a spreagadh go suntasach, ach bí cinnte go bhfaigheann tú ceart é! E.g. Tá sé tábhachtach go mbeadh fallbacks ann mura bhfuil sonraí i réimse céadainm.
  4. Ábhar Dinimiciúla: Is féidir le deighilt agus saincheapadh an ábhair do rátaí díliostála a laghdú agus do shíntiúsóirí a choinneáil gafa.
  5. Comhtháthú Feachtais: Tá an cumas ag formhór na soláthróirí seirbhíse ríomhphoist nua-aimseartha a cheangal go huathoibríoch Teaghráin ceisteanna feachtais UTM do gach nasc ionas gur féidir leat féachaint ar ríomhphost mar chainéal anailísíochta.
  6. Lárionad Tosaíochta: Tá margaíocht ríomhphoist ró-thábhachtach le haghaidh cur chuige rogha an diúltaithe nó rogha an diúltaithe i leith ríomhphoist. Is bealach iontach é ionad tosaíochta a ionchorprú inar féidir le do shíntiúsóirí cé chomh minic agus a fhaigheann siad ríomhphoist a athrú agus cén t-ábhar atá tábhachtach dóibh chun clár láidir ríomhphoist a choinneáil le síntiúsóirí gníomhacha!
  7. Tástáil, Tástáil, Tástáil: Bí cinnte do ríomhphost a thástáil ar ilghléasanna nó úsáid a bhaint as feidhmchlár chun réamhamharc ar do ríomhphoist thar chliaint ríomhphoist a chinntiú go bhfuil cuma mhaith air agus go bhfeidhmíonn sé i gceart ar mhéideanna scáileáin éagsúla agus córais oibriúcháin SULA seolann tú. Litmus Tuairiscíonn go bhfuil na 3 thimpeallacht oscailte soghluaiste is coitianta fós mar an gcéanna: Apple iPhone (iOS Mail), Google Android, Apple iPad (iPadOS Mail). Chomh maith leis sin, ionchorpraigh éagsúlachtaí tástála ar do línte ábhair agus ábhar chun do rátaí oscailte agus cliceáil-trí a fheabhsú. Ionchorpraíonn go leor ardáin ríomhphoist tástáil uathoibrithe anois a dhéanfaidh sampláil ar an liosta, a aithneoidh éagsúlacht bhuaiteach, agus a sheolfaidh an ríomhphost is fearr chuig na síntiúsóirí eile.

Má tá do chuideachta ag streachailt le ríomhphoist shofhreagracha a dhearadh, a thástáil agus a chur i bhfeidhm atá ag tiomáint rannpháirtíochta, ná bíodh aon leisce ort teagmháil a dhéanamh le mo ghnólacht. DK New Media taithí aige ar fhorfheidhmiú beagnach gach soláthraí seirbhíse ríomhphoist (ESP).

Douglas Karr

Douglas Karr is CMO de OpenINSIGHTS agus bunaitheoir an Martech Zone. Chuidigh Douglas leis na dosaenacha de ghnólachtaí nuathionscanta MarTech ar éirigh leo, chuidigh sé le dícheall cuí os cionn $5 billiún in éadálacha agus infheistíochtaí Martech, agus leanann sé ag cabhrú le cuideachtaí a gcuid straitéisí díolacháin agus margaíochta a chur i bhfeidhm agus a uathoibriú. Is saineolaí agus cainteoir ar chlaochlú digiteach agus MarTech é Douglas atá aitheanta go hidirnáisiúnta. Is údar foilsithe é Douglas freisin ar threoirleabhar Dummie agus ar leabhar ceannaireachta gnó.

Airteagail gaolmhara

Ar ais go barr an cnaipe
Dún

Braitheadh ​​Adblock

Martech Zone in ann an t-ábhar seo a sholáthar duit gan aon chostas mar go ndéanaimid airgead ar ár suíomh trí ioncam fógraíochta, naisc chleamhnaithe agus urraíochtaí. Bheimis buíoch dá mbainfeá do bhacadóir fógraí agus tú ag féachaint ar ár suíomh.