Tasarım ve Kodlama

  1. Tasarım programı: Adobe Photoshop, Fireworks, Dreamweaver ya da Illustrator gibi araçları kullanarak şablonlarınızı oluşturabilir, grafiklerinizi tasarlayabilirsiniz.
  2. İyi ve 'kusursuz' bir HTML/Text editörü: Mac için BBEdit ve TextWrangler, PC için HomeSite ve NoteTab Pro gibi programları kullanabilirsiniz. Ya da Microsoft Front Page, Adobe GoLive ve MacroMedia Dreamweaver gibi ürünleri kullanarak HTML'i "WYSIWYG" (What You See is What You Get) tarzında, yani ekranda görüntülenene çok benzer bir çıktı alabileceğiniz araçları kullanarak oluşturabilirsiniz. Ancak bu tip araçları kullanmanın bazı olumsuz tarafları vardır. WYSIWYG editörleri genelde kodunuza gereksiz yükleme yapar. Üstelik bu ekstra kodlar, genelde sadece spam filtrelerini etkileyerek sisteme zarar verir. Tabii WYSIWYG editörleri arasında kodlama konusunda mükemmel bir sonuç ortaya çıkarmalarıyla ünlü olanlar da vardır. Ama biz bu araçların daha çok HTML yerine web sayfaları tasarımında kullanılmasını tavsiye ediyoruz. Bu nedenle eğer HTML e-mail kodlama konusunda uzmanlaşmak istiyorsanız, HTML kodlamayı en baştan iyi bir text editörünün yardımıyla öğrenmelisiniz. Eğer HTML tasarlama ve kodlama hakkında tüm bu anlattıklarımız size karışık geliyorsa, InboxMailMarketing'in kendi HTML e-mail şablonlarını da kullanabilirsiniz. Oldukça esnek olan bu şablonlar, her kampanyaya uyarlanabilecek şekilde özelleştirilebilir. Ayrıca bu şablonlarda başlıca e-mail programlarının tümü önceden test edilir.
  3. Kendi web server'ınız: Tüm resimlerinizi ve arşivlerinizi barındıracak bir web server yaratmalısınız. Ayrıca web sitenizde e-bültenleriniz için bir klasör oluşturmalısınız. Bu klasörde resimlerinizi depolamalı, bu resimlere yapılacak yönlendirmeyi, HTML kodunuzda 'absolute paths' kullanarak belirtmelisiniz. Ek olarak web sitenizde arşivlenmiş e-bültenleri depolayabileceğiniz başka bir klasör yaratmak da isteyebilirsiniz. Bu işe ilk başladığımızda web sitemizdeki alt dosyalarda kampanyaların tarihe göre sınıflandırıldığı bir klasör oluşturmuştuk. Siz dilerseniz kendinize göre farklı bir düzenleme yapabilirsiniz. Önemli olan yayınlama sırasında e-bültenlerinizin sizin için karışıklığa yol açmasını önlemek için düzgün bir arşivleme sistemi oluşturmanız. Artık InboxMailMarketing'in bünyesine dahil ettiği işlevsel arşivleme özelliği, bu sorunun da üstesinden gelmeyi başarıyor. Bu özellik, sistemimiz üzerinden gönderdiğiniz her kampanyanın bir kopyasını kaydediyor. Böylelikle web sitenizde 'E-bülten arşivleri' adı altında bir sayfa oluşturabiliyorsunuz. Son kampanyalarınız geldikçe sayfalarınızın güncelleneceği bu sistem sayesinde, ne kadar çok zaman kazandığınızı görünce şaşıracaksınız.
  4. FTP programı: Mac için Fetch, PC'ler için CuteFTP gibi bir FTP programı kullanmalısınız. Böylece e-mail'inizi tasarladığınız ve grafiklerinizi oluşturduğunuz zaman bu dosyaları bilgisayarınızdan server'a taşıyabilirsiniz.
  5. Bir ya da iki test makinesi: Çok sayıda farklı e-mail uygulamasıyla ve mail hesabıyla yüklü bir ya da birden fazla test makinasına ihtiyaç duyacaksınız. Büyük ihtimalle HTML e-mail tasarımlarınızın farklı programlarda nasıl göründüğünü kontrol etmek isteyeceksiniz. Küçük çaplı ve basit tarayıcılar aracılığıyla çalışmalarınızı kontrol edebileceğiniz web tasarımından farkı olarak, e-mail'lerin tonlarca uygulama şekli vardır ve bunların herbiri HTML e-mail'i farklı şekilde ele alır. InboxMailMarketing, yapmak istediğiniz tüm testleri sizin yerinize yapar.

Tasarım ilkeleri

Rehberimizin bu bölümünde size e-mail tasarımlarıyla ilgili bazı ipuçları sunuyoruz.

1- Genişliğinizi 500-600 piksele ayarlayın

Daha önce bir web sitesi üzerinde çalıştıysanız, sayfaları 800x600 ya da 1024x768 piksel ekran çözünürlüğüne sahip olacak şekilde tasarlamaya alışık olmalısınız. Ama HTML e-mail tasarımı daha farklı bir şekilde çalışır. Alıcıların birçoğu gönderdiğiniz e-mail'lere normal ekranlarının küçük bir görüntüsü olan 'önizleme paneli' üzerinden bakacaklar (aşağıda gördüğünüz gibi).

Önizleme panelinin genişliği bu monitörde 440 piksel'dir. Yukarıda Microsoft Outlook'un ön izleme panelinden, HTML e-mail ekran görüntüsünü görüyorsunuz. Outlook'un maksimum full ekran çözünürlüğü (1024x768) piksel olsa da ön izleme paneli, sadece 440 piksel genişlikte. AOL 9'daysa ön izleme paneli 194 pikselken, full ekranı tıkladığınızda açılan pencerenin çözünürlüğü sadece 540 piksel olacaktır. İşte bu yüzden e-mail'lerinizi tasarlarken genişliğin 640 pikselden fazla olmamasına dikkat edin.

2- Basit Layout'lar ve İşinize Yarayacak Tablo Düzenleri

Farklı e-mail uygulamalarının HTML e-mail'i çok çeşitli nedenlerle yanlış görüntülediğini söyleyebiliriz. E-mail tasarımlarınızı, her zaman basit ve göze hoş görünecek şekilde oluşturmaya özen göstermelisiniz. Karışık düzenlemelerden, sıkıştırılmış tablolardan, çok sayıda satır ve sütun kullanmaktan her zaman kaçının. Oluşturacağınız en karmaşık tablo, en fazla iki sütundan ve üstte bir satırdan oluşmalı. Colspan'lerin (çok sayıda sütun karşısında yayılan tablo bölmeleri) olduğu tabloların kodlanmasıyla uyum sağlamayacak çok sayıda e-mail uygulaması var. Karışık tablolar konusunda Lotus Notes uygulamasına başvurabilirsiniz.

Eğer bir e-mail yerleşim düzeni üzerinde çalışıyorsanız ve oluşturduğunuz tabloların giderek karıştığını düşünüyorsanız, onları ayrı tablolara ayırmayı düşünebilirsiniz. Sözgelimi biz, e-mail'lerimizin sayfa başlığı, gövde metni ve sayfa altlığı için ayrı tablolar kullanıyoruz. Zaten en iyisi de karışık ama tek bir tablo kullanmaktansa, çok sayıda basit tablo kullanmaktır.