Электрондық пошта маркетингі және автоматтандыруМобильді және планшеттік маркетинг

Кіріс жәшігін орналастыру мен қатысуды барынша арттыратын 16 мобильді ыңғайлы HTML электрондық поштасының ең жақсы тәжірибесі

2023 жылы ұялы телефон электрондық поштаны ашуға арналған негізгі құрылғы ретінде жұмыс үстелінен асып түсуі ықтимал. Іс жүзінде HubSpot мұны тапты 46 пайыз барлық электрондық поштаның ашылуы енді ұялы телефонда болады. Егер сіз ұялы телефонға арналған электрондық поштаны жасамасаңыз, үстелде көп келісім мен ақша қалдырасыз.

  1. Электрондық пошта аутентификациясы: Сіздің қамтамасыз ету электрондық пошталардың түпнұсқалығы расталады жіберуші доменге және IP мекенжайы қажетсіз немесе спам қалтасына бағытталмаған кіріс жәшігіне жету үшін өте маңызды. Сондай-ақ, әрине, жазылудан бас тарту сілтемесі бар платформаны пайдаланып электрондық поштадан бас тарту құралын қамтамасыз ету маңызды.
  2. Жауапты дизайн: The 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 оңай табылғанына және оның мобильді құрылғыда басылатындай үлкен екеніне көз жеткізіңіз. Түймешіктерді біріктірсеңіз, олардың 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. Сынақ, сынақ, сынақ: Электрондық поштаңызды бірнеше құрылғыда сынап көріңіз немесе қолданбаны пайдаланыңыз электрондық пошта клиенттері арқылы электрондық пошталарды алдын ала қарау Жібермес бұрын оның жақсы көрінетініне және әртүрлі экран өлшемдері мен операциялық жүйелерде дұрыс жұмыс істейтініне көз жеткізу үшін. лакмус ең танымал 3 мобильді ашық ортаның бұрынғысынша сақталатынын хабарлайды: Apple iPhone (iOS Mail), Google Android, Apple iPad (iPadOS Mail). Сондай-ақ, ашу және басу жылдамдығын жақсарту үшін тақырып жолдары мен мазмұнның сынақ нұсқаларын қосыңыз. Көптеген электрондық пошта платформалары қазір тізімді таңдайтын, жеңімпаз нұсқаны анықтайтын және қалған жазылушыларға ең жақсы электрондық поштаны жіберетін автоматтандырылған тестілеуді қамтиды.

Егер сіздің компанияңыз белсенділікті арттыратын мобильді жауап беретін электрондық пошталарды жобалау, тестілеу және енгізуде қиналса, менің фирмама хабарласудан тартынбаңыз. DK New Media іс жүзінде әрбір электрондық пошта провайдерін енгізу тәжірибесі бар (ESP).

Douglas Karr

Douglas Karr CMO болып табылады OpenINSIGHTS және негізін қалаушы Martech Zone. Дуглас ондаған табысты MarTech стартаптарына көмектесті, Martech сатып алулары мен инвестицияларына 5 миллиард доллардан астам қаражатты мұқият тексеруге көмектесті және компанияларға сату және маркетинг стратегияларын енгізу және автоматтандыруға көмектесуді жалғастыруда. Дуглас – халықаралық деңгейде танылған цифрлық трансформация және MarTech сарапшысы және спикері. Дуглас сонымен қатар Dummie's guide және бизнес көшбасшылығы кітабының жарияланған авторы.

Қатысты Мақалалар

Басына оралу
жақын

Adblock анықталды

Martech Zone Сізге бұл мазмұнды ақысыз ұсына алады, өйткені біз сайтымызды жарнамадан түсетін табыс, серіктестік сілтемелері және демеушілік арқылы монетизациялаймыз. Сайтымызды көрген кезде жарнама блокаторын алып тастасаңыз, біз ризамыз.