Students Save 30%! Learn & create with unlimited courses & creative assets Students Save 30%! Save Now
Advertisement
  1. Web Design
  2. Email Design
Webdesign

Basit Bir Esnek(Responsive) HTML E-postası Oluşturma

by
Length:LongLanguages:

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:

Final-Product-Both

Başlangıç

Tamam, boş canvas(tuval) ile başlayalım.

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:

Daha sonra CSS'deki body etiketi için nitelik seçici'yi kullanarak belirli sınıfları hedefleyebilirsiniz.

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:

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.

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.

Ve daha sonra CSS'nizde başlığa dolgulamayı(padding) ekleyin:

İ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.

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.

Responsive-AlignedTables

En az 25 piksellik bir boşluğa izin verdiğiniz sürece tablolarınız beklendiği gibi davranacaktır.

Allow at least 25px of breathing room to stop Outlook from stacking your tables
Outlook'un tablolarınızı kümelemesini önlemek için en az 25 px boşluk verin.

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:


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.

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.

Şimdi hücremizin içine biçimlendirilmiş başlığı ekleyeceğiz.

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:

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))

01-header

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.

Bu bölüm için CSS'imiz:

Ç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.

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:

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:

Email-TwoCol

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.

CSS'imizde:

Son Düz Metin Satırını Oluşturma

Son olarak, altı çerçevesiz bir metin satırı ekleyeceğiz:

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.

Altbilgimize ilişkin gerekli stilleri CSS'e ekleyeceğiz:

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.

Ş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:

ve ortam sorgusuna aşağıdaki CSS'yi ekleyerek:

Email-Footer-MQs

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:

Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.