Електронний маркетинг і автоматизаціяМобільний та планшетний маркетинг

16 найкращих методів електронної пошти HTML для мобільних пристроїв, які максимізують розміщення в папці "Вхідні" та залучення

Ймовірно, у 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 пунктів і уникайте шрифтів, які важко читати на маленьких екранах. Шрифти, які зазвичай використовуються, мають високу ймовірність узгодженого відтворення в різних клієнтах електронної пошти, тому використання 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, допоміг у належній перевірці понад 5 мільярдів доларів у придбання та інвестиції Martech, і продовжує допомагати компаніям у впровадженні та автоматизації їхніх продажів і маркетингових стратегій. Дуглас — міжнародно визнаний експерт і спікер з цифрової трансформації та MarTech. Дуглас також є опублікованим автором посібника для чайників і книги про лідерство в бізнесі.

Статті по темі

Догори кнопки
близько

Виявлено блокування реклами

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