Էլփոստի մարքեթինգ և ավտոմատացումԲջջայինի և պլանշետի շուկայավարում

Շարժական համար հարմար HTML էլփոստի 16 լավագույն պրակտիկա, որոնք առավելագույնի են հասցնում մուտքի արկղի տեղադրումն ու ներգրավվածությունը

2023 թվականին հավանական է, որ բջջային հեռախոսը կգերազանցի աշխատասեղանը՝ որպես էլ.փոստ բացելու հիմնական սարք: Փաստորեն, HubSpot-ը գտավ դա 46 տոկոսը բոլոր էլփոստի բացումներն այժմ տեղի են ունենում բջջայինով: Եթե ​​դուք էլեկտրոնային նամակներ չեք նախագծում բջջայինի համար, ապա սեղանին շատ ներգրավվածություն և գումար եք թողնում:

  1. Էլփոստի վավերացում. Ապահովելով ձեր նամակները վավերացված են դեպի ուղարկող տիրույթ և IP հասցեն չափազանց կարևոր է մուտքի արկղ մուտք գործելու համար, այլ ոչ թե անպետք կամ սպամի թղթապանակ: Անշուշտ, կարևոր է նաև, որ դուք տրամադրեք էլփոստից հրաժարվելու միջոց՝ օգտագործելով մի հարթակ, որը ներառում է չեղարկել բաժանորդագրության հղումը:
  2. Պատասխանատու ձևավորում. The HTML էլփոստը պետք է լինի նախագծված է արձագանքելու համար, ինչը նշանակում է, որ այն կարող է հարմարվել այն սարքի էկրանի չափին, որի վրա այն դիտվում է: Սա ապահովում է, որ էլփոստը լավ տեսք ունի ինչպես աշխատասեղանի, այնպես էլ շարժական սարքերի վրա:
  3. Հստակ և հակիրճ թեմա. Հստակ և հակիրճ թեմայի գիծը կարևոր է բջջային օգտատերերի համար, քանի որ նրանք կարող են տեսնել թեմայի տողի միայն առաջին մի քանի բառերն իրենց էլփոստի նախադիտման վահանակում: Այն պետք է լինի հակիրճ և ճշգրիտ արտացոլի նամակի բովանդակությունը: Էլփոստի թեմայի տողի նիշերի օպտիմալ երկարությունը կարող է տարբեր լինել՝ կախված մի շարք գործոններից, ինչպիսիք են էլփոստի բովանդակությունը, լսարանը և օգտագործվող էլփոստի հաճախորդը: Այնուամենայնիվ, փորձագետներից շատերը խորհուրդ են տալիս էլփոստի թեմայի տողերը պահել կարճ և ճշգրիտ, սովորաբար 41-50 նիշ կամ 6-8 բառ: Բջջային սարքերում 50 նիշից ավելի թեմայի տողերը կարող են կտրվել, իսկ որոշ դեպքերում կարող են ցուցադրվել միայն թեմայի տողի առաջին մի քանի բառերը: Սա կարող է դժվարացնել ստացողի համար էլփոստի հիմնական հաղորդագրությունը հասկանալը և կարող է նվազեցնել էլփոստի բացման հավանականությունը:
  4. Preheader: Էլփոստի նախնական վերնագիրը նամակի բովանդակության կարճ ամփոփումն է, որը հայտնվում է էլփոստի հաճախորդի մուտքի արկղում թեմայի տողի կողքին կամ ներքևում: Սա կարևոր տարր է, որը կարող է ազդել ձեր էլ. նամակների բաց դրույքաչափի վրա, երբ այն օպտիմալացվում է: Հաճախորդների մեծամասնությունը ներառում է HTML և CSS՝ համոզվելու համար, որ նախնական վերնագրի տեքստը պատշաճ կերպով կարգավորվել է:
<!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. Մեկ սյունակի դասավորություն. Նամակները, որոնք նախագծված են մեկ սյունակ դասավորությամբ, ավելի հեշտ է կարդալ շարժական սարքերում: Բովանդակությունը պետք է կազմակերպվի տրամաբանական հաջորդականությամբ և ներկայացվի պարզ, դյուրընթեռնելի ձևաչափով: Եթե ​​ունեք մի քանի սյունակ, CSS-ի օգտագործումը կարող է նրբագեղորեն կազմակերպել սյունակները մեկ սյունակի դասավորության մեջ:

Ահա մի HTML էլփոստի դասավորություն դա աշխատասեղանի վրա 2 սյունակ է և շարժական էկրանների վրա ընկնում է մեկ սյունակի՝

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

Ահա մի HTML էլփոստի դասավորություն դա աշխատասեղանի վրա 3 սյունակ է և շարժական էկրանների վրա ընկնում է մեկ սյունակի՝

<!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. Թեթև և մութ ռեժիմ. կամուրջ էլփոստի հաճախորդները աջակցում են թեթև և մութ ռեժիմին CSS prefers-color-scheme օգտատիրոջ նախասիրություններին համապատասխանելու համար: Համոզվեք, որ օգտագործեք պատկերների տեսակները, որտեղ դուք ունեք թափանցիկ ֆոն: Ահա կոդի օրինակ:
<!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. Մեծ, ընթեռնելի տառատեսակներ. Տառատեսակի չափը և ոճը պետք է ընտրվեն, որպեսզի տեքստը հեշտ ընթեռնելի լինի փոքր էկրանին: Օգտագործեք առնվազն 14 pt տառաչափ և խուսափեք փոքր էկրանների վրա դժվար ընթերցվող տառատեսակներ օգտագործելուց: Սովորաբար օգտագործվող տառատեսակները մեծ հավանականություն ունեն հետևողականորեն ներկայացնելու տարբեր էլ. Եթե ​​դուք իսկապես օգտագործում եք հատուկ տառատեսակ, համոզվեք, որ ձեր 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. Պատկերների օպտիմալ օգտագործումը. Պատկերները կարող են դանդաղեցնել բեռնման ժամանակը և կարող են պատշաճ կերպով չցուցադրվել բոլոր շարժական սարքերում: Օգտագործեք պատկերները խնայողաբար և համոզվեք, որ դրանք չափսեր են և սեղմված բջջային դիտման համար: Համոզվեք, որ լրացրեք ձեր պատկերների այլընտրանքային տեքստը, եթե էլփոստի հաճախորդը արգելափակի դրանք: Բոլոր պատկերները պետք է պահվեն և հղում կատարվեն անվտանգ կայքից (SSL) Ահա 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. Մաքրել գործողության կոչը (CTA- ն): Հստակ և ընդգծված CTA-ն կարևոր է ցանկացած էլ. Համոզվեք, որ CTA-ն հեշտ է գտնել, և որ այն բավականաչափ մեծ է՝ շարժական սարքի վրա սեղմելու համար: Եթե ​​դուք ներառում եք կոճակներ, կարող եք համոզվել, որ դրանք գրված են CSS-ում՝ նաև ներկառուցված ոճի պիտակներով.
<!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. Կարճ և հակիրճ բովանդակություն. Նամակի բովանդակությունը կարճ և ճշգրիտ պահեք: HTML էլփոստի նիշերի սահմանաչափը կարող է տարբեր լինել՝ կախված օգտագործվող էլփոստի հաճախորդից: Այնուամենայնիվ, էլփոստի հաճախորդների մեծ մասը սահմանում է էլփոստի առավելագույն չափի սահմանափակում, սովորաբար 1024-2048 կիլոբայթի միջև (KB), որը ներառում է ինչպես HTML կոդը, այնպես էլ ցանկացած պատկեր կամ հավելված: Օգտագործեք ենթավերնագրեր, կետեր և ձևաչափման այլ մեթոդներ, որպեսզի բովանդակությունը հեշտությամբ սկանավորվի փոքր էկրանով ոլորելիս և կարդալիս:
  2. Ինտերակտիվ տարրեր. Ներառում ինտերակտիվ տարրեր որը գրավում է ձեր բաժանորդի ուշադրությունը, կբարձրացնի ձեր էլ. Անիմացիոն GIF- ներ, հետհաշվարկի ժամանակաչափեր, տեսանյութեր և այլ տարրեր աջակցվում են սմարթֆոնների էլփոստի հաճախորդների մեծամասնության կողմից:
  3. Անհատականացում. Ողջույնի և բովանդակության անհատականացումը որոշակի բաժանորդի համար կարող է զգալիորեն խթանել ներգրավվածությունը, պարզապես համոզվեք, որ դա ճիշտ եք հասկանում: Օրինակ. Կարևոր է ունենալ հետադարձ կապ, եթե անուն դաշտում տվյալներ չկան:
  4. Դինամիկ բովանդակություն. Բովանդակության սեգմենտացիան և հարմարեցումը կարող են նվազեցնել ձեր բաժանորդագրության դրույքաչափերը և պահպանել ձեր բաժանորդների ներգրավվածությունը:
  5. Քարոզարշավի ինտեգրում. Ժամանակակից էլփոստի ծառայություններ մատուցողներից շատերն ունեն ավտոմատ կերպով կցելու հնարավորություն UTM քարոզարշավի հարցումների տողեր յուրաքանչյուր հղման համար, որպեսզի կարողանաք էլփոստը դիտել որպես ալիք վերլուծության մեջ:
  6. Նախապատվության կենտրոն. Էլեկտրոնային փոստի մարքեթինգը չափազանց կարևոր է էլ. փոստին պարզապես ընտրելու կամ հրաժարվելու մոտեցման համար: Նախապատվության կենտրոնի ընդգրկումը, որտեղ ձեր բաժանորդները կարող են փոխել, թե որքան հաճախ են նրանք ստանում էլ.
  7. Test, Test, Test: Համոզվեք, որ փորձարկեք ձեր էլփոստը մի քանի սարքերի վրա կամ օգտագործեք հավելվածը նախադիտեք ձեր էլ. նամակները էլփոստի հաճախորդների միջև ապահովելու համար, որ այն լավ տեսք ունի և պատշաճ կերպով գործում է տարբեր չափերի էկրանների և օպերացիոն համակարգերի վրա, նախքան ուղարկելը: Լիտմուսը հաղորդում է, որ թոփ 3 ամենահայտնի բջջային բաց միջավայրերը շարունակում են մնալ նույնը՝ Apple iPhone (iOS Mail), Google Android, Apple iPad (iPadOS Mail): Բացի այդ, ներառեք ձեր թեմատիկ տողերի և բովանդակության թեստային տարբերակները` բարելավելու ձեր բաց և սեղմումների տոկոսադրույքները: Շատ էլփոստի հարթակներ այժմ ներառում են ավտոմատացված թեստավորում, որը կընտրի ցուցակը, կբացահայտի հաղթող տարբերակն ու լավագույն էլփոստը կուղարկի մնացած բաժանորդներին:

Եթե ​​ձեր ընկերությունը դժվարանում է նախագծել, փորձարկել և կիրառել բջջային պատասխանատու նամակներ, որոնք խթանում են ներգրավվածությունը, մի հապաղեք կապվել իմ ընկերության հետ: DK New Media ունի գործնականում բոլոր էլ.փոստի ծառայություններ մատուցողի ներդրման փորձ (ESP).

Douglas Karr

Douglas Karr -ի CMO-ն է OpenINSIGHTS և հիմնադիրը Martech Zone. Դուգլասը օգնել է MarTech-ի տասնյակ հաջողակ ստարտափների, աջակցել է ավելի քան 5 միլիարդ դոլարի չափով Martech-ի ձեռքբերումների և ներդրումների պատշաճ ուսումնասիրությանը և շարունակում է աջակցել ընկերություններին իրենց վաճառքի և շուկայավարման ռազմավարությունների իրականացման և ավտոմատացման գործում: Դուգլասը միջազգայնորեն ճանաչված թվային փոխակերպման և MarTech փորձագետ և խոսնակ է: Դուգլասը նաև Դումմիի ուղեցույցի և բիզնեսի առաջնորդության գրքի հրատարակված հեղինակ է:

Առնչվող հոդվածներ

Վերադառնալ սկիզբ կոճակը
փակել

Հայտնաբերվել է Adblock

Martech Zone կարող է անվճար տրամադրել ձեզ այս բովանդակությունը, քանի որ մենք դրամայնացնում ենք մեր կայքը գովազդից ստացված եկամուտների, փոխկապակցված հղումների և հովանավորությունների միջոցով: Մենք երախտապարտ կլինենք, եթե մեր կայքը դիտելիս հեռացնեիք ձեր գովազդային արգելափակիչը: