Marketing i automatizacija putem e-pošteMarketing za mobitele i tablete

16 najboljih praksi za HTML e-poštu prilagođenu mobilnim uređajima koji povećavaju položaj i angažman u pristigloj pošti

U 2023. vjerojatno će mobitel nadmašiti desktop kao primarni uređaj za otvaranje e-pošte. Zapravo, HubSpot je to otkrio 46 posto svih otvaranja e-pošte sada se događa na mobitelu. Ako ne dizajnirate e-poštu za mobilne uređaje, ostavljate puno angažmana i novca na stolu.

  1. Autentifikacija e-pošte: Osiguravanje vašeg e-pošta je provjerena na domenu pošiljatelja i IP adresa je ključna za dolazak do ulazne pošte, a ne za preusmjeravanje u mapu bezvrijedne ili neželjene pošte. Također je bitno, naravno, da omogućite način isključivanja e-pošte pomoću platforme koja uključuje vezu za odjavu pretplate.
  2. Odgovarajući dizajn: Korištenje električnih romobila ističe HTML e-pošta bi trebala biti dizajniran da bude osjetljiv, što znači da se može prilagoditi veličini zaslona uređaja na kojem se gleda. To osigurava da e-pošta izgleda dobro i na stolnom računalu i na mobilnim uređajima.
  3. Jasan i koncizan predmet: Jasan i koncizan redak predmeta važan je za mobilne korisnike jer mogu vidjeti samo prvih nekoliko riječi retka predmeta u svom oknu za pregled e-pošte. Trebao bi biti kratak i točno odražavati sadržaj e-poruke. Optimalna duljina znakova retka predmeta e-pošte može varirati ovisno o nizu čimbenika, kao što su sadržaj e-pošte, publika i klijent e-pošte koji se koristi. Međutim, većina stručnjaka preporučuje da predmet e-pošte bude kratak i jasan, obično između 41-50 znakova ili 6-8 riječi. Na mobilnim uređajima, reci s predmetom koji su duži od 50 znakova mogu biti odrezani, au nekim slučajevima mogu prikazati samo prvih nekoliko riječi retka s predmetom. To može otežati primatelju razumijevanje glavne poruke e-pošte i može smanjiti vjerojatnost otvaranja e-pošte.
  4. Predzaglavlje: Predzaglavlje e-pošte kratki je sažetak sadržaja e-pošte koji se pojavljuje pored ili ispod retka predmeta u ulaznoj pošti klijenta e-pošte. To je važan element koji može utjecati na stopu otvaranja vaše e-pošte kada se optimizira. Većina klijenata uključuje HTML i CSS kako bi osigurali da je tekst predzaglavlja ispravno postavljen.
<!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. Izgled u jednom stupcu: E-poruke koje su dizajnirane s izgledom u jednom stupcu lakše je čitati na mobilnim uređajima. Sadržaj bi trebao biti organiziran u logičan slijed i predstavljen u jednostavnom, lako čitljivom formatu. Ako imate više stupaca, pomoću CSS-a možete elegantno organizirati stupce u rasporedu s jednim stupcem.

Evo jednog HTML izgled e-pošte to su 2 stupca na radnoj površini i sažimaju se u jedan stupac na zaslonima mobilnih uređaja:

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

Evo jednog HTML izgled e-pošte to su 3 stupca na radnoj površini i sažimaju se u jedan stupac na zaslonima mobilnih uređaja:

<!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. Svijetli i tamni način rada: most klijenti e-pošte podržavaju svijetli i tamni način rada CSS prefers-color-scheme kako bi se prilagodili korisničkim preferencijama. Obavezno upotrijebite vrste slika koje imaju prozirnu pozadinu. Evo primjera koda.
<!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. Veliki, čitljivi fontovi: Veličinu i stil slova treba odabrati tako da tekst bude lako čitljiv na malom ekranu. Koristite font veličine najmanje 14 pt i izbjegavajte upotrebu fontova koji se teško čitaju na malim ekranima. Često korišteni fontovi imaju veliku vjerojatnost dosljednog prikazivanja na različitim klijentima e-pošte, tako da su korištenje Arial, Helvetica, Times New Roman, Georgia, Verdana, Tahoma i Trebuchet MS obično sigurni fontovi. Ako ipak koristite prilagođeni font, provjerite jeste li u svom CSS-u identificirali rezervni font:
<!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. Optimalna upotreba slika: Slike mogu usporiti vrijeme učitavanja i možda se neće pravilno prikazati na svim mobilnim uređajima. Koristite slike umjereno i provjerite jesu li veličine i stisnut za mobilno gledanje. Obavezno popunite zamjenski tekst za svoje slike u slučaju da ih klijent e-pošte blokira. Sve slike trebaju biti pohranjene i na njih se treba odnositi sa sigurne web stranice (SSL). Evo primjera koda responzivnih slika u HTML e-poruci.
<!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. Jasni poziv na radnju (HAT): Jasan i istaknut CTA važan je u svakoj e-pošti, ali posebno je važan u e-pošti prilagođenoj mobilnim uređajima. Provjerite je li CTA lako pronaći i je li dovoljno velik da se na njega može kliknuti na mobilnom uređaju. Ako ugradite gumbe, možete biti sigurni da su napisani u CSS-u s ugrađenim stilskim oznakama:
<!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. Kratak i jezgrovit sadržaj: Neka sadržaj e-pošte bude kratak i jasan. Ograničenje broja znakova za HTML e-poštu može varirati ovisno o klijentu e-pošte koji se koristi. Međutim, većina klijenata e-pošte nameće ograničenje maksimalne veličine za e-poštu, obično između 1024-2048 kilobajta (KB), koji uključuje i HTML kod i sve slike ili privitke. Upotrijebite podnaslove, grafičke oznake i druge tehnike oblikovanja kako bi sadržaj bio lako skeniran tijekom pomicanja i čitanja na malom zaslonu.
  2. Interaktivni elementi: Napravljena interaktivni elementi koji zaokupljaju pozornost vašeg pretplatnika povećat će angažman, razumijevanje i stope konverzije vaše e-pošte. Animirani GIF-ovi, mjerači vremena, videozapisi i drugi elementi podržani su od strane većine klijenata e-pošte za pametne telefone.
  3. Personalizacija: Personaliziranje pozdrava i sadržaja za određenog pretplatnika može značajno potaknuti angažman, samo budite sigurni da ste to učinili kako treba! Npr. Važno je imati zamjenske podatke ako u polju za ime nema podataka.
  4. Dinamički sadržaj: Segmentacija i prilagodba sadržaja može smanjiti stopu otkazivanja pretplate i zadržati angažiranost vaših pretplatnika.
  5. Integracija kampanje: Većina modernih pružatelja usluga e-pošte ima mogućnost automatskog dodavanja Nizovi upita UTM kampanje za svaku vezu tako da možete vidjeti e-poštu kao kanal u analitici.
  6. Centar za preference: Marketing e-poštom previše je važan za pristup e-pošti samo opt-in ili opt-out pristupom. Uključivanje centra za preferencije u kojem vaši pretplatnici mogu promijeniti koliko često primaju e-poštu i koji im je sadržaj važan fantastičan je način da zadržite snažan program e-pošte s angažiranim pretplatnicima!
  7. Test, Test, Test: Obavezno testirajte svoju e-poštu na više uređaja ili upotrijebite aplikaciju za pregledajte svoju e-poštu u svim klijentima e-pošte kako biste osigurali da izgleda dobro i ispravno funkcionira na različitim veličinama zaslona i operativnim sustavima PRIJE nego pošaljete. Lakmus izvještava da su top 3 najpopularnija mobilna otvorena okruženja i dalje ista: Apple iPhone (iOS Mail), Google Android, Apple iPad (iPadOS Mail). Također, uključite probne varijacije svojih naslova i sadržaja kako biste poboljšali svoje stope otvaranja i klikanja. Mnoge platforme e-pošte sada uključuju automatizirano testiranje koje će uzorkovati popis, identificirati pobjedničku varijantu i poslati najbolju e-poštu preostalim pretplatnicima.

Ako se vaša tvrtka bori s dizajniranjem, testiranjem i implementacijom mobilnih responzivnih e-poruka koje potiču angažman, nemojte se ustručavati kontaktirati moju tvrtku. DK New Media ima iskustva u implementaciji gotovo svih pružatelja usluga e-pošte (ESP).

Douglas Karr

Douglas Karr je CMO of OpenINSIGHTS i osnivač Martech Zone. Douglas je pomogao desecima uspješnih MarTech startupa, pomogao je u due diligence-u od preko 5 milijardi USD u Martech akvizicijama i ulaganjima te nastavlja pomagati tvrtkama u implementaciji i automatizaciji njihovih prodajnih i marketinških strategija. Douglas je međunarodno priznati stručnjak i govornik za digitalnu transformaciju i MarTech. Douglas je također objavljeni autor Dummie's guide i knjige o poslovnom vodstvu.

Vezani članci

Natrag na vrh
Blizu

Otkriven je Adblock

Martech Zone može vam pružiti ovaj sadržaj bez ikakvih troškova jer svoju web stranicu unovčavamo putem prihoda od oglasa, pridruženih veza i sponzorstava. Cijenili bismo kada biste uklonili program za blokiranje oglasa dok pregledavate našu stranicu.