E-posta Tasarımında Parçacıkları Kullanmak İçin En İyi Kılavuz
Yayınlanan: 2015-11-20Düzinelerce e-posta istemcisi, görünüşte sayısız oluşturma tuhaflığı ve HTML ve CSS için değişen destek arasında, e-posta kampanyalarını kodlamak karmaşıktır. Ne yazık ki, e-posta tasarımcıları için bu karmaşıklık, e-posta tasarımının daha fazla zaman alması anlamına geliyor; bu nedenle, e-posta tasarımında snippet'leri kullanmak için nihai kılavuzu oluşturduk.
E-posta Tasarım Konferansında, Code School'dan Dan Denney sorunu mükemmel bir şekilde çerçeveledi:
E-posta oluşturmanın en büyük zorluğu Gmail değil… zamanı geldi.
E-posta tasarımı söz konusu olduğunda, zaman çok önemlidir ve bir geliştirme iş akışını devreye sokmak çok önemlidir. E-posta tasarımının hızla değişen taleplerine ayak uydurabilmek için iş akışınızı olabildiğince verimli hale getirmek giderek daha önemli hale geliyor.
Peki, iş akışınızı optimize etmek için ne yapabilirsiniz? Tek kelime: Parçacıklar .
Snippet'lerin yardımıyla, e-postaları her zamankinden daha kolay ve daha hızlı oluşturabilirsiniz. E-posta oluşturmaya ve sorun gidermeye daha az, aboneleriniz için daha iyi e-posta deneyimleri oluşturmaya daha fazla zaman ayırın.
Parçacıklar nedir?
Parçacıklar, bir e-posta şablonunda veya daha geniş bir e-posta tasarım sisteminde kullanabileceğiniz yeniden kullanılabilir kodun e-posta modülleridir. Doküman türü, kurşun geçirmez düğmeler ve bağlantılar gibi e-posta tasarımlarında yaygın olarak kullanılan öğeler için idealdirler. Bu öğelerden biri her kullanıldığında kodu yeniden yazmak zorunda kalmak yerine bir snippet kullanabilirsiniz. Parçacıkları kullanmak, kodlamanızı otomatikleştirir ve geliştirme süresini önemli ölçüde hızlandırır.
snippet'ler nasıl kullanılır
E-postalarınızı oluşturmak için hangi e-posta düzenleyicisini kullanırsanız kullanın, iş akışınızı optimize etmek için snippet'leri kullanabilirsiniz. Bunları en yaygın editörlerde nasıl kullanacağınıza bir göz atın.
Dreamweaver
Dreamweaver'da aşağıdakileri ziyaret ederek parçacıklar ekleyebilir veya düzenleyebilirsiniz: Windows → Parçacıklar → Yeni/Düzenle. Kolay arama için snippet'lerinizi gruplar halinde (örneğin, tabloyla ilgili snippet'ler, resimle ilgili snippet'ler vb.) bile kaydedebilirsiniz.
E-postanızı kodlarken, snippet başlığına çift tıklayarak, ekle'ye tıklayarak veya bir klavye kısayolu kullanarak snippet'leri kullanın.
turnusol oluşturucu
Bir Builder projesinde, düzenleyicinin sağ üst köşesindeki Parçacıklar simgesine tıklayın.
Bu arayüzde yeni snippet'ler oluşturabilir ve düzenleyebilir ve klavye kısayolları aracılığıyla kodunuzdaki snippet'leri tetikleyebilirsiniz. {braces} kullanarak snippet'in içine düzenleme noktaları da ekleyebilirsiniz. Bir parçacığı tetiklediğinizde, hızlı ve kolay özelleştirme için otomatik olarak kod parçacığında önceden tanımlanmış düzenleme noktalarına atlayabilirsiniz.
Yüce metin
Sublime Text'de mevcut parçacıkları görüntülemek veya yenilerini eklemek için şu adresi ziyaret edin: Araçlar → Parçacıklar/Yeni Parçacık. Her snippet kendi .sublime-snippet dosyasına kaydedilir.
Klavye kısayol tetikleyicileri aracılığıyla kodunuza snippet'ler ekleyin. Örneğin aşağıdaki kodda kod içerisine “merhaba” yazıldığında snippet tetiklenir. Dolar işaretlerini sırayla ( $1 , $2 , vb.) kullanarak snippet'in içine düzenleme noktaları da ekleyebilirsiniz.
<snippet> <content><![CDATA[ /* Insert snippet here */ ]]></content> <!-- Optional: Set a tabTrigger to define how to trigger the snippet --> <!-- <tabTrigger>hello</tabTrigger> --> <!-- Optional: Set a scope to limit where the snippet will trigger --> <!-- <scope>source.python</scope> --> </snippet> 
Atom
Şu adresi ziyaret ederek Atom'da parçacıkları görüntüleyin, düzenleyin veya ekleyin: Atom → Parçacıklarınızı Açın. Her snippet, kendi snippet'leri.cson dosyası olarak kaydedilir.
Sublime Text'e benzer şekilde, Atom'daki snippet'ler bir klavye kısayol tetikleyicisi aracılığıyla çalışır. Dolar işaretlerini sırayla ( $1 , $2 , vb.) kullanarak snippet'in içine düzenleme noktaları da ekleyebilirsiniz.
'Name': 'prefix': 'tabtrigger' 'body': """ /* Insert snippet here */ """ 
Koda
Coda'daki snippet'lere "Klipler" denir. Bir klip eklemek veya düzenlemek için şu adresi ziyaret edin: Kenar çubuğu → Klipler. Klipler gruplar halinde kaydedilebilir ve bir klavye kısayol tetikleyicisi üzerinde çalışırlar. Kullanıcı arayüzünde özel yer tutucu noktaları tanımlayarak snippet'in içine düzenleme noktaları da ekleyebilirsiniz.
Snippet kitaplığı
Her düzenleyicide, snippet'lerinizden bir kitaplık oluşturabilirsiniz. Kütüphanedeki her şey güncel ve önceden test edilmiş olmalıdır. E-posta dünyası sürekli değiştiğinden, snippet'lerinizi sık sık test ettiğinizden ve gerektiğinde yenilerini eklediğinizden emin olun.
Daha pek çok şey olsa da, e-posta geliştirme için kullanmak üzere kullanıma hazır en sevdiğimiz bazı parçacıkların kapsamlı bir listesini hazırladık. Bunları snippet kitaplığınıza eklemekten çekinmeyin!
doktip
Bir belge türü, bir e-posta istemcisine standartlar veya tuhaflıklar modunda bir e-posta oluşturmasını söyler. E-posta için kullanılması önerilen iki belge türü vardır. Birincisi HTML5 doktipidir:
HTML5
<!doctype html>XHTML
İkincisi, XHTML doktipidir:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional //EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">Campaign Monitor, hangi HTML doktiplerinin kullanılmasının iyi olduğunu ayırır ve bu konuda Litmus Topluluğu'nda da harika bir tartışma vardır. E-postanız için bir belge türü belirtmezseniz, e-posta istemcileri e-postayı "tuhaflık modunda" işler ve bu da işleme sorunlarına neden olabilir.
Meta Etiket
E-postanızı duyarlı olacak şekilde kodlıyorsanız, eklemeniz gereken birkaç önemli meta etiket vardır.
UTF-8
İlk önerilen meta etiket, karakter kodlamasını bir e-posta için tipik kodlama olan utf-8'e ayarlar. Gerekirse bu değiştirilebilir.
<meta http-equiv="Content-Type" content="text/html;" charset="utf-8" />görüş alanı
Önerilen ikinci meta etiket, e-postanın yanıt verme süresini ayarlar.
<meta name="viewport" content="width=device-width, initial-scale=1" />Windows Telefon
Üçüncü önerilen meta etiket, özellikle e-postayı Windows Phone'da duyarlı hale getirmek içindir.
<meta http-equiv="X-UA-Compatible" content="IE=edge" />tablolar
HTML e-postaları, içeriği yapılandırmak için tabloları kullanır. Tabloları elle kodlamak oldukça sıkıcı olabilir, bu nedenle basit tablo düzenleri için temel parçacıklar geliştirdik.
Tablo 1×1
<table cellspacing="0" cellpadding="0" border="0" width="{width}" align="{align}"> <tr> <td align="{align}">{content}</td> </tr> </table>Tablo 2×1
<table cellspacing="0" cellpadding="0" border="0" width="{width}" align="{align}"> <tr> <td align="{align}">{content}</td> <td align="{align}">{content}</td> </tr> </table>Tablo 3×1
<table cellspacing="0" cellpadding="0" border="0" width="{width}" align="{align}"> <tr> <td align="{align}">{content}</td> <td align="{align}">{content}</td> <td align="{align}">{content}</td> </tr> </table>Tablo 2×2
<table cellspacing="0" cellpadding="0" border="0" width="{width}" align="{align}"> <tr> <td align="{align}">{content}</td> <td align="{align}">{content}</td> </tr> <tr> <td align="{align}">{content}</td> <td align="{align}">{content}</td> </tr> </table>Tablo 2×3
<table cellspacing="0" cellpadding="0" border="0" width="{width}" align="{align}"> <tr> <td align="{align}">{content}</td> <td align="{align}">{content}</td> </tr> <tr> <td align="{align}">{content}</td> <td align="{align}">{content}</td> </tr> <tr> <td align="{align}">{content}</td> <td align="{align}">{content}</td> </tr> </table>Tablo 3×2
<table cellspacing="0" cellpadding="0" border="0" width="{width}" align="{align}"> <tr> <td align="{align}">{content}</td> <td align="{align}">{content}</td> <td align="{align}">{content}</td> </tr> <tr> <td align="{align}">{content}</td> <td align="{align}">{content}</td> <td align="{align}">{content}</td> </tr> </table>Tablo 3×3
<table cellspacing="0" cellpadding="0" border="0" width="{width}" align="{align}"> <tr> <td align="{align}">{content}</td> <td align="{align}">{content}</td> <td align="{align}">{content}</td> </tr> <tr> <td align="{align}">{content}</td> <td align="{align}">{content}</td> <td align="{align}">{content}</td> </tr> <tr> <td align="{align}">{content}</td> <td align="{align}">{content}</td> <td align="{align}">{content}</td> </tr> </table>kurşun geçirmez düğmeler
Outlook oluşturma tuhaflıkları sayesinde e-postada düğmeler oluşturmak oldukça güçtür. Görüntülerin bulunup bulunmadığına bakılmaksızın görüntülenen, önerilen dört kurşun geçirmez düğme türü vardır.
VML Düğmesi
İlk kurşun geçirmez düğme yöntemi, Campaign Monitor'den Stig Morten Myre tarafından geliştirilmiştir ve VML tabanlı bir düğme yaklaşımıdır:
<div> <!--[if mso]> <v:roundrect xmlns_v="urn:schemas-microsoft-com:vml" xmlns_w="urn:schemas-microsoft-com:office:word" href="{link}" arcsize="{arcsize}%" strokecolor="#{strokecolor}" fillcolor="{fillcolor}"> <w:anchorlock/> <center>{button text}</center> </v:roundrect> <![endif]--> <a href="{link}">{button text}</a> </div>Campaign Monitor ayrıca, yukarıdaki VML düğmesi kodunu oluşturmak için basit bir araç olan button.cm'yi de oluşturmuştur.
Dolgu Tabanlı Düğme
İkinci yöntem, dolgu tabanlı bir düğmeyle canlı metin yaklaşımıdır:
<table border="0" cellspacing="0" cellpadding="0"> <tr> <td bgcolor="#{bgcolor}" align="{align}"> <a href="{link}" target="_blank">{button text}</a> </td> </tr> </table>Bu düğmenin ana dezavantajı, %100 tıklanabilir olmamasıdır.
Kenarlık Tabanlı Düğme
Üçüncü kurşun geçirmez düğme yöntemi, tıklanabilir geniş bir alan oluşturmak için bağlantının etrafında bir kenarlık oluşturmayı içerir:
<table border="0" cellspacing="0" cellpadding="0"> <tr> <td> <a href="{link}" target="_blank">{button text}</a> </td> </tr> </table>Bu yöntemin en önemli dezavantajı, Outlook 2007-2013'ün bağlantı etiketlerindeki sınır genişliklerine uymamasıdır, bu nedenle düğmenin yapay dolgusunda bir miktar azalmaya neden olur.
Dolgu+Sınır Tabanlı Düğme
Son yöntem, dolgu ve kenarlık düğmelerinin bir kombinasyonunu içerir:
<table border="0" cellspacing="0" cellpadding="0"> <tr> <td align="{align}" bgcolor="#{bgcolor}"> <a href="{link}" target="_blank">{button text}</a> </td> </tr> </table>Bu hack, Outlook'ta dolgu oluşturma sorunlarını önlemek için kullanılır.
Görüntüler
E-postada görsel kullanırken göz önünde bulundurulması gereken çok sayıda önemli faktör vardır. Örneğin, görüntülerin Outlook'ta doğru şekilde oluşturulabilmesi için HTML özniteliklerinde yükseklik ve genişlik tanımlamanız gerekir. Ayrıca, ALT metninin kullanılması yalnızca erişilebilirlik amacıyla değil, aynı zamanda kullanıcıların %43'ü e-postaları resimler kapalı olarak görüntülediğinden son derece önemlidir. Son olarak, resimlerin etrafındaki fazladan dolguyu ve boşlukları önlemek için onları display:block; olarak ayarlamalısınız.
<img src="{src}" width="{width}" height="{height}" border="0" alt="{alt}"/>Bağlantılar
Temel Bağlantı
Bir e-postada bağlantı kullanırken, yazı tipi boyutu, yazı tipi ailesi ve metin dekorasyonu gibi satır içi stiller ayarlamanız gerekir. İşte, bu satır içi stillerin zaten yerinde olduğu basit bir pasaj:
<a href="#">{style}</a>iOS'ta Mavi Bağlantıları Kaldırın
iOS'ta mavi bağlantıları kaldırmanın birkaç stratejisi vardır, ancak bunu yapmak için tek bir CSS bildirimi kullanan basit bir pasaj:
a[x-apple-data-detectors] { color: inherit !important; text-decoration: none !important; font-size: inherit !important; font-family: inherit !important; font-weight: inherit !important; line-height: inherit !important; }Gizli Ön Başlık/Önizleme Metni
Ön başlık veya önizleme metni, genellikle bir abonenin gelen kutusundaki adın ve konu satırının altında görüntülenen, e-postanızın gövdesinden alınan kopyadır. Gizli ön başlık metni kullanmak, kullanılan kopyayı tanımlamanın ve e-postanın gerçek tasarımını etkilemesini önlemenin bir yoludur.
İşte fragman:
<div> {preheader text} </div>Medya sorguları
Medya sorguları, web sitelerini ve e-posta kampanyalarını biçimlendirmek için kullanılan dil olan basamaklı stil sayfalarının (CSS) bir bileşenidir. Medya sorgularıyla, e-posta tasarımlarını mobil, masaüstü ve web posta gelen kutularında daha kullanışlı olacak şekilde ince ayar yapabilirsiniz.
E-postaları tasarlarken ihtiyaç duyacağınız tüm önemli medya sorgularının listesi:
Temel Medya Sorgusu
@media screen and ({declaration}) { {content} }Maksimum Genişlikli Medya Sorgusu
@media screen and (max-width: {width}) { {content} }Min Genişlikli Medya Sorgusu
@media screen and (min-width: {width}) { {content} }iPad 1 ve 2 + iPad Mini Ortam Sorgusu
@media screen and (min-device-width: 768px) and (max-device-width: 1024px) and (-webkit-min-device-pixel-ratio: 1) { {style} }iPad 3 ve 4 Medya Sorgusu
@media screen and (min-device-width: 768px) and (max-device-width: 1024px) and (-webkit-min-device-pixel-ratio: 2) { {style} }iPhone 2G/3G/3GS Medya Sorgusu
@media screen and (min-device-width: 320px) and (max-device-width: 480px) and (-webkit-min-device-pixel-ratio: 1) { {style} }iPhone 4/4S/5/iPhone 6 (yakınlaştırma görünümü) Medya Sorgusu
@media screen and (min-device-width: 320px) and (max-device-width: 568px) and (-webkit-min-device-pixel-ratio: 2) { {style} }HTC ONE + SAMSUNG GALAXY S4/S5 Medya Sorgusu
@media screen and (device-width: 360px) and (device-height: 640px) and (-webkit-device-pixel-ratio: 3) { {style} }iPhone 6 (standart görünüm) + iPhone 6 Plus (yakınlaştırma görünümü) Medya Sorgusu
@media screen and (max-device-width: 375px) and (max-device-height: 667px) { {style} }iPhone 6 Plus (standart görünüm) Medya Sorgusu
@media screen and (max-device-width: 414px) and (max-device-height: 776px) { {style} }Outlook Koşullu Yorumlar
Outlook'u desteklemek zorunda olmanın getirdiği çok sayıda işleme sorunuyla, Outlook'u belirli stillerle hedeflemek bazen yararlıdır. Outlook, HTML veya CSS içeriği için koşullu mso yorumları kullanılarak hedeflenebilir.
Microsoft Word oluşturma
<!--[if mso]> {content} <![endif]-->Görünüm 2000-2013
<!--[if (gte mso 9)|(IE)]> {content} <![endif]-->Daha fazla Outlook koşullu yorumu:
- görünüm 2000
- 2000-2002 Görünümü
- Görünüm 2000-2003
- Görünüm 2000-2007
- Görünüm 2000-2010
- Outlook 2002
- Görünüm 2002-2013
- Outlook 2003
- Outlook 2003-2013
- Görünüm 2007-2013
- görünüm 2010
- görünüm 2010-2013
- görünüm 2013
WebKit
E-postanızı aşamalı olarak geliştirmenin en iyi yollarından biri, WebKit oluşturma motorlarını hedeflemektir. E-posta açılışlarının yaklaşık %47'si WebKit tarafından desteklenen gelen kutularında gerçekleşir.
@media screen and (-webkit-min-device-pixel-ratio: {value}) { {style} }Gmail
Gmail, e-postaların <head> bölümündeki sınıfları veya kimlikleri desteklemez, bu nedenle CSS'nin e-postada satır içi olması gerekir. Ancak FreshInbox'tan Justin Khoo, Gmail'in e-postalarda CSS okuyacağı yeni bir hack keşfetti.
Değeri, biri tam eşleşme olan beyaz boşlukla ayrılmış değerler listesinde bulunan bir özellik seçici olarak lang veya title özelliğini kullanırsanız, Gmail bu CSS'yi okuyacaktır. Bu bir ağız dolusu, işte size yardımcı olacak bir pasaj:
* [lang~="{name}"] { {style} }yahoo
Yahoo Mail kısa süre önce, web postası için belirli stilleri kolayca hedeflememize olanak tanıyan kendi benzersiz medya sorgusunu tanıttı.
@media yahoo { {style} }Android
James White kısa süre önce Litmus Community'de Android 4.4'te e-postaları ortalamak için bir hack yayınladı.
body { margin:0 !important; } div[style*="margin: 16px 0"] { margin:0 !important; }Topluluktaki Snippet'ler
Daha fazla snippet ister misiniz? Paylaşmak istediğiniz bazı favorileriniz var mı? Her yerde e-posta meraklılarının yardımıyla, Litmus Topluluğu'nda iOS aygıtlarındaki mavi bağlantıları kaldırma kodu gibi düzinelerce yararlı parçacığımız var.
Mevcut snippet'leri, oluşturuldukları e-posta istemcisine veya snippet'in türüne (ör. hack, resim, bağlantı vb.) göre sıralayın. Kendinizinkini ekleyebilir ve favorilerinizden bir snippet kitaplığı oluşturabilirsiniz. Ayrıca, Topluluk'tan doğrudan Builder'a snippet'leri içe aktararak daha da fazla zaman kazanabilirsiniz. Builder'ın Anında Önizlemeleriyle birleştiğinde, snippet'lerle kodlama, harika e-posta kampanyaları oluşturmanın en hızlı yolu olabilir.
Topluluk'ta snippet'lere göz atın →