E-posta Pazarlama ve OtomasyonMobil ve Tablet Pazarlama

Gelen Kutusu Yerleşimini ve Etkileşimini En Üst Düzeye Çıkaran 16 Mobil Uyumlu HTML E-posta En İyi Uygulaması

2023'te, e-postayı açmak için birincil cihaz olarak mobilin masaüstünü geçmesi muhtemeldir. Aslında, HubSpot şunu buldu: Yüzde 46 artış.  Tüm e-posta açılışlarının oranı artık mobil cihazlarda gerçekleşiyor. Mobil cihazlar için e-posta tasarlamıyorsanız, masaya çok fazla katılım ve para bırakıyorsunuz demektir.

  1. E-posta kimlik doğrulaması: Sağlamak e-postalar doğrulandı gönderen etki alanına ve IP adres, gelen kutusuna ulaşmak için kritik öneme sahiptir ve önemsiz veya spam klasörüne yönlendirilmez. Elbette, abonelikten çıkma bağlantısı içeren bir platform kullanarak e-postayı devre dışı bırakmak için bir yol sağlamanız da önemlidir.
  2. Duyarlı tasarım: The HTML e-posta olmalı duyarlı olacak şekilde tasarlandı, bu, görüntülendiği cihazın ekran boyutuna göre ayarlanabileceği anlamına gelir. Bu, e-postanın hem masaüstü hem de mobil cihazlarda iyi görünmesini sağlar.
  3. Açık ve kısa konu satırı: Açık ve öz bir konu satırı, mobil kullanıcılar için önemlidir, çünkü e-posta önizleme bölmelerinde konu satırının yalnızca ilk birkaç kelimesini görebilirler. Kısa olmalı ve e-postanın içeriğini doğru bir şekilde yansıtmalıdır. Bir e-posta konu satırının en uygun karakter uzunluğu, e-posta içeriği, hedef kitle ve kullanılan e-posta istemcisi gibi bir dizi faktöre bağlı olarak değişebilir. Ancak çoğu uzman, e-posta konu satırlarının kısa ve öz, genellikle 41-50 karakter veya 6-8 kelime arasında tutulmasını önerir. Mobil cihazlarda 50 karakterden uzun konu satırları kesilebilir ve bazı durumlarda konu satırının yalnızca ilk birkaç kelimesi görüntülenebilir. Bu, alıcının e-postanın ana mesajını anlamasını zorlaştırabilir ve e-postanın açılma olasılığını azaltabilir.
  4. ön başlık: Bir e-posta ön başlığı, bir e-posta istemcisinin gelen kutusunda konu satırının yanında veya altında görünen e-posta içeriğinin kısa bir özetidir. Optimize edildiğinde e-postalarınızın açılma oranını etkileyebilecek önemli bir unsurdur. Çoğu müşteri, ön başlık metninin düzgün bir şekilde ayarlandığından emin olmak için HTML ve CSS'yi birleştirir.
<!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. Tek sütun düzeni: Tek sütun düzeninde tasarlanan e-postaların mobil cihazlarda okunması daha kolaydır. İçerik mantıklı bir sırayla düzenlenmeli ve basit, okunması kolay bir formatta sunulmalıdır. Birden çok sütununuz varsa, CSS kullanmak sütunları tek sütunlu bir düzende zarif bir şekilde düzenleyebilir.

İşte bulunuyor HTML e-posta düzeni bu, masaüstünde 2 sütundur ve mobil ekranlarda tek bir sütuna daraltılır:

<!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>

İşte bulunuyor HTML e-posta düzeni bu, masaüstünde 3 sütundur ve mobil ekranlarda tek bir sütuna daraltılır:

<!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. Aydınlık ve Karanlık Mod: köprü e-posta istemcileri açık ve koyu modu destekler CSS prefers-color-scheme kullanıcının tercihlerini karşılamak için. Saydam bir arka plana sahip olduğunuz görüntü türlerini kullandığınızdan emin olun. İşte bir kod örneği.
<!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. Büyük, okunaklı yazı tipleri: Yazı tipi boyutu ve stili, metnin küçük bir ekranda okunmasını kolaylaştıracak şekilde seçilmelidir. En az 14 puntoluk bir yazı tipi boyutu kullanın ve küçük ekranlarda okunması zor yazı tiplerini kullanmaktan kaçının. Yaygın olarak kullanılan yazı tiplerinin farklı e-posta istemcilerinde tutarlı bir şekilde oluşturulma olasılığı yüksektir, bu nedenle Arial, Helvetica, Times New Roman, Georgia, Verdana, Tahoma ve Trebuchet MS kullanmak genellikle güvenli yazı tipleridir. Özel bir yazı tipi kullanırsanız, CSS'nizde tanımlanmış bir yedek yazı tipine sahip olduğunuzdan emin olun:
<!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. Görüntülerin optimum kullanımı: Resimler yükleme sürelerini yavaşlatabilir ve tüm mobil cihazlarda düzgün şekilde görüntülenmeyebilir. Görüntüleri idareli kullanın ve boyutlarının ve boyutlarının uygun olduğundan emin olun. sıkıştırılmış mobil görüntüleme için. E-posta istemcisinin engellemesi durumunda resimleriniz için alternatif metni doldurduğunuzdan emin olun. Tüm resimler saklanmalı ve güvenli bir web sitesinden (SSL). İşte bir HTML e-postasındaki yanıt veren resimlerin örnek kodu.
<!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. Harekete geçirici mesajı temizle (CTA): Açık ve belirgin bir CTA, herhangi bir e-postada önemlidir, ancak özellikle mobil uyumlu bir e-postada önemlidir. CTA'nın kolayca bulunabileceğinden ve bir mobil cihazda tıklanacak kadar büyük olduğundan emin olun. Düğmeleri birleştirirseniz, bunların satır içi stil etiketleriyle CSS'de yazılmasını da sağlayabilirsiniz:
<!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. Kısa ve öz içerik: E-postanın içeriğini kısa ve öz tutun. Bir HTML e-postası için karakter sınırı, kullanılan e-posta istemcisine bağlı olarak değişebilir. Bununla birlikte, çoğu e-posta istemcisi, e-postalar için genellikle 1024-2048 kilobayt (KB), hem HTML kodunu hem de tüm resimleri veya ekleri içerir. İçeriği kaydırırken ve küçük bir ekranda okurken kolayca taranabilir hale getirmek için alt başlıkları, madde işaretlerini ve diğer biçimlendirme tekniklerini kullanın.
  2. Etkileşimli öğeler: birleştirilerek etkileşimli öğeler abonenizin dikkatini çeken e-postanız etkileşim, anlama ve dönüşüm oranlarını artıracaktır. Hareketli GIF'ler, geri sayım sayaçları, videolar ve diğer öğeler, akıllı telefon e-posta istemcilerinin çoğu tarafından desteklenir.
  3. Kişiselleştirme: Belirli bir abone için selamlamayı ve içeriği kişiselleştirmek, etkileşimi önemli ölçüde artırabilir, doğru anladığınızdan emin olun! Örneğin. İlk ad alanında veri yoksa geri dönüşlerin olması önemlidir.
  4. Dinamik İçerik: İçeriğin bölümlere ayrılması ve özelleştirilmesi, abonelikten çıkma oranlarınızı azaltabilir ve abonelerinizin ilgisini canlı tutabilir.
  5. Kampanya Entegrasyonu: Modern e-posta servis sağlayıcılarının çoğu, otomatik olarak ekleme yeteneğine sahiptir. UTM kampanya sorgu dizeleri e-postayı analitikte bir kanal olarak görüntüleyebilmeniz için her bağlantı için.
  6. Tercih Merkezi: E-posta pazarlaması, yalnızca e-postalara katılma veya devre dışı bırakma yaklaşımı için çok önemlidir. Abonelerinizin ne sıklıkta e-posta alacaklarını ve hangi içeriğin onlar için önemli olduğunu değiştirebilecekleri bir tercih merkezini dahil etmek, bağlı abonelerle güçlü bir e-posta programını sürdürmenin harika bir yoludur!
  7. Test, Test, Test: E-postanızı birden fazla cihazda test ettiğinizden veya bir uygulama kullandığınızdan emin olun. e-postalarınızı e-posta istemcilerinde önizleyin göndermeden ÖNCE farklı ekran boyutlarında ve işletim sistemlerinde iyi görünmesini ve düzgün çalışmasını sağlamak için. Turnusol en popüler 3 mobil açık ortamın aynı olmaya devam ettiğini bildiriyor: Apple iPhone (iOS Mail), Google Android, Apple iPad (ipados Mail). Ayrıca, açma ve tıklama oranlarınızı iyileştirmek için konu satırlarınızın ve içeriğinizin test varyasyonlarını ekleyin. Artık birçok e-posta platformu, listeyi örnekleyecek, kazanan bir varyasyonu belirleyecek ve kalan abonelere en iyi e-postayı gönderecek otomatik testler içermektedir.

Şirketiniz etkileşimi artıran mobil yanıt veren e-postaları tasarlama, test etme ve uygulama konusunda zorlanıyorsa firmamla iletişime geçmekten çekinmeyin. DK New Media hemen hemen her e-posta servis sağlayıcısının uygulanmasında deneyime sahiptir (ESP).

Douglas Karr

Douglas Karr CMO'su AÇIK İÇGÖRÜLER ve kurucusu Martech Zone. Douglas düzinelerce başarılı MarTech startup'ına yardımcı oldu, Martech satın almaları ve yatırımlarında 5 milyar doların üzerindeki durum tespitine yardımcı oldu ve şirketlere satış ve pazarlama stratejilerini uygulama ve otomatikleştirme konusunda yardımcı olmaya devam ediyor. Douglas, uluslararası alanda tanınan bir dijital dönüşüm ve MarTech uzmanı ve konuşmacısıdır. Douglas aynı zamanda Dummie's Guide ve iş liderliği kitabının yayınlanmış yazarıdır.

İlgili Makaleler

Başa dön düğmeye
Kapanış

Adblock Algılandı

Martech Zone sitemizden reklam geliri, bağlı kuruluş bağlantıları ve sponsorluklar yoluyla para kazandığımız için size bu içeriği ücretsiz olarak sağlayabilir. Sitemizi gezerken reklam engelleyicinizi kaldırırsanız seviniriz.