Email Marketing u AwtomazzjoniMarketing tal-Mobile u l-Pilloli

16 L-Aħjar Prattiki tal-Email HTML favur il-Mowbajl Li Jimmassimizzaw it-Tqegħid u l-Ingaġġ tal-Inbox

Fl-2023, huwa probabbli li l-mowbajl se jaqbeż id-desktop bħala l-apparat primarju għall-ftuħ tal-email. Fil-fatt, HubSpot sab dan Mija 46 tal-email kollha tiftaħ issa jseħħu fuq il-mowbajl. Jekk m'intix qed tfassal emails għall-mowbajl, qed tħalli ħafna impenn u flus fuq il-mejda.

  1. Awtentikazzjoni tal-Email: Tiżgura tiegħek emails huma awtentikati għad-dominju li jibgħat u IP l-indirizz huwa kritiku biex wieħed jasal għall-inbox u mhux jintbagħat lejn folder junk jew spam. Huwa wkoll essenzjali, ovvjament, li tipprovdi mezz biex tagħżel li ma tużax l-email billi tuża pjattaforma li tinkorpora link ta' unsubscribe.
  2. Disinn li Jirrispondi: il HTML email għandu jkun iddisinjati biex ikunu reattivi, li jfisser li tista 'taġġusta għad-daqs tal-iskrin tal-apparat li fuqu tkun qed tara. Dan jiżgura li l-email tidher tajba kemm fuq id-desktop kif ukoll fuq it-tagħmir mobbli.
  3. Linja tas-suġġett ċara u konċiża: Linja tas-suġġett ċara u konċiża hija importanti għall-utenti tal-mowbajl għaliex jistgħu jaraw biss l-ewwel ftit kliem tal-linja tas-suġġett fil-panew tal-preview tal-email tagħhom. Għandu jkun qasir u jirrifletti b'mod preċiż il-kontenut tal-email. It-tul tal-karattri ottimali ta 'linja tas-suġġett tal-email jista' jvarja skont numru ta 'fatturi, bħall-kontenut tal-email, l-udjenza, u l-klijent tal-email li qed jintuża. Madankollu, il-biċċa l-kbira tal-esperti jirrakkomandaw li jżommu l-linji tas-suġġett tal-email qosra u sal-punt, tipikament bejn 41-50 karattru jew 6-8 kelma. Fuq apparat mobbli, linji tas-suġġett li huma itwal minn 50 karattru jistgħu jinqatgħu, u f'xi każijiet, jistgħu juru biss l-ewwel ftit kliem tal-linja tas-suġġett. Dan jista’ jagħmilha diffiċli għar-riċevitur biex jifhem il-messaġġ ewlieni tal-email u jista’ jnaqqas il-probabbiltà li l-email tinfetaħ.
  4. Preheader: Preheader tal-email huwa sommarju qasir tal-kontenut ta' email li jidher ħdejn jew taħt il-linja tas-suġġett fl-inbox ta' klijent tal-email. Huwa element importanti li jista 'jkollok impatt fuq ir-rata miftuħa tal-emails tiegħek meta ottimizzati. Il-biċċa l-kbira tal-klijenti jinkorporaw HTML u CSS biex jiżguraw li t-test tal-preheader ikun stabbilit sew.
<!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. Tqassim ta' kolonna waħda: L-emails li huma ddisinjati b'tqassim ta' kolonna waħda huma aktar faċli biex jinqraw fuq apparat mobbli. Il-kontenut għandu jkun organizzat f'sekwenza loġika u ppreżentat f'format sempliċi u faċli biex jinqara. Jekk għandek kolonni multipli, l-użu tas-CSS jista 'jorganizza b'mod grazzjuż il-kolonni f'tqassim ta' kolonna waħda.

Hawn It-tqassim tal-email HTML jiġifieri 2 kolonni fuq id-desktop u kollass għal kolonna waħda fuq skrins mobbli:

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

Hawn It-tqassim tal-email HTML jiġifieri 3 kolonni fuq id-desktop u kollass għal kolonna waħda fuq skrins mobbli:

<!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. Modalità Dawl u Dlam: pont Il-klijenti tal-email jappoġġjaw il-modalità tad-dawl u d-dlam CSS prefers-color-scheme biex takkomoda l-preferenzi tal-utent. Kun żgur li tutilizza tipi ta 'immaġni fejn għandek sfond trasparenti. Hawn eżempju ta 'kodiċi.
<!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. Fonts kbar u li jinqraw: Id-daqs tat-tipa u l-istil għandhom jintgħażlu biex it-test ikun faċli biex jinqara fuq skrin żgħir. Uża mill-inqas daqs ta' font ta' 14pt u evita li tuża fonts li huma diffiċli biex jinqraw fuq skrins żgħar. Il-fonts użati b'mod komuni għandhom probabbiltà għolja li jintwerew b'mod konsistenti fuq klijenti tal-email differenti, għalhekk l-użu ta' Arial, Helvetica, Times New Roman, Georgia, Verdana, Tahoma u Trebuchet MS huma tipikament fonts sikuri. Jekk tuża font personalizzata, kun żgur li jkollok font ta' riżerva identifikata fis-CSS tiegħek:
<!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. Użu ottimali tal-immaġini: L-immaġini jistgħu jnaqqsu l-ħinijiet tat-tagħbija u jistgħu ma jintwerewx sew fuq it-tagħmir mobbli kollu. Uża immaġini kemxejn, u kun żgur li huma ta 'daqs u ikkompressat għall-wiri mobbli. Kun żgur li timla t-test alternattiv għall-immaġini tiegħek fil-każ li l-klijent tal-email jimblokkahom. L-immaġini kollha għandhom jiġu maħżuna u msemmija minn websajt sigura (SSL). Hawn kodiċi eżempju ta 'immaġini li jirrispondu f'email 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. Sejħa ċara għall-azzjoni (CTA): CTA ċara u prominenti hija importanti fi kwalunkwe email, iżda hija speċjalment importanti f'email faċli għall-mowbajl. Kun żgur li s-CTA hija faċli biex issibha u li hija kbira biżżejjed biex tiġi kklikkjata fuq apparat mobbli. Jekk tinkorpora buttuni, tista' tiżgura li jkollokhom miktuba f'CSS b'tikketti ta' stil inline wkoll:
<!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. Kontenut qasir u konċiż: Żomm il-kontenut tal-email qasir u fil-punt. Il-limitu ta' karattri għal email HTML jista' jvarja skont il-klijent tal-email li qed jintuża. Madankollu, ħafna mill-klijenti tal-email jimponu limitu massimu ta' daqs għall-emails, tipikament bejn 1024-2048 kilobytes (KB), li tinkludi kemm il-kodiċi HTML kif ukoll kwalunkwe immaġini jew annessi. Uża sottotitli, punti tal-balal, u tekniki oħra ta' formattjar biex il-kontenut ikun jista' jiġi skannjat faċilment waqt li tiskrollja u taqra fuq skrin żgħir.
  2. Elementi interattivi: Jinkorporaw elementi interattivi li jaqbdu l-attenzjoni tal-abbonat tiegħek se jgħollu r-rati tal-impenn, il-komprensjoni u l-konverżjoni mill-email tiegħek. GIFs Animati, tajmers tal-countdown, vidjows, u elementi oħra huma appoġġjati mill-maġġoranza tal-klijenti tal-email tal-ismartphone.
  3. Personalizzazzjoni: Il-personalizzazzjoni tat-tislima u l-kontenut għal abbonat speċifiku tista 'tmexxi l-impenn b'mod sinifikanti, kun żgur li ġġibu tajjeb! Eż. Li jkollok fallbacks jekk ma jkun hemm l-ebda data fil-qasam tal-ewwel isem huwa importanti.
  4. Kontenut Dinamika: Is-segmentazzjoni u l-adattament tal-kontenut jistgħu jnaqqsu r-rati ta' tneħħija tal-abbonament tiegħek u jżommu l-abbonati tiegħek involuti.
  5. Integrazzjoni tal-Kampanja: Il-biċċa l-kbira tal-fornituri moderni tas-servizz tal-email għandhom il-kapaċità li jwaħħlu awtomatikament Strings ta' mistoqsijiet tal-kampanja UTM għal kull link sabiex tkun tista' tara l-email bħala kanal fl-analitika.
  6. Ċentru ta' Preferenza: Il-marketing bl-email huwa importanti wisq għal approċċ ta' opt-in jew opt-out għall-emails. L-inkorporazzjoni ta 'ċentru ta' preferenza fejn l-abbonati tiegħek jistgħu jbiddlu kemm-il darba jirċievu emails u liema kontenut huwa importanti għalihom huwa mod meraviljuż biex iżommu programm ta 'email b'saħħtu ma' abbonati impenjati!
  7. Test, Test, Test: Kun żgur li tittestja l-email tiegħek fuq apparati multipli jew uża applikazzjoni għal tipprevedi l-emails tiegħek fuq il-klijenti tal-email biex tiżgura li tidher tajba u taħdem sew fuq daqsijiet differenti ta' skrin u sistemi operattivi QABEL ma tibgħat. Litmus jirrapporta li l-aqwa 3 ambjenti mobbli miftuħa l-aktar popolari jibqgħu l-istess: Apple iPhone (iOS Mail), Google Android, Apple iPad (iPadOS Mail). Ukoll, inkorpora varjazzjonijiet tat-test tal-linji tas-suġġett u l-kontenut tiegħek biex ittejjeb ir-rati miftuħa u tal-ikklikkjar tiegħek. Ħafna pjattaformi tal-email issa jinkorporaw ittestjar awtomatizzat li se jieħu kampjun tal-lista, jidentifika varjazzjoni rebbieħa, u jibgħat l-aħjar email lill-abbonati li fadal.

Jekk il-kumpanija tiegħek qed tissara biex tfassal, tittestja u timplimenta emails li jirrispondu għall-mowbajl li qed imexxu l-impenn, toqgħodx lura milli tikkuntattja d-ditta tiegħi. DK New Media għandu esperjenza fl-implimentazzjoni ta' kważi kull fornitur tas-servizz tal-email (ESP).

Douglas Karr

Douglas Karr huwa CMO ta OpenINSIGHTS u l-fundatur tal- Martech Zone. Douglas għen għexieren ta’ startups ta’ MarTech ta’ suċċess, għen fid-diliġenza dovuta ta’ aktar minn $5 biljun f’akkwisti u investimenti ta’ Martech, u jkompli jgħin lill-kumpaniji fl-implimentazzjoni u l-awtomatizzazzjoni tal-istrateġiji tal-bejgħ u l-kummerċjalizzazzjoni tagħhom. Douglas huwa trasformazzjoni diġitali rikonoxxuta internazzjonalment u espert u kelliem tal-MarTech. Douglas huwa wkoll awtur ippubblikat ta 'gwida ta' Dummie u ktieb ta 'tmexxija tan-negozju.

Artikli relatati

Lura għall-buttuna ta 'fuq
Agħlaq

Adblock Individwat

Martech Zone huwa kapaċi jagħtik dan il-kontenut mingħajr ebda spiża għaliex aħna monetize is-sit tagħna permezz ta 'dħul minn reklam, links affiljati, u sponsorships. Napprezzaw jekk tneħħi l-imblokkatur tar-reklami tiegħek hekk kif tara s-sit tagħna.