Duyarlı E-posta Tasarımları Oluşturmak için Foundation for Emails Çerçevesi Nasıl Kullanılır?
Yayınlanan: 2017-06-26Kolaylıkla duyarlı e-posta tasarımları oluşturmanıza olanak tanıyan birçok pazarlama aracı vardır. Mesele şu ki, e-postalarınızın nasıl göründüğü üzerinde daha fazla kontrol sahibi olmayı tercih edebilirsiniz ve bunu yapmanın en iyi yolu onları sıfırdan tasarlamaktır. Foundation for Emails gibi bir çerçeve kullanmak size mükemmel bir uzlaşma sağlar. Sıfırdan her bileşenini gerekmez, ancak bunları nasıl kullanılacağı, ne zaman ve nerede üzerinde tam kontrol olsun.
Bu yazıda öncelikle e-posta çerçevelerinin ne olduğunu ve size nasıl yardımcı olabileceklerini açıklayacağız. Ardından, Foundation for Emails ve bunu kendi özel, duyarlı e-posta kampanyalarınızı oluşturmak için nasıl kullanabileceğinizi tartışmaya geçeceğiz. Hadi çalışalım!
E-posta Çerçeveleri Nedir (Ve Daha İyi E-postalar Oluşturmanıza Nasıl Yardımcı Olabilir)
Çerçeveler hala biraz kodlama yapmanızı gerektiriyor, ancak süreç e-postalar için çok basit.
Genel olarak çerçeve, belirli ürün türlerinin geliştirilmesine yardımcı olmak için tasarlanmış uygulamaların, dosyaların ve kodların bir derlemesidir. Bunları, her seferinde tekerleği yeniden icat etmemenizi sağlayarak karmaşık projeleri daha hızlı oluşturmanıza yardımcı olabilecek kod yapı taşları olarak düşünün.
E-posta için de çerçeveler var ve bu makalede bundan bahsedeceğiz. Bazı faydaları inceleyelim:
- Önceden oluşturulmuş öğeler, e-postaları daha hızlı tasarlamanıza yardımcı olur. Günümüzde çoğu e-posta, düğmeler ve menüler gibi resim ve metnin ötesinde öğeler içerir. Bu öğeleri dahil etmek zaman alıcı olabilir, ancak bir çerçeve bunları anında eklemenizi ve özelleştirmenizi sağlar.
- Kutunun dışında duyarlı. Giderek daha fazla insan mobil cihazlara yöneldikçe, e-postalarınızın ekranlarında iyi görüntülendiğinden emin olmanız gerekir. Çoğu modern çerçeve varsayılan olarak duyarlıdır, bu da endişelenmeniz gereken bir şey daha az olduğu anlamına gelir.
- Şablonlar, tasarımlarınızı başlatmanıza yardımcı olabilir. Birçok modern e-posta çerçevesi, kampanyaları hızlı bir şekilde oluşturmanıza yardımcı olacak çeşitli şablonlar içerir.
Gördüğünüz gibi, buradaki ortak tema, çerçevelerin zamandan tasarruf etmenizi sağlamasıdır. Projelerinizi sıfırdan kodlamak isteyeceğiniz pek çok durum vardır, ancak işleri daha hızlı ve daha yüksek kalitede yapmanızı sağlayan bir çerçeve kullanmaya değer.
E-posta Çerçevesi Vakfı'na Giriş
Daha ileri gitmeden önce, çevrimiçi olarak kullanılabilen iki Foundation çerçevesi olduğunu belirtmek önemlidir – Foundation for Sites ve Foundation for Emails – ve bu makale boyunca ikincisine odaklanacağız. Ana satış noktası, duyarlı ızgarasıdır. Bu tür bir sistem devrim niteliğinde değildir, ancak Foundation'ın popülaritesi kullanım kolaylığına dayanmaktadır.
Çerçeveyi almak oldukça basittir (herhangi bir kodlama deneyiminiz olmasa bile) ve biri Basamaklı Stil Sayfalarına (CSS) ve diğeri Sass'a dayalı olmak üzere iki sürüm arasında seçim yapabilirsiniz. Doğal olarak, Sass sürümü CSS stylings tekrarlamak ihtiyacını ortadan kaldırarak daha fazla zaman kaydetmenizi sağlar, ancak Node.js. konusunda biraz bilgi gerektirir
Son olarak, Foundation for Email ayrıca işinizi daha da basitleştirmek için düğmeler ve menüler gibi birçok 'kalıp' sağlar. Daha fazla zaman kazanmak için sıfırdan bir düzen tasarlamak yerine bir şablon bile kullanabilirsiniz.
Ana Özellikler:
- Modern e-posta kampanyaları oluşturmak için duyarlı bir ızgara kullanır.
- Çerçevenin bir CSS veya Sass sürümünü sunar.
- E-postalarınıza hızlı bir şekilde ortak öğeler eklemek için kalıplardan yararlanmanıza olanak tanır.
- E-posta oluşturma sürecini daha da kolaylaştırmak için düzenleri kullanır.
Fiyat: Ücretsiz | Daha fazla bilgi
Modern Tasarımlar Oluşturmak İçin E-posta Vakfı Nasıl Kullanılır (4 Adımda)
Bahsettiğimiz gibi, Foundation for Emails'in iki sürümü vardır. Bu bölümde, kurulumu daha az iş gerektirdiğinden CSS varyasyonunu kullanacağız. Ayrıca, nihai sonuçlar aynı görünmelidir - değişen tek şey oraya nasıl ulaştığınızdır.
Sass sürümünü çalışırken görmek veya nasıl kullanılacağı hakkında daha fazla bilgi edinmek istiyorsanız, bu harika öğretici ile başlayabilirsiniz.
Adım 1: E-posta Dosyaları Vakfı'nı İndirin
Her şeyden önce, Foundation for Email Başlarken sayfasına gidin ve CSS Sürümü alt başlığı altındaki Başlangıç Setini İndir düğmesine tıklayın:
Dosyayı aldıktan sonra, sıkıştırmasını açın ve içeriğini yeni bir klasöre çıkarın. Bu aşamada, klasörünüz bir index.html dosyası ve biri CSS'niz için diğeri şablonlarınız için olmak üzere iki alt klasör içermelidir.
Şimdilik favori metin düzenleyicinizi çalıştırın ve onunla index.html dosyasını açın. Oldukça çıplak olmalı, ama bunu birazdan düzelteceğiz.
Adım #2: Grid Sistemine Aşina Olun
Foundation for Email'in yanıt verme özelliği, esnek ızgara sistemine dayanmaktadır. Sıfırdan bir e-posta oluşturuyorsanız, e-postanızın bölümlerini bölümlere ayırmak için kendi kılavuzunuzu oluşturmak isteyeceksiniz. Bunu yapmak için üç farklı bileşen kullanacağız: kapsayıcılar, satırlar ve sütunlar.
Foundation'ınızın index.html dosyasını metin düzenleyicinizde açın ve gövde bölümüne gidin:
<body> <!-- <style> --> <table class="body" data-made-with-foundation> <tr> <td class="float-center" align="center" valign="top"> <center> <!-- Your grid goes here --> </center> </td> </tr> </table> </body> </html>
Gördüğünüz gibi, e-postanızın gövdesi, dokunmayacağımız önceden ayarlanmış bir tablo içeriyor. Bunun yerine, <!– Izgaranız buraya gider –> yazdığı bölüme kendi ızgara öğelerimizi ekleyeceğiz. Container'larınız için kullanmanız gereken kodla başlayalım:
<table class="container"> <tr> <td></td> </tr> </table>
Şimdi oraya bir satır ekleyelim:
<table class="row"> <tr> <th></th> </tr> </table>
Son olarak, bu satırı sütunlara bölebiliriz:
<table class="row"> <tr> <th class="small-12 large-6 first columns"> Column One </th> <th class="expander"></th> </tr> </table>
Her satırın en fazla 12 sütundan oluştuğunu unutmayın. Yukarıdaki kod, e-posta istemcinize, içeriğinizi mobil cihazlar gibi küçük ekranlarda ( küçük-12 ) tam 12 sütunu kullanarak görüntülemesi gerektiğini, ancak masaüstü bilgisayarlarda yalnızca altı sütunu ( büyük-6 ) kullanması gerektiğini söyler.
Sorun şu ki, e-postanız büyük bir ekranda gösteriliyorsa altı boş sütun var, bu yüzden düzeltmek için ikinci bir tablo eklememiz gerekiyor:
<table class="row"> <tr> <th class="small-12 large-6 first columns"> Column One </th> <th class="small-12 large-6 last columns"> Column Two </th> <th class="expander"></th> </tr> </table>
Gördüğünüz gibi, her iki sütun da temelde aynıdır. Ancak, ilk sütunlar ve son sütunlar olmak üzere iki farklı sınıfları vardır. Bunlar, e-posta istemcinize, satırınızdaki ilk ve son sütunların hangileri olduğunu ve aradaki sütunların bunları kullanması gerekmediğini söyler.
Şimdi index.html dosyanızı bir tarayıcıda açsaydınız , şunları görürsünüz:
Oldukça çıplak, evet, ancak mekanikler bu aşamada belirgin olmalıdır. Her e-postada istediğiniz kadar satır olabilir ve her satır için en fazla 12 sütununuz olabilir. Şimdilik, beğendiğiniz bir düzen bulana kadar ızgara sistemiyle oynamaya devam edin ve öğeleri eklemeye başlayana kadar tanımlamanıza yardımcı olması için metin yer tutucularını kullanın.
Adım #3: E-postalarınıza Bileşenler Ekleyin
Foundation for Email birçok bileşenden oluşur ve en yaygın kullanılanları düğmeler, arka plan resimleri ve alt başlıklardır. Oldukça basitler, o yüzden sırayla üzerinden geçelim. Düğme eklemek için bir veya daha fazla sütununuzda aşağıdaki kodu kullanmanız gerekir:
<table class="button tiny success"> <tr> <td> <table> <tr> <td><a href="#">The text of your button</a></td> </tr> </table> </td> </tr> </table>
Bu kod, e-postanıza yeşil bir arka plana sahip basit bir küçük düğme ekler. Buradaki kilit unsurlar minik ve başarı sınıflarıdır. Birincisi düğmenizin boyutunu, ikincisi ise rengini belirler. Mevcut tüm sınıfları buraya eklemek yerine, sizi Vakfın butonlarla ilgili resmi kaynağına bağlayacağız ve onları boş zamanlarında inceleyebilirsin.
Şimdi arka plan resimlerine geçelim. Bunlar biraz daha aldatıcıdır, çünkü satırınızın tüm genişliğini almalarını sağlamak için sarmalayıcı sınıfını kullanmanız ve CSS kullanarak onlara belirli bir arka plan atamanız gerekir:
<table class="wrapper" align="center"> <tr> <td class="wrapper-inner"> Your content </td> </tr> </table>
Son olarak, alt başlıklar hakkında konuşalım. Bunlar grubun en basitleri – tek yapmanız gereken metninizi gerekli etiketlerin içine sarmak:
<h1>h1. This is a very large header.</h1> <h2>h2. This is a large header.</h2> <h3>h3. This is a medium header.</h3>
Bu kadar kolay! Bu üç öğeyi kullanmak, bazı iyi görünümlü e-postalar oluşturmak için yeterlidir. İşin sırrı, elbette, onları CSS ile kalbinizin içeriğine göre şekillendirmek, bu da bizi son adımımıza getiriyor.
Adım #4: E-postanızı CSS Kullanarak Stillendirin
Bazı e-posta istemcileri (Microsoft Outlook gibi) bazı stil etiketlerini HTML dosyalarınızdan çıkarır. Bu, e-postaların sorunsuz bir şekilde işlenmesi ve olası güvenlik tehditlerinin ortadan kaldırılması için yapılır. Ancak sonuç, CSS'nizi doğrudan HTML'nize (veya satır içi ) eklemediğiniz sürece e-postalarınızın oldukça sıkıcı görüneceğidir.
Bu şekilde hem içeriğiniz hem de stili tek bir dosya olarak yüklenecek ve çoğu modern e-posta istemcisinde mükemmel şekilde çalışmalıdır. Satır içi CSS'li bir HTML öğesinin görünümü şu şekildedir:
<table class="wrapper" align="center"><tbody><tr><td class="wrapper-inner" style="padding:20px">content</td></tr>
Bu biraz dağınık olabilir, bu nedenle HTML ve CSS dosyalarınız üzerinde ayrı ayrı çalışmanızı ve ardından bunları sizin için birleştirmek için Foundation Inliner gibi bir araç kullanmanızı öneririz. Sadece kodunuzu yapıştırın, bir düğmeye tıklayın ve gerisini sizin için halledecektir.
Satır içi HTML dosyanızı aldıktan sonra, abonelerinize göndermeden önce her zaman iyi bir fikir olan bir e-posta pazarlama aracı kullanarak onu test edebilirsiniz.
Çözüm
İşlevsel ve duyarlı e-postalar oluşturmanın birçok yolu vardır. Ancak, esneklik arıyorsanız Foundation for Emails gibi bir çerçeve kullanmak harika bir seçenektir. Önceden oluşturulmuş bileşenleri kullanarak e-postaları sıfırdan tasarlamanıza veya şablonları kullanarak süreci hızlandırmanıza olanak tanır. Ne seçerseniz seçin, e-posta oluşturmak için harcadığınız zamanı önemli ölçüde azaltmalıdır.
Özetlemek gerekirse, Foundation for Emails ile modern e-postalar oluşturmak için ihtiyacınız olan dört adım:
- Çerçevenin dosyalarını indirin.
- Izgara sistemi hakkında bilgi edinin.
- E-postalarınız için bileşenleri kullanın.
- E-postanızı CSS kullanarak şekillendirin.
Foundation for Emails çerçevesinin nasıl kullanılacağı hakkında sorularınız mı var? Aşağıdaki yorumlar bölümünde sorun!
Faberr Ink / Shutterstock.com'dan makale küçük resmi.