E-mail marketing i automatizacijaMarketing za mobilne uređaje i tablete

16 najboljih primjera iz prakse za HTML e-poštu prilagođenu mobilnim uređajima koji maksimalno povećavaju plasman i angažman u prijemnom sandučetu

U 2023. je vjerovatno da će mobilni nadmašiti desktop kao primarni uređaj za otvaranje e-pošte. U stvari, HubSpot je to otkrio 46 posto svih otvaranja e-pošte sada se dešavaju na mobilnom telefonu. Ako ne dizajnirate e-poštu za mobilne uređaje, ostavljate mnogo angažmana i novca na stolu.

  1. Autentifikacija e-pošte: Osiguravanje vašeg emailovi su autentificirani na domen za slanje i IP adresa je kritična za dolazak do prijemnog sandučeta, a ne preusmjerena u junk ili spam folder. Također je bitno, naravno, da omogućite način odustajanja od e-pošte koristeći platformu koja uključuje vezu za odjavu.
  2. Odgovarajući dizajn: The HTML email bi trebao biti dizajnirano da bude odgovorno, što znači da se može prilagoditi veličini ekrana uređaja na kojem se gleda. Ovo osigurava da e-pošta izgleda dobro i na desktopu i na mobilnim uređajima.
  3. Jasna i koncizna tema: Jasna i koncizna linija predmeta važna je za mobilne korisnike jer mogu vidjeti samo prvih nekoliko riječi linije predmeta u oknu za pregled e-pošte. Trebao bi biti kratak i tačno odražavati sadržaj e-pošte. Optimalna dužina karaktera za temu e-pošte može varirati ovisno o brojnim faktorima, 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 redovi predmeta e-pošte budu kratki i precizni, obično između 41-50 znakova ili 6-8 riječi. Na mobilnim uređajima, redovi predmeta koji su duži od 50 znakova mogu biti odsječeni, a u nekim slučajevima mogu prikazati samo prvih nekoliko riječi linije predmeta. Ovo može otežati primaocu da razumije glavnu poruku e-pošte i može smanjiti vjerovatnoću otvaranja e-pošte.
  4. Preheader: Predzaglavlje e-pošte je kratak sažetak sadržaja e-pošte koji se pojavljuje pored ili ispod naslova u inboxu klijenta e-pošte. To je važan element koji može utjecati na brzinu otvaranja vaših e-poruka kada se optimizira. Većina klijenata uključuje HTML i CSS kako bi se osiguralo 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. Raspored u jednoj koloni: E-poruke koje su dizajnirane s rasporedom u jednoj koloni lakše su čitati na mobilnim uređajima. Sadržaj bi trebao biti organiziran u logičnom slijedu i predstavljen u jednostavnom, lako čitljivom formatu. Ako imate više kolona, ​​korištenje CSS-a može graciozno organizirati kolone u rasporedu jedne kolone.

Evo jednog HTML izgled e-pošte to je 2 kolone na desktopu i sažima se u jednu kolonu na ekranima 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 je 3 kolone na desktopu i sažima se u jednu kolonu na ekranima 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: većina klijenti e-pošte podržavaju svijetli i tamni način rada CSS prefers-color-scheme kako bi se prilagodili željama korisnika. Obavezno koristite tipove slika na kojima imate 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 fonta treba odabrati tako da tekst bude lak za čitanje na malom ekranu. Koristite veličinu fonta od najmanje 14 pt i izbjegavajte korištenje fontova koje je teško čitati na malim ekranima. Često korišteni fontovi imaju veliku vjerovatnoću da se dosljedno prikazuju u različitim klijentima e-pošte, tako da su korištenje Arial, Helvetica, Times New Roman, Georgia, Verdana, Tahoma i Trebuchet MS tipično sigurni fontovi. Ako koristite prilagođeni font, uvjerite se da je rezervni font identificiran u vašem CSS-u:
<!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. Umjereno koristite slike i vodite računa o njihovoj veličini i veličini komprimovan za mobilno gledanje. Obavezno popunite zamjenski tekst za svoje slike u slučaju da ih klijent e-pošte blokira. Sve slike bi trebale biti pohranjene i upućene 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. Jasan poziv na akciju (CTA): Jasan i istaknut CTA je važan u svakoj e-poruci, ali je posebno važan u e-poruci prilagođenoj mobilnim uređajima. Uvjerite se da je CTA lako pronaći i da je dovoljno velik da ga se klikne na mobilnom uređaju. Ako ugradite dugmad, možete osigurati da ih imate napisane u CSS-u sa 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 koncizan sadržaj: Neka sadržaj e-pošte bude kratak i precizan. 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 priloge. Koristite podnaslove, oznake i druge tehnike oblikovanja kako biste sadržaj lako skenirali dok se pomičete i čitate na malom ekranu.
  2. Interaktivni elementi: Ugradnjom interaktivni elementi koji privlače pažnju vašeg pretplatnika povećat će angažman, razumijevanje i stope konverzije vaše e-pošte. Animirani GIF, tajmere za odbrojavanje, video zapise i druge elemente podržava većina klijenata e-pošte za pametne telefone.
  3. Personalizacija: Personaliziranje pozdrava i sadržaja za određenog pretplatnika može značajno povećati angažman, samo budite sigurni da ste to ispravno shvatili! Npr. Važno je imati rezerve ako nema podataka u polju za ime.
  4. Dinamički sadržaj: Segmentacija i prilagođavanje sadržaja može smanjiti stopu odjave i zadržati vaše pretplatnike angažiranima.
  5. Integracija kampanje: Većina modernih provajdera usluga e-pošte ima mogućnost automatskog dodavanja UTM nizovi upita za kampanju za svaki link tako da možete gledati e-poštu kao kanal u analitici.
  6. Centar za preferencije: Marketing putem e-pošte previše je važan za pristup e-mailovima koji se mogu uključiti ili isključiti. Uključivanje centra za preferencije u kojem vaši pretplatnici mogu promijeniti koliko često primaju e-poruke i koji im je sadržaj važan je fantastičan način da održite jak 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 na svim klijentima e-pošte kako biste bili sigurni da izgleda dobro i ispravno funkcionira na različitim veličinama ekrana i operativnim sistemima PRIJE nego što pošaljete. lakmus izvještava da su prva 3 najpopularnija mobilna otvorena okruženja i dalje ista: Apple iPhone (iOS Mail), Google Android, Apple iPad (iPadOS Mail). Također, uključite test varijacije vaših tema i sadržaja kako biste poboljšali stopu otvorenosti i klikanja. Mnoge platforme za e-poštu sada uključuju automatizirano testiranje koje će uzorkovati listu, identificirati pobjedničku varijaciju i poslati najbolju e-poštu preostalim pretplatnicima.

Ako se vaša kompanija muči s dizajniranjem, testiranjem i implementacijom mobilnih e-poruka koje podstiču angažman, ne ustručavajte se kontaktirati moju tvrtku. DK New Media ima iskustvo u implementaciji gotovo svakog provajdera email usluga (ESP).

Douglas Karr

Douglas Karr je CMO of OpenINSIGHTS i osnivač Martech Zone. Douglas je pomogao desetinama uspješnih MarTech startupova, pomogao je u dubinskom pregledu od preko 5 milijardi dolara u Martechovim akvizicijama i investicijama, te nastavlja da pomaže kompanijama u implementaciji i automatizaciji njihovih prodajnih i marketinških strategija. Douglas je međunarodno priznati stručnjak za digitalnu transformaciju i MarTech stručnjak i govornik. Douglas je također objavljeni autor Dummie's vodiča i knjige o poslovnom liderstvu.

Vezani članci

Nazad na vrh dugmeta
blizu

Adblock otkriven

Martech Zone je u mogućnosti da vam pruži ovaj sadržaj bez ikakvih troškova jer mi unovčavamo našu stranicu putem prihoda od oglasa, partnerskih veza i sponzorstava. Bili bismo zahvalni ako biste uklonili svoj blokator oglasa dok gledate našu web stranicu.