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ı HTML, CSS ve JavaScript'i bir sıkı web standartları kümesi. Ve gerçekten de tasarımcıların endişelenmesi gereken bir avuç tarayıcı. Elbette istisnalar var… ve bu tarayıcılara özgü bazı basit geçici çözümler veya işlevler var.
Genel standartlar nedeniyle, içerik yönetim sistemlerinde sayfa oluşturucular geliştirmek gerçekten çok kolay. Tarayıcılar HTML5, CSS ve JavaScript ile uyumludur… ve geliştiriciler, cihazlara duyarlı ve tarayıcılar arasında tutarlı web sayfaları oluşturmak için inanılmaz derecede sağlam çözümler oluşturabilir. Yirmi yıl önce, hemen hemen her web tasarımcısı, web sayfaları geliştirmek için masaüstü yazılımı kullanıyordu. Şimdi, bir web tasarımcısının bir web sayfası geliştirmesi oldukça nadirdir - çoğu zaman şablonlar geliştiriyorlar ve içeriği doldurmak için içerik sistemlerinde editörler 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 tasarlanmış güzel bir HTML e-posta istiyorsa, süreç birkaç nedenden dolayı bir web sayfası oluşturmaktan katlanarak daha karmaşıktır:
- Standart Yok - Herhangi bir ağa kesin olarak bağlılık YOKTUR standartlar HTML e-postası görüntüleyen e-posta istemcileri tarafından. Aslında, sanal olarak her e-posta istemcisi ve her e-posta istemcisinin her sürümü farklı davranır. Bazıları CSS'yi, harici yazı tiplerini ve modern HTML'yi onurlandıracaktır. Diğerleri bazı satır içi stilleri onurlandırır, yalnızca bir yazı tipi koleksiyonu görüntüler ve tabloya dayalı yapılar dışındaki her şeyi yok sayar. Bu noktada kimsenin bu konu üzerinde çalışmaması aslında oldukça saçma. Sonuç olarak, istemciler ve cihazlar arasında tutarlı bir şekilde işlenen şablonlar tasarlamak büyük bir iş haline geldi ve oldukça pahalı olabilir.
- E-posta İstemci Güvenliği – Daha bu hafta, Apple Mail, varsayılan olarak HTML e-postalarındaki tüm resimleri engelleyecek şekilde güncellendi ve e-postaya gömülmedi. Onlara bir seferde bir e-posta yükleme izni verirsiniz veya 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ı sınırlamak yerine ortaya çıkarır. Editörlerini tanıtırken What You See You Get What Is (WYSIWYG), e-posta tasarımında genellikle bunun tersi geçerlidir. E-postayı platformlarında önizleyebilirsiniz, ardından e-posta alıcısı her türlü tasarım sorununu görür. Şirketler, birinin diğerinden daha fazla özelliğe sahip olduğunu düşünen kilitli bir editör yerine, çoğu zaman bilmeden, zengin özelliklere sahip bir editör seçer. Bunun tersi doğrudur… Tüm e-posta istemcilerinde tutarlı bir şekilde iletilen e-postalar istiyorsanız, ne kadar basitse o kadar iyidir çünkü daha az hata olabilir.
- E-posta İstemcisi Oluşturma – Her biri HTML'yi masaüstü, uygulamalar, mobil ve web posta istemcilerinde farklı şekilde oluşturan yüzlerce e-posta istemcisi vardır. E-posta servis sağlayıcınızdaki şık metin düzenleyicinizin e-postanıza bir başlık koyma ayarı olsa da… dolgu, kenar boşlukları, satır yüksekliği ve yazı tipi boyutu her bir e-posta istemcisinde farklılık gösterebilir. Sonuç olarak, tutarlı bir şekilde oluşturulacak bir e-posta elde etmek için HTML'yi basitleştirmeniz ve her bir öğeyi farklı şekilde kodlamanız (aşağıdaki örneğe bakın) ve genellikle e-posta istemcisine özel istisnalar yazmanız gerekir. Basit blok türleri yoktur, otuz yıl önce web için oluşturmaya eşdeğer olan tablo odaklı düzenler yapmanız gerekir. Bu nedenle herhangi bir yeni düzen, hem geliştirme hem de çapraz e-posta istemcisi ve cihaz testi gerektirir. Gelen kutunuzda gördükleriniz benim gelen kutumda gördüklerimden tamamen farklı olabilir. Bu yüzden render araçları gibi 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
Düğmeyi düzgün bir şekilde yerleştirmek ve e-posta istemcilerinde iyi görünmesini sağlamak için gereken tüm satır içi stilleri içeren bir dizi tablo oluşturmamız gerekiyor. Ayrıca, bu e-postanın üst kısmında sınıfları dahil etmek için eşlik eden bir stil etiketi olacak.
<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>
ağ
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:
- Şablon Tasarımı – E-posta tasarımlarınızda üretmek isteyeceğiniz her stili kapsayan farklı düzenler ve içerik blokları içeren bir şablon oluşturun. Bir istemci uyguladığımızda, onları her zaman gelecek için bir e-posta tasarlayın – yalnızca gönderilen bir sonraki e-posta kampanyası değil. Bu şekilde, gerekli geçici çözümleri tamamen tasarlayabilir, geliştirebilir, test edebilir ve uygulayabiliriz. önce ilk e-postayı gönderirler.
- Şablon Testi – Abonelerinizin kullandığı e-posta istemcilerini anlamak ve herhangi bir şablonu dağıtmadan önce HTML e-postanızın mobil ve masaüstünde tamamen test edilmesini sağlamak çok önemlidir. Kelimenin tam anlamıyla bir photoshop düzeninden bir e-posta tasarlayabiliriz… ancak onu dilimlemek ve tabloya dayalı, çapraz e-posta istemcisine bölmek, optimal ve tutarlı e-posta tasarımlarını dağıtmak için çok önemlidir.
- 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.
- Ş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.
- 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: , HubSpot, Campaign Monitor, AWeber, eSputnik, Outlook ve Gmail. Tüm Stripo şablonlarının en iyisi, 40'tan fazla e-posta istemcisinde test edildiklerinden ve tutarlı bir şekilde çalıştıklarından emin olabilmeniz için dahil edilen e-posta oluşturma testleri ile birlikte gelir.
Açıklama: Benimle bağlantı kuruyorum pazarlama danışmanlığı firması neredeyse tüm e-posta servis sağlayıcılarında lider markalar için istemciler arası e-postalar tasarlayan ve dağıtan. ben de üyeyim striptiz ve bu makaledeki bağlantımı kullanıyorum.