Turkish (Türkçe) translation by Nevres Emre Alsancak (you can also view the original English article)
Bu yazıda yeni akıllı telefon e-posta programları ve uygulamaları da dahil olmak üzere, her e-posta programında çalışacak basit bir esnek HTML e-postasının nasıl oluşturulacağını göstereceğim. Maksimum uyumluluk için akışkan genişlik(fluid width) yöntemi ve az sayıda media query(ortam sorgusu)'su kullanarak bu işi halledeceğiz.
Ortam Sorguları: Çözümün Sadece Yarısı
Ortam sorguları, zamanında iOS ve Android tarafından desteklendiğinden, iOS and Android e-posta yazılımlarında esnek e-posta'ların çalışabilmesi için yeterliydi.
O zamanlardan beri, esnek e-posta geliştirme yöntemlerine çeşitli derecelerde destek veren hem iOS hem de Android platformları için birçok posta uygulamaları geliştirildi.
Bunun en dikkat çekeni Android kullanıcıları(Toplam açılış sayısının %11'ini oluşturmaktadır) için varsayılan posta uygulamasıdan iki kat daha popüler olan Android için Gmail uygulaması için gelen en son güncellemedir. Ortam sorgularını hiç desteklememiştir ve halende desteklememektedir ancak e-postalarınızı ekranın görüntülenebilir alanına sığdırmak için dış tablonun boyutunu sıkıştırarak ölçeklendirmektedir. Kontrol edilmesi oldukça zordur ve e-postalarınız mobil cihazlarda düzgün görüntülenebilmeleri tamamen medya sorgularına bağlıysa ortaya çok hoş olmayan sonuçlar çıkmaktadır.
Akışkan Niye Yeni Siyahdır?
İyi haber, medya sorgularını desteklemeyenler de dahil olmak üzere her e-posta uygulamasında mükemmel görünecek bir e-posta tasarlayabilir ve oluşturabilirsiniz. Bunu akışkan düzen(fluid layout) kullanarak yapabilirsiniz.
Ama ödün vermek zorunda olduğunuz birkaç tasarım detayı vardır. Tek bir sütuna dönüşen o popüler eşit sütun yerleşimleri bu yöntemle çok iyi çalışmaz. Onlarsız yaşamayı öğrenebilirseniz, çok iyi çalışabilecek oldukça işlevsel tasarımlar vardır.
İşte bugün yaratacağımız:
Başlangıç
Tamam, boş canvas(tuval) ile başlayalım.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>A Simple Responsive HTML Email</title>
<style type="text/css">
body {margin: 0; padding: 0; min-width: 100%!important;}
.content {width: 100%; max-width: 600px;}
</style>
</head>
<body yahoo bgcolor="#f6f8f1">
<table width="100%" bgcolor="#f6f8f1" border="0" cellpadding="0" cellspacing="0">
<tr>
<td>
<table class="content" align="center" cellpadding="0" cellspacing="0" border="0">
<tr>
<td>
Hello!
</td>
</tr>
</table>
</td>
</tr>
</table>
</body>
</html> Burada header, doctype ve arka plan rengi uygulanmış konteyner tablosu(Body etiketinin stillenmesi tam olarak desteklemediğinden hem gövdeye hem de büyük saran tablomuza uyguluyoruz) içeren temel sayfamızı yaratıyoruz. Bu temel düzen hakkında daha fazla bilgi sahibi olmak için Sıfırdan Bir HTML E-posta Şablonu Oluşturma yazısına bir göz atın.
Daha sonra ana içerik tablomuzu 'content' sınıfı ile merkeze çektim.
Dikkat
Not: Bu yazıda, CSS kodunu dosyamızın başına yerleştirdiğimi göreceksiniz. Genellikle stilleri tekrar kullanacağım zaman head kısmına yerleştiririm ve bir seferlik stilleri inline(satıriçi) yazarım.
Önemli: Dosyalarınızın başına CSS kurallarını eklediğinizde işlemin sonunda hepsini satıriçi yapmak için bir araç kullanmanız gerekir. MailChimp veya Campaign Monitor gibi hizmetleri kullanıyorsanız, tasarımlarınızı içe aktardığınızda size otomatik olarak stillerinizi satıriçi yapma seçeneği sunacaklardır. Bunu yapmak zorunda olmanızın sebebi, Gmail gibi bazı istemciler <style> etiketlerinizin içeriğini siler veya onları görmezden gelir, yok sayarlar. CSS'nizi satıriçi yapmak için Premailer gibi bir aracı da kullanabilirsiniz. Premailer veya benzeri bir araç kullanıyorsanız, işleme başlamadan önce ortam sorgularınızı çıkarmayı unutmayın (onların kalmasını isteriz), işlemden sonra tekrar ekleyin. MailChimp ve Campaign Monitor bunu sizin için otomatik yapar.
Mobil Stillerin Yahoo'dan Gizlenmesi!
Body etiketinde ek bir nitelik olduğunu fark edeceksiniz. Yahoo Mail ortam sorgularınızı gospel olarak yorumlamayı sever bu nedenle bunu önlemek için nitelik seçiciler kullanmanız gerekir. Bunu yapmanın en kolay yolu (Email on Acid Tarafından önerildiği gibi) gövde etiketine keyfi bir nitelik eklemek. Ben önerildiği gibi 'yahoo' yu kullanıyorum, ancak istediğiniz herhangi bir şey kullanabilirsiniz:
<body yahoo>
Daha sonra CSS'deki body etiketi için nitelik seçici'yi kullanarak belirli sınıfları hedefleyebilirsiniz.
body[yahoo] .class {} Akışkan Yöntemi Üzerinde Ustalaşmak için İki Püf Noktası
Gördüğünüz gibi, 'content' tablomuz %100 genişliğinde, bu yüzden akışkan olacak ve akıllı telefonların, tablet ekranların genişliğini otomatik olarak alacaktır. Ayrıca e-postanın daha büyük cihazlarda tüm ekranı kaplamamasını için maksimum genişliği 600 piksel olarak belirleyeceğiz.
Her şeyin tüm e-posta istemcilerinde planlandığımız gibi görüntülenmesini sağlamak için yapmamız gereken iki kurnazlık vardır. Bu yöntemle alakalı iki düzeltme için Tina Ye'nin FogCreek Blog'uğunda bulunan mükemmel eğitimine teşekkür ederiz.
1. Max-Width Eksikliğini Gidermek
Ne yazık ki max-width bütün e-posta istemcileri tarafından desteklenmemektedir. E-postalarımızın Outlook, Lotus Notes 8 ve 8.5'te düzgün bir şekilde görüntülenmesi için, her bir tabloyu, sabit bir genişlik vererek her şeyi içinde tutacak bir tablo ile koşullu bir kod kullanarak sarmalıyız. IE'yi (Lotus Notes tarafından kullanılmaktadır) ve Microsoft Outlook'u hedef alır.
Tablomuzu koşullu kodla saracağız:
<!--[if (gte mso 9)|(IE)]> <table width="600" align="center" cellpadding="0" cellspacing="0" border="0"> <tr> <td> <![endif]--> <table class="content" align="center" cellpadding="0" cellspacing="0" border="0"> <tr> <td> Hello! </td> </tr> </table> <!--[if (gte mso 9)|(IE)]> </td> </tr> </table> <![endif]-->
2. Apple Mail için Bir Düzeltme
İlginç bir şekilde, Apple Mail'da (normal olarak çok yenilikçi bir e-posta istemcisi olmasına rağmen) max-width özelliğini desteklemez. Ama medya sorgularını desteklemektedir, böylece bir sorgu ekleyerek görünüm alanı tüm 600 pikseli görüntüleyebildiği sürece 'content' sınıfı tablosuna bir genişlik ayarı verebiliriz.
<style type="text/css">
@media only screen and (min-device-width: 601px) {
.content {width: 600px !important;}
}
</style> Başlığın(Header) Oluşturulması
Şimdi tablomuzun ilk satırını ekleyeceğiz - başlık. Eklediğimiz satırı biçimlendirebilmek aşağıdakileri ekleyin.
<td class="header" bgcolor="#c7d8a7"> Hello! </td>
Ve daha sonra CSS'nizde başlığa dolgulamayı(padding) ekleyin:
.header {padding: 40px 30px 20px 30px;} İlk Esnek Satırın Eklenmesi
Şimdi ilk esnek satırımızı oluşturacağız. Bunu yapmanın yolu, 'hizala(align)' HTML özelliğini kullanarak birbirinin yanına 'kayan(float)' iki tablo oluşturmaktır.
Sol Sütun
Küçük "Hello!"'muzu aşağıdaki selamlama. ile değiştirelim.
<table width="70" align="left" border="0" cellpadding="0" cellspacing="0"> <tr> <td height="70" style="padding: 0 20px 20px 0;"> <img src="images/icon.gif" width="70" height="70" border="0" alt="" / > </td> </tr> </table>
70px tablomuzu oluşturuyoruz ve iki sütun arasında aralık(gutter) görevi görecek biraz dolgu(padding) ekliyoruz. Alttaki dolgu, iki sütun mobil gösterimde kümelendiğinde biraz boş alan ekleyerek rahatlık katacaktır.
Sağ Sütun
Tabloyu tekrar sola hizalayarak sağ sütunu oluşturacağız. Bu tablo 445 piksel genişliğinde olacak ve bu bize sağ tarafta 25 piksel boşluk bırakacaktır. Outlook herhangi bir satırda en az 25px boşluk bulamazsa tablolarınızı otomatik olarak kümeleyeceği için bu çok önemlidir.
En az 25 piksellik bir boşluğa izin verdiğiniz sürece tablolarınız beklendiği gibi davranacaktır.
Dur! Outlook'u Kandırmak İçin Alternatif İpucu
Bu ilginç sorunu çözmek için bir diğer yöntemde koşullu kod kullanarak Outlook'un, bir hücreyi kapadığınızı ve yeni bir hücre açtığınızı düşünmesini sağlamaktır. İlk tablonuzun kapatma etiketinden sonra ve ikinci tablonuzun açılış etiketinden önce şunu ekleyin:
<!--[if mso]> </td><td> <![endif]-->
Devam..
Daha geniş olan sağdaki tablo üzerinde, container(konteyner) tablosu için yaptığımız aynı işlemi uygulayacağız. Bir sınıf yaratıp, koşullu sarma kodunu ekleyeceğiz. Bu tablonun mobil cihazda %100 genişlikte olmasını ve soldaki tablonun altına inmesini istiyoruz.
<!--[if (gte mso 9)|(IE)]> <table width="425" align="left" cellpadding="0" cellspacing="0" border="0"> <tr> <td> <![endif]--> <table class="col425" align="left" border="0" cellpadding="0" cellspacing="0" style="width: 100%; max-width: 425px;">style="width: 100%; max-width: 425px;"> <tr> <td height="70"> </td> </tr> </table> <!--[if (gte mso 9)|(IE)]> </td> </tr> </table> <![endif]-->
Burada bu tablo için 425 piksellik genişliğinde bir sütun yaratan 'col425' adlı bir sınıf oluşturduğumu görebilirsiniz. Tabloyu 425 piksellik genişliğinde tutacak koşullu bir kodla sardım. Daha sonra sınıfımızı Apple Mail için oluşturduğumuz Ortam Sorgusuna'da ekledik.
.col425 {width: 425px!important;} Şimdi hücremizin içine biçimlendirilmiş başlığı ekleyeceğiz.
<table width="100%" border="0" cellspacing="0" cellpadding="0"> <tr> <td class="subhead" style="padding: 0 0 0 3px;"> CREATING </td> </tr> <tr> <td class="h1" style="padding: 5px 0 0 0;"> Responsive Email Magic </td> </tr> </table>
Biçimlendirebilmeleri için her hücreye bazı sınıflar ve diğer metin türleri için daha sonra kullanacağımız bazı biçimlerde ekledim:
.subhead {font-size: 15px; color: #ffffff; font-family: sans-serif; letter-spacing: 10px;}
.h1 {font-size: 33px; line-height: 38px; font-weight: bold;}
.h1, .h2, .bodycopy {color: #153643; font-family: sans-serif;} Başlık kısmı artık tamamlandı ve aşağıda iki sütunun mobil cihazda nasıl üst üste geleceğini görebilirsiniz. (Çalışırken bunu görebilmek için masaüstünde sabit bir genişlik dayatmasına sebep olduğundan, min-device-width medya sorgularını geçici olarak devre dışı bırakmanız gerekir(comment out))
Tek Sütun Metin Satırını Oluşturma
Tek sütun metin satırı oluşturmak için, '.content' tablomuza yeni bir satır eklememiz yeterlidir. Bu satırlara yeniden kullanılabilir dolgu değerleri kullanabilmemiz 'innerpadding' sınıfı ekleyeceğiz. Ayrıca her satıra bir çerçeve uygulayabilmek için 'borderbottom' sınıfı da ekleyeceğiz.
<tr> <td class="innerpadding borderbottom"> <table width="100%" border="0" cellspacing="0" cellpadding="0"> <tr> <td class="h2"> Welcome to our responsive email! </td> </tr> <tr> <td class="bodycopy"> Lorem ipsum dolor sit amet, consectetur adipiscing elit. In tempus adipiscing felis, sit amet blandit ipsum volutpat sed. Morbi porttitor, eget accumsan dictum, nisi libero ultricies ipsum, in posuere mauris neque at erat. </td> </tr> </table> </td> </tr>
Bu bölüm için CSS'imiz:
.innerpadding {padding: 30px 30px 30px 30px;}
.borderbottom {border-bottom: 1px solid #f2eeed;}
.h2 {padding: 0 0 15px 0; font-size: 24px; line-height: 28px; font-weight: bold;}
.bodycopy {font-size: 16px; line-height: 22px;} Çift Sütun Yazı Oluşturma
Şimdi tam olarak başlığımız gibi esnek bir satır oluşturacağız, ancak daha büyük bir görüntüye sahip olabilmemiz için biraz daha farklı boyutlar ile.
<tr>
<td class="innerpadding borderbottom">
<table width="115" align="left" border="0" cellpadding="0" cellspacing="0">
<tr>
<td height="115" style="padding: 0 20px 20px 0;">
<img src="images/article1.png" width="115" height="115" border="0" alt="" />
</td>
</tr>
</table>
<!--[if (gte mso 9)|(IE)]>
<table width="380" align="left" cellpadding="0" cellspacing="0" border="0">
<tr>
<td>
<![endif]-->
<table class="col380" align="left" border="0" cellpadding="0" cellspacing="0" style="width: 100%; max-width: 380px;">
<tr>
<td>
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td class="bodycopy">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. In tempus adipiscing felis, sit amet blandit ipsum volutpat sed. Morbi porttitor, eget accumsan dictum, nisi libero ultricies ipsum, in posuere mauris neque at erat.
</td>
</tr>
<tr>
<td style="padding: 20px 0 0 0;">
<table class="buttonwrapper" bgcolor="#e05443" border="0" cellspacing="0" cellpadding="0">
<tr>
<td class="button" height="45">
<a href="#">Claim yours!</a>
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
<!--[if (gte mso 9)|(IE)]>
</td>
</tr>
</table>
<![endif]-->
</td>
</tr> Burada 'buttonwrapper' sınıfı kullanan bir düğme ekledik. İçinde metin linki olan Arka planı rengi belirtilmiş dolgulu bir hücre. Yeniden kullanılabilir bir şablon oluştururken değişik genişlikteki düğmelere sahip olabilmenize olanak sağladığı için bu yöntemi kullanmayı tercih ediyorum. Düğmelerinizin genişliği sabitse Campaign Monitor'de bulunan Bulletproof Düğme Oluşturucuyu kullanmayı tercih edebilirsiniz.
Düğme için stillerimiz:
.button {text-align: center; font-size: 18px; font-family: sans-serif; font-weight: bold; padding: 0 30px 0 30px;}
.button a {color: #ffffff; text-decoration: none;} Bu yeni sınıf 'col380' için genişliğin ayarlanmasının yanı sıra, boyutumuzuda Apple Mail ile alakalı stiller listemize ekleyeceğiz. Şimdi böyle görünüyor:
@media only screen and (min-device-width: 601px) {
.content {width: 600px !important;}
.col425 {width: 425px!important;}
.col380 {width: 380px!important;}
} 
Tek Sütun İmajın Oluşturulması
Bu çok basit bir satır; İmaj'ı postanın genişliğinin% 100'ü olacak şekilde ayarlayacağız ve yüksekliğinin CSS kullanarak otomatik olarak ayarlandığından emin olacağız.
<tr> <td class="innerpadding borderbottom"> <img src="images/wide.png" width="100%" border="0" alt="" /> </td> </tr>
CSS'imizde:
img {height: auto;} Son Düz Metin Satırını Oluşturma
Son olarak, altı çerçevesiz bir metin satırı ekleyeceğiz:
<tr> <td class="innerpadding borderbottom"> Lorem ipsum dolor sit amet, consectetur adipiscing elit. In tempus adipiscing felis, sit amet blandit ipsum volutpat sed. Morbi porttitor, eget accumsan dictum, nisi libero ultricies ipsum, in posuere mauris neque at erat. </td> </tr>
Altbilgi(Footer) Oluşturma
Altbilgiyi oluşturmak için, içinde tablo bulunan yeni bir satır ekleyeceğiz. Satırlardan biri sosyal medya ikonlarımız için başka bir tablo içerecek.
<tr> <td class="footer" bgcolor="#44525f"> <table width="100%" border="0" cellspacing="0" cellpadding="0"> <tr> <td align="center" class="footercopy"> &reg; Someone, somewhere 2013<br/> <a href="#"><font color="#ffffff">Unsubscribe</font></a> from this newsletter instantly </td> </tr> <tr> <td align="center" style="padding: 20px 0 0 0;"> <table border="0" cellspacing="0" cellpadding="0"> <tr> <td width="37" style="text-align: center; padding: 0 10px 0 10px;"> <a href="http://www.facebook.com/"> <img src="images/facebook.png" width="37" height="37" alt="Facebook" border="0" /> </a> </td> <td width="37" style="text-align: center; padding: 0 10px 0 10px;"> <a href="http://www.twitter.com/"> <img src="images/twitter.png" width="37" height="37" alt="Twitter" border="0" /> </a> </td> </tr> </table> </td> </tr> </table> </td> </tr>
Altbilgimize ilişkin gerekli stilleri CSS'e ekleyeceğiz:
.footer {padding: 20px 30px 15px 30px;}
.footercopy {font-family: sans-serif; font-size: 14px; color: #ffffff;}
.footercopy a {color: #ffffff; text-decoration: underline;} Düğmelerin Mobil Cihazlar İçin İyileştirilmesi
Mobil cihazlarda parmağınızla küçücük bir metin bağlantısına tıklamak daha zor olduğundan, sadece metnin değil tüm düğmenin bir bağlantı olması idealdir. Bu tüm masaüstü istemcilerin tarafından desteklenmediğinden (dolgu tamamen link(<a>)etiketlerinde desteklenmemekte), ortam sorgularını kullanarak mobil sürüme eklediğim bir yöntemdir.
<td> 'ye şu anda uygulanmış rengi çıkarıp, <a> etiketine çok fazla dolgu ile geri uygulamamız gerekiyor.
IE9'da Outlook.com'da ortaya çıkan bir hata'dan kaçmak için bu medya sorgusunda max-width ve max-device-width değerlerini kullanacağım.
@media only screen and (max-width: 550px), screen and (max-device-width: 550px) {
body[yahoo] .buttonwrapper {background-color: transparent!important;}
body[yahoo] .button a {background-color: #e05443; padding: 15px 15px 13px!important; display: block!important;}
} Şimdi mobil cihazdaki renkli düğmenin herhangi bir yerine dokunduğunuzda, bu bir bağlantı olur!
Medya Sorgularıyla ile Dahada İleri Düzeltmeler
İsterseniz, düzeninizde iyileştirme yapabilmek için kontrol etmek istediğiniz öğelere sınıf adları uygulayabilir ve daha sonra yukarıda oluşturduğumuz ortam sorgusu içinde yeni kuralları oluşturabilirsiniz.
Örnek olarak, abonelik iptal(unsubscribe) linkini ona bir sınıf ekleyerek bir düğmeye çevireceğiz:
<a href="#" class="unsubscribe"> <font color="#ffffff">Unsubscribe</font> </a> <span class="hide">from this newsletter instantly</span>
ve ortam sorgusuna aşağıdaki CSS'yi ekleyerek:
body[yahoo] .unsubscribe {display: block; margin-top: 20px; padding: 10px 50px; background: #2f3942; border-radius: 5px; text-decoration: none!important; font-weight: bold;} body[yahoo] .hide {display: none!important;} 
Ortam sorgularını destekleyen istemcilerde dolgu miktarını azaltmak için .innerpadding, .header ve .footer sınıflarınıda hedefleyebilirsiniz.
Test Edin ve Tamamlayın!
Son olarak, her zaman olduğu gibi doğrulama(validate) yaptığınızdan emin olun (W3C doğrulayıcıyı kullanarak - yalnızca gövde etiketindeki "yahoo" özelliği için bir hata bulunacaktır) ve gerçek cihazları, Litmus veya Email on Acid gibi bir web önizleme hizmetlerini kullanarak gerçekten iyi test edin.
Her e-posta istemcisinde harika görünen esnek e-postalar oluşturmanın tadını çıkarın!
Öğrendiklerinizi bir üst seviyeye taşımak için, aşağıdaki derslere göz atın:
