HTML ve CSS ile E-posta Şablonu Nasıl Oluşturulur?

Hem tasarımcılar hem de geliştiriciler olarak, bir gün müşteriniz sizden bir tür haber bülteni için bir e-posta şablonu isteyecektir. HTML ve CSS desteğinde büyük bir boşluk olduğu için e-posta şablonlarının o kadar heyecan verici olmadığını söylemeliyim. HTML5 ve CSS3 ile ilerlediğimiz için bugünün çağında durumun böyle olmayacağını anlayacaksınız. Ancak, konu e-postaları işlemeye geldiğinde durumun açık ara böyle olmadığını üzülerek söylüyorum.

Bir HTML e-posta şablonu oluştururken akılda tutulması gereken ilk şey, tüm CSS stillerinin satır içinde yapılması gerektiğidir. Başka bir durumda, bu çok büyük bir hayır-hayırdır. Ancak, harici CSS ve hatta kafada CSS için çok az destek olduğundan, bunu yapmanın yolu satır içidir. Ek olarak - ve eminim bunu daha önce duymuşsunuzdur - şablonun DIV'lerle değil TABLO'larla oluşturulması gerekir. Bir kez daha, bu talihsiz ama gidilecek yol bu. E-postaların genel olarak o kadar büyük olmadığı göz önüne alındığında, onları tasarlamak ve oluşturmak zor değil – web veya mobil tasarıma kıyasla sadece sıkıcı.

Dizayn

 Size tavsiyemiz: Modern CSS Çerçevelerini Kullanarak Tasarım Sürecinizi Nasıl Hızlandırırsınız?

Yapı

HTML sayfasının gövdesine aşağıdaki kodu yapıştırın. Basitçe koda bakarak, bu e-postanın yapısında pek bir şey olmadığını anlayabilirsiniz. Bu aslında çok iyi bir şey çünkü e-postalar asla karmaşık olmamalı. Şimdiye kadar, yalnızca toplam tablonun genişliğini belirten ve tablonun hücreleri arasında hiçbir şey olmadığını belirten çok az miktarda stil var.

 <table width="700" border="0" cellpadding="0" cellspacing="0" > <tr><!-- First row - header --> <td colspan="2"></td> </tr> <tr><!-- Second row --> <td colspan="2"></td> </tr> <tr><!-- Third row --> <td></td> <td></td> </tr> <tr><!-- Fourth row --> <td></td> <td></td> </tr> <tr><!-- Fifth row - footer --> <td colspan="2" ></td> </tr> </table>

Stil

Tamam, şimdi belgenin içeriğine biraz CSS ekleyeceğiz. Hiç de süslü bir şey değil, sadece bir sıfırlama ve bir bağlantı rengi ve stil tanımı. E-posta istemcileri tarafından çoğu zaman göz ardı edildiğinden, buraya hangi CSS'yi koyduğunuz konusunda çok dikkatli olurdum.

 <style> * { margin: 0; padding: 0; font-family: "Helvetica Neue",Helvetica,Arial,sans-serif; } a { color: #464646; text-decoration:none; } </style>

İçerik

Tabloları içerikle doldurmanın zamanı geldi. Görselleri yukarıda size sağlanan dosyada bulabilirsiniz – bu eğitimin başında. Şimdi bu e-postada olması gereken tüm metin ve resimleri doldurmalısınız. Lütfen öğreticide köprüleri herhangi bir şeye bağlamak zorunda olmadığınızı ve kendi resimlerinizi de kullanmakta özgür olduğunuzu unutmayın. Şimdiye kadar kodun içinde, boyutlarının ayarlandığından emin olmak için üç resmin de genişliğini tanımladım.

Son derece farkında olmanızı istediğim bir şey var: a: küçük boyutlu oldukları ve b: onları iyi tanımlayan bir alt etiketine sahip oldukları sürece resimler e-postalar için harikadır. Resimlerin bir e-postada görünmesi için, bu e-postanın alıcısının resimlerin görünmesine izin vermesi gerektiğini bildiğinizden eminim. Bunu yapmazlarsa, onlara ne beklemeleri gerektiğini söyleyecek hiçbir şey yoktur. Görme engelli kullanıcılar için bir açıklama sağlamazsanız, bu aynı zamanda bir erişilebilirlik sorunudur. Ancak bu başka bir hikaye. Ders şu: her zaman alt etiketli küçük bir resim kullanın!

 <table width="700" border="0" cellpadding="0" cellspacing="0" > <tr><!-- First row - header --> <td colspan="2"><a href="http://www.www.webdesignviews.com" target="_blank"><img src="images/logo.png" width="346" alt="DevGarage"/></a></td> </tr> <tr><!-- Second row --> <td colspan="2"> <h1><a href="http://www.www.webdesignviews.com" >We launched our mobile site!</a></h1> <img src="images/screenshot.png" width="400" alt="Mobile blog screenshots."/> </td> </tr> <tr><!-- Third row --> <td><img src="images/screenOutlines.png" width="300" alt="PSD freebie"/></td> <td> <h2><a href="#">A PSD just for you!</a></h2> <p>We have decided to kick off our mobile launch by giving away an awesome PSD of device templates for you to showcase your next project - whether or not it is responsive. </p> </td> </tr> <tr> <td><!-- Fourth row --> <h3><a href="#">The smell of whitespace</a></h3> <p>A short post that is very straightforward in which I will explain what are the benefits of whitespace in web design.</p> <p>Read more</p> </td> <td> <h3><a href="#">Web typography trends</a></h3> <p>From a user's perspective web-safe fonts were great but from a designers perspective it was a creative disaster.</p> <p>Read more</p> </td> </tr> <tr><!-- Fifth row - footer --> <td colspan="2"> Copyright information and <a href="#">unsubscribe</a> link.</td> </tr> </table>

Satır İçi Stil

Yapacağımız en son şey, bu HTML e-posta şablonu için satır içi CSS stilini sağlamaktır. Şimdiye kadar görebileceğiniz gibi e-postanın görünümünü oluşturan şey bu e-posta hiç de güzel görünmüyor. Bu kısmı küçük parçalara ayıracağım, böylece çok fazla boğulmayacak.

 Şunlar da hoşunuza gidebilir: E-posta Konu Satırınızı Daha Tıklanabilir Hale Getirmek İçin 7 Yararlı İpucu.

Vücut

İlk olarak, tüm e-posta sayfasının arka plan rengini ve varsayılan yazı tipi boyutunu ve yazı tipi rengini ayarlayalım.

 <body bgcolor="#f7d973" ></body>

Masa

Yapılacak bir sonraki şey, e-postanın içeriğini ortalamak ve öne çıkması için ona kendi arka plan rengini sağlamak.

İlk Satır – Başlık

İlk sıradaki hücrede birçok şey oluyor. Lütfen satır içi stilinin <tr> değil <td> üzerinde olduğuna dikkat edin. Burada yaptığımız şey, logonun rengine uygun yeni bir arka plan rengi. Ek olarak, bazı dolgu ve hizalama da var. Şimdi, metnin rengini beyaz olarak değiştiriyorum çünkü alternatif metin varsayılan olarak siyah olacaktır. Bu arka planda göremeyeceksiniz, bu yüzden metnin rengini değiştirerek görebileceğinizden emin oluyorum. Size gereksiz gelebilir ama dediğim gibi bu, varsayılan olarak resimlere izin verilmeyen insanlar için çok önemlidir.

 <tr><!-- First row - header --> <td colspan="2"> <img src="images/logo.png" width="346" height="73" alt="DevGarage"/></a> </td> </tr>

İkinci sıra

Satır içinde yine iki sütuna yayılan yalnızca bir hücre vardır. Bu hücre, içeriğini aşağıdaki satırdan ayırmak için altına bir miktar dolgu ve bir kesici çizgi eklenerek hafifçe manipüle ediliyor. Kenar boşluklarından biraz boşluk alan büyük bir başlığımız da var. Ve bu satır için bu kadar.

 <tr><!-- Second row --> <td colspan="2"> <h1> We launched our mobile site!</a></h1> <img src="images/screenshot.png" width="400" alt="Mobile blog screenshots."/> </td> </tr>

Üçüncü sıra

Buradaki her iki hücre için de hem genişliği hem de dolguyu ayarlıyoruz. Tamamen aynıdırlar, böylece hücreler eşit olarak ikiye bölünür. Bunun dışında hücreler bir resim ve bununla ilgili bir yazı ile dolu olduğundan başka bir şey yoktur.

 <tr><!-- Third row --> <td><img src="images/screenOutlines.png" width="300" alt="PSD freebie"/></td> <td> <h2><a href="#">A PSD just for you!</a></h2> <p>We have decided to kick off our mobile launch by giving away an awesome PSD of device templates for you to showcase your next project - whether or not it is responsive. </p> </td> </tr>

Dördüncü Sıra

Bu, bu HTML e-posta şablonunun açık ara en stilize edilmiş bölümüdür. Aşağıdaki koddan da görebileceğiniz gibi, çok şey oluyor. İlk olarak, metnin tıpkı başlıkta olduğu gibi görünür olmasını sağlamak için tüm satır yeni bir arka plan rengi ve metin rengi alıyor. Hem birinci hem de ikinci hücre ve içerikleri aynı stil değişikliklerini alıyor. İlk olarak, hücrenin kendisi yeni bir arka plan ve metin rengi alıyor. Ardından, başlığındaki bağlantı sarı olarak değiştirilir. Son olarak, son paragrafın altı çizilir ve biraz boşluk eklemek için bir kenar boşluğu da eklenir. Dediğim gibi, ikinci hücre ve içeriği tamamen aynı stilizasyonu alıyor.

 <tr bgcolor="#464646"> <!-- Fourth row --> <td> <h3><a href="#">The smell of whitespace</a></h3> <p>A short post that is very straightforward in which I will explain what are the benefits of whitespace in web design.</p> <pwidth:320px; padding: 30px;"> <h3><a href="#">Web typography trends</a></h3> <p>From a user's perspective web-safe fonts were great but from a designer's perspective it was a creative disaster.</p> <plwptoc12">Fifth Row – Footer <tr bgcolor="#464646"> <!-- Fourth row --> <td> <h3><a href="#">The smell of whitespace</a></h3> <p>A short post that is very straightforward in which I will explain what are the benefits of whitespace in web design.</p> <pwidth:320px; padding: 30px;"> <h3><a href="#">Web typography trends</a></h3> <p>From a user's perspective web-safe fonts were great but from a designer's perspective it was a creative disaster.</p> <plwptoc12">Fifth Row – Footer
 Ve son olarak, altbilgi. Burada çok az şey oluyor; dolgu yoluyla sadece biraz boşluk bırakın ve bu kadar!
		








<tr><!-- Fifth row - footer --> <td colspan="2"> Copyright info and unsubscribe info</td> </tr>
Son sözler

Bu eğitim biraz uzun ama umarım artık sıfırdan bir HTML e-posta şablonu oluşturmak için ne gerektiğini anlamışsınızdır. Karmaşık bir kavram değil ama sıkıcı olabilir. Şimdi dışarı çıkıp harika görünümlü, üst düzey e-postalar yapmaya başlama sırası sizde! Daha benzersiz hale getirmek için bir e-posta şablonu oluşturmanın çeşitli tekniklerini birleştirebilirsiniz.
Bu makale Hannah Butler tarafından yazılmıştır. Web geliştiricisi ve tasarımcısı olarak çalışıyor. Ayrıca deneyimlerini makaleler şeklinde paylaşmayı seviyor. Bu durumda, WriteMyPaper4Me.co web sitesinde kendi bölümü vardır. Gelecekte, çalışma yöntemlerini başkalarına anlatmak için bir blog yazmaya başlayacak.