HTML ile E-posta Şablonu Oluşturma

HTML ile E-posta Şablonu Oluşturma


Günümüzde akıllı telefonlar ve tabletler sayesinde artık e-postaları okumak oldukça basit. Modern web sitelerinde olduğu gibi, e-posta bülten tasarımının farklı görüş pencereleri için optimize edilmesi gerekiyor. Duyarlı bir e-posta bülten tasarımına sahip olduğunuzu düşünün. Masaüstü aygıtlarda iyi görünebilir. Bununla birlikte, küçük ekranlarda kontrol etmek, hizalanmamış ve bozuk sütunlarla birlikte kötü görünecektir. EmailMonday'a göre , tüketicilerin yüzde 91'i cep telefonlarındaki e-postaları düzenli olarak kontrol ediyor. Bu, e-posta şablonunuzu optimize etmeyi düşünmenizin nedenlerinden biridir.
 
 
E-posta bülten tasarımınızı optimize etmenin en kolay yolunu artık biliyorsunuz. Div ve harici CSS'yi kullanarak HTML şablonunu modern şekilde kodlamak için kullanmayı düşünebilirsiniz; Outlook ve Yandex Mail gibi bazı e-posta istemcileri farklı bir yaklaşım kullanır.
 
 
HTML5 ve CSS3 desteği e-posta tasarımıyla sınırlı olmakla birlikte, yanıt veren bir e-posta şablonu oluşturmak için en iyi yol, tabloları, dahili CSS'leri, satır içi CSS'leri ve medya sorgularını kullanarak eski düzen oluşturma yolunu alarak.
 
 
Çoğu e-posta istemcisi medya sorgularını desteklese de, Gmail Android Uygulaması gibi desteklenen sınırlı bir kısmı vardır. Farklı görünüm kapılarında pürüzsüz duyarlı bir düzen oluşturmak için tablolara ve diğer HTML öğelerine yüzdeler ekleyebilmeceğimiz iyi bir yoldur.
 
 
Bu bilgilerin tümünü nasıl uygulayabileceğinizi göstermek için, medya sorgularının yardımıyla tabloları, satır içi ve harici CSS'leri kullanarak nasıl yanıt veren bir e-posta şablonu oluşturabileceğinizi gösteriyoruz. 
 
Not: E-posta şablon tasarımım için zaten Photoshop'ta bir maket tasarımı örnek hazırladık.
 

 

İhtiyacımız olan kaynaklar...
 
  • Raleway ve Lato Google Yazı Tipi
  • Bölünmüş Resimler ve Simgeler
  • HTML ve CSS hakkında bilgi
  • Medya sorguları hakkında bilgi
 
E-posta bülten tasarımımız modern düz bir tasarıma sahip olacaktır. 

 

Başlıyoruz...
 
 
Başlamadan önce başlık bölümümüze bazı öğeler koymalıyız. İlk olarak, belgemiz için xml ad alanını belirtmek için bir XHTML doctype'ı takiben xmlns özniteliğiyle html etiketini ekleyeceğiz. Gerisi meta bilgi ve başlık etiketidir.
 

Kodlar:

 

Biçimlendirme
 
 
İşaretlememiz için tablolarla başlayıp masaya bazı özellikler eklemeye başlayacağız. Bu, aşağıdaki unsurları içerecektir:
 
  • Başlık / Banner
  • 3 Kutu Vitrini
  • Başlık Bölümü
  • Ne Yapıyoruz Bölümü
  • Yeni proje bölümü için hazır
  • Fiyatlandırma tablosu
  • Alt Bilgi

 

Kodlar:

 

Afiş ve 3 Kutu Vitrini Bölümü
 
 
Bu iki bölüm için her bölümü daha sonra CSS'mizde bir genişlik ayarlamak için col-600 sınıfıyla birleştireceğiz. Logo ve metin ile birlikte güzel bir afiş ekleyeceğiz. Üç kutu vitrin için col3 kullanacağız ve genişliği 183 olacak. Bazı alan vermek için <td> etiketinde yükseklik kullandığımıza dikkat edin.

 

Kodlar:

 

Başlık ve Ne Yapıyoruz Bölümü
 
 
Bu iki bölüm hala her biri sınıf col-600'ü kullanacaktır, ancak her bir iç öğe üzerinde iki farklı sınıf kullanacağız. Müthiş başlık bölümündeki ilk simge öğesi için metinde col1 ve col3_one kullanacağız . Bu ikisinin boyutunu daha sonra medya sorgularımızda değiştireceğiz. 

Her sütun için col2 kullanacağız.Unsurlarımıza bazı stiller koymak için bir satır içi CSS kullanacağız dikkat edin.


Kodlar:

 

Yeni Proje ve Fiyatlandırma Tablosu Bölümü
 
 
Yeni Proje bölümü ve fiyat tablosu için col-600 haricinde başka bir sınıf kullanmayacağız, ancak her tablo için col2 kullanıyoruz.
 
 
Kodlar:
 
 
 
Alt Bilgi
 
 
Aynı col-600'ü kullanan altbilgi bölümü için, üç tablo hücresi oluşturur ve sosyal medya simgelerimiz için yüzde genişliği veririz.
 
Kodlar:
 
 
 
 
CSS
 
 
Artık her şeyi kurduğumuza göre, başlık bölümüne bazı stiller ekleyelim. İlk olarak, biçimlendirme için genel stiller eklemeliyiz. Google Web Fontları'nı içe aktaracağız ve gerisi şablon,html, tablolar vb. için stillerimizi içeriyor. Web fontları hakkında birkaç not: Campaign Monitor'a göre, e-posta istemcilerindeki web fontları için destek sınırlıdır. Bu, mevcut müşterilerin hepsini desteklemediği anlamına gelir. Burada web yazı tipi entegrasyonunu destekleyen e-posta istemcileri konusunda Kampanya Monitörünü kontrol edin.
 
 
Kodlar:
 
 
 
Sonra, belirli e-posta istemcisi sınıfı için bazı stiller ekleyelim. Bu, her sınıf için istediğimiz stillerin uygulanacağından emin olacaktır.
 

Kodlar:

 

Medya sorguları

 

Medya sorguları için, yüzdeleri kullanarak 640 piksel görüntüleme alanındaki her bir öğenin ve bölümün boyutunu ekleyip değiştirmeye başlayacağız.

 

Kodlar:

 

Son CSS için 480px görüntüleme alanımıza bazı medya sorguları eklemeye başlayacağız. Buradaki öğelerimizin ve bölümlerin çoğunun yüzdesi olarak belirlenecek.

 

Kodlar:

 

Böylece, yanıt veren bir e-posta şablonu oluşturabilirsiniz. Stillerin çoğunun satır içi CSS kullanıldığını görebilirsiniz. Gelecekte çok fazla ilerleme olabileceği halde bu, bir e-posta şablonu oluşturmak için iyi bir temel oluşturuyor. Bazı e-posta istemcilerinin sorunları olabileceğinden, HTML dosyasını kullanmadan önce tüm yorumlarını kaldırmayı unutmayın.
 
 YUKARI