Email Marketing & AutomatizáciaMobilný a tabletový marketing

16 osvedčených postupov HTML e-mailu pre mobilné zariadenia, ktoré maximalizujú umiestnenie doručenej pošty a zapojenie

V roku 2023 je pravdepodobné, že mobil prekoná desktop ako primárne zariadenie na otváranie e-mailov. V skutočnosti to HubSpot zistil 46 percent všetkých otvorení e-mailov teraz prebieha na mobilnom zariadení. Ak nenavrhujete e-maily pre mobil, nechávate na stole veľa angažovanosti a peňazí.

  1. E-mailová autentifikácia: Zabezpečenie e-maily sú overené do odosielajúcej domény a IP adresa je rozhodujúca na to, aby ste sa dostali do doručenej pošty a nie je smerovaná do priečinka nevyžiadanej pošty alebo spamu. Je tiež nevyhnutné, aby ste poskytli spôsob odhlásenia sa z e-mailu pomocou platformy, ktorá obsahuje odkaz na zrušenie odberu.
  2. Responzívny dizajn: HTML email by mal byť navrhnuté tak, aby boli responzívne, čo znamená, že sa dokáže prispôsobiť veľkosti obrazovky zariadenia, na ktorom sa zobrazuje. To zaisťuje, že e-mail vyzerá dobre na stolných aj mobilných zariadeniach.
  3. Jasný a stručný predmet: Jasný a stručný predmet je dôležitý pre používateľov mobilných zariadení, pretože na paneli s ukážkou e-mailu môžu vidieť iba prvých pár slov predmetu. Mal by byť stručný a presne odrážať obsah e-mailu. Optimálna dĺžka znakov v riadku predmetu e-mailu sa môže líšiť v závislosti od množstva faktorov, ako je obsah e-mailu, publikum a používaný e-mailový klient. Väčšina odborníkov však odporúča, aby predmet e-mailu bol krátky a výstižný, zvyčajne medzi 41 – 50 znakmi alebo 6 – 8 slovami. Na mobilných zariadeniach môžu byť riadky s predmetom, ktoré sú dlhšie ako 50 znakov orezané a v niektorých prípadoch sa môže zobraziť iba niekoľko prvých slov predmetu. To môže príjemcovi sťažiť pochopenie hlavnej správy e-mailu a môže znížiť pravdepodobnosť otvorenia e-mailu.
  4. Preheader: Predhlavička e-mailu je krátky súhrn obsahu e-mailu, ktorý sa zobrazuje vedľa alebo pod riadkom predmetu v doručenej pošte e-mailového klienta. Je to dôležitý prvok, ktorý môže pri optimalizácii ovplyvniť mieru otvorenia vašich e-mailov. Väčšina klientov používa HTML a CSS, aby sa zabezpečilo správne nastavenie textu preheader.
<!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. Rozloženie s jedným stĺpcom: E-maily, ktoré sú navrhnuté s rozložením v jednom stĺpci, sa ľahšie čítajú na mobilných zariadeniach. Obsah by mal byť usporiadaný v logickom slede a prezentovaný v jednoduchom a ľahko čitateľnom formáte. Ak máte viacero stĺpcov, pomocou CSS môžete elegantne usporiadať stĺpce v rozložení s jedným stĺpcom.

Tu je HTML rozloženie emailu to sú 2 stĺpce na počítačoch a zbalí sa do jedného stĺpca na mobilných obrazovkách:

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

Tu je HTML rozloženie emailu to sú 3 stĺpce na počítačoch a zbalí sa do jedného stĺpca na mobilných obrazovkách:

<!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. Svetlý a tmavý režim: most e-mailoví klienti podporujú svetlý a tmavý režim CSS prefers-color-scheme vyhovieť preferenciám používateľa. Uistite sa, že používate typy obrázkov, kde máte priehľadné pozadie. Tu je príklad kódu.
<!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. Veľké, čitateľné písmo: Veľkosť a štýl písma by mali byť zvolené tak, aby bol text ľahko čitateľný na malej obrazovke. Používajte písmo s veľkosťou aspoň 14 bodov a nepoužívajte písma, ktoré sa ťažko čítajú na malých obrazovkách. Bežne používané písma majú vysokú pravdepodobnosť konzistentného vykresľovania v rôznych e-mailových klientoch, takže používanie písma Arial, Helvetica, Times New Roman, Georgia, Verdana, Tahoma a Trebuchet MS sú zvyčajne bezpečné písma. Ak používate vlastné písmo, uistite sa, že máte vo svojom CSS identifikované náhradné písmo:
<!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. Optimálne využitie obrázkov: Obrázky môžu spomaliť načítanie a nemusia sa správne zobrazovať na všetkých mobilných zariadeniach. Obrázky používajte s mierou a uistite sa, že majú veľkosť a stlačený pre mobilné prezeranie. Nezabudnite vyplniť alternatívny text pre obrázky v prípade, že ich e-mailový klient zablokuje. Všetky obrázky by mali byť uložené a odkazované zo zabezpečenej webovej stránky (SSL). Tu je príklad kódu responzívnych obrázkov v e-maile 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. Jasná výzva na akciu (CTA): Jasná a výrazná výzva na akciu je dôležitá v každom e-maile, ale je obzvlášť dôležitá v e-maile vhodnom pre mobilné zariadenia. Uistite sa, že CTA sa dá ľahko nájsť a že je dostatočne veľká na to, aby sa na ňu dalo kliknúť na mobilnom zariadení. Ak začleníte tlačidlá, môžete sa uistiť, že ich máte napísané v CSS aj s vloženými značkami štýlu:
<!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. Krátky a výstižný obsah: Udržujte obsah e-mailu krátky a výstižný. Limit počtu znakov pre HTML e-mail sa môže líšiť v závislosti od používaného e-mailového klienta. Väčšina e-mailových klientov však stanovuje maximálny limit veľkosti pre e-maily, zvyčajne medzi 1024-2048 kB (KB), ktorý zahŕňa kód HTML aj všetky obrázky alebo prílohy. Použite podnadpisy, odrážky a ďalšie techniky formátovania, aby sa obsah dal ľahko skenovať pri posúvaní a čítaní na malej obrazovke.
  2. Interaktívne prvky: začlenenie interaktívne prvky ktoré upútajú pozornosť vášho odberateľa, zvýšia mieru zapojenia, pochopenia a miery konverzie z vášho e-mailu. Animované GIFy, odpočítavacie časovače, videá a ďalšie prvky podporuje väčšina e-mailových klientov smartfónov.
  3. Personalizácia: Prispôsobenie pozdravu a obsahu pre konkrétneho predplatiteľa môže výrazne zvýšiť zapojenie, len sa uistite, že to robíte správne! Napr. Je dôležité mať záložné možnosti, ak v poli krstného mena nie sú žiadne údaje.
  4. Dynamický obsah: Segmentácia a prispôsobenie obsahu môže znížiť vaše sadzby za zrušenie odberu a udržať vašich odberateľov zapojených.
  5. Integrácia kampane: Väčšina moderných poskytovateľov e-mailových služieb má možnosť automatického pripájania Reťazce dopytov kampane UTM pre každý odkaz, aby ste mohli zobraziť e-mail ako kanál v službe Analytics.
  6. Centrum preferencií: E-mailový marketing je príliš dôležitý na to, aby bol prístup k e-mailom len opt-in alebo opt-out. Začlenenie preferenčného centra, kde môžu vaši odberatelia zmeniť, ako často dostávajú e-maily a aký obsah je pre nich dôležitý, je fantastický spôsob, ako udržať silný e-mailový program so zaujatými odberateľmi!
  7. Testovať, testovať, testovať: Nezabudnite otestovať svoj e-mail na viacerých zariadeniach alebo na to použite aplikáciu ukážte svoje e-maily v e-mailových klientoch aby ste pred odoslaním zaistili, že bude vyzerať dobre a bude správne fungovať na rôznych veľkostiach obrazoviek a operačných systémoch. Lakmus uvádza, že 3 najobľúbenejšie mobilné otvorené prostredia sú stále rovnaké: Apple iPhone (iOS Mail), Google Android, Apple iPad (iPadOS Mail). Zahrňte aj testovacie variácie svojich predmetov a obsahu, aby ste zlepšili svoju mieru otvorenia a prekliknutia. Mnoho e-mailových platforiem teraz obsahuje automatické testovanie, ktoré odoberie vzorku zo zoznamu, identifikuje víťaznú variáciu a pošle najlepší e-mail zostávajúcim predplatiteľom.

Ak má vaša spoločnosť problémy s návrhom, testovaním a implementáciou mobilných e-mailov, ktoré podporujú interakciu, neváhajte kontaktovať moju firmu. DK New Media má skúsenosti s implementáciou prakticky každého poskytovateľa e-mailových služieb (ESP).

Douglas Karr

Douglas Karr je CMO OpenINSIGHTS a zakladateľ spoločnosti Martech Zone. Douglas pomohol desiatkam úspešných startupov MarTech, asistoval pri due diligence v hodnote viac ako 5 miliárd dolárov v akvizíciách a investíciách Martech a naďalej pomáha spoločnostiam pri implementácii a automatizácii ich predajných a marketingových stratégií. Douglas je medzinárodne uznávaný odborník na digitálnu transformáciu a MarTech a rečník. Douglas je tiež publikovaným autorom príručky Dummie a knihy obchodného vedenia.

súvisiace články

Tlačidlo späť nahor
Zavrieť

Zistený blok reklám

Martech Zone vám tento obsah môže poskytnúť bezplatne, pretože naše stránky speňažujeme prostredníctvom príjmov z reklám, pridružených odkazov a sponzorstiev. Ocenili by sme, keby ste pri prezeraní našej stránky odstránili blokovanie reklám.