E-posta Pazarlama ve OtomasyonPazarlama ve Satış Videoları

HTML E-posta Tasarımının Zorluklarını (Ve Engellerini) Anlamak

Web sayfaları oluşturmak için bir içerik yönetim sistemi açarsanız, bu oldukça basit bir işlemdir. Modern web tarayıcıları desteği HTML, CSSve JavaScript'i katı web standartlarına göre ayarlayın. Ve bunlar tasarımcıların endişelenmesi gereken tarayıcılardan sadece birkaçı. Elbette istisnalar ve bu tarayıcılara özel bazı basit geçici çözümler veya işlevler vardır.

Genel standartlar nedeniyle içerik yönetim sistemlerinde sayfa oluşturucuları geliştirmek kolaydır. Tarayıcılar HTML5, CSS ve JavaScript ile uyumludur ve geliştiriciler, cihazlara duyarlı ve tarayıcılar arasında tutarlı olan web sayfaları oluşturmak için inanılmaz derecede sağlam çözümler oluşturabilir. Yirmi yıl önce neredeyse her web tasarımcısı, web sayfaları geliştirmek için masaüstü yazılımı kullanıyordu. Artık bir web tasarımcısının bir web sayfası geliştirmesi oldukça nadirdir; çoğunlukla şablonlar geliştiriyorlar ve içeriği doldurmak için içerik sistemlerindeki editörleri kullanıyorlar. Web sitesi editörleri harika.

Ancak e-posta editörleri ne yazık ki geride kaldı. İşte neden…

HTML E-postaları Tasarlamak Bir Web Sitesinden Çok Daha Karmaşıktır

Şirketiniz güzel bir HTML e-postası tasarlamak istiyorsa, çeşitli nedenlerden dolayı süreç bir web sayfası oluşturmaktan çok daha karmaşıktır:

  • Standart Yok – HTML e-postası görüntüleyen e-posta istemcilerinin web standartlarına sıkı sıkıya bağlılığı YOKTUR. Hemen hemen her e-posta istemcisi ve her e-posta istemcisinin her sürümü farklı davranır. Bazıları CSS'ye, harici yazı tiplerine ve modern HTML'ye saygı duyacaktır. Diğerleri bazı satır içi stillere önem verir, yalnızca bir yazı tipi koleksiyonu görüntüler ve tablo odaklı yapılar dışında her şeyi göz ardı eder. Bu konu üzerinde kimsenin çalışmaması çok saçma. Sonuç olarak, istemciler ve cihazlar arasında tutarlı bir şekilde işlenen şablonların tasarlanması büyük bir iş haline geldi ve oldukça pahalı olabiliyor.
  • E-posta İstemci Güvenliği – Yakın zamanda Apple Mail, HTML e-postalarındaki, e-postaya gömülü olmayan tüm görselleri varsayılan olarak engelleyecek şekilde güncellendi. Ya onlara tek seferde bir e-posta yükleme izni verirsiniz ya da bu ayarı devre dışı bırakmak için ayarları etkinleştirmeniz gerekir. E-posta istemcisi güvenlik ayarlarının yanı sıra kurumsal ayarlar da vardır.
  • BT Güvenlik – BT ekibiniz, bir e-postada gerçekte hangi nesnelerin işlenebileceği konusunda katı kurallar uygulayabilir. Örneğin, resimleriniz kurumsal bir güvenlik duvarında beyaz listeye alınmamış belirli bir alan adından geliyorsa, resimler e-postanızda görünmez. Zaman zaman, e-postalar geliştirmek ve tüm görüntüleri şirketin sunucusunda barındırmak zorunda kaldık, böylece kendi çalışanları da görüntüleri görebilirdi.
  • E-posta Servis Sağlayıcıları – Daha da kötüsü, hizmet sağlayıcılara e-posta gönderen e-posta oluşturucular (ESPs) aslında sorunları kısıtlamak yerine ortaya çıkarır. Editörlerini Ne Görürsen Onu Alırsın (WYSIWYG) şeklinde tanıtırlarken, e-posta tasarımında bunun tersi genellikle doğrudur. E-postayı kendi platformunda önizleyeceksiniz ve alıcı tüm tasarım sorunlarını görecektir. Şirketler genellikle, daha fazla özelliğe sahip olduğunu düşünerek, kilitli bir düzenleyici yerine bilmeden zengin özelliklere sahip bir düzenleyiciyi tercih eder. Bunun tersi doğrudur… Tüm e-posta istemcilerinde tutarlı bir şekilde işlenen e-postalar istiyorsanız, ne kadar basitse o kadar iyidir, çünkü daha azı yanlış gidebilir.
  • E-posta İstemcisi Oluşturma – Yüzlerce e-posta istemcisi, HTML'yi masaüstü bilgisayarlar, uygulamalar, mobil cihazlar ve web posta istemcileri arasında farklı şekilde işler. E-posta servis sağlayıcınızdaki kullanışlı metin düzenleyiciniz, e-postanıza başlık koyma ayarına sahip olsa da dolgu, kenar boşlukları, satır yüksekliği ve yazı tipi boyutu her e-posta istemcisi için farklı olabilir. Sonuç olarak, bir e-postanın tutarlı bir şekilde oluşturulmasını sağlamak için HTML'yi basitleştirmeniz ve her bir öğeyi farklı şekilde kodlamanız (aşağıdaki örneğe bakın) ve sıklıkla e-posta istemcisine özel istisnalar yazmanız gerekir. Basit blok türleri yok; otuz yıl önce web için oluşturmaya eşdeğer olan tablo odaklı düzenler yapmanız gerekiyor. Bu nedenle herhangi bir yeni düzen hem geliştirmeyi hem de çapraz e-posta istemcisi ve cihaz testini gerektirir. Sizin gelen kutunuzda gördükleriniz, benim gelen kutumda gördüklerimden tamamen farklı olabilir. Bu yüzden gibi oluşturma araçları Asit Üzerine E-posta or Turnusol yeni tasarımlarınızın tüm e-posta istemcilerinde çalışmasını sağlamak için bir zorunluluktur. İşte popüler e-posta istemcilerinin ve işleme motorlarının kısa bir listesi:
    • Apple Mail, Mac için Outlook, Android Mail ve iOS Mail kullanımı WebKit.
    • Outlook 2000, 2002 ve 2003 kullanımı Internet Explorer.
    • Outlook 2007, 2010 ve 2013 kullanımı Microsoft Word (evet, Kelime!).
    • Web posta istemcileri, tarayıcılarının ilgili motorunu kullanır (örneğin, Safari WebKit'i ve Chrome, Blink'i kullanır).

Web Vs için bir HTML Örneği. E-posta

Web'e karşı e-postada tasarımın karmaşıklığını gösteren bir örnek istiyorsanız, Mailbakery'nin makalesinden mükemmel bir örnek E-posta ve Web HTML Arasındaki 19 Büyük Fark:

E-posta HTML'si

Düğmeyi düzgün bir şekilde yerleştirmek ve e-posta istemcilerinde iyi görünmesini sağlamak için gerekli tüm satır içi stilleri içeren bir dizi tablo oluşturmalıyız. Sınıfları birleştirmek için bu e-postanın üst kısmında eşlik eden bir stil etiketi de olacaktır.

<table width="100%" border="0" cellspacing="0" cellpadding="0">
   <tr>
      <td align="left">
         <table border="0" cellspacing="0" cellpadding="0" bgcolor="#43756e">
            <tr>
               <td class="text-button"  style="padding: 5px 20px; color:#ffffff; font-family: 'Oswald', Arial, sans-serif; font-size:14px; line-height:20px; text-align:center; text-transform:uppercase;">
                  <a href="#" target="_blank" class="link-white" style="color:#ffffff; text-decoration:none"><span class="link-white" style="color:#ffffff; text-decoration:none">Find Out More</a>
               </td>
            </tr>
         </table>
      </td>
   </tr>
</table>

Web HTML'si

Düğme olarak görünen bir bağlantı etiketinin büyük/küçük harf durumunu, hizalamasını, rengini ve boyutunu tanımlamak için sınıflarla birlikte harici bir stil sayfası kullanabiliriz.

<div class="center">
   <a href="#" class="button">Find Out More</a>
</div>

E-posta Tasarım Sorunlarından Nasıl Kaçınılır?

İyi bir süreç izlenerek e-posta tasarım sorunlarından kaçınılabilir:

  1. Şablon Testi – Abonelerinizin kullandığı e-posta istemcilerini anlamak ve HTML e-postanızın mobil ve masaüstü cihazlarda tamamen test edilmesini sağlamak, herhangi bir şablonu dağıtmadan önce kritik öneme sahiptir. Kelimenin tam anlamıyla bir Photoshop düzeninden bir e-posta tasarlayabiliriz… ancak onu tablo odaklı, çapraz e-posta istemcisine dilimlemek ve parçalara ayırmak, optimum ve tutarlı e-posta tasarımlarını dağıtmak için çok önemlidir.
  2. Dahili Test – Şablonunuz tasarlanıp test edildikten sonra, gözden geçirilmesi ve onaylanması için kuruluş içindeki bir dahili tohum listesine gönderilmelidir. Hatta e-postanın dahili olarak işlenmesiyle ilgili güvenlik duvarı veya güvenlik sorunları olmadığından emin olmak için çok sınırlı bir birey alt kümesiyle başlamak isteyebilirsiniz. Bu, yeni bir e-posta servis sağlayıcısında bir örnek oluşturuyorsa, e-postanızın gelen kutusuna alınmasıyla ilgili bazı filtreleme veya engelleme sorunları bile bulabilirsiniz.
  3. Şablon Sürüm Oluşturma – Şablonunuzun tasarlanabilen, uygun şekilde test edilebilen ve dağıtılabilen yeni bir sürümü üzerinde çalışmadan mizanpajlarınızı veya tasarımlarınızı değiştirmeyin. Birçok işletme, her kampanya için tek seferlik tasarımları sever… ancak bu, her kampanya için her e-postanın tasarlanmasını, geliştirilmesini ve dağıtılmasını gerektirir. Bu, dahili e-posta pazarlama sürecine bir ton zaman ekler. Ayrıca, e-postanızdaki hangi öğelerin, hangi öğelerin iyi performans göstermediğine göre daha iyi performans gösterdiğini anlamama riskiniz vardır. Tutarlılık yalnızca süreci kolaylaştırmanın bir yolu değildir, aynı zamanda abonelerinizin davranışları için de önemlidir.
  4. E-posta Servis Sağlayıcı İstisnaları – Hemen hemen her e-posta hizmeti sağlayıcısının, e-posta oluşturucularının sunduğu sorunlar üzerinde çalışmak için bir yolu vardır. Şirketin yerleşik e-posta düzenleyicisini kullanması ve e-postanızın tasarımını bozmaması için genellikle bir hesaba ham CSS ekleyebilir veya hatta her e-postaya dahil edilmesi gereken bir içerik bloğuna sahip olabiliriz. Tabii ki, bu adımlara uyulduğundan emin olmak için bu adımları dağıtmak için biraz eğitim ve süreç kontrolü gerektirebilir. Veya – kelimenin tam anlamıyla, e-posta tasarımınızı istemciler ve cihazlar arasında çalıştığı kanıtlanmış bir çözümde geliştirmek ve ardından e-posta servis sağlayıcınıza geri yapıştırmak isteyebilirsiniz.

E-posta Tasarım Platformları

E-posta hizmeti platformları, istemciler arası ve cihazlar arası tutarlı bir şekilde oluşturulan oluşturucuları oluşturma ve sürdürmede kötü bir iş çıkardığından, bir dizi harika platform piyasaya çıktı. Yoğun olarak kullandığımız bir striptiz.

Stripo yalnızca bir e-posta oluşturucu değildir, aynı zamanda kolayca içe aktarılabilen 900'den fazla şablondan oluşan bir kitaplığa sahiptir. E-postayı tasarladıktan sonra, 60'tan fazla ESP'ye e-posta gönderebilir ve aşağıdakiler dahil olmak üzere e-posta istemcilerine e-posta gönderebilirsiniz: Sezgisel MailChimp, HubSpot, Kampanya Monitör, AWebereSputnik, Görünüm, ve Gmail. Tüm Stripo şablonlarının en iyisi, e-posta oluşturma testleriyle birlikte gelir; böylece bunların 40'tan fazla e-posta istemcisinde test edildiğinden ve tutarlı bir şekilde çalıştığından emin olabilirsiniz.

Stripo Editör Demosuna Giriş Yapın

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.