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

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

Статьи по теме

Вернуться к началу кнопки
Закрыть

Adblock обнаружен

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