Маркетынг і аўтаматызацыя электроннай поштыМабільны і планшэтны маркетынг

16 лепшых практык выкарыстання электроннай пошты HTML для мабільных прылад, якія максімальна павялічваюць размяшчэнне ў паштовай скрыні і ўзаемадзеянне

Верагодна, у 2023 годзе мабільны перасягне настольны кампутар у якасці асноўнай прылады для адкрыцця электроннай пошты. Фактычна HubSpot выявіў гэта 46 адсоткаў з усіх электронных лістоў цяпер адкрываецца на мабільным тэлефоне. Калі вы не распрацоўваеце электронныя лісты для мабільных прылад, вы пакідаеце на стале шмат узаемадзеяння і грошай.

  1. Аўтэнтыфікацыя электроннай пошты: Забеспячэнне вашага лісты праходзяць праверку сапраўднасці да дамена адпраўкі і IP адрас мае вырашальнае значэнне для таго, каб дабрацца да паштовай скрыні, а не накіроўваць у папку непажаданай пошты ці спаму. Вядома, таксама вельмі важна, каб вы далі магчымасць адмовіцца ад рассылкі з дапамогай платформы, якая змяшчае спасылку для адпіскі.
  2. Спагадны дызайн: ,en 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 пунктаў і пазбягайце выкарыстання шрыфтоў, якія цяжка чытаць на маленькіх экранах. Звычайна выкарыстоўваюцца шрыфты маюць высокую верагоднасць аднастайнага адлюстравання ў розных паштовых кліентах, таму выкарыстанне 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. Тэст, тэст, тэст: Пераканайцеся ў тым, каб праверыць вашу электронную пошту на некалькіх прыладах або выкарыстоўваць прыкладанне для папярэдні прагляд вашых лістоў у паштовых кліентах каб пераканацца, што ён добра выглядае і працуе належным чынам на розных памерах экрана і аперацыйных сістэмах ПЕРАД адпраўкай. Лакмус паведамляе, што тройка самых папулярных мабільных адкрытых асяроддзяў застаецца ранейшай: 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. Дуглас таксама з'яўляецца апублікаваным аўтарам даведніка па манекенах і кнігі па бізнес-кіраўніцтву.

Артыкулы па Тэме

Вярнуцца да пачатку кнопкі
блізка

Выяўлена блакіроўка рэкламы

Martech Zone можа даць вам гэты кантэнт бясплатна, таму што мы манетызуем наш сайт за кошт даходаў ад рэкламы, партнёрскіх спасылак і спонсарства. Мы былі б удзячныя, калі б вы выдалілі блакіроўшчык рэкламы пры праглядзе нашага сайта.