Web Geliştiricileri İçin HTML E-posta Oluşturmaya ve Göndermeye Giriş

Son birkaç yılımı geliştirme araçları oluşturmak için harcadım - bu yılların ikisi geliştiriciler için bir e-posta hizmeti olan Mailgun'da ürün tasarımı lideri olarak, e-postanın nasıl çalıştığı ve geliştiricilerin HTML e-postası oluştururken karşılaştıkları sorunlar hakkında çok şey öğrendim. Bu yazıda konuyla ilgili bazı bilgilerimi paylaşacağım.

HTML e-postası: Bir araya getirildiğinde geliştiricinin gözlerini yaşartan iki kelime. Bir web geliştiricisiyseniz, beğenseniz de beğenmeseniz de, bir e-postayı kodlamanın kariyerinizin bir döneminde kucağınıza düşen bir görev olması kaçınılmazdır. HTML e-posta kodlaması eski bir okuldur. Kendimizi “web yöneticileri” olarak adlandırdığımız ve web sitelerimizi işaretlemek için Frontpage, WYSIWYG editörleri ve tabloları kullandığımız 1999 yılını düşünün.

E-posta tasarımında pek bir şey değişmedi. Aslında, daha da kötüye gitti. Mobil cihazların ve daha fazla e-posta istemcisinin kullanıma sunulmasıyla birlikte, HTML e-postası oluştururken ilgilenmemiz gereken daha da fazla uyarımız var.

Son birkaç yılımı geliştirme araçları oluşturmak için harcadım - bu yılların ikisi geliştiriciler için bir e-posta hizmeti olan Mailgun'da ürün tasarımı lideri olarak, e-postanın nasıl çalıştığı ve geliştiricilerin HTML e-postası oluştururken karşılaştıkları sorunlar hakkında çok şey öğrendim. Bu yazıda konuyla ilgili bazı bilgilerimi paylaşacağım.

SmashingMag'de Daha Fazla Okuma :

• Aklınızı Kaybetmeden E-posta Bültenleri Tasarlayın ve Oluşturun
• Web Tasarımcıları ve Geliştiriciler İçin 18 E-posta Şablonu
• MJML ile Duyarlı HTML E-posta Kodlamasını Kolaylaştırma
• Modüler Tasarımla E-posta İş Akışınızı Nasıl İyileştirirsiniz?
  

E-posta Göndermeye Giriş

Bir e-posta kampanyasından veya şirketinizin gönderdiği tüm e-postalardan sorumlu bir geliştirici olarak, e-postanın nasıl çalıştığını, yasal gereklilikleri ve e-postanın gerçekte nasıl teslim edileceğini bilmeniz gerekir. Şirketler birkaç farklı e-posta türü gönderir. Hadi bir bakalım.

Pazarlama E-postası

Pek çok e-posta servis sağlayıcısı (ESP) pazarlama ve tanıtım e-postalarında uzmanlaşmıştır: SendPulse Email, Campaign Monitor, MailChimp, Emma, ​​Constant Contact bunlardan sadece birkaçıdır. Aboneleri yönetmek, e-posta şablonlarıyla çalışmak, toplu e-posta kampanyaları yürütmek ve raporlamak için eksiksiz çözümler sunarlar.

İşlem E-postası

İşlemsel e-posta, makbuzları, uyarıları, hoş geldiniz e-postalarını, parola sıfırlamalarını vb. içerir ve genellikle SendPulse Transactional, Mailgun, SendGrid ve Postmark gibi geliştirme araçları ve API'leri ile uygulanır. Bu araçlar daha çok API odaklı, daha az CMS ve WYSIWYG tabanlı; ancak Sendwithus gibi bir hizmetle birleştirildiğinde daha da güçlü hale getirilebilirler.

Bir hizmeti kullanmanın bir alternatifi, Postfix gibi bir şeyle kendi e-posta sunucunuzu döndürmektir. Bunun dezavantajı, onu kurmanın ve yapılandırmanın ve e-posta göndermenin, izleme ve abonelikten çıkmanın ve e-postanın gelen kutularına teslim edilmesinin teknik ayrıntılarını anlamanın size kalmış olmasıdır.

Yaşam Döngüsü E-postası

Yaşam döngüsü ve davranışa dayalı e-posta hizmetleri, işe alım, katılım ve daha pek çok konuda yardımcı olur. Pazarlamaya odaklanan birçok ESP de bu hizmeti sunuyor, ancak SendPulse Automation, Intercom, Customer.io, Drip, Vero ve ConvertKit gibi hizmetleri bu kategoride gruplandırma eğilimindeyim.

E-posta Listesi En İyi Uygulamaları

E-posta listeleri satın almayın. Belki bir avuç yasal hizmet vardır, ancak satın alma listelerinden tamamen uzak durmanız en iyisidir.

Benim deneyimim, bir e-posta listesi satın alan herkesin birçok geri dönüşten muzdarip olacağı, İnternet Protokolü (IP) adreslerine kötü bir itibar kazandıracağı ve e-postalarının İnternet servis sağlayıcıları (ISS'ler) tarafından engellenmesine veya istenmeyen postalara gönderilmesine neden olacağıdır. SenderBase'e göre dünyadaki e-postaların %85'i spam olarak kabul ediliyor; bu kovaya düşmeyin.

Çift Kayıt

Bir abonenin e-posta adresini doğrulaması, sürece fazladan bir adım ekler, ancak bu mantıklıdır ve diğer kişilerin izinleri olmadan listelere kaydolarak e-posta adreslerini kötüye kullanmalarını engeller. Ayrıca abonelik listenizi temiz tutmaya yardımcı olur ve "bir e-posta adresini doğrulamanın %100 doğru yoludur".

SPAM OLABİLİR

2003 tarihli CAN-SPAM Yasası tarafından zorunlu kılınan, e-posta göndermek için yasal gereksinimleriniz şunlardır:

• Yanlış veya yanıltıcı başlık bilgileri kullanmayın.
• Aldatıcı konu satırları kullanmayın.
• Mesajı bir reklam olarak tanımlayın.
• Alıcılara nerede olduğunuzu söyleyin.
• Alıcılara gelecekte sizden gelecek e-postaları nasıl devre dışı bırakacaklarını söyleyin.
• Vazgeçme isteklerini derhal yerine getirin.
• Başkalarının sizin adınıza ne yaptığını izleyin.

MailChimp, ülkeye göre e-posta yasal gereksinimlerinin iyi bir listesine sahiptir.

Analitik ve Ölçüm Performansı

Her şeyi ölçün. E-postalarınızın gelişip gelişmediğini bilmek için ölçmeniz gerekir. Rakamlar ne yaptığınıza, sektörünüze, gönderdiğiniz e-postaların türüne ve bağlama göre büyük ölçüde farklılık gösterecektir. Ancak genel olarak:

• %20 iyi bir açık orandır,
• %3 ila %7 iyi bir tıklama oranıdır,
• %5, kötü bir hemen çıkma oranıdır,
• %0.01 kötü bir spam oranıdır,
• %1, kötü bir abonelikten çıkma oranıdır.

Ayrıca, açık oranların ve tıklama oranlarının boş ölçümler olabileceğini unutmayın ("gerçekten önemli değil" konusunu okuyun). Günün sonunda, gerçekten izlemek istediğiniz şey, o nihai hedef veya dönüşümdür. Airbnb'de, katılım kalitesinin iyi bir göstergesi olan bir e-posta kalite puanını takip ederler.

Google Analytics kullanıyorsanız, Google'ın URL oluşturucusu izleme konusunda yardımcı olabilir.

Puan ve İtibar Gönderme

E-postalarınızın kendileriyle ilişkili bir itibarı ve puanı vardır . Bu, ISS'lerin ve posta kutusu sağlayıcılarının e-postanızla nasıl ilgilendiğini, kabul edip etmediklerini ve alıcının gelen kutusuna mı yoksa doğrudan spam'e mi gönderdiklerini etkiler.

Bazı katkıda bulunan faktörler şunlardır:

• IP itibarınız (SenderScore ile sizinkini kontrol edin),
• alan adı imzanız (bkz. DKIM ve SPF),
• hemen çıkma oranları ve şikayet oranları.

Toplu E-posta Gönderme

Çok sayıda e-posta gönderdiğinizde (milyonlarca e-posta içeren bir kampanya hayal edin), hepsi anında gönderilmez. Yalnızca sunucuların ve IP adreslerinin işleyebileceği kadar hızlı gönderilebilirler. Alıcılarınızın e-postaları tam olarak aynı anda alamayabileceğini unutmayın.

Bu nedenle, aynı anda milyonlarca e-posta gönderiyorsanız, yükün üstesinden gelmek için muhtemelen birkaç IP'ye ihtiyacınız olacaktır.

E-posta İstemcileri

Litmus, kendi dahili istatistiklerine dayanarak e-posta istemcilerinin pazar payını takip eder. Bunun muhtemelen müşteri tabanınız için aynı olmadığını, ancak devam etmek için iyi bir gösterge olduğunu unutmayın.

İşte Aralık 2016 itibariyle istatistikler:

• iPhone: %33
• Gmail: %19
• iPad: %12
• Android: %8
• Apple Posta: %7

Tüm e-postaların izlenemeyeceğini unutmayın. E-posta izleme, piksel izleme yoluyla yapılır, bu nedenle yalnızca görüntüleri etkin olan istemciler geri bildirimde bulunacaktır.

HTML Şablonları

HTML e-posta şablonları oluşturmak bir slogan olabilir. Sonuç olarak, çok sayıda kötü tasarlanmış e-posta var - tıknaz, temalı, ayrıntılı, anlamsız, dikkat dağıtıcı. Bir meydan okumadan hoşlanıyorsanız veya benzersiz bir görünüm ve his istiyorsanız, kendinizinkini oluşturmak gerçekten eğlenceli ve ödüllendirici olabilir. Alternatif olarak, bazı iyi e-posta şablonları da mevcuttur:

• Turnusol Şablonları
• Gerçekten Basit Duyarlı HTML E-posta Şablonu
• HTML E-posta Şablonları
• E-posta Vakfı 2

HTML E-posta Şablonları Oluşturma

Artık e-postaları nasıl düzgün bir şekilde kuracağınızı ve göndereceğinizi biliyorsunuz. Vereceğiniz bir sonraki karar, kendi HTML şablonunuzu kodlayıp kodlamamak olacaktır. Bu, ortalama bir web sayfasını kodlamaktan biraz daha karmaşıktır. Hadi dalalım.

İstemci Oluşturma Motorları

E-posta tasarımı hala karanlık çağlarda. Çok sayıda e-posta istemcisi ve cihazı nedeniyle, e-postanız kullanıcılar için çeşitli şekillerde işlenecektir.

E-posta istemcileri, HTML e-postalarını oluşturmak için farklı motorlar kullanır :

• Apple Mail, Mac için Outlook, Android Mail ve iOS Mail, WebKit kullanır.
• Outlook 2000, 2002 ve 2003, Internet Explorer'ı kullanır.
• Outlook 2007, 2010 ve 2013, Microsoft Word'ü kullanır (evet, Word!).
• Web istemcileri, tarayıcılarının ilgili motorunu kullanır (örneğin, Safari WebKit'i ve Chrome, Blink'i kullanır).

Müşteriler ayrıca sizinkinin üzerine kendi tarzlarını da ekleyecekler. Örneğin, Gmail tüm <td> yazı tiplerini yazı font-family: Arial,sans-serif; .

Ne için tasarım yapacağınızı bilmek için kendi istatistiklerinize bakın.

Satır İçi CSS ve Medya Sorguları için Gmail Desteği

Google, Gmail'de gömülü CSS ve medya sorguları desteğini ancak yakın zamanda duyurdu. Bu, e-posta geliştirme endüstrisi için çok büyük .

Artık, Eylül 2016'dan itibaren Gmail, Gmail için şablon geliştirmeyi çok daha kolay hale getiren bir dizi CSS özelliğini destekleyecektir.

Düzen İçin HTML Tablolarını Kullanma

Div'ler, farklı istemcilerde, özellikle de işlemek için Microsoft Word kullananlarda (yani Outlook'ta) konumlandırma ve kutu modeli sorunlarına sahiptir. İsterseniz div'leri kullanabilirsiniz, ancak 1999'da olduğu gibi kodlamak ve tablolara bağlı kalmak daha güvenlidir. Bu şu anlama gelir:

• < <div> yerine <table> >,
• #FFF yerine #FFFFFF ,
• margin yerine padding ,
• CSS3 yerine CSS2,
• HTML5 yerine HTML4,
• background yerine background background-color ,
• CSS yerine HTML nitelikleri,
• stil sayfaları veya <style> blokları yerine satır içi CSS.

Bunlar en iyi uygulamalardır. Güvenli rotayı kesinlikle görmezden gelebilir ve yukarıda ve öteye gidebilirsiniz.

Tabloları kullanırken border="0" cellpadding="0" cellspacing="0" unutmayın. Premailer kullanıyorsanız, bu HTML niteliklerini uygulamak için özel CSS bildirimleri vardır.

Satır içi CSS

Bazı istemciler (en önemlisi yakın zamana kadar Gmail), satır içi olmayan CSS'leri kaldırır . Burada birkaç seçeneğiniz var:

• ilerledikçe CSS satır içi yazın,
• web tabanlı bir CSS satır içi kullanın,
• programlı bir CSS satır içi kullanın,
• ESP'nizin satır içi işlemleri sizin için halletmesine izin verin (eğer destekliyorsa).

Hareket halindeyken satır içi yazmak tam olarak ölçeklenebilir veya sürdürülebilir bir çözüm değildir, bu yüzden bunu önermeme eğilimindeyim, ancak birçok e-posta geliştiricisinin %100 kontrol sağlamak için bunu tercih ettiğini biliyorum. CSS'nizi satır içi olarak manuel olarak yazarsanız, snippet'leri ve/veya kısmi ve yardımcıları olan bir şablonlama dilini kullanmanızı öneririm. Bu sizi kendinizi tekrar etme zorunluluğundan kurtaracaktır.

Web tabanlı satırlar arasında HTML E-posta'nın Duyarlı CSS Inliner'ı ve Foundation for Email'in Duyarlı E-posta Inliner'ı bulunur.

Programlı bir satır içi için Node.js modül Juice'ı öneririm. Premailer gem ve Roadie iyi Ruby alternatifleridir.

Düğmeler

Mükemmel çapraz istemci düğmesini elde etmeye çalışmak acı vericidir. Belirtildiği gibi, düğmeler dahil hemen hemen her şey için tablolar ve tablo hücreleri kullanmalısınız.

Tercihim aşağıdaki çözümü kullanmaktır. Web için normalde bir düğmeyi şu şekilde biçimlendirebilirsiniz:

 <a href="#" class="btn btn-primary">Click Here</a>

Bunun yerine şöyle yazın:

 <table border="0" cellpadding="0" cellspacing="0" class="btn btn-primary"> <tr> <td align="center"> <table border="0" cellpadding="0" cellspacing="0"> <tr> <td> <a href="" target="_blank">Take action now</a> </td> </tr> </table> </td> </tr> </table>

Ardından, CSS'niz satır içine alındığında şöyle görünecektir:

 <table border="0" cellpadding="0" cellspacing="0" class="btn btn-primary" width="100%"> <tr> <td align="center" valign="top"> <table border="0" cellpadding="0" cellspacing="0"> <tr> <td valign="top" bgcolor="#3498db" align="center"> <a href="">Take action now</a> </td> </tr> </table> </td> </tr> </table> 

Burada neler oluyor? İlk <td> , düğmeyi ortalamamıza yardımcı olacak bir sarmalayıcıdır. İkinci <td> , düğmenin boyutudur. Bazı istemciler (Outlook gibi) <a> etiketindeki dolguyu tanımaz, bu nedenle tablo hücresinin arka plan rengini doldururuz. <a> etiketi daha sonra ikinci <td> içinde bulunan alanı kaplar ve tüm alan tıklanabilir hale gelir. Litmus'taki koda ve müşteri testlerine göz atın.

Bu, e-postada düğmeleri uygulamanın yalnızca bir yoludur. Kuşkusuz, her istemcide her zaman aynı görünmüyor, ancak web de her zaman piksel açısından mükemmel değil. Bunu tercih ediyorum çünkü daha basit ve görüntü varlıkları veya VML kullanmayı içermiyor.

VML nedir? E-posta geliştirmek için herhangi bir zaman harcadıysanız, muhtemelen buna bazı referanslarla karşılaşmışsınızdır. Vektör İşaretleme Dili (VML), Outlook'un eski sürümleri tarafından desteklenir. Microsoft'a göre, Internet Explorer (IE) 10'dan itibaren VML eskidir, yani artık IE'nin yeni sürümlerinde desteklenmemektedir. Ancak, Outlook 2007, 2010 ve 2013 etrafta olduğu sürece, genellikle arka plan resimleri için kullanıldığını göreceksiniz.

tipografi

Genel olarak, standart sistem yazı tiplerine bağlı kalmak en kolayıdır. Buna Helvetica, Arial ve benzerleri dahildir. Ancak, Google Yazı Tipleri gibi web yazı tiplerini kullanabiliriz . Bunları bir WebKit koşullu medya sorgusunun arkasına koyun, böylece Outlook onları karıştırmaz:

 <style> @import url(https://fonts.googleapis.com/css?family=Pacifico); /* Type styles for all clients */ h1 { font-family: Helvetica, Arial, serif; } /* Type styles for WebKit clients */ @media screen and (-webkit-min-device-pixel-ratio:0) { h1 { font-family: Pacifico, Helvetica, Arial, serif !important; } } </style>

Her <td> için bir yazı tipi ailesi, yazı tipi boyutu ve rengi eklemeyi unutmayın, aksi takdirde istemcinin özenle seçtiğiniz yazı stillerinin üzerine yazma riskini alırsınız.

Şartlılar

Outlook'un farklı sürümleri için belirli CSS stilleri uygulayabilir ve öğeleri ve içeriği gösterebilir veya gizleyebiliriz.

Aşağıdakiler, Outlook'un tüm Microsoft Word tabanlı sürümlerini hedefler:

 <!--[if mso]> Only Microsoft Word-based versions of Outlook will see this. <![endif]-->

Bu sonraki pasaj, Outlook'un tüm IE tabanlı sürümlerini hedefler:

 <!--[if (IE)]> Only IE-based versions of Outlook will see this. <![endif]-->

Outlook'un belirli sürüm numaralarını da hedefleyebiliriz:

 <!--[if mso 12]> Only Outlook 2007 will see this. <![endif]-->

Bir medya sorgusu ile WebKit tabanlı istemcileri hedefleyebiliriz:

 .special-webkit-element { display: none; } @media screen and (-webkit-min-device-pixel-ratio:0) { .special-webkit-element { display: block !important; } }

Görüntüler ve Medya

E-postadaki Resimler

Bazı istemciler varsayılan olarak görüntüleri gösterecektir. Bazıları olmayacak. E-posta içeriğinize resim eklerken bunu aklınızda bulundurun. Bu aynı zamanda izleme ölçümlerini de etkiler, çünkü görüntüler genellikle açılışları izlemek için kullanılır.

• Outlook, varsayılan olarak görüntü oluşturmayı engeller .
• Apple Mail yok.
• Gmail (artık) yok.

Tüm resimleriniz için iyi bir alt metin eklemeyi unutmayın. Metin, kullanıcıya görüntünün ne söylediğini söyleyebilir veya sadece ne olduğunu açıklayabilir (örneğin, "şirket logosu"). Email Monks'un yaptığı gibi, görüntüleri kapatan istemciler için alt metin ile yaratıcı olabilirsiniz:

Tüm resimler için temel bir sıfırlama eklemeyi unutmayın:

 <img src="https://www.smashingmagazine.com/wp-content/uploads/2016/11/" alt="" width="" height="" border="0">

Animasyonlu GIF'ler çoğu istemcide desteklenir . Outlook 2007 ila 2013 sürümleri, animasyonlu GIF'leri desteklemez, bunun yerine ilk kareye geri döner.

Medya varlıklarınızı sıkıştırmayı ve bunları Amazon Web Services, Cloudinary veya imgix gibi bir içerik dağıtım ağına (CDN) yüklemeyi unutmayın. Çoğu pazarlama ESP'si bunu sizin için halleder.

Ölçeklenebilir vektör grafikleri (SVG'ler) web üzerinde birçok avantaja sahiptir. Beklediğiniz gibi, e-posta desteği değişiklik gösterir ve SVG, birkaç yedek hack veya koşul gerektirir. Genelde e-postada SVG'den uzak durmanızı öneririm, ancak bu konuda ciddi olmak istiyorsanız, CSS-Tricks'in e-postada SVG desteği hakkında bir kılavuzu vardır.

Retinaya hazır görüntüler için daha büyük bir görüntü (1,5× ila 3×) sağlayın ve yeniden boyutlandırın. Tipik olarak, iyi çalışan, 2× boyutlu düşük kaliteli bir görüntü kaydedeceğim. (Bu teknik hakkında daha fazla yazdım.)

Outlook için, bir görüntünün width özniteliği ile ne kadar geniş olması gerektiğini bildirmeniz gerektiğini unutmayın. Aksi takdirde, Outlook görüntünün gerçek genişliğini oluşturabilir ve e-postanızı bozabilir.

E-postadaki Video

Video, iOS, Apple Mail ve Outlook.com'da desteklenir. İstemciye göre bir videoyu göstermek veya gizlemek için medya sorgularını kullanabilirsiniz. Email on Acid, e-posta video desteği konusunda daha fazlasına sahiptir.

İlham almak için Kevin Mandeville'in HTML5 videosunu bir e-postada arka plan olarak kodlama eğitimine göz atın - etkileyici şeyler ve bir göz atmaya değer.

E-postadaki Formlar

Form öğeleri için destek değişir. Uzak durmaya çalışın ve ihtiyacınız varsa harici bir forma bağlantı verin. Campaign Monitor, formlar hakkında bazı tavsiyeler sunar.

Açıkçası, hedeflerinize bağlı. Formlardan uzak durmak daha güvenlidir, ancak Rebelmail ve Mixmax, anketler ve e-ticaret için formlarla ve iyi bir geri dönüş desteğiyle ilginç şeyler yaptı.

Gmail İşlemleri

Google, Gmail için kullanışlı işlemler sağlar. Muhtemelen bunları sorunlar için GitHub'da veya siparişler için Amazon'da görmüşsünüzdür.

Kodu eklemek basittir. İki seçeneğiniz var:

• JSON-LD
• mikro veri

Beyaz listeye alınmak birkaç adım daha içerir. Bir @gmail.com adresiyle Gmail işlemlerini test edebilirsiniz.

Ön Başlık Metni

Önemli ama sıklıkla unutulan bir şey ön başlık metnidir. Bazı istemciler , konu satırının yanında veya altında önizleme metni gösterir. Bu istemciler iOS, Apple Mail, Outlook 2013, Gmail ve AOL'yi içerir.

Müşteriler, e-postanızın gövdesinde buldukları ilk metin parçasını alır ve burada görüntüler. Bundan en iyi şekilde yararlanın ve vücudunuzun içeriğine ilk görünen gizli bir öğe ekleyin. Bu metin, kullanıcının e-postanızı açması için ekstra bir teşvik sağlamalıdır. Metni şu şekilde gizleyin:

 <span>Preheader text goes here</span>

E-posta konularınızı ve ön başlıklarınızı önizlemek için Austin Woodall'ın konu ve ön başlık aracını kullanın.

E-postayı Test Etme

İlk kez başarılı bir e-posta gönderdiğimi sanmıyorum. Her zaman düzeltilecek bir şey vardır, her zaman bir yazım hatası, her zaman Outlook'ta bir oluşturma sorunu, her zaman eklemeyi unuttuğum bir şey.

E-postanızı birkaç yolla test edebilirsiniz:

• Kendinize bir e-posta gönderin ve bunu bir masaüstü istemcisinde (Outlook), bir web istemcisinde (Gmail) ve bir mobil istemcide (iOS Mail) kontrol edin.
• Asitte Litmus veya E-posta kullanarak testleri otomatikleştirin.
• İçeriğin provasını yapın ve düzen oluşturma işlemlerini kontrol edin.
• A/B, çeşitli içerik türlerini, içerik uzunluklarını ve konu satırlarını test eder.

HTML e-postalarını kendinize nasıl gönderirsiniz? İyi soru. Düşündüğünden daha zor. PutsMail, bunu oldukça kolay bir şekilde yapmanızı sağlar ve Thunderbird, HTML düzenleyicisiyle oluşturmanıza izin verir.

MIME Çok Parçalı

Düz metin e-posta tam da bu, düz metindir. Bir HTML e-postası yalnızca HTML'dir. Gönderdiğiniz veya aldığınız e-postaların çoğu, MIME (Çok Amaçlı İnternet Posta Uzantıları) çok parçalı e-postalardır (MIME türüyle karıştırılmamalıdır). Bu standart, hem düz metni hem de HTML'yi birleştirerek hangisinin oluşturulacağına karar vermeyi alıcıya bırakır.

İster işlemsel ister toplu bir e-posta gönderdiğinizde, hem HTML hem de düz metin sürümlerini ekleyin. Aklınızda, herkes HTML işleyen bir istemci kullanıyor olsa bile, yine de düz metin gönderir.

Ayrıca, bazı istemcilerin düz metin e-postayı HTML olarak oluşturduğunu unutmayın; örneğin, Gmail bazı varsayılan stiller ekler ve URL'leri bağlantılara dönüştürür. Çoğu ESP, MIME'yi sizin için oluşturacaktır, bu nedenle gerçekten endişelenmenize gerek yoktur. Bazıları, HTML'nize dayalı olarak düz metin bir sürüm de oluşturacaktır.

Profesyonel ipucu: Gmail'de, MIME'nin tamamını görmek için açılır menüden "Orijinali göster"i seçin.

Yeni bir MIME bölümü ortaya çıktı: text/watch-html . Bu içerik yalnızca Apple Watch'ta (ve bundan sonra bu MIME türünü destekleyen diğer istemcilerde) görüntülenecektir.

Ulaşılabilirlik

Web'de standartları ve en iyi uygulamaları izler ve anlamsal biçimlendirme ve geçerli HTML sözdizimi kullanırsanız, temel erişilebilirliği hemen kullanmaya başlarsınız. Ne yazık ki, e-posta ile, aşırı bilgisayar korsanlığımız ve HTML desteğinin zayıf olması nedeniyle, erişilebilirlik genellikle göz ardı edilir.

E-posta erişilebilirliği hakkında çok az tartışma gördüm, ancak öne çıkan bir tanesi Mark Robbins'in erişilebilirlikle ilgili yazısı. Aşağıdakileri tavsiye ediyor:

• Her tabloya role="presentation" ekleyin, böylece tablonun mizanpaj için kullanıldığı anlaşılır.
• Anlamlı açıklamalar içeren alt metin sağlayın.
• alt metne ihtiyacınız yoksa veya istemiyorsanız, ekran okuyucuların bunun boş olması gerektiğini anlaması için alt="" kullanın.
• Uygun olduğunda <p> ve <h1> gibi anlamsal HTML etiketleri kullanın.
• Üstbilgiler ve altbilgiler gibi öğeler için role niteliğini kullanın (örneğin, role="header" ).

Duyarlı E-posta Tasarımı

• Mobil cihazlarda e-posta açılışları %50'de ve artıyor. Kesin ölçüm, hangi raporu kontrol ettiğinize ve hangi kitleye hitap ettiğinize bağlıdır, ancak sanırım hepimiz bunun önemli olduğu konusunda hemfikir olabiliriz.
• E-posta İstemcisi Pazar Payı, Ağustos 2016 itibarıyla iPhone'u %33, iPad'i %11 ve Android'i %10'a (bu %50'nin üzerinde!) koyuyor.
• MailChimp, duyarlı kampanyalar için mobil kullanıcılar arasında benzersiz tıklamaların %2,7'den %3,1'e yükseldiğini buldu - yaklaşık %15'lik bir artış.

"Duyarlı web tasarımı", 2010 yılında Ethan Marcotte tarafından ortaya atılan bir deyimdir:

Akışkan, ızgara tabanlı düzenler ve CSS3 medya sorgularını birleştirerek, onu oluşturan ekranın şekline yanıt veren tek bir tasarım oluşturabiliriz.

E-posta dünyasında, akıcı tasarımdan, ızgara tabanlı düzenlerden ve medya sorgularından yararlanmaya devam edebiliriz. Sorun, tüm istemcilerin bunları desteklememesidir. Bu nedenle, yol boyunca bazı hacklere ihtiyacımız var.

Yakın zamana kadar Gmail medya sorgularını desteklemiyordu. Neyse ki, Eylül 2016 itibariyle müşterilerinin çoğu bunu yapıyor. Ancak, Yahoo, Windows Phone 8 ve Android için Gmail de dahil olmak üzere bazı mobil istemciler hala bunu yapmıyor.

Medya sorguları için destek eksikliğini gidermek için e-posta dünyasında çeşitli teknikler kullanılır. Duyacağınız terimlerden bazıları "akışkan", "uyarlanabilir", "duyarlı", "karma" ve "süngerimsi"dir.

Sıvı

En kolay çözüm, tek bir sütuna bağlı kalmak ve e-postalarınızı akıcı hale getirmektir. Bu, görünüm alanı küçüldükçe içerik alanınızın daraldığı anlamına gelir.

 .container { max-width: 600px; width: 100%; }

Duyarlı ve Uyarlanabilir

Medya sorgularını ve kesme noktalarını kullanarak, farklı boyutlu görünüm alanları için alternatif stiller sağlayabiliriz. Ayrıca öğeleri gizleyebilir veya gösterebiliriz.

Bir ızgara ve sütunlar tanıttığınızda bu karmaşıklaşmaya başlar. İki sütunlu bir düzene sahip olabilir ve ardından belirli bir görüntü alanı genişliğinin altında yığınlanmış tek sütunlu bir düzene geçebilirsiniz.

Ancak , gördüğümüz gibi, medya sorguları her yerde desteklenmez, bu nedenle bu her zaman güvenilir değildir.

Hibrit ve Süngerimsi

Bu teknik, Outlook desteği için biraz akıcı, biraz duyarlı ve birkaç hack kullanır. Ayrıca sütunların medya sorguları olmadan istiflenmesini sağlıyoruz.

Bu teknik ActionRocket tarafından özetlenmiştir ve Nicole Merlin bunun üzerine adım adım harika bir öğretici yazmıştır.

İşte e-postalarımın çoğunu oluşturmak için kullandığım kodun bir parçası.

 <!--[if (gte mso 9)|(IE)]> <table align="left" border="0" cellspacing="0" cellpadding="0" width="100%"> <tr> <td align="left" valign="top" width="50%"> <![endif]--> <div class="span-3">...</div> <!--[if (gte mso 9)|(IE)]> </td> <td align="left" valign="top" width="50%"> <![endif]--> <div class="span-3">...</div> <!--[if (gte mso 9)|(IE)]> </td> </tr> </table> <![endif]-->

 @media only screen and (max-width: 620px) { .span-3 { max-width: none !important; width: 100% !important; } .span-3 > table { max-width: 100% !important; width: 100% !important; } }

Fabio Carneiro'nun GitHub'daki süngerimsi açık kaynak deposuna bir göz atın ve Stig'in mobil öncelikli e-postaları kodlama konusundaki görüşlerini okuyun. Remi Parmentier ayrıca medya sorgularına ihtiyaç duymayan ve calc() işlevini kullanan başka bir duyarlı tekniğe sahiptir.

Duyarlı Görüntüler

Belirtildiği gibi, Retina görüntülerini 1,5× ila 3× arasında kullanın ve görüntü boyutlarını satır içi olarak ayarlayın.

 <img src="https://www.smashingmagazine.com/wp-content/uploads/2016/11/logo.png" height="100" width="600" alt="Company Logo">

max-width: 100%; çünkü bazı müşteriler bunu görmezden geliyor. Ayrıca aşağıdaki CSS'yi de gömmek isteyeceksiniz:

 @media only screen and (max-width: 620px) { img { height: auto !important; max-width: 100% !important; width: auto !important; } }

İş Akışınızı Otomatikleştirme

Kurşun geçirmez bir e-posta oluşturma süreci karmaşıktır. Çok fazla adım var ve birçok şeyin yanlış gitmesi için yer var.

Adımları olan herhangi bir monoton görev gibi, sistemi bir kez kurabilmeniz ve gelecekteki çalışmaları kolaylaştırabilmeniz için yapabileceklerinizi otomatikleştirmenizi öneririm.

Brian Graves'in e-postanızı modüler hale getirme konusunda iyi bir yazısı var. Bir web sitesi veya uygulama için bir tasarım sisteminiz ve desen kitaplığınız olduğu gibi, bunu e-posta için yapmalı, bileşenleri yeniden kullanılabilir hale getirmeli ve e-postaları ürününüz ve şirketiniz genelinde tutarlı hale getirmelisiniz.

Kevin Mandeville, sürekli olarak kodu yeniden yazmamanız için iş akışınızı optimize etmek için yeniden kullanılabilir kod parçacıkları kullanmanızı önerir. Yayınında, modern editörlerde (Atom ve Sublime gibi) snippet'lerin nasıl kullanılacağını özetliyor ve Litmus tarafından barındırılan, topluluğun katkı sağladığı snippet kitaplığına işaret ediyor.

Kendi adıma, e-posta oluşturma işlemlerini otomatikleştirmek için bir Grunt iş akışını bir araya getirdim ve açık kaynaklı hale getirdim. CSS'yi satır içine alma, görüntüleri sıkıştırma, görüntüleri bir CDN'ye yükleme, önizleme gönderme ve Litmus ile test etme gibi çeşitli görevleri tek bir komutla çalıştırır . Grunt'ta yeniyseniz, nasıl çalıştığına dair ayrıntılı bir eğitim yazdım. Foundation for Email, duyarlı e-posta çerçevesi MJML ile Mailjet'in yaptığı gibi geliştiriciler için bazı harika otomasyon araçlarına da sahiptir.

Geleceğe bakmak

Google kısa süre önce medya sorguları için destek başlattı; Microsoft, "e-postayı daha iyi hale getirmek" için Litmus ile yeni ortaklık kurdu; ve AOL's Alto artık duyarlı e-postayı destekliyor. Dolayısıyla gelecek çok daha parlak görünüyor.

Gittikçe daha fazla şirket ve geliştirici, e-posta teknolojisiyle mümkün olanı deniyor: CSS animasyonu, ses, e-postada alışveriş sepetleri. 2017'de daha fazla etkileşimli ve kinetik e-posta örneğinin ortaya çıkmasını bekleyin.

Çözüm

E-posta tasarımı ve geliştirme bir canavardır. Bir web sayfası oluşturmaya çok benziyor… 10 yıl önce . E-posta istemcisi satıcıları, yeni standartları benimsemede web tarayıcısı satıcıları kadar ilerici olmamıştır ve biz kullanıcılar ve şirketler, web tarayıcılarında yaptığımız gibi yeni e-posta istemcilerini benimsemeyiz. Buna mobilin yükselişini de eklediğinizde, karmaşık bir istemci ve sürüm karışımını desteklemek zorunda kaldığımız bu durumda kalırız.

Buradaki tanıtımım üst düzey bir genel bakıştır; bu noktaların her birine derinlemesine dalabilirsiniz. Umarım, size e-posta oluşturma ve gönderme dünyasına dair iyi bir fikir vermiştir ve kod parçacıkları ve kaynaklar, hayatınıza birkaç saat kazandırmıştır.

Önerilen Kaynaklar

• Gerçekten Basit Duyarlı HTML E-posta Şablonu, Lee Munroe (ücretsiz açık kaynaklı e-posta şablonum)
• Profesyonel E-posta Tasarımı , Jason Rodriguez
• "HTML E-postalarının Maskesini Kaldırma" (kurs), Dan Denney, Code School
• “Evrendeki En İyi E-posta Tasarımları (Gelen Kutuma Gelen),” Gerçekten İyi E-postalar
• “Dinamik ve Etkileşimli (Kinetik) E-posta Örnekleri ve Teknikleri,” Justin Khoo

Takip Edilecek Bloglar

• Kampanya İzleme
• MailChimp
• Turnusol
• Asit üzerine e-posta