Geçtiğimiz günde üzerime yıkılan bir e-posta şablonu kodlama işi ile uğraştım. Çokda güzel deneyimler elde ettiğimi söyleyebilirim. Bunları şimdi teker teker yazacağım ki başkalarıda uğraşmasın. Öncelikle şuna değinmek gerekirse genelde büyük firmalar gönderecekleri mail içeriğini Photoshop ile tasarlayıp slice sistemi ile bölerek kolayca mail şablonlarını oluştururlar. Bun mantık iyi güzel fakat şablonda fiyat, ürün resmi, ürün başlığı gibi dinamik ve sonradan değişecek meta etiketleri olunca maalesef bu mantık işe yaramıyor. Bu yüzden tablo kullanarak bu işin üstesinden amele usulü geleceğiz. Öncelikle test ettiğim mail istemcilerini listeleyeyim.
test edilen mail istemcileri
gmail, windows live, outlook 2003, yahoo, thunderbird mac, thunderbird windows, apple mail ve hotmail
Göründüğü gibi yazdığımız kuralları uygulayınca çalışmama ve okunmama gibi bir lüksü kalmıyor mailin. Olası resim hatalarını gidermek yerine .gif uzantılı resimler ile çalışmak her zaman yararımıza olacaktır.
hotmail problemleri
hotmail web mailde ana problem arkaplana koyduğunuz resim %100 genişlikte bile olsa sadece konteyner etrafında takılıyor yani orta alanda tablonuz örneğin 600px ise etrafında arkaplan olarak görünüyor. İlk resim Bu yüzden hotmaile biraz baskı kurmamız gerekecek.
Önceki hali
hatayı giderelim
<style type="text/css">
body { width: 100% !important; }
</style>
sonraki hali
Yine hotmail ve bazı diğer istemcilerde margin ve padding kullanımı ksııtlanmış durumda bu yüzden doğal boşluklar için font özelliklerinden yararlanmalıyız. Örnek olarak 20 piksel boyutunda bir maj için aşağıdaki koddan yararlanabiliriz. Veya aşağıdaki elementler ile elementler ile doğal boşluklar oluşturmalıyız.
<p>, <hx>, <br />
<font style="9px"> </font>
veya
<font face="Arial" size="3"> </font>
Bu özellik maili oluştururken çizdiğiniz tablolar içinde geçerlidir örneğin normal şartlarda elementine height=”1″ diye bir değer verdiğinizde yüksekliiği asla 1px olmayacaktır. Bunun için yine font özelliklerinden yararlanmalıyız örneğin aşağıdaki gibi.
<font face="Arial" size="1"> </font>
veya font özellikleri yerine 1×1 piksel büyüklüğünde spacer.gif adında bir resim yaparak hücre içine koyduğunuzda otomatik olarak hücre boyutu 1px boyutuna inecektir.
Html denemelerimizde yaptığımız gibi linklere anchor(#) yerine normal link vermeliyiz aksi halde link bağlantılarımız çalışmayacaktır.
<a href="#">emrah</a>
yerine
<a href="http://www.emrahkaraalan.com.tr">emrah</a>
kullanmamız gerekmektedir.
Sonrasında denecek şeyi aslında ilk başta yapmamız bizi olası problemlerden kurtaracaktır sayfamızda kesinlikle tanımlı bir doctype bulunmalıdır aksi halde başta apple mail olmak üzere problem çıkmakta.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
Mail tasarımında kullanılan tabloların tüm özellikleri sıfırlanmalıdır. Bunlar arasında doğal boşluklar ve kenarlıklar da vardır.
tablo özelliklerini sıfırlayalım
<table width="600px" align="center" cellpadding="0" cellspacing="0" border="0" style="border-collapse:collapse;">
Yardımcı Kaynak: Campaign Monitor
Değerli bilgiler, teşekkürler…