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. E-posta şablonlarının o kadar heyecan verici olmadığını söylemeliyim çünkü HTML ve CSS desteğinde büyük bir boşluk var. HTML5 ve CSS3 ile ilerlediğimiz için bugünün çağında durumun böyle olmayacağını anlamışsınızdır. Ancak, e-postaları işlemeye gelince, durumun pek de 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ı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 TABLE'larla oluşturulması gerekir. Bir kez daha, bu talihsiz bir durum 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

 Sizin için önerilenler: 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. Sadece koda bakarak, bu e-postanın yapısında pek bir şey olmadığını söyleyebilirsiniz. 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 tablo hücreleri arasında hiçbir şey olmayan çok küçük bir 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ü değil, sadece bir sıfırlama ve bir bağlantı rengi ve stil tanımı. Çoğu zaman e-posta istemcileri tarafından 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örüntüleri yukarıda sizin için sağlanan dosyada bulabilirsiniz – bu eğitimin başında. Şimdi bu e-postada yer alacak tüm metin ve resimleri doldurmalısınız. Lütfen öğreticide, köprüleri herhangi bir şeye bağlamanız gerekmediğini 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 üç görüntünün tümünün genişliğini tanımladım.

Son derece farkında olmanızı istediğim bir şey var: resimler a: küçük oldukları ve b: onları iyi tanımlayan bir alt etiketine sahip oldukları sürece e-postalar için harikadır. Bir e-postada resimlerin 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ğlamamanız da 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ğlamak. Şimdiye kadar görebileceğiniz gibi e-postanın görünümünü oluşturan şey bu e-posta hiç de o kadar güzel görünmüyordu. Bu kısmı çok küçük parçalara böleceğim ki çok bunaltıcı olmasın.

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

Gövde

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

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

Tablo

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

İlk Satır – Başlık

İlk satırın hücresinde birçok şey oluyor. Lütfen satır içi stilinin <tr> değil <td> üzerinde olduğunu unutmayın. Burada yaptığımız, logonun rengine uygun yeni bir arka plan rengi. Ek olarak, biraz dolgu ve hizalama da var. Şimdi, alt metin varsayılan olarak siyah olacağından metnin rengini beyaz olarak değiştiriyorum. Bu arka planda göremezsiniz, bu yüzden metnin rengini değiştirerek görebileceğinizden emin oluyorum. Size faydasız görünebilir 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, bir kez daha, 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 bir miktar dolgu ve altta bir kesme çizgisi 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 sıra 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 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 yanı sıra, hücreler bir görüntü ve bununla ilgili bazı metinlerle doldurulduğ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 görünür olduğundan emin olmak için tüm satır yeni bir arka plan rengi ve metin rengi alıyor - tıpkı başlıkta olduğu gibi. 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ı çizilmiştir ve biraz ayrım eklemek için bir kenar boşluğu da eklenmiştir. Dediğim gibi, ikinci hücre ve içeriği tamamen aynı stilize ediliyor.

 <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> <prsws_divider">