HTML E-postaları Nasıl Oluşturulur

HTML e-postaları oluşturmak göründüğü kadar zor değildir. Bir geliştirici olmanıza gerek yok ve gerçekten nasıl kod yazılacağını bilmenize gerek yok.

Daha önce bir WYSIWYG (Ne Görüyorsanız Onu Alırsınız) e-posta düzenleyicisi kullandıysanız, zaten bir HTML e-postası oluşturmuşsunuzdur. Sürükleyip bıraktığınız modüllerin her biri, farklı e-posta öğelerinin nasıl görünmesi ve davranması gerektiğini tanımlayan HTML ve satır içi CSS'den oluşur.

Öyleyse, çoğu e-posta düzenleyicisi sürükle ve bırak araçlarıyla tasarım yapmanıza izin veriyorsa, e-posta oluşturmak için neden herhangi bir HTML bilmeniz gerekiyor?

İyi soru.

Çoğu e-posta düzenleyicisi, modüller içinde size makul miktarda kontrol sağlarken, e-postanızın her ayrıntısını değiştiremezsiniz. Aşağıdaki gibi şeyleri değiştirmek için büyük olasılıkla HTML'ye ihtiyacınız olacak:

• Yazı Boyutu
• alternatif metin
• Sınırlar
• kenar boşlukları
• Dolgu malzemesi
• Görüntü boyutu
• Renkler

Twilio SendGrid'in e-posta düzenleyicisini kullandınız mı? Sürükle ve bırak modülleri ve HTML düzenleme kombinasyonuyla e-postalar oluşturmanıza olanak tanır . Bunun gibi birleşik bir güç merkezi, e-postalarınızın görünümü ve hissi üzerinde tam kontrol sağlayarak her mesajda tutarlı, birinci sınıf bir marka deneyimi sağlar.

Neyse ki, bir HTML e-postasını kodlamak çok zor değil. Aşağıda, daha iyi e-postalar oluşturmak için ihtiyaç duyduğunuz ipuçlarını ve e-posta yapısı bilgisini vereceğiz.

Bir HTML e-postasını kodlamak için 5 ipucu

Bir HTML e-postasını kodlamak nispeten basittir, ancak e-posta istemcileri ve gelen kutuları titiz olabilir. Alıcınızın istemcisi, tarayıcısı veya cihazından bağımsız olarak mesajlarınızın harika görünmesini sağlamak için bu en iyi uygulamaları izleyin.

1. E-postalarınızı duyarlı hale getirin

Alıcılar, çeşitli işletim sistemlerinde, cihazlarda, ekran boyutlarında, tarayıcılarda ve e-posta uygulamalarında e-posta mesajlarını açar. Bu faktörlerin her biri e-postanızı farklı şekilde oluşturacaktır, bu nedenle e-postanızın yanıt vermesini ve çoğu gelen kutusunda amaçlandığı gibi çalışmasını sağlamak sizin işinizdir.

Çok sayıda duyarlı e-posta şablonu bulabilirsiniz, ancak bir HTML e-postasını sıfırdan kodladığınızda görev biraz daha karmaşıktır. İşte e-postalarınızı daha duyarlı hale getirmeye yardımcı olacak birkaç şey:

• Medya sorgularını dahil et: Medya sorguları, e-posta şablonlarınızı farklı cihazlara uyarlamanıza olanak tanır.
• Tek sütun kullanın: 2 sütunlu e-postaları masaüstünde okumak kolay olabilir, ancak mobil cihazlarda biraz yoğunlaşabilir.
• Yazı tipi boyutunu artırın: 13 veya 14 puntoluk bir yazı tipinden daha küçük gitmeyin.
• Bağlantılarınız arasında boşluk bırakın: Bağlantılarınız birbirine çok yakın olduğu için okuyucuların yanlışlıkla yanlış bağlantıya tıklamasını istemezsiniz.
• Alt etiketleri ekle: Alt etiketleri, resimlerin yüklenememesi durumunda resimlerinizi tanımlar.

2. Görüntüleri az miktarda ekleyin

Görseller, e-posta kampanyalarınız için harika eklemelerdir, ancak aşırıya kaçmamaya dikkat edin. Çok fazla resim yükleme sürelerini uzatabilir ve e-postaların işlenmesini zorlaştırabilir.

Daha hızlı yüklenecek ve tüm ekranı kaplamayacak daha küçük resimler kullanın. Ayrıca, resimlerinizin her cihaza ve e-posta istemcisine düzgün şekilde yüklenmesini sağlamak için "width" ve "max-width" gibi duyarlı boyutlandırma öğeleri ekleyin.

3. Basit tutun

E-postanızın amacını unutmayın. Pek çok e-posta tasarımcısı, e-postanın genel amacını unutarak sanatta ve yaratıcılıkta kayboluyor; bu, ah ve ah kazanmak değil.

İlk olarak, insanların e-postalarınızı açmasını istiyorsunuz. Ardından, tıklamalarını ve harekete geçmelerini istiyorsunuz. Bu, web sitenizi ziyaret etmek, bir blog gönderisini okumak, bir satın alma işlemi gerçekleştirmek veya bir etkinliğe kaydolmak olabilir.

İşleri basit tutun. Alıcılarınıza değer sağlayın, onları içerikle ikna edin ve ardından onları harekete geçirici mesajınıza yönlendirin. Bu kadar. Çoğu zaman, diğer her şey kabarıktır.

E-postanıza farklı HTML öğeleri eklerken kendinize şu soruyu sorun: "Bu, e-postanın amacına ulaşmasına yardımcı olur mu?" Değilse, e-posta tasarımınızdan çıkarın.

4. Önceden oluşturulmuş e-posta şablonlarını kullanın

Harika bir kampanya göndermek için ihtiyacınız olan her şeyi içeren önceden oluşturulmuş HTML e-posta şablonlarını bulabilirsiniz . Şablonlar, iyi görünümlü, duyarlı bir e-posta tasarımı oluşturmak için zaten çok çalıştı.

Bir e-posta şablonunu beğendiyseniz ancak bundan %100 memnun değilseniz, genellikle HTML'yi indirebilir ve istediğiniz düzenlemeleri yapabilirsiniz. Bu, HTML'ye yeni başlayanlar için mükemmel bir e-posta düzenleme yöntemi olabilir.

5. E-postalarınızı test edin

Test etmeden asla e-posta göndermeyin. Bunu yapmanın eski usul yolu, çeşitli e-posta adreslerine (e-posta istemcileri arasında) bir test e-postası göndermek ve onu farklı cihazlarda açmayı denemek olacaktır. Bu çok fazla zaman kaybı ve baş ağrısı gibi geliyorsa, haklısınız.

Neyse ki, bugünlerde daha iyi bir yol var.

Twilio SendGrid'in e-posta test aracı , tasarım düzenleyicinizle entegredir ve sorunları tek bir uygulamadan gidermenize yardımcı olur. E-postanızın istemciler, tarayıcılar ve cihazlar arasında nasıl işlendiğini görmenize yardımcı olur. Örneğin, e-postanızın Gmail kullanan bir mobil cihazda ve Outlook kullanan bir masaüstünde nasıl görüneceğini görebilirsiniz.

E-posta test araçları, bozuk bağlantıları ve düğmeleri, spam görünümlü içeriği ve biçimlendirme sorunlarını bulmanıza da yardımcı olabilir.

HTML e-posta yapısı

HTML e-postalarının basit bir yapısı vardır:

• DOKTORA
• başlık
• Gövde

DOKTORA

Tarayıcıya ne beklemesi gerektiğini söylemek için <!DOCTYPE> öğesini kullanın; bu durumda bu bir HTML e-postası olacaktır.

başlık

Stil, boyutlandırma ve meta metin gibi öğeleri dahil etmek için başlık bölümünü kullanın.

Gövde

E-postanızın metin, resimler, tablolar, bağlantılar ve benzerleri gibi görsel öğeleri için gövdeyi kullanın.

HTML kodlu e-posta şablonu

İşte HTML kodlu bir e-posta şablonu örneği. Bu seyahat bülteni e-posta şablonunun masaüstü, tablet ve mobil cihazlarda nasıl işlendiğini görüntüleyebilirsiniz.

Gördüğün gibi mi? "Şablonu İndir"i tıklayın, size HTML kodunun bir kopyasını gelen kutunuza göndereceğiz. Ardından, şablonu içe aktarmak ve markanıza ve kampanyanıza göre uyarlamak için kodu kopyalayıp e-posta tasarım düzenleyicinize yapıştırabilirsiniz.

Twilio SendGrid'den diğer e-posta şablonlarına göz atın

Daha fazla e-posta şablonu mu istiyorsunuz? Şansınıza , bunlarla dolu bir galerimiz var . Bir haber bültenine, parola sıfırlamaya veya randevu hatırlatıcı şablonuna ihtiyacınız olsun, ücretsiz şablon galerimizde her şey var.

Ayrıca, bu tasarımlar duyarlıdır ve e-postanızın istemciler, tarayıcılar ve cihazlar arasında harika görünmesini sağlar. Oh, ve şablonların ücretsiz olduğundan bahsetmiş miydik?

Önceden oluşturulmuş bir şablonla bugün daha iyi HTML e-postaları oluşturmaya başlayın .