HTML ve CSS: E-posta kodlama kavramları

Daha önce hiç yapmadıysanız, kodlama dünyasına dalmak göz korkutucu görünebilir. Özellikle e-posta kodlamanın kendi kuralları vardır. Kodlama konusunda yeniyseniz, e-posta için doğrudan HTML ve CSS'ye dalmadan önce göz önünde bulundurmanız gereken bazı şeyler var.

E-postamı kodlamam gerekiyor mu?

Kodlama deneyiminiz yoksa sıfırdan bir e-postayı kodlamak sizin için pratik bir çözüm olmayabilir ve kesinlikle gerekli de değildir. VerticalResponse, çok çeşitli mobil uyumlu şablonlar sunar ve kullanıma hazır şablonlarımızı kendi içeriğinizle özelleştirebilmeniz için kullanımı kolay bir düzenleyici sunar.

HTML kullanma veya öğrenme konusunda deneyiminiz ve biraz rahatınız varsa, özel bir e-posta şablonunu kodlamak harika bir seçenek olabilir. Bir web sayfasını kodlamada olduğu gibi, yine de tarayıcı ve cihaz davranışlarını göz önünde bulundurmanız gerekir. Ek olarak, Gmail, Yahoo, Outlook ve daha fazlası gibi düzinelerce e-posta istemcisinin benzersiz stil varsayılanlarını göz önünde bulundurun. Bir web sayfasını HTML olarak kodlamaya ve harici bir CSS stil sayfası uygulamaya alışkınsanız, bu e-posta istemcisi varsayılanları tarafından stillerinizin üzerine yazılmaması için dahili ve satır içi CSS ile çalışmaya alışmanız gerekir.

Bilinmesi gereken kelime hazinesi

Kodlama konusunda tamamen yeniyseniz, HTML ve CSS hakkında bilmeniz gerekenler:

HTML , içeriğinizi yapılandırmak ve açıklamak için kullanacağınız bir dildir. HTML, Köprü Metni İşaretleme Dili anlamına gelir. HTML olarak kodladığınızda, içeriğinizi web tarayıcısına bir web sayfasında resimler ve kelimeler gibi bilgilerin nasıl görüntüleneceğini söyleyen etiketlerle işaretlersiniz.

CSS , içeriğinizin sunumunu etkileyen bir dildir. CSS kullanarak HTML öğelerine stiller atayabilirsiniz. CSS, Basamaklı Stil Sayfası anlamına gelir. Basamaklı sözcüğü önemlidir, çünkü stil bildirimleri veya kuralları, görünüm sırasına göre onurlandırılacaktır. Aynı öğe için iki bildirimde bulunursanız, ikincisi, kendisinden önce gelenin üzerine yazdığı için onurlandırılacaktır.

CSS'nizi HTML'nize bağlamanın yolları şunlardır:

Harici CSS: HTML dosyanızda referans verilen harici bir stil sayfası (genel olarak style.css adlı bir dosya) kullanma. Bu, web siteleri için harikadır çünkü 100'den fazla sayfaya yayılan 100 ortak öğeniz varsa, hepsini tek bir CSS bildirimi ile değiştirebilirsiniz.

Dahili CSS, diğer adıyla Gömülü CSS: CSS kodunuzu HTML dosyanızın en üstündeki <style> etiketlerine dahil edin. Bir e-postayı kodlarken, bu, ortak öğelere uygulanan genel stiller atamak için harika olabilir. Ancak, bu yöntem her zaman e-posta ile desteklenmez.

Satır içi CSS: CSS kodunu, HTML kodunun içinde tek bir HTML öğesine eklemek. E-posta kodlamasında bu yöntem, tarayıcı ve e-posta istemcisi varsayılanları tarafından belirli stillerin üzerine yazılmamasını sağlar.

CSS'nizi harici veya dahili olarak kurmaya alışkınsanız, bunu bu şekilde oluşturabilir ve ardından stillerinizi satır içi CSS'ye dönüştürmek için PutsMail'den bunun gibi bir satır içi aracı kullanabilirsiniz.

HTML ve CSS arasındaki ilişki

HTML ve CSS'nin nasıl ilişkili olduğu ve CSS'yi HTML'den ayırmanın HTML'nizin sunumunu nasıl özgürleştirebileceği hakkında daha iyi bir fikir edinmek için, aynı HTML işaretlemesini büyük ölçüde farklı CSS ile görebileceğiniz fantastik ve ünlü web sitesi CSS Zen Garden'a gidin. , tanınmış tasarımcılar tarafından kodlanmıştır.

Yaklaşan e-posta kodlaması

Bir e-postayı sıfırdan kodlarken mümkün olduğunca basit tutun. TextWrangler, Notepad veya Sublime gibi bir düz metin düzenleyici kullanın ve kodunuza gereksiz öğeler ekleyebilecekleri için Dreamweaver gibi görsel düzenleyicilerden uzak durun.

Düzen için mobil öncelikli bir yaklaşım benimsemeyi deneyin. Bu, küçük ekranlar için tasarım yapmak ve yükselmek anlamına gelir. Mobil görüntülemenin sürekli artmasıyla, e-postanızın telefonlarda ve tabletlerde iyi görünmesini sağlamak her zamankinden daha önemli; Yalnızca masaüstünde iyi görünen karmaşık bir tasarım oluşturmak için hiçbir neden yoktur. Mesajınızı ve tasarımınızı en küçük cihazlar için yeterince basit tutmak, kodlamayı da daha kolay hale getirecek, tüm cihazların kullanıcıları tarafından erişilebilir olacak ve okuyucunuzun dikkatini ana harekete geçirici mesaja odaklayacaktır.

Düzeniniz ve kodlamanız tamamlandıktan sonra, e-postanızın çeşitli tarayıcılarda ve e-posta istemcilerinde nasıl göründüğünü önizlemek için Litmus veya VerticalResponse'nin HTML düzenleyicisi için Gelen Kutusu Önizlemesi gibi bir araç kullandığınızdan emin olun, böylece gönder düğmesine basmadan önce sorunları giderebilirsiniz.

Öğrenmeye nereden başlamalı

Bir e-postayı nasıl kodlayacağınızı ayrıntılı olarak uygulamalı olarak öğrenebileceğiniz birçok çevrimiçi eğitim vardır. E-posta kodlamaya dalmanın iyi bir yolu, beğendiğiniz basit bir şablon bulmak ve kodu incelemek için biraz zaman harcamaktır. Önce <body>, <head> ve <div> gibi ana etiketlere aşina olun ve ardından etiketlerin bazen kimlikler veya <div class=”half-column”> gibi sınıflar halinde nasıl tanımlandığına dikkat edin. Kaliteli bir HTML şablonundaki adlandırmanın açık ve mantıklı olacağına dikkat edin, böylece CSS'de göründüğünde ne olduğunu anlamak daha kolay olur.

Adım adım bir derse hazırsanız, en son öğreticileri arayın (geçen yıl içinde). Kodlama yaklaşımı sürekli olarak yeniden gözden geçirilmektedir. Örneğin, son birkaç yılda popülerlik kazanan mobil uyumlu bir yöntem, akışkan/hibrit yaklaşımıdır. Envato Tuts+'ın sunduğu bu akıcı/karma eğitim, HTML'den biraz anlayanlar için harika. Yeni başlayanlar için Lynda.com, e-postaya özel birçok kodlama kursu sunar. İyi bir kurs, bir kodlama alıştırmasında size yol gösterecek ve referans olarak kullanabileceğiniz indirilebilir bir örnek proje dosyası sağlayacaktır.

Daha fazla müşteriye ulaşmak için daha az zaman harcayın

VERICALRESPONSE BUGÜN DENEYİN

(Bedava!)

Editörün notu: Bu blog yazısı ilk olarak Mart 2016'da yayınlandı ve doğruluk ve alaka düzeyi için yenilendi ve güncellendi.