Имейл маркетинг и автоматизацияМобилен и таблетен маркетинг

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. Големи, четливи шрифтове: Размерът и стилът на шрифта трябва да бъдат избрани така, че текстът да се чете лесно на малък екран. Използвайте най-малко 14pt размер на шрифта и избягвайте използването на шрифтове, които са трудни за четене на малки екрани. Често използваните шрифтове имат голяма вероятност да се изобразяват последователно в различни имейл клиенти, така че използването на 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, съдействал е за надлежна проверка на над $5 милиарда в придобивания и инвестиции на Martech и продължава да помага на компаниите при прилагането и автоматизирането на техните стратегии за продажби и маркетинг. Дъглас е международно признат експерт и лектор по дигитална трансформация и MarTech. Дъглас също е публикуван автор на ръководство за манекени и книга за бизнес лидерство.

Свързани статии

Бутон "Нагоре" горе
Близо

Открит е рекламен блок

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