E-mail marketing és automatizálásMobil és táblagépes marketing

16 mobilbarát HTML e-mail bevált gyakorlat, amely maximalizálja a beérkező levelek elhelyezését és elköteleződését

2023-ban valószínű, hogy a mobil meg fogja haladni az asztali számítógépet, mint az e-mailek megnyitásának elsődleges eszköze. Valójában a HubSpot ezt találta 46 százalék az összes e-mail megnyitása most már mobilon történik. Ha nem mobilra tervez e-maileket, akkor sok elköteleződést és pénzt hagy az asztalon.

  1. E-mail hitelesítés: Biztosítja a saját az e-mailek hitelesítve vannak a küldő tartományba és IP A cím kulcsfontosságú a beérkezett üzenetek mappához való eljutáshoz, és nem a levélszemét vagy spam mappába kerül. Természetesen az is elengedhetetlen, hogy lehetőséget adjon az e-mailek leiratkozására egy leiratkozási linket tartalmazó platformon.
  2. Reszponzív dizájn: A HTML email legyen reszponzívra tervezték, ami azt jelenti, hogy képes igazodni annak az eszköznek a képernyőméretéhez, amelyen éppen nézik. Ez biztosítja, hogy az e-mail jól nézzen ki asztali és mobileszközökön egyaránt.
  3. Világos és tömör tárgysor: A világos és tömör tárgysor fontos a mobilfelhasználók számára, mert előfordulhat, hogy csak a tárgysor első néhány szavát látják az e-mail előnézeti panelen. Ennek rövidnek kell lennie, és pontosan tükröznie kell az e-mail tartalmát. Az e-mail tárgysorának optimális karakterhossza számos tényezőtől, például az e-mail tartalomtól, a közönségtől és a használt e-mail klienstől függően változhat. A legtöbb szakértő azonban azt javasolja, hogy az e-mail tárgysora legyen rövid és lényegre törő, általában 41-50 karakter vagy 6-8 szó között. Mobileszközökön az 50 karakternél hosszabb tárgysorok levághatók, és bizonyos esetekben csak a tárgysor első néhány szava jelenhet meg. Ez megnehezítheti a címzett számára az e-mail fő üzenetének megértését, és csökkentheti az e-mail megnyitásának valószínűségét.
  4. Előfejléc: Az e-mail előfejléc az e-mail tartalmának rövid összefoglalása, amely a levelezőprogram beérkezett üzenetei között a tárgysor mellett vagy alatt jelenik meg. Ez egy fontos elem, amely optimalizálva befolyásolhatja az e-mailek megnyitási arányát. A legtöbb ügyfél HTML-t és CSS-t alkalmaz, hogy biztosítsa az előfejléc szövegének megfelelő beállítását.
<!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. Egyoszlopos elrendezés: Az egyoszlopos elrendezésű e-mailek könnyebben olvashatók mobileszközökön. A tartalmat logikus sorrendbe kell rendezni, és egyszerű, könnyen olvasható formátumban kell megjeleníteni. Ha több oszlopa van, a CSS használatával kecsesen rendezheti az oszlopokat egy oszlopos elrendezésben.

Itt van egy HTML e-mail elrendezés azaz asztali számítógépen 2 oszlop, mobilképernyőkön pedig egyetlen oszlopba csukódik össze:

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

Itt van egy HTML e-mail elrendezés azaz asztali számítógépen 3 oszlop, mobilképernyőkön pedig egyetlen oszlopba csukódik össze:

<!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. Világos és sötét mód: híd az e-mail kliensek támogatják a világos és sötét módot CSS prefers-color-scheme hogy alkalmazkodjon a felhasználó preferenciáihoz. Ügyeljen arra, hogy olyan képtípusokat használjon, ahol átlátszó háttér van. Itt van egy kódpélda.
<!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. Nagy, jól olvasható betűtípusok: A betűméretet és -stílust úgy kell megválasztani, hogy a szöveg könnyen olvasható legyen kis képernyőn. Használjon legalább 14 pont betűméretet, és kerülje a kis képernyőkön nehezen olvasható betűtípusok használatát. A gyakran használt betűtípusok nagy valószínűséggel következetesen jelennek meg a különböző e-mail kliensekben, ezért az Arial, a Helvetica, a Times New Roman, a Georgia, a Verdana, a Tahoma és a Trebuchet MS használata általában biztonságos betűtípusok. Ha egyéni betűtípust használ, ügyeljen arra, hogy a CSS-ben szerepeljen egy tartalék betűtípus:
<!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. A képek optimális felhasználása: A képek lelassíthatják a betöltési időt, és előfordulhat, hogy nem jelennek meg megfelelően minden mobileszközön. Használja a képeket takarékosan, és ügyeljen a méretükre és a tömörített mobil megtekintéshez. Feltétlenül töltse ki a képek alternatív szövegét arra az esetre, ha az e-mail kliens blokkolja őket. Minden képet tárolni kell, és biztonságos webhelyről kell hivatkozni (SSL). Íme egy példakód reszponzív képekre egy HTML e-mailben.
<!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. Egyértelmű cselekvésre ösztönzés (CTA): A világos és jól látható CTA minden e-mailben fontos, de különösen fontos a mobilbarát e-maileknél. Győződjön meg arról, hogy a CTA könnyen megtalálható, és elég nagy ahhoz, hogy mobileszközön rákattintson. Ha gombokat is beépít, gondoskodhat arról, hogy azokat CSS-ben is megírja beágyazott stíluscímkékkel:
<!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. Rövid és tömör tartalom: Az e-mail tartalma legyen rövid és lényegre törő. A HTML e-mailek karakterkorlátja a használt e-mail klienstől függően változhat. A legtöbb e-mail kliens azonban maximális méretkorlátot ír elő az e-mailek számára, jellemzően 1024-2048 kilobájt (KB), amely tartalmazza mind a HTML-kódot, mind a képeket vagy mellékleteket. Használjon alcímeket, felsorolásjeleket és egyéb formázási technikákat, hogy a tartalom könnyen beolvasható legyen görgetés és olvasás közben egy kis képernyőn.
  2. Interaktív elemek: beépítése interaktív elemek amelyek felkeltik az előfizető figyelmét, növelik az elköteleződést, a megértést és a konverziós arányt az e-mailekből. Animált GIF-ek, a visszaszámláló időzítőket, videókat és egyéb elemeket az okostelefonos e-mail kliensek többsége támogatja.
  3. Testreszabás: A köszöntés és a tartalom személyre szabása egy adott előfizető számára jelentősen növelheti az elköteleződést, csak győződjön meg róla, hogy jól tette! Például. Fontos, hogy legyenek tartalékok, ha a keresztnév mezőben nincs adat.
  4. Dinamikus tartalom: A tartalom szegmentálása és testreszabása csökkentheti a leiratkozási arányokat, és fenntarthatja az előfizetők érdeklődését.
  5. Kampány integráció: A legtöbb modern e-mail szolgáltató képes automatikusan hozzáfűzni UTM kampány lekérdezési karakterláncai minden linknél, hogy az e-maileket csatornaként tekinthesse meg az elemzésben.
  6. Preferencia központ: Az e-mailes marketing túlságosan fontos ahhoz, hogy az e-mailek elfogadását vagy leiratkozását alkalmazzuk. Egy olyan preferenciaközpont beépítése, ahol előfizetői megváltoztathatják, hogy milyen gyakran kapjanak e-maileket, és milyen tartalmak fontosak számukra, fantasztikus módja annak, hogy erős levelezőprogramot tartsunk fenn elkötelezett előfizetőkkel!
  7. Teszt, teszt, teszt: Mindenképpen tesztelje e-mailjeit több eszközön, vagy használjon egy alkalmazást megtekintheti e-mailjeit az e-mail klienseken keresztül hogy jól nézzen ki és megfelelően működjön különböző képernyőméreteken és operációs rendszereken, MIELŐTT elküldi. Lakmusz jelentése szerint a 3 legnépszerűbb mobil nyílt környezet továbbra is ugyanaz: Apple iPhone (iOS Mail), Google Android, Apple iPad (iPadOS Mail). Emellett a tárgysorok és a tartalom tesztváltozatait is beépítheti a megnyitási és átkattintási arányok javítása érdekében. Számos e-mail platform ma már beépített automatizált teszteléssel, amely mintát vesz a listából, azonosítja a nyertes változatot, és a legjobb e-mailt küldi el a fennmaradó feliratkozóknak.

Ha cége nehézségekkel küzd az elköteleződést ösztönző, mobilra reagáló e-mailek tervezésével, tesztelésével és megvalósításával, ne habozzon kapcsolatba lépni cégemkel. DK New Media gyakorlatilag minden e-mail szolgáltató megvalósításában van tapasztalata (ESP).

Douglas Karr

Douglas Karr CMO of OpenINSIGHTS és az alapítója a Martech Zone. Douglas több tucat sikeres MarTech startupnak segített, több mint 5 milliárd dolláros átvilágításban segédkezett a Martech akvizíciókban és befektetésekben, és továbbra is segíti a vállalatokat értékesítési és marketingstratégiáik megvalósításában és automatizálásában. Douglas nemzetközileg elismert digitális átalakulás és MarTech szakértő és előadó. Douglas egy Dummie's Guide és egy üzleti vezetői könyv szerzője is.

Kapcsolódó cikkek

Vissza a lap tetejére gombra
közel

Adblock észlelve

Martech Zone ingyenesen tudja biztosítani Önnek ezt a tartalmat, mivel webhelyünkkel bevételt szerezünk hirdetési bevételek, társult linkek és szponzorálás révén. Nagyra értékelnénk, ha eltávolítaná hirdetésblokkolóját, miközben megtekinti webhelyünket.