Маркетинг и автоматизација на е-поштаМаркетинг на мобилни телефони и таблети

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. Даглас е исто така објавен автор на водич за Dummie и книга за бизнис лидерство.

поврзани написи

Вратете се на почетокот копче
Затвори

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

Martech Zone може да ви ја обезбеди оваа содржина без трошоци бидејќи ја монетизираме нашата страница преку приходи од реклами, врски со партнери и спонзорства. Ќе ни биде благодарно ако го отстраните вашиот блокатор на реклами додека ја гледате нашата страница.