Imèl Maketing & OtomatikMaketing mobil ak tablèt

16 Pi bon pratik imel HTML zanmitay mobil ki maksimize plasman ak angajman nan bwat resepsyon

Nan 2023, li posib ke mobil pral depase Desktop kòm aparèy prensipal pou ouvèti imèl. An reyalite, HubSpot te jwenn sa 46 pousan nan tout imel ouvè kounye a rive sou mobil. Si ou pa ap desine imèl pou mobil, w ap kite anpil angajman ak lajan sou tab la.

  1. Otantifikasyon imel: Asire w imel yo otantifye nan domèn nan voye ak IP adrès la enpòtan anpil pou w ale nan bwat resepsyon an epi li pa ale nan yon katab tenten oswa spam. Li esansyèl tou, nan kou, ke ou bay yon mwayen pou chwazi soti nan imel la lè l sèvi avèk yon platfòm ki enkòpore yon lyen dezabònman.
  2. Konsepsyon reponn: Jounal HTML imel ta dwe fèt pou reponn, ki vle di ke li ka ajiste nan gwosè a ekran nan aparèy la sou kote yo te wè li. Sa a asire ke imel la sanble bon sou tou de Desktop ak aparèy mobil.
  3. Sijè klè ak kout: Yon liy sijè klè ak kout enpòtan pou itilizatè mobil yo paske yo ka sèlman wè premye mo yo nan liy sijè a nan fenèt aperçu imèl yo. Li ta dwe kout epi byen reflete kontni imèl la. Longè karaktè pi bon nan yon liy sijè imel ka varye selon yon kantite faktè, tankou kontni imel la, odyans lan, ak kliyan an imel ke yo te itilize. Sepandan, pifò ekspè rekòmande pou kenbe liy sijè imel kout ak nan pwen an, tipikman ant 41-50 karaktè oswa 6-8 mo. Sou aparèy mobil, liy sijè ki pi long pase 50 karaktè yo ka koupe, epi nan kèk ka, yo ka sèlman montre premye mo yo nan liy sijè a. Sa ka fè li difisil pou moun k ap resevwa a konprann mesaj prensipal la nan imèl la epi li ka diminye chans pou imel la louvri.
  4. Preheader: Yon preheader imel se yon rezime kout sou kontni yon imèl ki parèt akote oswa anba liy sijè a nan bwat resepsyon yon kliyan imel la. Li se yon eleman enpòtan ki ka afekte pousantaj ouvè imèl ou lè optimize. Pifò kliyan enkòpore HTML ak CSS asire ke tèks la preheader byen mete kanpe.
<!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. Layout yon sèl kolòn: Imèl ki fèt ak yon layout yon sèl kolòn yo pi fasil pou li sou aparèy mobil. Kontni an ta dwe òganize nan yon sekans lojik epi prezante nan yon fòma senp, fasil pou li. Si ou gen plizyè kolòn, itilize CSS ka byen òganize kolòn yo nan yon layout yon sèl kolòn.

Isit la nan yon Layout imel HTML sa se 2 kolòn sou Desktop ak efondre nan yon sèl kolòn sou ekran mobil:

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

Isit la nan yon Layout imel HTML sa se 3 kolòn sou Desktop ak efondre nan yon sèl kolòn sou ekran mobil:

<!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. Limyè ak mòd nwa: pon kliyan imel sipòte mòd limyè ak nwa CSS prefers-color-scheme pou akomode preferans itilizatè a. Asire w ou itilize kalite imaj kote ou gen yon background transparan. Men yon egzanp kò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. Gwo, polis lizib: Gwosè a ak style yo ta dwe chwazi pou fè tèks la fasil pou li sou yon ti ekran. Sèvi ak yon gwosè polis omwen 14pt epi evite itilize polis ki difisil pou li sou ti ekran. Polis yo itilize souvan gen yon gwo chans pou yo rann toujou atravè diferan kliyan imel, kidonk lè l sèvi avèk Arial, Helvetica, Times New Roman, Georgia, Verdana, Tahoma, ak Trebuchet MS se tipikman polis ki an sekirite. Si w sèvi ak yon polis koutim, asire w ke ou gen yon font sekou idantifye nan CSS ou a:
<!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. Itilizasyon pi bon nan imaj: Imaj yo ka ralanti tan chaj epi yo ka pa parèt byen sou tout aparèy mobil. Sèvi ak imaj ti kras, epi asire w ke yo gwosè ak konprese pou gade mobil. Asire w ou ranpli tèks alt la pou imaj ou yo nan ka kliyan imèl la bloke yo. Tout imaj yo ta dwe estoke epi refere yo soti nan yon sit entènèt ki an sekirite (Ssl). Men egzanp kòd imaj ki reponn nan yon imèl 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. Klè apèl-a-aksyon (Kta): Yon CTA klè ak enpòtan enpòtan nan nenpòt imel, men li enpòtan espesyalman nan yon imèl ki zanmitay mobil. Asire w ke CTA a fasil pou jwenn e ke li se gwo ase pou klike sou yon aparèy mobil. Si ou enkòpore bouton, ou ka asire ke ou ekri yo nan CSS ak tags style inline tou:
<!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. Kontni kout ak kout: Kenbe kontni an nan imèl la kout ak nan pwen an. Limit karaktè pou yon imèl HTML ka varye selon kliyan imel yo itilize a. Sepandan, pifò kliyan imel enpoze yon limit gwosè maksimòm pou imel, anjeneral ant 1024-2048 kilobyte (KB), ki gen ladan kòd HTML ak nenpòt imaj oswa atachman. Sèvi ak soutit, pwen bal, ak lòt teknik fòma pou fè kontni an fasil eskane pandan w ap defile ak li sou yon ti ekran.
  2. Eleman entèaktif: enkòporamman eleman entèaktif ki kaptire atansyon abònen ou a pral ogmante angajman, konpreyansyon, ak pousantaj konvèsyon nan imel ou. GIF anime, revèy dekont, videyo, ak lòt eleman yo sipòte pa majorite kliyan imel smartphone yo.
  3. Pèsonalizasyon: Pèsonalize salitasyon an ak kontni pou yon abònen espesifik ka siyifikativman kondwi angajman, jis asire w ke ou jwenn li dwat! Pa egzanp. Èske w gen repli si pa gen okenn done nan yon jaden prenon enpòtan.
  4. Kontni dinamik: Segmantasyon ak personnalisation nan kontni an ka diminye pousantaj dezabònman ou yo epi kenbe abonnés ou yo angaje.
  5. Entegrasyon kanpay: Pifò founisè sèvis imel modèn yo gen kapasite pou mete otomatikman UTM kanpay requêtestrings pou chak lyen pou ou ka wè imel kòm yon kanal nan analytics.
  6. Sant Preferans: Maketing imel twò enpòtan pou jis yon apwòch opt-in oswa opt-out nan imèl. Enkòpore yon sant preferans kote abonnés ou yo ka chanje konbyen fwa yo resevwa imèl ak ki kontni ki enpòtan pou yo se yon fason kokenn pou kenbe yon pwogram imel solid ak abonnés angaje!
  7. Tès, Tès, Tès: Asire w ou teste imel ou sou plizyè aparèy oswa itilize yon aplikasyon pou aperçu imèl ou atravè kliyan imel pou asire ke li sanble bon ak fonksyone byen sou diferan gwosè ekran ak sistèm opere ANVAN ou voye. Lidr rapòte ke 3 pi popilè anviwònman ouvè mobil yo kontinye ap menm bagay la tou: Apple iPhone (iOS Mail), Google Android, Apple iPad (iPadOS Mail). Epitou, enkòpore varyasyon tès nan liy sijè ou yo ak kontni pou amelyore pousantaj ouvè ak klike sou ou. Anpil tribin imel kounye a enkòpore tès otomatik ki pral echantiyon lis la, idantifye yon varyasyon genyen, epi voye pi bon imel la bay abonnés ki rete yo.

Si konpayi ou an ap lite ak konsepsyon, tès, ak aplikasyon imel ki reponn mobil ki mennen nan angajman, pa ezite kontakte konpayi mwen an. DK New Media gen eksperyans nan aplikasyon an nan prèske chak founisè sèvis imel (Piseta).

Douglas Karr

Douglas Karr se CMO nan OpenINSIGHTS ak fondatè a nan Martech Zone. Douglas te ede plizyè douzèn demaraj MarTech ki gen siksè, li te ede nan dilijans plis pase $5 milya nan akizisyon ak envestisman Martech, epi li kontinye ede konpayi yo nan mete ann aplikasyon ak otomatize estrateji lavant ak maketing yo. Douglas se yon transfòmasyon dijital entènasyonalman rekonèt ak ekspè MarTech ak oratè. Douglas se tou yon otè pibliye nan yon gid Dummie a ak yon liv lidèchip biznis.

Atik ki gen rapò

Retounen nan bouton tèt
Fèmen

Adblock Detekte

Martech Zone se kapab ba ou kontni sa a gratis paske nou monetize sit nou an atravè revni anons, lyen afilye, ak parennaj. Nou ta apresye si ou ta retire bloke anons ou a pandan w ap gade sit nou an.