ელექტრონული ფოსტის მარკეტინგი და ავტომატიზაციამობილური და ტაბლეტების მარკეტინგი

მობილურისთვის მოსახერხებელი HTML ელფოსტის 16 საუკეთესო პრაქტიკა, რომელიც მაქსიმალურად ზრდის შემოსულების განთავსებას და ჩართულობას

2023 წელს, სავარაუდოა, რომ მობილური გადააჭარბებს დესკტოპს, როგორც ელ.ფოსტის გახსნის მთავარ მოწყობილობას. სინამდვილეში, HubSpot-მა აღმოაჩინა ეს 46 პროცენტს ყველა ელ.ფოსტის გახსნა ახლა ხდება მობილურზე. თუ თქვენ არ აწყობთ ელ.წერილებს მობილურისთვის, თქვენ ტოვებთ დიდ ჩართულობას და ფულს მაგიდაზე.

  1. ელ.ფოსტის ავთენტიფიკაცია: თქვენი ელფოსტა დამოწმებულია გაგზავნის დომენს და IP მისამართი გადამწყვეტია შემოსულებში მოსახვედრად და არა უსარგებლო ან სპამის საქაღალდეში გადასატანად. ასევე აუცილებელია, რა თქმა უნდა, უზრუნველყოთ ელ.წერილზე უარის თქმის საშუალება პლატფორმის გამოყენებით, რომელიც შეიცავს გამოწერის გაუქმების ბმულს.
  2. საპასუხო დიზაინი: ის HTML ფოსტა უნდა იყოს შექმნილია საპასუხოდ, რაც ნიშნავს, რომ მას შეუძლია მორგებული იყოს მოწყობილობის ეკრანის ზომაზე, რომელზედაც მას უყურებენ. ეს უზრუნველყოფს, რომ ელფოსტა კარგად გამოიყურება როგორც დესკტოპზე, ასევე მობილურ მოწყობილობებზე.
  3. მკაფიო და ლაკონური თემის ხაზი: მკაფიო და ლაკონური თემის ხაზი მნიშვნელოვანია მობილური მომხმარებლებისთვის, რადგან მათ შეუძლიათ დაინახონ თემის ხაზის პირველი რამდენიმე სიტყვა ელფოსტის გადახედვის პანელში. ის უნდა იყოს მოკლე და ზუსტად ასახავდეს ელ.ფოსტის შინაარსს. ელ. ფოსტის სათაურის ხაზის ოპტიმალური სიმბოლოების სიგრძე შეიძლება განსხვავდებოდეს რამდენიმე ფაქტორზე, როგორიცაა ელექტრონული ფოსტის შინაარსი, აუდიტორია და გამოყენებული ელ.ფოსტის კლიენტი. თუმცა, ექსპერტების უმეტესობა გვირჩევს, რომ ელ.ფოსტის სათაური ხაზები იყოს მოკლე და ზუსტი, როგორც წესი, 41-50 სიმბოლოს ან 6-8 სიტყვას შორის. მობილურ მოწყობილობებზე, საგნის ხაზები, რომლებიც აღემატება 50 სიმბოლოს, შეიძლება შეწყდეს და ზოგიერთ შემთხვევაში შეიძლება გამოჩნდეს თემის ხაზის მხოლოდ პირველი რამდენიმე სიტყვა. ამან შეიძლება გაურთულოს მიმღებს ელფოსტის მთავარი შეტყობინების გაგება და შეამციროს ელფოსტის გახსნის ალბათობა.
  4. წინამორბედი: ელფოსტის წინასწარი სათაური არის ელ.ფოსტის შინაარსის მოკლე რეზიუმე, რომელიც გამოჩნდება ელ.ფოსტის კლიენტის შემოსულებში სათაურის ხაზთან ან მის ქვემოთ. ეს არის მნიშვნელოვანი ელემენტი, რომელსაც შეუძლია გავლენა მოახდინოს თქვენი ელ.ფოსტის გახსნის სიჩქარეზე ოპტიმიზებისას. კლიენტების უმეტესობა აერთიანებს 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 შრიფტის ზომა და მოერიდეთ პატარა ეკრანებზე ძნელად წასაკითხი შრიფტების გამოყენებას. ჩვეულებრივ გამოყენებულ შრიფტებს აქვთ მაღალი ალბათობა, რომ თანმიმდევრულად გამოიწერონ სხვადასხვა ელექტრონული ფოსტის კლიენტებში, ამიტომ Arial, Helvetica, Times New Roman, Georgia, 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. სურათების ოპტიმალური გამოყენება: სურათებს შეუძლიათ შეანელონ ჩატვირთვის დრო და შეიძლება არ გამოჩნდეს სათანადოდ ყველა მობილურ მოწყობილობაზე. გამოიყენეთ სურათები ზომიერად და დარწმუნდით, რომ ისინი ზომის და შეკუმშული მობილურის სანახავად. დარწმუნდით, რომ შეავსეთ თქვენი სურათების ალტერნატიული ტექსტი იმ შემთხვევაში, თუ ელ.ფოსტის კლიენტი დაბლოკავს მათ. ყველა სურათი უნდა იყოს შენახული და მოხსენიებული უსაფრთხო ვებსაიტიდან (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. ტესტი, ტესტი, ტესტი: დარწმუნდით, რომ შეამოწმეთ თქვენი ელფოსტა მრავალ მოწყობილობაზე ან გამოიყენეთ აპლიკაცია წინასწარ დაათვალიერეთ თქვენი ელფოსტა ელფოსტის კლიენტებში რათა უზრუნველყოს, რომ ის კარგად გამოიყურება და სწორად ფუნქციონირებს სხვადასხვა ზომის ეკრანზე და ოპერაციულ სისტემაზე გაგზავნამდე. Litmus იუწყება, რომ ტოპ 3 ყველაზე პოპულარული მობილური ღია გარემო კვლავაც იგივე რჩება: Apple iPhone (iOS Mail), Google Android, Apple iPad (iPadOS Mail). ასევე, ჩართეთ თქვენი თემის სტრიქონებისა და შინაარსის სატესტო ვარიაციები, რათა გააუმჯობესოთ თქვენი ღია და დაწკაპუნების სიხშირე. ელ.ფოსტის ბევრი პლატფორმა ახლა აერთიანებს ავტომატიზებულ ტესტირებას, რომელიც შეარჩევს სიას, იდენტიფიცირებს გამარჯვებულ ვარიაციას და გაუგზავნის საუკეთესო ელფოსტას დანარჩენ აბონენტებს.

თუ თქვენს კომპანიას უჭირს მობილური საპასუხო ელფოსტის დიზაინის შექმნა, ტესტირება და დანერგვა, რომლებიც ხელს უწყობენ ჩართულობას, ნუ მოგერიდებათ დაუკავშირდეთ ჩემს ფირმას. DK New Media აქვს პრაქტიკულად ყველა ელ.ფოსტის სერვისის პროვაიდერის განხორციელების გამოცდილება (ESP).

Douglas Karr

Douglas Karr არის CMO of OpenINSIGHTS და დამფუძნებელი Martech Zone. დუგლასი დაეხმარა ათეულობით წარმატებულ MarTech სტარტაპს, დაეხმარა 5 მილიარდ დოლარზე მეტის შეძენისა და ინვესტიციების გამომუშავებაში და აგრძელებს კომპანიებს მათი გაყიდვებისა და მარკეტინგული სტრატეგიების განხორციელებაში და ავტომატიზაციაში. დუგლასი არის საერთაშორისოდ აღიარებული ციფრული ტრანსფორმაციის და MarTech ექსპერტი და სპიკერი. დუგლასი ასევე არის Dummie's-ის სახელმძღვანელოს და ბიზნეს ლიდერობის წიგნის გამოქვეყნებული ავტორი.

დაკავშირებული სტატიები

დაბრუნება ღილაკზე
დახურვა

Adblock აღმოჩენილია

Martech Zone შეუძლია მოგაწოდოთ ეს კონტენტი უფასოდ, რადგან ჩვენ ვაკეთებთ ჩვენი საიტის მონეტიზაციას რეკლამის შემოსავლების, შვილობილი ბმულების და სპონსორების მეშვეობით. ჩვენ მადლობელი ვიქნებით, თუ ჩვენს საიტს ნახულობთ თქვენს რეკლამის ბლოკერს.