Meiliturundus ja automatiseerimineMobiil- ja tahvelarvutiturundus

16 mobiilisõbralikku HTML-meili parimat tava, mis suurendavad postkasti paigutust ja kaasamist

2023. aastal on tõenäoline, et mobiiltelefon ületab e-kirjade avamise peamise seadmena lauaarvuti. Tegelikult leidis HubSpot selle 46 protsenti kõigist meili avamistest toimub nüüd mobiilis. Kui te ei kujunda e-kirju mobiili jaoks, jätate palju kaasamist ja raha lauale.

  1. Meili autentimine: Teie kindlustamine meilid on autentitud saatva domeeni ja IP aadress on postkasti jõudmiseks ülioluline ja seda ei suunata rämpsposti või rämpsposti kausta. Samuti on loomulikult oluline, et pakuksite e-kirjadest loobumiseks platvormi, mis sisaldab tellimusest loobumise linki.
  2. Vastuvõtlik disain: . HTML email peaks olema loodud reageerima, mis tähendab, et seda saab kohandada vastavalt selle seadme ekraanisuurusele, millel seda vaadatakse. See tagab, et meil näeb hea välja nii lauaarvutis kui ka mobiilseadmetes.
  3. Selge ja lühike teemarida: Selge ja lühike teemarida on mobiilikasutajate jaoks oluline, sest nad võivad oma meili eelvaatepaanil näha ainult paar esimest teemarea sõna. See peaks olema lühike ja kajastama täpselt e-kirja sisu. Meili teemarea optimaalne tähemärgi pikkus võib varieeruda sõltuvalt mitmest tegurist, nagu meili sisu, sihtrühm ja kasutatav meiliklient. Enamik eksperte soovitab siiski hoida meili teemaread lühikesed ja täpsed, tavaliselt 41–50 tähemärgi või 6–8 sõna vahel. Mobiilseadmetes võivad teemaread, mis on pikemad kui 50 tähemärki, katkeda ja mõnel juhul kuvatakse vaid paar esimest teemarea sõna. See võib raskendada adressaadil meili põhisõnumi mõistmist ja vähendada e-kirja avamise tõenäosust.
  4. Eelpäis: Meili eelpäis on lühike kokkuvõte meili sisust, mis kuvatakse meilikliendi postkastis teemarea kõrval või all. See on oluline element, mis võib optimeerimisel mõjutada teie meilide avamise määra. Enamik kliente kasutab HTML-i ja CSS-i, et tagada eelpäise teksti õige seadistamine.
<!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. Ühe veeru paigutus: Üheveerulise paigutusega e-kirju on mobiilseadmetes lihtsam lugeda. Sisu tuleks korraldada loogilises järjestuses ja esitada lihtsas, kergesti loetavas vormingus. Kui teil on mitu veergu, saab CSS-i abil veerud elegantselt korraldada ühe veeru paigutusega.

Siin HTML-meili paigutus see on töölaual 2 veergu ja mobiiliekraanidel aheneb üheks veerguks:

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

Siin HTML-meili paigutus see on töölaual 3 veergu ja mobiiliekraanidel aheneb üheks veerguks:

<!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. Hele ja tume režiim: sild e-posti kliendid toetavad heledat ja tumedat režiimi CSS prefers-color-scheme et kohandada kasutaja eelistusi. Kasutage kindlasti läbipaistva taustaga pilditüüpe. Siin on koodinäide.
<!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. Suured, loetavad fondid: Kirja suurus ja stiil tuleks valida nii, et tekst oleks väikesel ekraanil hõlpsasti loetav. Kasutage vähemalt 14-punktilist kirjasuurust ja vältige selliste fontide kasutamist, mida on väikestel ekraanidel raske lugeda. Tavaliselt kasutatavatel fontidel on suur tõenäosus, et need renderdatakse järjepidevalt erinevates e-posti klientides, nii et Arial, Helvetica, Times New Roman, Georgia, Verdana, Tahoma ja Trebuchet MS on tavaliselt turvalised fondid. Kui kasutate kohandatud fonti, veenduge, et teie CSS-is oleks tuvastatud varufont:
<!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. Piltide optimaalne kasutamine: Pildid võivad laadimisaega aeglustada ja neid ei pruugita kõigis mobiilseadmetes korralikult kuvada. Kasutage pilte säästlikult ja veenduge, et need oleksid suurusega ja kokkusurutud mobiiliga vaatamiseks. Täitke kindlasti piltide alternatiivtekst juhuks, kui meiliklient need blokeerib. Kõik pildid tuleks salvestada ja neile tuleks viidata turvalisel veebisaidil (SSL). Siin on HTML-meilis reageerivate piltide näidiskood.
<!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. Selge üleskutse tegevusele (CTA): Selge ja silmapaistev CTA on oluline igas meilis, kuid eriti oluline on see mobiilisõbraliku meili puhul. Veenduge, et CTA-d oleks lihtne leida ja see oleks piisavalt suur, et sellel mobiilseadmes klõpsata. Kui lisate nupud, saate tagada, et need on kirjutatud CSS-is koos tekstisisese stiilimärgenditega:
<!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. Lühike ja sisutihe: Hoidke meili sisu lühike ja asjakohane. HTML-meili tähemärgipiirang võib olenevalt kasutatavast meilikliendist erineda. Kuid enamik meilikliente kehtestab meilidele maksimaalse suuruse piirangu, tavaliselt vahemikus 1024–2048 kilobaiti (KB), mis sisaldab nii HTML-koodi kui ka pilte või manuseid. Kasutage alampealkirju, täppe ja muid vormindustehnikaid, et muuta sisu väikesel ekraanil kerimise ja lugemise ajal hõlpsasti skannitavaks.
  2. Interaktiivsed elemendid: sisaldavad interaktiivsed elemendid mis köidavad teie tellija tähelepanu, suurendavad teie e-kirjade seotust, arusaamist ja konversioonimäärasid. Animeeritud GIF-id, enamik nutitelefoni meilikliente toetab pöördloendurit, videoid ja muid elemente.
  3. Isikupärastamine: Tervituste ja sisu isikupärastamine konkreetse tellija jaoks võib märkimisväärselt kaasata, kuid veenduge, et teete seda õigesti! Nt. Kui eesnimeväljal pole andmeid, on oluline varundada.
  4. Dünaamiline sisu: Sisu segmenteerimine ja kohandamine võib vähendada teie tellimusest loobumise määra ja hoida tellijaid kaasatuna.
  5. Kampaania integreerimine: Enamikul kaasaegsetel meiliteenuse pakkujatel on automaatse lisamise võimalus UTM-i kampaania päringustringid iga lingi jaoks, et saaksite vaadata e-kirju analüüsis kanalina.
  6. Eelistuskeskus: Meiliturundus on liiga oluline selleks, et meilide puhul lihtsalt lubada või loobuda. Eelistuskeskuse lisamine, kus teie tellijad saavad muuta e-kirjade saamise sagedust ja nende jaoks olulist sisu, on suurepärane viis kaasatud tellijatega tugeva meiliprogrammi hoidmiseks!
  7. Test, katse, katse: Testige oma meili kindlasti mitmes seadmes või kasutage selleks mõnda rakendust oma e-kirjade eelvaade e-posti klientides veendumaks, et see näeb hea välja ja töötab korralikult erinevatel ekraanisuurustel ja operatsioonisüsteemidel ENNE saatmist. Lakmus teatab, et 3 populaarseimat mobiilset avatud keskkonda on jätkuvalt samad: Apple iPhone (iOS Mail), Google Android, Apple iPad (iPadOS Mail). Samuti lisage oma teemaridade ja sisu testvariandid, et parandada avamis- ja klikkimismäära. Paljud e-posti platvormid sisaldavad nüüd automaatset testimist, mis valib loendist, tuvastab võitnud variatsiooni ja saadab ülejäänud tellijatele parima e-kirja.

Kui teie ettevõttel on probleeme mobiilile reageerivate meilide kujundamise, testimise ja juurutamisega, mis suurendavad kaasatust, võtke minu ettevõttega ühendust. DK New Media omab kogemust praktiliselt kõigi meiliteenuse pakkujate juurutamisel (ESP).

Douglas Karr

Douglas Karr on CMO of OpenINSIGHTS ja selle asutaja Martech Zone. Douglas on aidanud kümneid edukaid MarTechi idufirmasid, on aidanud Martechi omandamisel ja investeeringutel üle 5 miljardi dollari ulatuses läbi viia ning jätkab ettevõtete abistamist nende müügi- ja turundusstrateegiate rakendamisel ja automatiseerimisel. Douglas on rahvusvaheliselt tunnustatud digitaalse transformatsiooni ja MarTechi ekspert ja esineja. Douglas on ka Dummie juhendi ja ärijuhtimise raamatu autor.

seotud artiklid

Tagasi üles nupule
lähedal

Adblock tuvastatud

Martech Zone suudab teile seda sisu tasuta pakkuda, kuna teenime oma saidi rahaks reklaamitulu, sidusettevõtete linkide ja sponsorluse kaudu. Oleksime tänulikud, kui eemaldaksite meie saidi vaatamise ajal oma reklaamiblokeerija.