Email מאַרקעטינג און אַוטאָמאַטיאָןמאָביל און טאַבלעט פֿאַרקויף

16 בעסטער פּראַקטיסיז פֿאַר רירעוודיק פרייַנדלעך HTML E- בריוו וואָס מאַקסאַמייז ינבאָקס פּלייסמאַנט און באַשטעלונג

אין 2023, עס איז פּראַבאַבאַל אַז רירעוודיק וועט יקסיד די דעסקטאַפּ ווי די ערשטיק מיטל פֿאַר עפן E- בריוו. אין פאַקט, HubSpot געפֿונען אַז קסנומקס פּראָצענט פון אַלע E- בריוו אָפּענס איצט פאַלן אויף רירעוודיק. אויב איר זענט נישט דיזיינינג ימיילז פֿאַר רירעוודיק, איר לאָזן אַ פּלאַץ פון באַשטעלונג און געלט אויף די טיש.

  1. Email אָטענטאַקיישאַן: ינשורינג דיין ימיילז זענען אָטענטאַקייטאַד צו די שיקט פעלד און IP אַדרעס איז קריטיש צו באַקומען צו די ינבאָקס און נישט ראַוטיד צו אַ אָפּפאַל אָדער ספּאַם טעקע. עס איז אויך יקערדיק, פון קורס, אַז איר צושטעלן אַ מיטל צו אַפּט אויס פון די E- בריוו ניצן אַ פּלאַטפאָרמע וואָס ינקאָרפּערייץ אַ אַנסאַבסקרייבינג לינק.
  2. אָפּרופיק פּלאַן: די HTML בליצפּאָסט זאָל זיין דיזיינד צו זיין אָפּרופיק, וואָס מיטל אַז עס קענען סטרויערן צו די פאַרשטעלן גרייס פון די מיטל אויף וואָס עס איז וויוד. דאָס ינשורז אַז די E- בריוו קוקט גוט אויף ביידע דעסקטאַפּ און רירעוודיק דעוויסעס.
  3. קלאָר און קאַנסייס ונטערטעניק שורה: א קלאָר און קאַנסייס ונטערטעניק שורה איז וויכטיק פֿאַר רירעוודיק יוזערז ווייַל זיי קען נאָר זען די ערשטער ביסל ווערטער פון די ונטערטעניק שורה אין זייער בליצפּאָסט פאָרויסיקע ווייַזונג שויב. עס זאָל זיין קורץ און אַקיעראַטלי פאַרטראַכטנ די אינהאַלט פון די E- בריוו. די אָפּטימאַל כאַראַקטער לענג פון אַן E- בריוו ונטערטעניק שורה קענען בייַטן דיפּענדינג אויף אַ נומער פון סיבות, אַזאַ ווי די E- בריוו אינהאַלט, די וילעם און די E- בריוו קליענט. אָבער, רובֿ עקספּערץ רעקאָמענדירן צו האַלטן E- בריוו ונטערטעניק שורות קורץ און צו די פונט, טיפּיקלי צווישן 41-50 אותיות אָדער 6-8 ווערטער. אויף רירעוודיק דעוויסעס, ונטערטעניק שורות וואָס זענען מער ווי 50 אותיות קען זיין שנייַדן אַוועק, און אין עטלעכע קאַסעס, בלויז די ערשטע ווערטער פון די ונטערטעניק שורה. דאָס קען מאַכן עס שווער פֿאַר די באַקומער צו פֿאַרשטיין די הויפּט אָנזאָג פון די E- בריוו און קען רעדוצירן די ליקעליהאָאָד פון עפֿענען די E- בריוו.
  4. פּרעהעאַדער: אַ בליצפּאָסט פּרעהעאַדער איז אַ קורץ קיצער פון די אינהאַלט פון אַן E- בריוו וואָס איז געוויזן ווייַטער צו אָדער אונטער די ונטערטעניק שורה אין די ינבאָקס פון אַן E- בריוו קליענט. דאָס איז אַ וויכטיק עלעמענט וואָס קען ווירקן די אָפן קורס פון דיין ימיילז ווען אָפּטימיזעד. רובֿ קלייאַנץ ינקאָרפּערייט 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 email אויסלייג דאָס איז 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 email אויסלייג דאָס איז 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. ליכט און פינצטער מאָדע: בריק E- בריוו קלייאַנץ שטיצן ליכט און פינצטער מאָדע קסס 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 פּט שריפֿט גרייס און ויסמיידן ניצן פאַנץ וואָס זענען שווער צו לייענען אויף קליין סקרינז. קאַמאַנלי געוויינט פאַנץ האָבן אַ הויך ליקעליהאָאָד פון רענדערינג קאַנסיסטאַנטלי אַריבער פאַרשידענע E- בריוו קלייאַנץ, אַזוי ניצן Arial, Helvetica, Times New Roman, דזשאָרדזשאַ, Verdana, Tahoma און Trebuchet MS זענען טיפּיקלי זיכער פאַנץ. אויב איר נוצן אַ מנהג שריפֿט, זיין זיכער צו האָבן אַ פאַלבאַק שריפֿט יידענאַפייד אין דיין 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. אָפּטימאַל נוצן פון בילדער: בילדער קענען פּאַמעלעך די מאַסע צייט און קען נישט זיין געוויזן רעכט אויף אַלע רירעוודיק דעוויסעס. ניצן בילדער ספּערינגלי, און מאַכן זיכער אַז זיי זענען סייזד און קאַמפּרעסט פֿאַר רירעוודיק וויוינג. זייט זיכער צו פּלאָמבירן די אַלט טעקסט פֿאַר דיין בילדער אויב די E- בריוו קליענט בלאַקס זיי. אַלע בילדער זאָל זיין סטאָרד און ריפערד צו פֿון אַ זיכער וועבזייטל (ססל). דאָ ס ביישפּיל קאָד פון אָפּרופיק בילדער אין אַ HTML E- בריוו.
<!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 איז וויכטיק אין קיין E- בריוו, אָבער עס איז ספּעציעל וויכטיק אין אַ רירעוודיק-פרייַנדלעך E- בריוו. מאַכן זיכער אַז די קטאַ איז גרינג צו געפֿינען און אַז עס איז גרויס גענוג צו זיין קליקט אויף אַ רירעוודיק מיטל. אויב איר ינקאָרפּערייט קנעפּלעך, איר קענט אויך ענשור אַז זיי זענען געשריבן אין 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. קורץ און קאַנסייס אינהאַלט: האַלטן די אינהאַלט פון די E- בריוו קורץ און צו די פונט. די כאַראַקטער לימיט פֿאַר אַ HTML E- בריוו קענען בייַטן דיפּענדינג אויף די E- בריוו קליענט. אָבער, רובֿ E- בריוו קלייאַנץ אָנטאָן אַ מאַקסימום גרייס לימיט פֿאַר ימיילז, טיפּיקלי צווישן 1024-2048 קילאבייטן (KB), וואָס כולל ביידע די HTML קאָד און קיין בילדער אָדער אַטאַטשמאַנץ. ניצן סובהעאַדינגס, קויל ווייזט און אנדערע פאָרמאַטטינג טעקניקס צו מאַכן די אינהאַלט לייכט סקאַנינג בשעת סקראָללינג און לייענען אויף אַ קליין פאַרשטעלן.
  2. ינטעראַקטיווע עלעמענטן: ינקאָרפּערייטינג ינטעראַקטיווע עלעמענטן וואָס כאַפּן די ופמערקזאַמקייט פון דיין אַבאָנענט וועט פאַרגרעסערן באַשטעלונג, קאַמפּריכענשאַן און קאַנווערזשאַן רייץ פֿון דיין E- בריוו. אַנימאַטעד גיפס, קאָונטדאָוון טיימערז, ווידיאס און אנדערע עלעמענטן זענען געשטיצט דורך די מערהייַט פון סמאַרטפאָנע E- בריוו קלייאַנץ.
  3. פערזענליכען: פּערסאַנאַלייזינג די גרוס און אינהאַלט פֿאַר אַ ספּעציפיש אַבאָנענט קענען באטייטיק פאַרגרעסערן באַשטעלונג, נאָר זיין זיכער אַז איר באַקומען עס רעכט! למשל. עס איז וויכטיק צו האָבן פאַלבאַקס אויב עס איז קיין דאַטן אין אַ ערשטער נאָמען פעלד.
  4. דינאַמיש אינהאַלט: סעגמענטאַטיאָן און קוסטאָמיזאַטיאָן פון די אינהאַלט קענען רעדוצירן דיין אַנסאַבסקרייב ראַטעס און האַלטן דיין אבאנענטן פאַרקנאַסט.
  5. קאמפאניע אינטעגראציע: רובֿ מאָדערן E- בריוו סערוויס פּראַוויידערז האָבן די פיייקייט צו אויטאָמאַטיש צוגעבן UTM קאַמפּיין קוועריסטרינגס פֿאַר יעדער לינק אַזוי אַז איר קענען זען E- בריוו ווי אַ קאַנאַל אין אַנאַליטיקס.
  6. פּרעפֿערענצן צענטער: E- בריוו פֿאַרקויף איז צו וויכטיק פֿאַר בלויז אַ אַפּט-אין אָדער אַפּט-אויס צוגאַנג צו ימיילז. ינקאָרפּערייטינג אַ ייבערהאַנט צענטער ווו דיין אבאנענטן קענען טוישן ווי אָפט זיי באַקומען ימיילז און וואָס אינהאַלט איז וויכטיק פֿאַר זיי איז אַ פאַנטאַסטיש וועג צו האַלטן אַ שטאַרק E- בריוו פּראָגראַם מיט פאַרקנאַסט אבאנענטן!
  7. טעסט, טעסט, טעסט: מאַכן זיכער צו פּרובירן דיין E- בריוו אויף קייפל דעוויסעס אָדער נוצן אַ אַפּלאַקיישאַן פאָרויסיקע ווייַזונג דיין ימיילז אַריבער E- בריוו קלייאַנץ צו ענשור אַז עס קוקט גוט און פאַנגקשאַנז רעכט אויף פאַרשידענע פאַרשטעלן סיזעס און אָפּערייטינג סיסטעמען איידער איר שיקן. ליטמוס ריפּאָרץ אַז די שפּיץ 3 מערסט פאָלקס רירעוודיק עפענען ינווייראַנמאַנץ פאָרזעצן צו זיין די זעלבע: עפּל יפאָנע (יאָס מעיל), Google אַנדרויד, עפּל יפּאַד (יפּאַדאָס מעיל). אויך, ינקאָרפּערייט טעסט ווערייישאַנז פון דיין ונטערטעניק שורות און אינהאַלט צו פֿאַרבעסערן דיין עפענען און גיט-דורך רייץ. פילע E- בריוו פּלאַטפאָרמס איצט ינקאָרפּערייט אָטאַמייטיד טעסטינג וואָס וועט מוסטער די רשימה, ידענטיפיצירן אַ ווינינג ווערייישאַן און שיקן די בעסטער E- בריוו צו די רוען אבאנענטן.

אויב דיין פירמע איז סטראַגאַלינג מיט דיזיינינג, טעסטינג און ימפּלאַמענינג רירעוודיק אָפּרופיק ימיילז וואָס פירן באַשטעלונג, טאָן ניט קווענקלען צו קאָנטאַקט מיין פירמע. DK New Media האט דערפאַרונג אין די ימפּלאַמענטיישאַן פון כמעט יעדער E- בריוו סערוויס שפּייַזער (עספּ).

Douglas Karr

Douglas Karr איז קמאָ פון OpenINSIGHTS און דער גרינדער פון די Martech Zone. דאָוגלאַס האט געהאָלפֿן דאַזאַנז פון געראָטן MarTech סטאַרטאַפּס, אַסיסטאַד אין די רעכט פלייַס פון איבער $ 5 ביל אין Martech אַקוואַזישאַנז און ינוועסטמאַנץ, און האלט צו אַרוישעלפן קאָמפּאַניעס אין ימפּלאַמענינג און אָטאַמייטינג זייער פארקויפונג און פֿאַרקויף סטראַטעגיעס. דאָוגלאַס איז אַן ינטערנאַשאַנאַלי דערקענט דיגיטאַל טראַנספאָרמאַציע און MarTech עקספּערט און רעדנער. דאָוגלאַס איז אויך אַ פארעפנטלעכט מחבר פון אַ דאַמי ס פירער און אַ געשעפט פירערשאַפט בוך.

Related ארטיקלען

צוריק צו שפּיץ קנעפּל
נאָענט

אַדבלאָקק דיטעקטאַד

Martech Zone איז ביכולת צו צושטעלן איר דעם אינהאַלט אָן קיין קאָס ווייַל מיר מאָנעטיזירן אונדזער פּלאַץ דורך אַד רעוועך, צוגעבן לינקס און ספּאָנסאָרשיפּס. מיר וואָלט אָפּשאַצן אויב איר וואָלט באַזייַטיקן דיין אַד בלאַקער ווען איר זען אונדזער פּלאַץ.