Marketingu dhe Automatizimi me EmailMarketingu i celularëve dhe tabletave

16 praktikat më të mira të postës elektronike HTML miqësore për celularin që maksimizojnë vendosjen dhe angazhimin në kutinë hyrëse

Në vitin 2023, ka të ngjarë që celulari të kalojë desktopin si pajisja kryesore për hapjen e emailit. Në fakt, HubSpot e gjeti atë Qind 46 nga të gjitha emailet që hapen tani ndodhin në celular. Nëse nuk po dizajnoni emaile për celular, po lini shumë angazhim dhe para në tryezë.

  1. Autentifikimi i emailit: Sigurimi i juaj emailet janë vërtetuar në domenin dërgues dhe IP adresa është kritike për të shkuar te kutia hyrëse dhe jo e drejtuar në një dosje të padëshiruar ose të padëshiruar. Është gjithashtu thelbësore, sigurisht, që të ofroni një mjet për të hequr dorë nga emaili duke përdorur një platformë që përfshin një lidhje çregjistrimi.
  2. Dizajn të përgjegjshëm: La HTML emaili duhet të jetë projektuar për të qenë të përgjegjshëm, që do të thotë se mund të përshtatet me madhësinë e ekranit të pajisjes në të cilën po shikohet. Kjo siguron që emaili të duket i mirë si në pajisjet desktop ashtu edhe në ato celulare.
  3. Linja e qartë dhe koncize e temës: Një linjë e qartë dhe koncize e subjektit është e rëndësishme për përdoruesit e celularëve, sepse ata mund të shohin vetëm fjalët e para të rreshtit të temës në panelin e tyre të shikimit të emailit. Duhet të jetë i shkurtër dhe të pasqyrojë saktë përmbajtjen e emailit. Gjatësia optimale e karaktereve të një linje teme emaili mund të ndryshojë në varësi të një numri faktorësh, të tillë si përmbajtja e emailit, audienca dhe klienti i emailit që përdoret. Megjithatë, shumica e ekspertëve rekomandojnë mbajtjen e linjave të temës së emailit të shkurtër dhe të saktë, zakonisht midis 41-50 karaktere ose 6-8 fjalë. Në pajisjet celulare, linjat e subjektit që janë më të gjata se 50 karaktere mund të ndërpriten dhe në disa raste, mund të shfaqin vetëm fjalët e para të rreshtit të temës. Kjo mund ta bëjë të vështirë për marrësin të kuptojë mesazhin kryesor të emailit dhe mund të zvogëlojë gjasat që emaili të hapet.
  4. Preheader: Një titull paraprak i emailit është një përmbledhje e shkurtër e përmbajtjes së një emaili që shfaqet pranë ose poshtë rreshtit të temës në kutinë hyrëse të klientit të emailit. Është një element i rëndësishëm që mund të ndikojë në shkallën e hapjes së emaileve tuaja kur optimizohen. Shumica e klientëve përfshijnë HTML dhe CSS për të siguruar që teksti i para-header-it të jetë konfiguruar siç duhet.
<!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. Paraqitja me një kolonë: Emailet që janë krijuar me një plan urbanistik me një kolonë janë më të lehta për t'u lexuar në pajisjet celulare. Përmbajtja duhet të organizohet në një sekuencë logjike dhe të paraqitet në një format të thjeshtë dhe të lehtë për t'u lexuar. Nëse keni shumë kolona, ​​përdorimi i CSS mund t'i organizojë me hijeshi kolonat në një plan urbanistik me një kolonë.

Këtu është një Paraqitja e emailit HTML që është 2 kolona në desktop dhe shembet në një kolonë të vetme në ekranet celulare:

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

Këtu është një Paraqitja e emailit HTML që është 3 kolona në desktop dhe shembet në një kolonë të vetme në ekranet celulare:

<!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. Modaliteti i dritës dhe i errët: urë klientët e emailit mbështesin modalitetin e dritës dhe të errët CSS prefers-color-scheme për të akomoduar preferencat e përdoruesit. Sigurohuni që të përdorni llojet e imazheve ku keni një sfond transparent. Këtu është një shembull kodi.
<!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. Fonte të mëdha, të lexueshme: Madhësia dhe stili i shkronjave duhet të zgjidhen për ta bërë tekstin të lehtë për t'u lexuar në një ekran të vogël. Përdorni të paktën një madhësi fonti 14 pt dhe shmangni përdorimin e shkronjave që janë të vështira për t'u lexuar në ekranet e vegjël. Shkronjat e përdorura zakonisht kanë një probabilitet të lartë për t'u dhënë vazhdimisht nëpër klientë të ndryshëm të postës elektronike, kështu që përdorimi i Arial, Helvetica, Times New Roman, Georgia, Verdana, Tahoma dhe Trebuchet MS janë zakonisht shkronja të sigurta. Nëse përdorni një font të personalizuar, sigurohuni që të keni një font kthimi të identifikuar në CSS tuaj:
<!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. Përdorimi optimal i imazheve: Imazhet mund të ngadalësojnë kohën e ngarkimit dhe mund të mos shfaqen siç duhet në të gjitha pajisjet celulare. Përdorni imazhet me masë dhe sigurohuni që ato të kenë madhësi dhe i ngjeshur për shikimin në celular. Sigurohuni që të plotësoni tekstin alt për imazhet tuaja në rast se klienti i postës elektronike i bllokon ato. Të gjitha imazhet duhet të ruhen dhe të referohen nga një faqe interneti e sigurt (SSL). Këtu është kodi shembull i imazheve të përgjegjshme në një email 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. Pastro thirrjen për veprim (CTA): Një CTA e qartë dhe e spikatur është e rëndësishme në çdo email, por është veçanërisht e rëndësishme në një email miqësor me celularin. Sigurohuni që CTA është e lehtë për t'u gjetur dhe se është mjaft e madhe për t'u klikuar në një pajisje celulare. Nëse inkorporoni butona, mund të siguroheni që t'i keni të shkruara në CSS me etiketa të stilit inline gjithashtu:
<!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. Përmbajtje e shkurtër dhe koncize: Mbajeni përmbajtjen e emailit të shkurtër dhe të saktë. Kufiri i karaktereve për një email HTML mund të ndryshojë në varësi të klientit të postës elektronike që përdoret. Sidoqoftë, shumica e klientëve të postës elektronike vendosin një kufi maksimal të madhësisë për emailet, zakonisht midis 1024-2048 kilobajt (KB), i cili përfshin kodin HTML dhe çdo imazh ose bashkëngjitje. Përdorni nëntitujt, pikat dhe teknikat e tjera të formatimit për ta bërë përmbajtjen lehtësisht të skanueshme gjatë lëvizjes dhe leximit në një ekran të vogël.
  2. Elementet interaktive: Përfshirja e elementet interaktive që tërheqin vëmendjen e pajtimtarit tuaj do të rrisin angazhimin, të kuptuarit dhe normat e konvertimit nga emaili juaj. GIF të animuara, kohëmatësit e numërimit mbrapsht, videot dhe elementët e tjerë mbështeten nga shumica e klientëve të postës elektronike të smartfonëve.
  3. Personalizimi: Personalizimi i përshëndetjes dhe përmbajtjes për një pajtimtar specifik mund të nxisë ndjeshëm angazhimin, vetëm sigurohuni që ta kuptoni siç duhet! P.sh. Është e rëndësishme të kesh rezerva nëse nuk ka të dhëna në fushën e emrit.
  4. Përmbajtja dinamike: Segmentimi dhe personalizimi i përmbajtjes mund të zvogëlojë tarifat tuaja të çregjistrimit dhe t'i mbajë abonentët tuaj të angazhuar.
  5. Integrimi i fushatës: Shumica e ofruesve modernë të shërbimeve të postës elektronike kanë aftësinë të shtohen automatikisht Pyetjet e fushatës UTM për çdo lidhje në mënyrë që të mund ta shikoni emailin si një kanal në analitikë.
  6. Qendra e Preferencave: Marketingu me email është shumë i rëndësishëm për vetëm një qasje të zgjedhë-në ose të heqë dorë për email. Përfshirja e një qendre preferenciale ku abonentët tuaj mund të ndryshojnë sa shpesh marrin emaile dhe çfarë përmbajtje është e rëndësishme për ta është një mënyrë fantastike për të mbajtur një program të fortë email me abonentë të angazhuar!
  7. Test, Test, Test: Sigurohuni që të testoni emailin tuaj në pajisje të shumta ose të përdorni një aplikacion për të shikoni paraprakisht emailet tuaja nëpër klientët e emailit për t'u siguruar që duket mirë dhe funksionon siç duhet në madhësi të ndryshme ekrani dhe sisteme operative PARA se të dërgoni. Lakmus raporton se 3 mjediset më të njohura të hapura celulare vazhdojnë të jenë të njëjta: Apple iPhone (iOS Mail), Google Android, Apple iPad (iPadOS Mail). Gjithashtu, përfshini variacione testimi të linjave dhe përmbajtjes suaj të lëndës për të përmirësuar normat tuaja të hapjes dhe të klikimeve. Shumë platforma të postës elektronike tani përfshijnë testime të automatizuara që do të mostrojnë listën, do të identifikojnë një variant fitues dhe do t'u dërgojnë emailin më të mirë abonentëve të mbetur.

Nëse kompania juaj po lufton me dizajnimin, testimin dhe zbatimin e email-eve të përgjegjshme celulare që po nxisin angazhimin, mos hezitoni të kontaktoni firmën time. DK New Media ka përvojë në zbatimin e pothuajse çdo ofruesi të shërbimit të postës elektronike (ESP).

Douglas Karr

Douglas Karr është CMO i OpenINSIGHTS dhe themeluesi i Martech Zone. Douglas ka ndihmuar dhjetëra startup të suksesshëm të MarTech, ka ndihmuar në analizën e duhur prej mbi 5 miliardë dollarësh në blerjet dhe investimet e Martech dhe vazhdon të ndihmojë kompanitë në zbatimin dhe automatizimin e strategjive të tyre të shitjeve dhe marketingut. Douglas është një ekspert dhe folës i transformimit dixhital dhe i njohur ndërkombëtarisht në MarTech. Douglas është gjithashtu një autor i botuar i një udhëzuesi Dummie dhe një libri për udhëheqjen e biznesit.

Artikuj Të Ngjashëm

Kthehu në krye të faqes
afër

Blloku i reklamave u zbulua

Martech Zone është në gjendje t'ju ofrojë këtë përmbajtje pa kosto, sepse ne fitojmë para nga faqja jonë përmes të ardhurave nga reklamat, lidhjeve të filialeve dhe sponsorizimeve. Do të vlerësonim nëse do të hiqnit bllokuesin tuaj të reklamave ndërsa shikoni faqen tonë.