Marketing prin e-mail și automatizareMarketing mobil și tabletă

16 Cele mai bune practici de e-mail HTML pentru dispozitive mobile care maximizează plasarea și implicarea în Inbox

În 2023, este probabil ca mobilul să depășească desktopul ca dispozitiv principal pentru deschiderea e-mailului. De fapt, HubSpot a descoperit asta 46 la sută din toate deschiderile de e-mail au loc acum pe mobil. Dacă nu proiectați e-mailuri pentru mobil, lăsați o mulțime de angajament și bani pe masă.

  1. Autentificare prin e-mail: Asigurarea dvs. e-mailurile sunt autentificate către domeniul expeditor și IP adresa este esențială pentru a ajunge la căsuța de e-mail și nu este direcționată către un dosar de mesaje nedorite sau spam. De asemenea, este esențial, desigur, să oferiți un mijloc de a renunța la e-mail folosind o platformă care încorporează un link de dezabonare.
  2. Design receptiv: HTML e-mail ar trebui să fie conceput pentru a fi receptiv, ceea ce înseamnă că se poate ajusta la dimensiunea ecranului dispozitivului pe care este vizualizat. Acest lucru asigură că e-mailul arată bine atât pe desktop, cât și pe dispozitivele mobile.
  3. Subiect clar și concis: O linie de subiect clară și concisă este importantă pentru utilizatorii de telefonie mobilă, deoarece aceștia pot vedea doar primele cuvinte ale liniei de subiect în panoul lor de previzualizare a e-mailului. Ar trebui să fie scurt și să reflecte cu exactitate conținutul e-mailului. Lungimea optimă a caracterelor a unui subiect de e-mail poate varia în funcție de o serie de factori, cum ar fi conținutul e-mailului, publicul și clientul de e-mail utilizat. Cu toate acestea, majoritatea experților recomandă să păstrați subiectul e-mailului scurt și la obiect, de obicei între 41-50 de caractere sau 6-8 cuvinte. Pe dispozitivele mobile, liniile de subiect care au mai mult de 50 de caractere pot fi tăiate și, în unele cazuri, pot afișa doar primele câteva cuvinte ale liniei de subiect. Acest lucru poate face dificil pentru destinatar să înțeleagă mesajul principal al e-mailului și poate reduce probabilitatea ca e-mailul să fie deschis.
  4. Preheader: Un preheader de e-mail este un scurt rezumat al conținutului unui e-mail care apare lângă sau sub linia de subiect în căsuța de e-mail a unui client de e-mail. Este un element important care poate afecta rata de deschidere a e-mailurilor tale atunci când este optimizat. Majoritatea clienților încorporează HTML și CSS pentru a se asigura că textul preheader este configurat corect.
<!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. Aspect cu o singură coloană: E-mailurile care sunt concepute cu un aspect cu o singură coloană sunt mai ușor de citit pe dispozitivele mobile. Conținutul trebuie organizat într-o secvență logică și prezentat într-un format simplu, ușor de citit. Dacă aveți mai multe coloane, utilizarea CSS poate organiza cu grație coloanele într-un aspect cu o singură coloană.

Iată un Aspect de e-mail HTML adică 2 coloane pe desktop și se restrânge într-o singură coloană pe ecranele mobile:

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

Iată un Aspect de e-mail HTML adică 3 coloane pe desktop și se restrânge într-o singură coloană pe ecranele mobile:

<!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. Modul lumină și întuneric: pod Clienții de e-mail acceptă modul deschis și întunecat CSS prefers-color-scheme pentru a se potrivi preferintelor utilizatorului. Asigurați-vă că utilizați tipuri de imagini în care aveți un fundal transparent. Iată un exemplu de cod.
<!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. Fonturi mari, lizibile: Dimensiunea și stilul fontului trebuie alese pentru a face textul ușor de citit pe un ecran mic. Folosiți o dimensiune de font de cel puțin 14 pt și evitați utilizarea fonturilor greu de citit pe ecranele mici. Fonturile utilizate în mod obișnuit au o probabilitate mare de a se reda în mod consecvent pe diferiți clienți de e-mail, astfel încât utilizarea Arial, Helvetica, Times New Roman, Georgia, Verdana, Tahoma și Trebuchet MS sunt de obicei fonturi sigure. Dacă folosiți un font personalizat, asigurați-vă că aveți un font alternativ identificat în CSS:
<!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. Utilizarea optimă a imaginilor: Imaginile pot încetini timpul de încărcare și este posibil să nu se afișeze corect pe toate dispozitivele mobile. Folosiți imaginile cu moderație și asigurați-vă că sunt dimensionate și comprimat pentru vizionare pe mobil. Asigurați-vă că completați textul alternativ pentru imaginile dvs. în cazul în care clientul de e-mail le blochează. Toate imaginile trebuie stocate și consultate de pe un site web securizat (SSL). Iată un exemplu de cod de imagini receptive într-un e-mail 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. Ștergeți îndemnul la acțiune (CTA): Un CTA clar și proeminent este important în orice e-mail, dar este deosebit de important într-un e-mail prietenos cu dispozitivele mobile. Asigurați-vă că CTA este ușor de găsit și că este suficient de mare pentru a fi făcut clic pe un dispozitiv mobil. Dacă încorporați butoane, vă puteți asigura că le aveți scrise în CSS și cu etichete de stil inline:
<!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. Conținut scurt și concis: Păstrați conținutul e-mailului scurt și la obiect. Limita de caractere pentru un e-mail HTML poate varia în funcție de clientul de e-mail utilizat. Cu toate acestea, majoritatea clienților de e-mail impun o limită de dimensiune maximă pentru e-mailuri, de obicei între 1024-2048 kiloocteți (KB), care include atât codul HTML, cât și orice imagini sau atașamente. Utilizați subtitluri, puncte marcatoare și alte tehnici de formatare pentru a face conținutul ușor de scanat în timp ce derulați și citiți pe un ecran mic.
  2. Elemente interactive: încorporează elemente interactive care captează atenția abonatului dvs. vor crește implicarea, înțelegerea și ratele de conversie din e-mailul dvs. Animate GIF-uri, cronometrele, videoclipurile și alte elemente sunt acceptate de majoritatea clienților de e-mail pentru smartphone-uri.
  3. Personalizare: Personalizarea salutului și a conținutului pentru un anumit abonat poate crește semnificativ implicarea, doar asigurați-vă că ați înțeles corect! De exemplu. Este important să aveți alternative dacă nu există date într-un câmp pentru prenume.
  4. Conținut dinamic: Segmentarea și personalizarea conținutului vă pot reduce ratele de dezabonare și vă pot menține abonații implicați.
  5. Integrarea campaniei: Majoritatea furnizorilor moderni de servicii de e-mail au capacitatea de a adăuga automat șiruri de interogări ale campaniei UTM pentru fiecare link, astfel încât să puteți vizualiza e-mailul ca un canal în analiză.
  6. Centru de preferințe: Marketingul prin e-mail este prea important doar pentru o abordare de înscriere sau renunțare a e-mailurilor. Încorporarea unui centru de preferințe în care abonații tăi pot schimba frecvența cu care primesc e-mailuri și ce conținut este important pentru ei este o modalitate fantastică de a menține un program de e-mail puternic cu abonați implicați!
  7. Test, Test, Test: Asigurați-vă că vă testați e-mailul pe mai multe dispozitive sau utilizați o aplicație pentru previzualizați-vă e-mailurile între clienții de e-mail pentru a vă asigura că arată bine și funcționează corect pe diferite dimensiuni de ecran și sisteme de operare ÎNAINTE de a trimite. Turnesol raportează că primele 3 cele mai populare medii mobile deschise continuă să fie aceleași: Apple iPhone (iOS Mail), Google Android, Apple iPad (iPadOS Mail). De asemenea, includeți variante de testare ale liniilor de subiect și ale conținutului pentru a vă îmbunătăți ratele de deschidere și de clic. Multe platforme de e-mail încorporează acum testare automată care va eșantiona lista, va identifica o variantă câștigătoare și va trimite cel mai bun e-mail abonaților rămași.

Dacă compania dvs. se luptă cu proiectarea, testarea și implementarea e-mailurilor mobile receptive care stimulează implicarea, nu ezitați să contactați firma mea. DK New Media are experiență în implementarea practic a fiecărui furnizor de servicii de e-mail (ESP).

Douglas Karr

Douglas Karr este CMO al OpenINSIGHTS și fondatorul Martech Zone. Douglas a ajutat zeci de startup-uri de succes MarTech, a ajutat la due diligence de peste 5 miliarde de dolari în achiziții și investiții Martech și continuă să asiste companiile în implementarea și automatizarea strategiilor lor de vânzări și marketing. Douglas este un expert în transformare digitală recunoscut la nivel internațional și expert și vorbitor MarTech. Douglas este, de asemenea, un autor publicat al unui ghid pentru Dummie și al unei cărți de conducere în afaceri.

Articole pe aceeaşi temă

Înapoi la butonul de sus
Închide

Blocarea reclamelor a fost detectată

Martech Zone este în măsură să vă furnizeze acest conținut fără costuri, deoarece monetizăm site-ul nostru prin venituri din reclame, linkuri afiliate și sponsorizări. Am aprecia dacă ați elimina dispozitivul de blocare a reclamelor pe măsură ce vizualizați site-ul nostru.