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

16 Mobile Friendly HTML Email Эң мыкты тажрыйбалар Кирүүчү кутуларды жайгаштырууну жана тартууну максималдуу түрдө жогорулатат

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 шрифт өлчөмүн колдонуңуз жана кичинекей экрандарда окуу кыйын болгон шрифттерди колдонбоңуз. Көбүнчө колдонулган шрифттердин ар кандай электрондук почта кардарларында ырааттуу түрдө көрсөтүлүү ыктымалдыгы жогору, андыктан 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. Сыноо, сыноо, сыноо: Электрондук почтаңызды бир нече түзмөктөрдө сынап көрүңүз же колдонмону колдонуңуз электрондук почта кардарлары аркылуу электрондук почтаңызды алдын ала көрүңүз Жөнөтүүдөн мурун анын жакшы көрүнүшүн жана ар кандай экран өлчөмдөрүндө жана операциялык системаларда туура иштешин камсыз кылуу үчүн. лакмус кагазы 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 Бул мазмунду сизге эч кандай акы төлөбөй бере алат, анткени биз сайтыбызды жарнамадан түшкөн киреше, өнөктөштүк шилтемелер жана демөөрчүлүк аркылуу акча табабыз. Биздин сайтты көрүп жатканыңызда жарнама блокаторуңузду алып салсаңыз, биз ыраазыбыз.