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

16 најбољих пракси за ХТМЛ е-пошту прилагођену мобилним уређајима које максимално повећавају пласман и ангажовање пријемног сандучета

У 2023. је вероватно да ће мобилни надмашити десктоп као примарни уређај за отварање е-поште. У ствари, ХубСпот је то открио КСНУМКС одсто свих отварања е-поште сада се дешавају на мобилном телефону. Ако не дизајнирате имејлове за мобилне уређаје, остављате много ангажовања и новца на столу.

  1. Аутентификација е-поште: Обезбеђивање вашег мејлови су аутентификовани на домен за слање и IP адреса је критична за долазак до пријемног сандучета, а не усмерава се у фасциклу за смеће или нежељену пошту. Такође је битно, наравно, да обезбедите начин да одустанете од е-поште користећи платформу која укључује везу за одјаву.
  2. Нацрт са одзивом: ХТМЛ- емаил треба да буде дизајниран да реагује, што значи да се може прилагодити величини екрана уређаја на којем се гледа. Ово осигурава да е-пошта изгледа добро и на десктопу и на мобилним уређајима.
  3. Јасна и концизна тема: Јасна и концизна линија предмета је важна за кориснике мобилних уређаја јер могу да виде само првих неколико речи наслова у окну за преглед е-поште. Требало би да буде кратак и тачно одражава садржај е-поште. Оптимална дужина карактера за тему е-поште може да варира у зависности од бројних фактора, као што су садржај е-поште, публика и клијент е-поште који се користи. Међутим, већина стручњака препоручује да редови теме е-поште буду кратки и прецизни, обично између 41-50 знакова или 6-8 речи. На мобилним уређајима, редови за тему дужи од 50 знакова могу бити одсечени, а у неким случајевима могу да приказују само првих неколико речи наслова. Ово може отежати примаоцу да разуме главну поруку е-поште и може смањити вероватноћу отварања е-поште.
  4. Прехеадер: Претходно заглавље е-поште је кратак резиме садржаја е-поште који се појављује поред или испод наслова у пријемном сандучету клијента е-поште. То је важан елемент који може да утиче на брзину отварања ваших е-порука када се оптимизује. Већина клијената укључује ХТМЛ и ЦСС како би се осигурало да је текст предзаглавља правилно подешен.
<!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. Распоред у једној колони: Е-поруке које су дизајниране са распоредом у једној колони лакше се читају на мобилним уређајима. Садржај треба да буде организован у логичном низу и представљен у једноставном, лако читљивом формату. Ако имате више колона, коришћење ЦСС-а може елегантно организовати колоне у распореду једне колоне.

Ево једног ХТМЛ изглед е-поште то је 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>

Ево једног ХТМЛ изглед е-поште то је 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. Светли и тамни режим: мост клијенти е-поште подржавају светли и тамни режим ЦСС 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 пт и избегавајте коришћење фонтова које је тешко читати на малим екранима. Често коришћени фонтови имају велику вероватноћу да се доследно приказују у различитим клијентима е-поште, тако да су коришћење Ариал, Хелветица, Тимес Нев Роман, Георгиа, Вердана, Тахома и Требуцхет МС обично безбедни фонтови. Ако користите прилагођени фонт, уверите се да је резервни фонт идентификован у вашем ЦСС-у:
<!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. Оптимална употреба слика: Слике могу успорити време учитавања и можда се неће правилно приказати на свим мобилним уређајима. Користите слике штедљиво и уверите се да су величине и компримовани за мобилно гледање. Обавезно попуните алтернативни текст за своје слике у случају да их клијент е-поште блокира. Све слике треба да се чувају и позивају на безбедну веб локацију (ССЛ). Ево примера кода прилагодљивих слика у ХТМЛ е-поруци.
<!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. Обриши позив на акцију (ЦТА): Јасан и истакнут позив на акцију је важан у свакој е-поруци, али је посебно важан у е-поруци прилагођеној мобилним уређајима. Уверите се да је позив на акцију лако пронаћи и да је довољно велик да се кликне на мобилном уређају. Ако уградите дугмад, можете осигурати да су написана у ЦСС-у са уграђеним ознакама стила:
<!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. Кратак и концизан садржај: Нека садржај имејла буде кратак и тачан. Ограничење броја знакова за ХТМЛ е-пошту може да варира у зависности од клијента е-поште који се користи. Међутим, већина клијената е-поште намеће ограничење максималне величине за имејлове, обично између 1024-2048 килобајта (KB), који укључује и ХТМЛ код и све слике или прилоге. Користите поднаслове, тачке за набрајање и друге технике обликовања како бисте садржај лако скенирали док се померате и читате на малом екрану.
  2. Интерактивни елементи: укључивања интерактивни елементи који привлаче пажњу вашег претплатника повећаће ангажовање, разумевање и стопе конверзије ваше е-поште. Анимирани ГИФ, тајмере за одбројавање, видео записе и друге елементе подржава већина клијената е-поште за паметне телефоне.
  3. Персонализација: Персонализовање поздрава и садржаја за одређеног претплатника може значајно да подстакне ангажовање, само будите сигурни да сте то урадили како треба! На пример. Важно је имати резерве ако нема података у пољу за име.
  4. Динамички садржај: Сегментација и прилагођавање садржаја може смањити стопу одјављивања и задржати ваше претплатнике ангажованим.
  5. Интеграција кампање: Већина модерних провајдера услуга е-поште има могућност аутоматског додавања УТМ стрингови упита кампање за сваку везу тако да можете да видите е-пошту као канал у аналитици.
  6. Центар за преференције: Маркетинг путем е-поште је превише важан за приступ е-порукама који се могу укључити или искључити. Укључивање центра за преференције у којем ваши претплатници могу да промене колико често примају е-пошту и који им је садржај важан је фантастичан начин да задржите снажан програм е-поште са ангажованим претплатницима!
  7. Тест, Тест, Тест: Обавезно тестирајте своју е-пошту на више уређаја или користите апликацију за прегледајте своје имејлове на свим клијентима е-поште да бисте били сигурни да изгледа добро и правилно функционише на различитим величинама екрана и оперативним системима ПРЕ него што пошаљете. Лакмус извештава да су прва 3 најпопуларнија мобилна отворена окружења и даље иста: Аппле иПхоне (иОС Маил), Гоогле Андроид, Аппле иПад (иПадОС Маил). Такође, укључите тест варијације ваших тема и садржаја да бисте побољшали стопе отворености и учесталости кликова. Многе платформе за е-пошту сада укључују аутоматизовано тестирање које ће узорковати листу, идентификовати победничку варијацију и послати најбољу е-пошту преосталим претплатницима.

Ако се ваша компанија мучи са дизајнирањем, тестирањем и имплементацијом мобилних е-порука које подстичу ангажовање, не устручавајте се да контактирате моју фирму. DK New Media има искуство у имплементацији готово сваког провајдера услуга е-поште (ЕСП).

Douglas Karr

Douglas Karr је ЦМО оф ОпенИНСИГХТС и оснивача Martech Zone. Доуглас је помогао десетинама успешних МарТецх стартапова, помогао је у дубинској пажњи од преко 5 милијарди долара у Мартецх аквизицијама и инвестицијама, и наставља да помаже компанијама у имплементацији и аутоматизацији њихових продајних и маркетиншких стратегија. Доуглас је међународно признати стручњак за дигиталну трансформацију и МарТецх стручњак и говорник. Даглас је такође објављени аутор Думмие'с водича и књиге о пословном лидерству.

Повезани чланци

Назад на врх дугмета
близу

Адблоцк откривен

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