E-postalar için Temel ile Özel Bir E-posta Nasıl Yapılır?
E-posta şablonları oluşturmak doğru çalışmıyor. Duyarlı e-postalar oluşturmak daha da zor.
Neyse ki, Zurb'de yaşayan insanlar, daha önce hiç olmadığı kadar duyarlı e-postalar oluşturma sürecini kolaylaştıran muhteşem bir çerçeve geliştirdiler.
E-postalar Vakfı (eskiden Mürekkep), günümüzün araçlarını ve teknolojilerini yarın için duyarlı e-posta şablonları oluşturmak için kullanmak isteyen modern bir tasarımcı / geliştirici için uygun bir çerçevedir.
Sayılar yalan söyleme
Zurb'a göre, e-postaların% 54'ü mobil bir cihazda açılıyor ve bu sayının artması bekleniyor. Bu rakam yerine, duyarlı bir e-posta şablonu ihtiyacı bir zorunluluktur. Zurb ayrıca, Gmail kullanıcılarının% 75'inin hesablarına mobil cihazlarından eriştiğini de belirtiyor.
Gönderilen e-posta türü ne olursa olsun, E-postalar Vakfı'nın kapsamındasınız. Aslında, kullanışlı proje oluşturucuyu başlattıktan sonra, referans olarak kullanmak veya kalbin içeriğine göre özelleştirmek için örnek şablonlarla karşılaşırsınız.
Başlamak
Bu makalede, kendi küçük markalama ajansım için tasarladığım özel bir şablon kullanarak E-postalar Vakfı ile nasıl çalışmaya başladığınızı göstereceğim. Herhangi bir çerçevede olduğu gibi, referans göstermeniz zorunludur. belgeleme . Her ayrıntıyı Zurb olarak ele almayacağım. zaten Ancak bu kılavuz, koşan yere vurmanız için yeterli olacaktır.
Kaynak kodu
Bu projeye nihai kaynak kodunu bulabilirsiniz. GitHub .
Kurulum
Başlamak için geleneksel kullanmayı tercih edebilirsiniz CSS veya Sass . Kullanacağım Sass .
Bu rotayı gelenekselden farklı olarak önermeyi önerdiğim birçok neden var. CSS . Bu nedenler şunlardır:
- Çerçevenin görsel stilleri üzerinde daha fazla kontrol
- Sass derleme ve görüntü sıkıştırma dahil olmak üzere tam bir oluşturma süreci
- Bir gelenek
HTMLinky olarak bilinen dil, el ile tablo tabanlı düzenleri yazmak zorunda kalmamanız anlamına gelir. - CSS'nizi satır içi CSS olarak dağıtmak için yerleşik bir inliner
- Canlı yükleme
- Işınlama çubukları
Not - Sass sürüm gerektirir node.js koşmak. İleriye gitmeden önce mutlaka kurduğunuzdan emin olun.
Kuruluş CLI'sini kurun ve yeni bir proje yaratın
Kurulum işlemi, Kuruluş CLI'sini kullanır. Kullanmak için komut satırı programınızı açın ve aşağıdakileri yazın:
Bash $ npm install --global foundation-cliHerhangi bir izin hatasına rastlarsanız, aynı komutu sudo ile öneklemeyi deneyin. Sistem şifrenizi girmeniz istenecektir.
Kuruluş CLI'sı yüklendiğinde, artık E-postalar projesi için boş bir Temel oluşturabilirsiniz. Projeyi kurmak istediğiniz klasörü ( cdinto ) taşıdığınızdan emin olun ve aşağıdaki komutu çalıştırın:
Bash $ foundation new --framework emailsCLI size bir proje adı sormalı (benimki bültenimi aradım). Bu ad, projenin tamamı olarak etiketlenecek klasördür. Bu ayarlandıktan sonra, bir takım bağımlılıklar yüklenir. (Bu indirilmesi biraz zaman alabilir.)
İndirme işlemi tamamlandığında, aşağıdakileri görmelisiniz:
Bash You’re all set!✓ New project folder created.✓ Node modules installed.✓ Bower components installed.Now run foundation watch while inside the folder. cd haber bülteni yazarak proje klasörünüze cd koyun. Proje isminiz benimkine göre değişebilir, ancak eğer takip ediyorsanız gitmeye ayarlanmalıdır.
Sunucuyu Çalıştırma ve Varlıkları Derleme
Terminalin içinden şu komutu çalıştırın:
bash $ npm startBu daha önce bahsettiğim yapı sürecini ateşleyecektir. Oluşturma işlemi HTML'yi ayrıştırır, Sass'ı derler, görüntüleri sıkıştırır ve bir sunucu başlatır. Varsayılan tarayıcınız, index.html dosyanızın localhost: 3000 adresinden yeni bir sekme noktası açmalıdır . Bu sayfadan, kurulumla birlikte gelen e-postalar için Örnek şablonlarını ziyaret edebilirsiniz.
Tasarımın değerlendirilmesi
Yüklü E-postalar Kurulumu ve çerçeve tarafından sağlanan sunucu üzerinde çalışan projemizle, aşağıda gösterilen tasarımı ele almak için biraz daha derine inmeye hazırız.
Çoğunlukla, tasarım, bülten stili bir e-posta için yer tutucu içeriği ile minimaldir. İleriye doğru, herhangi bir değişiklik yapmak için şablon içindeki öğeleri değiştireceğiz. Örneğin bir WYSIWYG e-posta üreticisinin varsayılan MailChimp şablonları gibi biraz daha fazla eli var, ama özel marka uğruna, iyi zaman ayırmaya değer. Bence çoğu kullanıcı aynı fikirde olur. Mailchimp içindeki editörü kullanmak için bunu kesinlikle genişletebilirsiniz ama bu başka bir zaman için bir konu.
Taze başlayan
Sass sürümünü kullandığınızı varsayalım , E-postalar Vakfı, kendi yaratımı olan Inky HTML ile birlikte gelir. Bu HTML, yazma tabloları ve gelişmiş tablo düzenlerini bir esinti yapmaktan sorumludur.
documentation belgeleme E-postalar için E-postalar, kendi projelerinizde kullanabileceğiniz özel Inky HTML hakkında bilmek istediğiniz her şeyi öğrenebileceğiniz en iyi yerdir. Sık sık başvurduğunuzdan emin olun.
İçinde çalışacağız src proje klasörümüzdeki klasör. Bu dosyalar gulp.js ve bazı eklentiler yoluyla izleniyor . Şablon kodumuzda ve / veya stillerimizde değişiklikler yapıldığında, dist klasöründeki tüm dosyalar buna göre güncellenir. Tüm bunların nasıl işlediğine bakmayacağım ama yeni olduğum zamanı hatırlıyorum, büyü gibi görünüyordu!
indeks
Gördüğünüz dizin sayfası, src / layout / index-layout.html içinde bulunur . E-postaların kullanımı Gidon hangi temel içinde templating sağlar HTML sayfaları. Örneğin, kısmi oluşturabilirsiniz HTML Başka bir dosyaya dinamik olarak dahil edilen dosya.
{{> Body}} etiketini not alın. Sonunda, içeriğin tamamında, içeriğin içerdiği HTML ayrıştırması sayesinde tüm içerik içe aktarılır.
Sayfalar
Src / pages / içinde gördüğünüz her sayfa, ilk kez $ npm'yi çalıştırdığınızda başlangıçta görüntülenen sayfadır . Her sayfa Zurb tarafından sağlanan örnek bir şablon.
Newsletter.html içeriğini kopyalayın ve branded-newsletter.html adlı yeni bir dosya oluşturun. İçeriği içeriye yapıştırın. Bu dosyada daha önce paylaştığım markalı şablonu oluşturacağız.
Dosyanın içinde çok fazla yabancı görünümlü HTML etiketi görmelisiniz. Bunlar Inky HTML'nin bir parçasıdır. Esasen bunları kullanarak, fiziksel olarak tablo düzenlerini kodlamak zorunda kalmadan kurtulabilirsiniz. (Web sayfalarında olduğu gibi e-postaların içindeki divları kullanamazsınız, aynı şey birçokları için de geçerlidir. CSS özellikleri.)
Aşağıda, aşağıdakilerden en iyi şekilde yararlanacağımız etiketlere kısa bir genel bakış bulabilirsiniz:
- Ayarlı genişliğe sahip bir sarma elemanı. - web sitelerinde kayan bir ızgaraya benzer içerik sütunlarını sarmak için gereklidir.
- İçeriğinizin çoğunun nerede yaşayacağı. Bunlar 12 sütun düzeni kullanılarak özelleştirilebilir. Yüzen veya eğimli bir div gibi davranırlar ama tabloları içerirler. - E-posta şablonları için dikey boşluk. Birçok posta istemcisi, CSS ile marj veya dolguya uymuyor. Bu, bunun için harika bir çözüm. Bu gibi bir özellik ekleyerek herhangi bir boyutu ayarlayın: . - - tablolar ile bir düğme oluşturun.
Bu etiketlerin üstünde Sass üzerinden ekleyebileceğiniz, özelleştirebileceğiniz ve uzatabileceğiniz ek CSS sınıfları vardır.
Haber Bülteni Şablonunu Scaffolding
Kısalmak adına, kodlama sürecini özetliyorum ve stil oluşturmadan önce HTML'nin tamamını gösteriyorum. Bu, şablon için bir çeşit iskelet oluşturmam ve daha sonra stilleri endişelendirmeme izin veriyor. Aşağıda HTML Tasarım için bitti. Bu şablon sayfa dizini ile birlikte çalışır ve {{> body}} etiketini gördüğünüz düzenler / index-layout.html dosyasına dahil edilir.
html
Email not displaying correctly? https://coupleofcreatives.com" class=logo>
|
Maecenas faucibus mollis interdum. Donec sed odio dui. Etiam porta sem malesuada magna mollis euismod. Maecenas sed diam eget risus varius blandit oturmak amet olmayan magna.Maecenas faucibus mollis interdum. Donec sed odio dui. Etiam porta sem malesuada magna mollis euismod. Maecenas sed diam eget risus varius blandit oturup amet olmayan magna.
Son durum çalışması
Wildwood Aile Diş Hekimliği
Curabitur blandit tempus porttitor. Vestibulum kimliği ligula porta felis euismod semper. Fusce dapibus, tusus ac cursus komodo, tortor mauris condimentum nibh, ut fermentum massa justo otur amet risus.
Blogdan
Bu harici bir bağlantıya bir başlıktır Curabitur blandit tempus porttitor. Vestibulum kimliği ligula porta felis euismod semper. Fusce dapibus, tusus ac cursus komodo, tortor mauris condimentum nibh, ut fermentum massa justo otur amet risus. Lorem Ipsum Dolor oturmak, consectetur adipiscing elit.
Curabitur blandit tempus porttitor. Vestibulum kimliği ligula porta felis euismod semper. Fusce dapibus, tusus ac cursus komodo, tortor mauris condimentum nibh, ut fermentum massa justo otur amet risus. Lorem Ipsum Dolor oturmak, consectetur adipiscing elit.
Curabitur blandit tempus porttitor. Vestibulum kimliği ligula porta felis euismod semper. Fusce dapibus, tusus ac cursus komodo, tortor mauris condimentum nibh, ut fermentum massa justo otur amet risus. Lorem Ipsum Dolor oturmak, consectetur adipiscing elit.
En son videomuzu izleyin
Curabitur blandit tempus porttitor. Vestibulum kimliği ligula porta felis euismod semper. Fusce dapibus, tusus ac cursus komodo, tortor mauris condimentum nibh, ut fermentum massa justo otur amet risus. Lorem Ipsum Dolor oturmak, consectetur adipiscing elit.
Bizi instagramda takip et
|
Pazarlamaya mı ihtiyacınız var? Bu reklamı iki kez kirala
Bizden güncellemeler almak için kaydoldunuz diye bu e-postayı aldınız. Üyelikten çıkmak için buraya tıklayın.
İçinde HTML Daha önce sözü edilen çok sayıda özel etiket göreceksiniz. spacer element, for example, I utilize a lot to create vertical spacing. eleman, örneğin, dikey boşluk oluşturmak için çok kullanıyorum. Bunu yapıyorum çünkü tüm e-posta istemcileri marjı ve dolguyu onurlandırmıyor. Yaygarayı kaydetmek için spacer elemanı muazzam derecede yardımcı olur.
Stilleri Ekleme
E-postalar Vakfı'nın Sass sürümünü kullandığım için kısmi olarak oluşturabilir ve bunları ana app.scss dosyasına içe aktarabilirim; bu da karşılığında dist klasörüne app.css olarak derlenir .
Adında bir yazı tipi kullanıyorum İdeal Sans . Maalesef, yalnızca belirtilen alanımda kullanabiliyorum. Bu, kendi başlığınız için kullanamayacağınız anlamına gelir. Başlıklar boyunca devam ediyorsanız, temel yazı tipi için geri dönüş olarak Arial olacaktır.
Çerçevenin içinde bulunan stillere yapabileceğiniz özelleştirmelerin çoğu assets/scss/_settings.scss . Bu dosya, kendi markanıza uyacak şekilde özelleştirilmeye hazır çeşitli değişkenlere sahiptir.
Bu ayarları özelleştirmenin üzerine, kendi kısmi kısmi kısımları oluşturdum. Bu dosyaları app.scss dosyasına aktardım .
Duyarlı E-postalar
E-postalar Vakfı, kutudan yanıt veren e-postaları destekliyor. Birlikte kullanma
html Column 1 Column 2
Kullanıcının ekran görüntüsüne dayanarak, bu sütunlar daha büyük ekranlarda% 50 genişlikte ve daha küçük ekranlarda% 100 genişlikte görünecektir. Bootstrap veya Foundation gibi popüler CSS çerçevelerine aşina iseniz, bunu kavramak oldukça kolay olmalıdır.
E-postalardaki Resimleri Kullanma
Görüntülerin bir web sunucusundan mutlak URL yollarını kullanarak ve tercihen onu gönderen kişinin e-posta adresiyle aynı alandan yüklenmesi gerekir. Yani eğer bir e-posta göndereceksem [email korumalı] {$lang_domain} Abonelerime göre resimlerin altında yaşamak zorunda kalacaklar {$lang_domain} alan adı.
Bunu yapmak, e-postanızın bir spam klasörüne yanlış yönlendirilme olasılığını ortadan kaldırır ve daha profesyonel olarak görünür.
Alt Etiketler Bir Zorunluluktur
Eğer normalde alt etiketleri kullanmıyorsanız (neden bilmediğini bilmiyorum) e-postalarda ihtiyacınız var . Birçok posta istemcisi varsayılan olarak görüntü yüklemiyor ve bu kullanıcıya kalmış. Alt etiketler, kullanıcının görmeden önce resmi tanımlamasına yardımcı olabilir. Bu, hem erişilebilirlik hem de aldıkları e-postalara resim yüklemeyle ilgilenmeyenler için zarif bir geri dönüş için harikadır.
Bina Üretim Dosyaları ve Testleri
Üretime dayalı e-postaların CSS'nin satır içi olması gerekir. Inlining, harici bir stil sayfasından bağlantı yapmaktan ziyade, elemanın stillerini tanımlamaktır. E-postalar Vakfı, sizin için bunu yapan kullanışlı bir yapı özelliğine sahiptir. Son dosyalar, dist klasörünün içinde derlenir ve minimize edilir.
Üretim dosyalarını oluşturmak için terminal programınızda ctrl + c yazarak zaten çalışan tüm sunucuları öldürmek isteyeceksiniz. Oradan yazın:
Bash $ npm run buildE-posta tarayıcıda açıldığında, daha önce yaptığınız gibi aynı şeyi görmelisiniz. Ancak, sayfanın kaynağına yakından bakarsanız, kod karmaşasını göreceksiniz. Bu, oluşturma işleminin sonucudur ve her şeyin iyi göründüğünü varsayarak, vahşi ortamda kullanıma hazırdır.
Test yapmak
Mümkün olduğu kadar çok sayıda e-posta platformunu test etmenin ne kadar önemli olduğunu vurgulayamıyorum. Tasarımınız büyük olasılıkla hepsinde farklı görünecek, ancak en azından çoğu platformda tutarlı ve okunaklı görünen bir çözüm yaratmak.
Adında bir araç kullanabilirsiniz Turnusol Bu test için. Orada bir aracın ücretsiz sürümü Bu, kodunuzu kopyalamanıza ve yapıştırmanıza ve kendinize veya iş arkadaşınıza bir e-posta göndermenize olanak tanır. Bu adımı yaptığınızdan emin olun. Gönderilen e-postalar gerçekte sonra düzenlenemez.