Margaidheachd post-d & fèin-ghluasadMargaidheachd gluasadach is clàr

16 Cleachdaidhean post-d HTML càirdeil gluasadach as fheàrr a mheudaicheas suidheachadh bogsa a-steach agus conaltradh

Ann an 2023, tha e coltach gum bi fòn-làimhe a’ dol thairis air deasg mar am prìomh inneal airson post-d fhosgladh. Gu dearbh, lorg HubSpot sin 46 às a 'cheud de gach post-d a tha fosgailte a-nis ri fhaicinn air fòn-làimhe. Mura h-eil thu a 'dealbhadh puist-d airson fòn-làimhe, tha thu a' fàgail tòrr conaltraidh agus airgead air a 'bhòrd.

  1. Dearbhadh post-d: A ’dèanamh cinnteach à do tha puist-d air an dearbhadh chun an àrainn cur agus IP tha seòladh deatamach airson faighinn chun bhogsa a-steach agus chan ann gu pasgan sgudail no spama. Tha e deatamach cuideachd, gu dearbh, gun toir thu seachad dòigh air tarraing a-mach às a’ phost-d a’ cleachdadh àrd-ùrlar a tha a’ toirt a-steach ceangal gun fho-sgrìobhadh.
  2. Dealbhadh freagairteach: Tha HTML bu chòir post-dealain a bhith air a dhealbhadh gus a bhith freagairteach, a tha a’ ciallachadh gun urrainn dha atharrachadh gu meud sgrion an inneil air a bheilear ga fhaicinn. Nì seo cinnteach gu bheil am post-d a’ coimhead math air gach cuid innealan deasg is gluasadach.
  3. Loidhne cuspair soilleir agus pongail: Tha loidhne cuspair soilleir agus pongail cudromach do luchd-cleachdaidh fònaichean-làimhe oir is dòcha nach fhaic iad ach a’ chiad beagan fhaclan den loidhne cuspair anns a’ phana ro-shealladh post-d aca. Bu chòir dha a bhith goirid agus a’ nochdadh susbaint a’ phuist-d gu ceart. Faodaidh an fhad caractar as fheàrr de loidhne cuspair post-d atharrachadh a rèir grunn nithean, leithid susbaint post-d, an luchd-èisteachd, agus an teachdaiche post-d a thathar a’ cleachdadh. Ach, tha a’ mhòr-chuid de dh’eòlaichean a’ moladh loidhnichean cuspair post-d a chumail goirid agus chun na h-ìre, mar as trice eadar 41-50 caractar no 6-8 facal. Air innealan gluasadach, dh’ fhaodadh loidhnichean cuspair nas fhaide na 50 caractar a bhith air an gearradh dheth, agus ann an cuid de chùisean, is dòcha nach seall iad ach a’ chiad beagan fhaclan den loidhne cuspair. Faodaidh seo a dhèanamh duilich don neach a gheibh e prìomh theachdaireachd a’ phuist-d a thuigsinn agus dh’ fhaodadh e lùghdachadh a dhèanamh air an coltas gun tèid am post-d fhosgladh.
  4. Preheader: Tha ro-cheann post-d na gheàrr-chunntas goirid de shusbaint post-d a nochdas ri taobh no fon loidhne cuspair ann am bogsa a-steach teachdaiche post-d. Tha e na eileamaid chudromach a bheir buaidh air ìre fosgailte do phuist-d nuair a thèid a bharrrachadh. Bidh a’ mhòr-chuid de luchd-dèiligidh a’ toirt a-steach HTML agus CSS gus dèanamh cinnteach gu bheil an teacsa ro-cheann air a chuir air dòigh ceart.
<!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. Cruth aon-colbh: Tha e nas fhasa puist-d a tha air an dealbhadh le cruth aon-cholbh a leughadh air innealan gluasadach. Bu chòir an susbaint a bhith air a chuir air dòigh ann an òrdugh loidsigeach agus air a thaisbeanadh ann an cruth sìmplidh, furasta a leughadh. Ma tha grunn cholbhan agad, faodaidh tu a bhith a’ cleachdadh CSS na colbhan a chuir air dòigh gu gràsmhor ann an cruth aon cholbh.

Seo an Cruth post-d HTML is e sin 2 cholbh air an deasg agus a’ tuiteam gu aon cholbh air scrionaichean gluasadach:

<!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 Cruth post-d HTML is e sin 3 cholbh air an deasg agus a’ tuiteam gu aon cholbh air scrionaichean gluasadach:

<!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. Modh aotrom is dorcha: As bidh teachdaichean post-d a’ toirt taic do mhodh aotrom is dorcha CSS prefers-color-scheme gus coinneachadh ri roghainnean an neach-cleachdaidh. Dèan cinnteach gun cleachd thu seòrsaichean ìomhaighean far a bheil cùl-raon follaiseach agad. Seo eisimpleir 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. Cruthan mòra, so-leughaidh: Bu chòir meud a’ chruth-clò agus an stoidhle a thaghadh gus an teacsa a dhèanamh furasta a leughadh air scrion bheag. Cleachd co-dhiù meud cruth-clò 14pt agus seachain clòidean a tha doirbh a leughadh air scrionaichean beaga. Tha coltas ann gum bi clòthan a chleachdar gu cumanta a’ toirt seachad gu cunbhalach thar diofar teachdaichean post-d, agus mar sin tha cleachdadh Arial, Helvetica, Times New Roman, Georgia, Verdana, Tahoma, agus Trebuchet MS mar chlàran sàbhailte. Ma chleachdas tu cruth-clò àbhaisteach, dèan cinnteach gu bheil cruth-clò fallback air a chomharrachadh nad 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. Cleachdadh as fheàrr de dhealbhan: Faodaidh dealbhan amannan luchdaidh a lughdachadh agus is dòcha nach seall iad gu ceart air a h-uile inneal gluasadach. Cleachd ìomhaighean gu gann, agus dèan cinnteach gu bheil iad meud agus air a dhlùthadh airson coimhead gluasadach. Dèan cinnteach gun lìon thu a-steach an teacsa alt airson na h-ìomhaighean agad ma bhios an neach-dèiligidh post-d gam bacadh. Bu chòir a h-uile dealbh a stòradh agus iomradh a thoirt orra bho làrach-lìn tèarainte (SSL). Seo eisimpleir de chòd de dhealbhan freagairteach ann am post-d 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 gairm-gu-gnìomh (CTA): Tha CTA soilleir agus follaiseach cudromach ann am post-d sam bith, ach tha e gu sònraichte cudromach ann am post-d càirdeil gluasadach. Dèan cinnteach gu bheil an CTA furasta a lorg agus gu bheil e mòr gu leòr airson a bhith air a bhriogadh air inneal gluasadach. Ma bheir thu a-steach putanan, faodaidh tu dèanamh cinnteach gu bheil thu air an sgrìobhadh ann an CSS le tagaichean stoidhle in-loidhne cuideachd:
<!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. Susbaint goirid agus pongail: Cùm susbaint a’ phuist-d goirid agus chun a’ phuing. Faodaidh an ìre caractar airson post-d HTML atharrachadh a rèir an neach-dèiligidh post-d a thathar a’ cleachdadh. Ach, bidh a’ mhòr-chuid de luchd-cleachdaidh post-d a’ cur crìoch meud as àirde airson puist-d, mar as trice eadar 1024-2048 kilobytes (KB), a tha a’ toirt a-steach an dà chuid an còd HTML agus ìomhaighean no ceanglachan sam bith. Cleachd fo-chinn, puingean peileir, agus dòighean cruthachaidh eile gus an susbaint a dhèanamh furasta a sganadh fhad ‘s a tha thu a’ scrolladh agus a ’leughadh air scrion bheag.
  2. Feartan eadar-ghnìomhach: gabhail a-steach eileamaidean eadar-ghnìomhach bidh sin a’ glacadh aire an neach-clàraidh agad ag àrdachadh ìrean conaltraidh, tuigse agus tionndaidh bhon phost-d agad. GIFs beòthail, timers cunntadh sìos, bhideothan, agus eileamaidean eile a’ faighinn taic bhon mhòr-chuid de luchd-dèiligidh post-d fòn cliste.
  3. Pearsanachadh: Le bhith a’ pearsanachadh beannachd agus susbaint neach-clàraidh sònraichte faodaidh e conaltradh a bhrosnachadh gu mòr, dìreach dèan cinnteach gum faigh thu ceart e! E.g. Tha e cudromach gun tèid thu air ais mura h-eil dàta ann an raon ciad ainm.
  4. Susbaint fiùghantach: Faodaidh sgaradh agus gnàthachadh an t-susbaint na h-ìrean dì-chlàraidh agad a lughdachadh agus do luchd-aontachaidh a chumail an sàs.
  5. Amalachadh iomairt: Tha comas aig a’ mhòr-chuid de sholaraichean seirbheis post-d an latha an-diugh cuir a-steach gu fèin-ghluasadach Ceistean iomairt UTM airson a h-uile ceangal gus an urrainn dhut post-d fhaicinn mar sheanal ann an anailisean.
  6. Ionad Roghainn: Tha margaidheachd post-d ro chudromach airson dìreach dòigh-obrach tarraing-a-steach no tarraing a-mach airson puist-d. Tha a bhith a’ toirt a-steach ionad roghainn far am faod na fo-sgrìobhaichean agad atharrachadh cho tric sa gheibh iad puist-d agus dè an susbaint a tha cudromach dhaibh na dhòigh air leth airson prògram post-d làidir a chumail le luchd-aontachaidh an sàs!
  7. Deuchainn, deuchainn, deuchainn: Dèan cinnteach gun dèan thu deuchainn air do phost-d air iomadh inneal no cleachd tagradh gu ro-shealladh air na puist-d agad thairis air teachdaichean post-d gus dèanamh cinnteach gu bheil e a’ coimhead math agus ag obair gu ceart air diofar mheudan sgrion agus siostaman obrachaidh mus cuir thu. Litmus ag aithris gu bheil na 3 àrainneachdan fosgailte gluasadach as mòr-chòrdte fhathast mar an ceudna: Apple iPhone (iOS Mail), Google Android, Apple iPad (iPadOS Mail). Cuideachd, cuir a-steach atharrachaidhean deuchainn de na loidhnichean cuspair agad agus an t-susbaint agad gus na h-ìrean fosgailte is cliog agad a leasachadh. Bidh mòran de àrd-ùrlaran post-d a-nis a’ toirt a-steach deuchainnean fèin-ghluasadach a nì sampall den liosta, a chomharraicheas atharrachadh a bhuannaicheas, agus a chuireas am post-d as fheàrr chun luchd-aontachaidh a tha air fhàgail.

Ma tha do chompanaidh a’ strì le bhith a’ dealbhadh, a’ dèanamh deuchainn, agus a’ cur an gnìomh puist-d freagairteach gluasadach a tha a’ stiùireadh conaltradh, na bi leisg fios a chuir chun chompanaidh agam. DK New Media tha eòlas aige ann a bhith a’ buileachadh cha mhòr a h-uile solaraiche seirbheis post-d (gu sòn- raichte).

Douglas Karr

Douglas Karr tha CMO de OSNAIDHEAN BHO IFRINN agus am fear a stèidhich an Martech Zone. Tha Douglas air dusanan de luchd-tòiseachaidh soirbheachail MarTech a chuideachadh, air cuideachadh le dìcheall iomchaidh de chòrr air $ 5 billean ann an togail agus tasgaidhean Martech, agus a’ leantainn air adhart a ’cuideachadh chompanaidhean ann a bhith a’ buileachadh agus ag fèin-ghluasad an ro-innleachdan reic is margaidheachd. Tha Douglas na chruth-atharrachadh didseatach a tha aithnichte gu h-eadar-nàiseanta agus eòlaiche agus neach-labhairt MarTech. Tha Dùbhghlas cuideachd na ùghdar foillsichte air iùl Dummie agus leabhar stiùireadh gnìomhachais.

artaigealan co-cheangailte

Putan air ais dhan mhullach
Dùin

Adblock air a lorg

Martech Zone comasach air an t-susbaint seo a thoirt dhut gun chosgais sam bith oir bidh sinn a’ dèanamh airgead air an làrach againn tro theachd-a-steach sanasachd, ceanglaichean ceangailte, agus urrasachd. Bhithinn toilichte nan toireadh tu air falbh an neach-bacadh sanasachd agad fhad ‘s a tha thu a’ coimhead air an làrach againn.