Mükemmel HTML Bültenini Tasarlamak için 9 Püf Noktaları

Bir e-posta bülteni, müşterileriniz veya takipçilerinizle iletişimde kalmak için mükemmel bir yoldur. Genellikle şirketinizde veya web sitenizde çok sayıda ürün güncellemesi veya muhtemelen paylaşmak istediğiniz etkinlikler olacaktır. Blogunuza veya sosyal medya akışlarınıza yeni bilgiler göndermek her zaman mümkündür, ancak izleyicileriniz yalnızca size ulaşmak için çok uzağa gidebilir. Bu durumda, e-posta kesinlikle ölü bir teknoloji değildir, yalnızca henüz keşfedilmemiş potansiyeldir.

Bir bülten oluşturma ve gönderme işlemi, düşünülenden çok daha kolaydır, ancak özel bir şablon tasarlamak ve kendi kodunuzu oluşturmak - bu biraz daha uzun sürebilir.

Daha önce hiç olmadığı gibi yüksek kaliteli HTML bültenleri tasarlamanızı sağlamak için bazı harika ipuçları derledik. Konuyla ilgilenmiş olsanız bile, e-posta pazarlama sürecine başlamanız için kesinlikle bazı değerli bilgiler bulacaksınız..

Bülten Hedefleri

Tasarıma girmeden önce bir bülten oluşturma amacınızı açıklamalıyız. Çalıştırdığınız web sitesinin türüne bağlı olarak, bülteninizde yer alan bilgiler diğerlerinden önemli ölçüde değişebilir, ancak bir bültenin temel amacı doğrudan okuyucunuzun Gelen Kutusuna uygun güncellemeler sunmaktır..

Ağır İnternet kullanıcılarının e-postalarını günde iki kezden fazla kontrol etmesi muhtemeldir. Sürekli meşgul olanlar bile, mesajlarını en az günde bir kez geçirecekler. Bu için mükemmel bir zaman dikkatini çekmek sitenizi ziyaret etmek zorunda kalmadan bile. Bağlantılarını kimse tıklamıyor olsa bile, bilgi hala alınmış, bir marka oluşturmak için harika.

Tasarımınızda sunmanız gereken konulardan bazılarını göz önünde bulundurun. Hizmetinize kaydolmak için bağlantılar ekliyor musunuz? muhtemelen blog linkleri veya sitenizde en son yayınlanan makaleler? Haber bülteninizin düzeni, okuyucularınızın nasıl cevap vermesini istediğinizi yansıtır, ancak sonuçta ilginizi çekmeyi ve bazı ilginç bilgi gruplarını kitlelere aktarmayı düşünüyorsunuz..

1. Düzenlerinizdeki Tabloları Kullanın

Bu, günümüzün modern web standartlarına göre biraz çelişkili görünebilir, ancak e-postalar görüntü oluşturma motorlarında hala arkaiktir, bu nedenle eski modellere yönelik inşa etmeniz gerekir. Maalesef tablolar en kolay yol Çeşitli e-posta istemcileri arasında her şeyin düzgün çalışmasını sağlamak. Tablo tabanlı düzen oluşturma konusundaki bilginize bağlı olarak, bu aslında iyi bir haber olabilir.!

Ayrıca nedenini de merak edebilirsin div ve diğer blok elemanları iyi bir fikir değildir. Çoğu e-posta istemcisi herhangi bir yabancı CSS'yi çıkarmak için üretilmiştir içeriği. Bu, haricinde hiçbir şeyi kullanamayacağınız anlamına gelir. satır içi CSS (ve hatta tam destek bile kudurludur). Microsoft Outlook 2007 ve Google Gmail gibi müşteriler, kayan öğeler ve doğrudan konumlandırma için çok zayıf bir desteğe sahiptir.

En iyi çözüm birbirlerinin içine birden fazla tablo yerleştir. Dolgu ve kenar boşlukları, birçok e-posta istemcisi arasında belirli bir ölçeğe ayarlanmamış. Bu kullanmaya devam etmek için bir neden genişlik = "değeri" tüm masa hücre elemanlarınızda. Bunlar, okuyucularınızın hangi e-posta istemcisini kullandığına bakılmaksızın her zaman aynı genişliği gösterir, bu yüzden çok fazla daha güvenli ve Daha tutarlı boş tablo hücrelerini kullanarak dolguyu ve kenar boşluklarını ayarlamak için.

2. Sabit Genişlik Konumlandırma

Bülten düzeninizin taslaklarını oluştururken birkaç seçeneğiniz vardır, ancak izlenecek en iyi seçenek içeren tablonuz için sabit genişlikleri ayarlamak. Birçok farklı monitör çözünürlüğü var - herkesi memnun edemezsiniz. Statik genişliğe sahip belirli öğeleriniz yoksa, her zaman genişlik = "% 100" senin masanın üzerinde. Bu, içeriğinizin tüm e-posta istemcilerinin genişliğini doldurmasını sağlar.

Ancak, çoğu için bu yöntem biraz fazla gevşek. Yapıcı bültenler Çoğu durumda, özellikle de belirli bir boyuta ayarlanmış afişler ve görüntüler kullanıyorsanız, sabit genişlik gerekir. İle çalışmayı öneririm 500px - 600px maksimum belge genişliği. İPhone'un ve bazı BlackBerry modellerinin yatay ekran boyutu 320 piksel ile sınırlıdır, bu yüzden 500 piksel'de bile e-posta şablonunuz uygun şekilde sığacak şekilde küçültülmüş.

Pek çok mobil kullanıcının zaten e-postaları HTML'siz görüntülemeyi seçtiğini göz önüne alındığında, bu çok büyük bir sorun olmamalıdır. Masaüstü ve web posta istemcileri kullanıcıları, kullandıkları İşletim Sisteminden bağımsız olarak benzer bir kurulumla karşılaşacaklardır. Şüphede kalınca birkaç şablon tasarımı oluşturun ve en çok sevdiklerinizi seçin!

3. Piksel Birimleri

Bülteninizde akışkan öğeler kullanmıyorsanız, birkaç şeyi boyutlandırmanız gerekebilir. İçinde tutmaya çalış piksel (px) başka tür bir ünite yerine. Yüzdeler, birçok web posta istemcisi ve yazılım penceresine kolayca karışabilir. Daha az sayfa elemanı ile, birkaç hata olmasına rağmen, sıvı düzenleri bozulmadan çıkabilir..

Ancak pikseller her zaman kesin bir şeydir. 600 piksel maksimum genişlik sınırında çalışırken, içeriye çok fazla içerik sığdırabilirsiniz. Düzenlerinizi iki veya üç sütuna bölerseniz ve boyutlarınızı her zaman piksel cinsinden yazarsanız pozlama daha kolaydır. Tek istisna olabilir yazı tipi boyutları nerede ems okuyucularınızı daha iyi destekleyebilir, ancak em boyutlandırma benzer şekilde farklılık gösterir - yüzdeler - yani sadelik uğruna, piksel tabanlı hizalama sopa.

4. CSS ile Olanaklar

E-posta tasarımı, CSS stillerinin kullanımını engelliyor gibi görünebilir. Desteklenmeyen birçok özellik olmasına rağmen, CSS birçok durumda hala mükemmel şekilde kabul edilebilir. Kampanya İzleyicisi, e-posta istemcisi tarafından listelenen güzel bir CSS özellikleri tablosuna sahiptir. Hepsi gibi temelleri destekleyecektir font ailesi ve yazı stili, Böylece atlayabilirsiniz eğer istersen etiketi.

Yazı tipi stillerinizi, sınırları çok fazla zorlamamaya dikkat edin. Satır içi stillerden rahatsızlık duyuyorsanız, HTML font etiketini kullanımdan kaldırılmış olsa bile kullanmak her zaman mümkündür. Bir CSS tasarımcısıysanız, sistemden çıkmanıza gerek yoktur, ancak herhangi bir kısa yoldaki CSS kodlaması buggy tasarımlarına neden olabilir. Örnek olarak font: 12px / 14px Arial, sans-serif; steno, çok fazla alan kazanmanıza yardımcı olabilir, ancak satır içi stillerle kullanılsa bile e-posta tasarımı için tam olarak kabul edilmez.

Renk seçenekleriniz bile el yazısı ile yazılmalıdır. Gibi altıgen renkler #ccc veya # E3F tam olarak yazılmalıdır #cccccc veya # ee33ff, sırasıyla. İhtiyacınız olanı CSS olmadan oluşturabiliyorsanız, bu yolu öneririm, ancak e-posta tasarımlarında CSS'den tamamen uzak durmayın çünkü popüler inanışın aksine çoğu durumda desteklenir..

5. Bağlantı Bağlantıları En İyi Uygulamaları

Kesinlikle haber bülteninize bazı bağlantılar eklemek isteyeceksiniz. Bunlar, web’deki diğer sayfalara giden bağlantılar veya web sitenizdeki en popüler sayfalara yönlendiren bağlantılar olabilir. Ek olarak, çoğu altbilgi, okuyucularınızın e-posta işleminden vazgeçmeleri için abonelikten çıkma bağlantısı içerecektir, ancak tasarımınızdaki tüm bu bağlantıları nasıl kullanmalısınız??

Öncelikle, e-posta istemcilerinin tasarımları konusunda çok titiz oldukları unutulmamalıdır. Pek çoğu, satır içi CSS ile bile, bağlantı stillerinizin üzerine yazmayı seçecektir. Düzgün bir numara bağlantı öğesinin içine hem satır içi renk hem de ek bir yayılma etiketi ekleyin. Bağlantılarınızın rengi ve tasarımı genel tasarım için önemliyse, ekstra önlem almak istersiniz. Aşağıya küçük bir kod örneği ekledim:

bazı bağlantı metni

Vurgulu etkileri Outlook 2007/2010, Gmail, iOS veya Android'de desteklenmez. Hala eklemek isteyebilirsiniz a: hover Destekleyen tüm müşteriler için stil: Outlook 2000/2003, Hotmail, Apple Mail ve Yahoo! posta, ancak şahsen kısmi kullanıcı deneyiminde çok fazla fayda göremiyorum, çünkü bağlantı seçicileri çok desteklenmiyor. sadece 2-3 bağlantı rengi sunar tasarımınız boyunca kullanmak için.

Bir varsayım olarak, kullanıcılar bağlantılarınızın yeni bir sekme veya pencerede açılmasını da bekleyecektir. İdeal olarak hedef = "_ blank" özellik, tüm tarayıcıların bu işlevi tanıması için yeterli olmalı ve bu özelliğin bağlantı linklerinize eklenmesi, Lotus Notes veya Outlook gibi e-posta yazılımlarını olumsuz etkilememelidir..

6. Tüm Başlıca Müşterilerde Test

En popüler e-posta istemcilerinin (Kampanya İzleyicisi tarafından yapılan) yapılan son bir araştırma, geçen yılki en popüler e-posta istemcilerinden onunu göstermektedir. Biraz sıkıcı görünebilir ama tasarımcılar Tüm büyük e-posta istemcilerinde bültenlerini kontrol etme alışkanlığı edinmeli, en azından Gmail, Hotmail veya Yahoo! Posta.

Bu sadece web postaları değil aynı zamanda Mac OS X ve Windows işletim sistemlerini de içermektedir. Ayrıca şemalarına göre iOS Mail ve Android Son birkaç yılda her ikisi de ilk 10 listesinde yer aldı. Aslında iPhone, iPod Touch ve iPad Mail, Outlook'un altında en popüler 2. sırada! Ne yazık ki, cihazlardan birine sahip olmadan bunları test etmenin bir yolu yok - bu nedenle diğer seçeneklerle anlaşmanız gerekecek.

Mobil destekli bir hata birçok iPhone ve Android modelinde geliyor. Mobil e-posta oluşturma genellikle şablonunuzun içindeki metni yeniden boyutlandırın. Bu, tasarımınızı çok fazla etkilemeyebilir, ancak bazı okuyucuları rahatsız edebilir. CSS'yi kullanma -webkit-text-size-adjust: yok;, irade tüm ayrıştırma motorlarında eşit metin boyutu sağlamak test etmeye gerek kalmadan.

Alternatif yazılım kullanan arkadaşlarınız veya iş arkadaşlarınız varsa, bülteni test etme konusunda yardım isteyin. Ya yapabilirsiniz onlara e-postanın bir kopyasını gönder cihazlarını kontrol etmek veya cihazı ödünç al kodlama hatalarını aktif olarak gidermek için. Neyse ki Outlook bir Mac kurulum sürümü sunuyor, bu yüzden bu optimizasyonlar için bir Windows kullanıcısını izlemenize gerek kalmayacak, ancak Lotus Notes veya Windows Mail’e gelince şansınız kalmayabilir.

Alternatif bir çözüm için para ödemek E-postamı Önizle gibi, ne yazık ki herhangi bir ücretsiz demo hesabı sağlamazlar, ancak hizmetleri, tasarımınızın müthiş önizlemelerini sunmasıyla ünlüdür. Asit e-postası, ücretsiz bir hesap sunan, ancak tüm müşterileri test etmenize izin vermeyen, bu tür bir amacı bozan benzer bir hizmettir. Çevrimiçi bilgisayar hizmetleri, çok sayıda bülten şablonunu alternatif bilgisayarların kullanımı olmadan uzun vadede test etmeniz gerekiyorsa faydalı olmalıdır; stres etme hepsini test edemezsen!

7. Daima Web Tabanlı Görünümler Sunun

Okuyucular her zaman e-postanızı yerel olarak görüntülemek için her zaman mümkün olmayacak (veya istekli olmayacak). Web’de bir yere başka bir sürüm önermek kolaylık ve uyumluluk duygusu verecektir. Eklemek istemediğiniz sürece, bu işlem tamamen otomatik olamaz. düz metin versiyon.

Bu şekilde, sen tüm HTML etiketlerini kaldır Bülten düzeninden. Hiçbir şey için bağlantılar veya stiller ekleyemezsiniz. Tüm içerik basitçe olur düz bir metin dosyası olarak düzenlenecek oluşturma yetenekleri olmayan okuyucular için. Bu kesinlikle iyi bir alternatiftir, ancak aynı bültenin tam bir Web sürümünü sunduğunuzda herhangi bir görüntü oluşturma hatasından kaynaklanan hasarı ortadan kaldırır. Çoğu okuyucu, haber bülteninizi şekillendirebileceğiniz ve kusursuz hale getirebileceğiniz güncel bir Web tarayıcısı çalıştırıyor olacak.

Sayfayı nasıl ayarladınız? tamamen senin seçimin. Bazı web siteleri e-postanın içeriğini çoğaltmak için blog postasının tamamını adamak, belki biraz ek bilgi. Diğerleri olacak Navigasyonda doğrudan bağlantı olmadan ana web sitesinden ayrı bir sayfa oluşturun.. Bu yöntem yararlı olabilir çünkü okuyucular ana web sitenizin şablonuna veya kenar çubuğu içeriğine dikkatinizi dağıtmaz..

8. Resim İçeriği Ekleme

Görüntüler, okuyucularınıza web tabanlı bir çözüm sunmak için başka bir nedendir. Varsayılan olarak, istemcilere e-posta gönder görüntüleri içerikten çıkarmak için. Adresiniz güvenli bir listeye eklenirse, tüm görüntüler varsayılan olarak gösterilir, ancak kullanıcı bu kurulumu kabul etmek zorunda bu yüzden kesinlikle bir garanti değil. Sadece ana içeriğin bir parçası olarak resimlerin gerekmediğinden emin olun, ancak sayfa estetiği için ekstra bir kaplama olarak dahil edildi.

Grafikleri dışa aktardıktan sonra, görüntüleri özellikle e-postayla oluşturmanın birkaç ipucu var. Her zaman isteyeceksin cihazınıza hem genişlik hem de yükseklik özelliklerini ayarlama img etiketler. Bu özellikler olmadan sırayla, bazı müşteriler görüntü içeriğini bozacak. bir alt etiketi de yararlı olacak, böylece ziyaretçiler resim içeriğinin yüklenmeden önce ne içerdiğini bilecek.

Daha önce de belirtildiği gibi, e-postanızdaki görüntüleri konumlandırmak zorlaşabilir. Yüzdürme kullanmaktan kaçının Her ne pahasına! Görüntü align = "left" özellik çok daha iyi veya alternatif olarak çalışacak kesin tablo hücrelerini eşlemek resimlerinizi bülteninizin üst, sol veya sağ tarafına sığdırmak için. Dışarıdaki pek çok müşteriyle (özellikle mobil müşteriler) mükemmel bir eşleşme elde edemezsiniz, ancak resimlerinizi optimize edin ve en iyi sonuçlar için dosya boyutlarını küçük tutun.

Görüntü saklama gelince, tavsiye edilir tüm dosyaları kendi Web sunucunuzda saklayın. Bu, başka bir resim ana bilgisayarı kullanmak yerine veya dosyaları çevrimiçi bir bülten servisine yükleyerek daha iyi bir seçenektir. Ek olarak yapmalısın Bültenlerinizin içeriğini, bir klasör yapısındaki diğer resimlerden uzağa ayırın. öyle / İmg / e-posta veya / İmg / e-posta / 2011.

9. Spam Klasöründen Kaçının!

Bunu duymak zor olabilir ama Tüm e-posta istemcileri bültenlere uygun değildir. Her gün milyarlarca e-posta gönderiliyor ve çoğunluğu spam veya zararlı içerik içeriyor, bu nedenle bu güvenlik önlemlerinin Gelen Kutusunda yerleşik olarak bulunması güvenlik önlemleri için açık bir şekilde kullanılıyor..

Bununla birlikte, İnternet pazarlaması söz konusu olduğunda, en son haber bülteninizin önemsiz kaldığını görmekten kolayca vazgeçebilirsiniz. Bunun olma olasılığını azaltmak için sadelik için tasarımınızı temizleyin. Can sıkıcı görüntüler yapma veya başlık metninizi yüzlerce anahtar kelimeyle yayınlayın.

Ayrıca deneyin içeriğinizi kısa ve konuyla ilgili tutun. Tüm makaleleriniz veya sayfalarınız için tam içerik eklemeniz gerekmez. Uzun bir liste yerine web sitenize alternatif bir bağlantı içeren bir veya iki cümle eklemeyi deneyin. e-postanız ne kadar kısa görünürse, spam incelemesini geçme olasılığı o kadar yüksektir.

Bülten Tasarım Galerisi

Bir e-posta bülteni makalesi harika örnekleri olmadan ne eğlenceli olurdu? Google'da kontrol edilecek tonlarca e-posta bülteni tasarımı ve şablonu var. HTML E-posta Galerisi, ilham için çok popüler bir kaynaktır.

Aşağıda, Kampanya İzleme galerisindeki birçok bültenin ekran görüntülerini ekledim. Umarım bu müthiş düzenler, kendi tasarımlarınız için size harika fikirler sağlayabilir..

İdeal bültenlerinizi tasarlarken eğlenin!

İş için Alerjik