2023 için Tasarımlar, Şablonlar ve Örnekler

Telefonunuzda hiç bir e-postayı açtığınızda görsel kalitesi düşük, metin çok küçük ve harekete geçirici mesaj düğmesi bozuk oldu mu? Bunların hepsi statik e-posta tasarımının kusurlarıdır. Duyarlı e-postalar yanıttır.

ABD'de ikamet edenlerin yarısından fazlasının telefonlarında e-posta pazarlama mesajlarına baktığı göz önüne alındığında, e-postalarınızı cep telefonu ve tablet dahil olmak üzere birden çok ekran için optimize etmeniz gerekiyor.

Duyarlı e-postalar, farklı ekran boyutlarında esnekliği korumak için akıcı görüntüler ve tablolar kullanır. Sonuç olarak, her kullanıcının optimum deneyimi için tasarlanmış içerik sunarlar.

Duyarlı e-postalar, CSS medya sorguları kullanılarak tasarlanabilse de, bir tane oluşturmak için herhangi bir kodlama deneyimine ihtiyacınız yoktur. Duyarlı bir e-posta oluşturmak yalnızca kodlayıcıların işi değildir.

Burada, yanıt veren e-postaların temelleri hakkında hızlı bir eğitimin yanı sıra bazı en iyi uygulamaları ve kullanıma hazır şablonları sıraladık.

Abonelerin tercih ettikleri cihazda okumalarına izin verdiği için duyarlı e-postalara da daha erişilebilir.

Örnek olarak, aldığım bir promosyon e-postasının masaüstünde nasıl göründüğünü burada görebilirsiniz.

Bu e-posta harika görüntülere, alışverişe uygun simgelere sahip ve güzel bir şekilde biçimlendirilmiş. E-postayı mobilden açtığımda karşıma bu çıkıyor.

Hala aynı bilgilere, aynı fotoğraflara ve alışveriş yapılabilir simgelere sahibim. Göze çarpan tek fark, e-posta biçimidir. Mobil deneyime daha iyi uyması için farklıdır.

Şimdi, aynı masaüstü düzeninin mobile uygulanıp uygulanmadığını hayal edin. Resimlerden veya metinlerden herhangi birini görmek için telefonumu yakınlaştırmam gerekirdi. Bunu yapmak yerine aboneliği iptal ederdim.

Duyarlı e-posta ile, kullanıcı deneyiminin yanı sıra kampanya yatırım getirisi de geliştirilebilir.

Bir düşünün: Optimize edilmiş bir mobil e-posta tasarımından memnun olan aboneler, erişilebilir olacağını ve iyi görüneceğini bildikleri için kendilerini daha fazla pazarlama mesajı açarken bulacaklar.

Dolayısıyla, duyarlı e-postalarla ilgili tüm bu konuşmalardan sonra, kendinizinkini oluşturmak için can atıyor olmalısınız. Ardından, bazı duyarlı e-posta örneklerine ve şablonlarına bakacağız.

Duyarlı E-posta Tasarımları

Duyarlı e-postalar tasarlamanın birçok yolu vardır.

Kodlama bilginiz varsa, farklı ekran boyutları için farklı e-posta şablonları kodlayabilirsiniz. Ayrıca tüm ekran boyutlarında çalışan önceden hazırlanmış bir şablon da kullanabilirsiniz.

Yaklaşımınız ne olursa olsun, e-posta pazarlama yazılımınıza ihtiyacınız olacak. Burada bir e-posta tasarlayabilir ve ardından bu e-postayı birkaç cihazda önizleyebilirsiniz. Çoğu e-posta yazılımı, tasarımın birden fazla cihazda nasıl görüneceğini size gösterecektir.

Aşağıdaki video, bir şablonla bir e-postayı nasıl tasarlayacağınız konusunda size yol gösterecektir. Videoda kullanıcı Klaviyo'da ama kavramlar hangi yazılımı kullanırsanız kullanın doğrudur.

Duyarlı E-posta Kodlama

E-postanızın öğelerini duyarlı hale getirmek istiyorsanız, medya sorgularıyla çalışmanız gerekir.

Medya sorguları bir CSS tekniğidir. Yalnızca belirli koşullar doğruysa görünen stil kuralları belirlemenize olanak tanır. Örneğin, bir ekran 600 piksel genişliğinde veya daha küçük olduğunda hangi yazı tipi boyutlarının ve görüntü boyutlarının kullanılacağını belirleyebilirsiniz.

E-posta ile çalışırken tasarımınızın masaüstü bilgisayarlarda, tabletlerde ve mobil cihazlarda nasıl görünmesi gerektiğini belirtmek için medya sorgularını kullanabilirsiniz. Bunu yapmak için aşağıdakileri belirtmeniz gerekir:

• “@media” seçicisini kullanın ve “ekran”ı belirtin. Bu, kodun ekranlı cihazları etkileyeceğini gösterir.
• "Maksimum genişliğinizi" piksel cinsinden ayarlayın. Bu, kodun etkili olacağı ekran boyutunu belirtir.
• Belirli bir ekranın izlemesini istediğiniz CSS stil kılavuzlarını belirtin.

Aşağıdaki koda bir göz atalım.

@media ekranı ve (maksimum genişlik: 600 piksel)

vücut

yazı tipi boyutu: 30px;

Bir e-postanın CSS'sine uygulandığında, gövde metni 600 piksel genişliğinde veya daha küçük ekranlar için 30 piksel boyutunda görünür.

Bu yaklaşım, e-posta yanıtınızın belirli öğelerini oluşturmanıza yardımcı olsa da, mümkünse bir şablon kullanmanızı öneririz.

Kapsamlı bir web tasarımı deneyiminiz yoksa, birkaç medya ekranını kodlamak zaman alıcı ve sinir bozucu olabilir.

Teknik bilginiz yoksa veya daha kolay bir yöntem istiyorsanız, yerleşik duyarlı şablonlara sahip bir e-posta pazarlama aracı kullanmayı deneyin. Örneğin, HubSpot'un ücretsiz e-posta yazılımı, varsayılan olarak duyarlı olan sürükle ve bırak şablonları sağlar.

Duyarlı E-posta Tasarım Örnekleri

Örnekleri keşfetme zamanı. En iyi e-posta pazarlama kampanyalarından bazılarının ele alındığı bu videoyla başlayın.

Ardından, favori yanıt veren e-posta tasarımlarımızdan bazılarını okuyabilirsiniz.

1. TOMS Bülteni

TOMS'un haber bülteninde, masaüstü sürüm ile mobil sürüm arasındaki temel fark, görüntülü reklamların yığılması ve boyutudur.

Duyarlı tasarımla, mobil sürümde karmaşık gezinme yoktur ve görüntü ekrana güzel bir şekilde sığar. CTA'lar da daha iyi görünürlük için taşındı.

Görüntü Kaynağı

2. Metropolitan Sanat Müzesi

TOMS haber bülteninde görüldüğü gibi, duyarlı e-posta tasarımı, içeriğin görsel olarak çekici ve sindirilmesi kolay bir şekilde istiflenmesine yardımcı olur. MET'den alınan bu örnek farklı değil.

Mobil cihazda menünün konumu değişir. Farklı hediyelik eşya dükkanı öğelerine bağlantılar sayfanın alt kısmında bulunur. Bu, mevcut hediyelik eşyaların görüntülerini önde ve ortada tutar.

Görüntü Kaynağı

3. Dut

Yine responsive bir e-posta tasarımı ile oyunun adı istifleniyor. Birinin içeriği görüntülediği cihaz ne kadar küçük olursa olsun, her şey içeriğin okunmasını kolay ve görsel olarak çekici kılmakla ilgilidir.

Değişen fotoğraflar ve metin, masaüstü için mantıklıyken, mobil için fotoğrafların ilgili metin üzerinde tutarlı bir şekilde istiflenmesi ve bölme çizgileri, izleyicinin kafasının karışmamasını sağlar.

Görüntü Kaynağı

Duyarlı E-posta Şablonları

Duyarlı bir şablon, herhangi bir ekran boyutuna otomatik olarak uyum sağlar, böylece e-posta ister akıllı telefonda, ister tablette veya bilgisayarda açılsın, harika görünür ve eksiksiz işlevselliğe sahip olur.

Daha az kodlama geçmişine sahip olanlar veya tasarımla daha az zaman geçirmek isteyenler için tavsiyem bir şablon kullanmaktır. E-postanızın profesyonel görünmesini ve yanıt vermesini sağlamanın kesin bir yoludur.

Duyarlı e-posta şablonları, bir seçimden seçilebilecek bir e-postayı tasarlarken size zaman kazandırır. Örneğin, HubSpot'un e-posta pazarlama aracı, yalnızca duyarlı e-postalar için 60'tan fazla şablon içerir.

Şimdi bazı şablon seçeneklerine bir göz atalım.

1. Hub Noktası

HubSpot, birkaç ücretsiz duyarlı e-posta şablonu sunar . HubSpot müşterisi veya ücretsiz kullanıcıysanız, bunları indirip kendiniz deneyebilirsiniz.

Örneğin, yanıt veren e-posta şablonlarından biri burada; şablonu birden fazla cihazda önizleyebileceğiniz kenar çubuğuna dikkat edin.

Görüntü Kaynağı

Cihaz türleri arasında gezinmek ve e-postanızın buna göre biçimlendirildiğinden emin olmak, tasarım sürecindeki son adımlardan biridir ve HubSpot gibi bir yazılım kullanırken yanıt veren e-posta sürecindeki tek adımdır.

Örneğin önizleme için akıllı telefon cihazına tıklayarak, içeriğinizin - yazı tipi boyutu ve görüntü çözünürlüğü dahil - mobil cihazlar için hoş bir şekilde biçimlendirilip biçimlendirilmediğini görebilirsiniz.

2. Kampanya İzleme

CampaignMonitor tarafından sunulan şablonlar, yanıt veren e-posta sonuçlarının önizleme aracında gösterildiği diğer birçok şablona benzer. Örneğin, işte bir CampaignMonitor şablonu:

Görüntü Kaynağı

Tasarım öğelerini kolayca karşılaştırabilmeniz için farklı cihazları yan yana görebilirsiniz. Tüm aboneler için en iyi deneyimi oluşturmak için küçük düzenlemeler yapılabilir.

CampaignMonitor şablonları genellikle ücretsizdir, bu nedenle minimum bütçeniz varsa iyi bir seçimdir.

3. Çizgi Film

Stripo, 300'den fazla ücretsiz HTML e-posta şablonu sunar. Şablonları sektöre, mevsime, türe ve özelliğe göre seçebilirsiniz. Örneğin, işte iş sektörü bölümünden bir şablon.

Görüntü Kaynağı

Sağlam bir yanıt veren e-posta şablonunun iyi bir işareti, Stripo'nun önizleme modunda gösterildiği gibi önizlemeyi hem masaüstü hem de akıllı telefon varyasyonlarında görme seçeneğidir.

Telefonların teknik özelliklerine uyması için mobil önizlemede tek sütun düzeninin nasıl benimsendiğine dikkat edin.

Stripo, hedeflerinize uygun bir şablon bulmak için hızla ziyaret edebileceğiniz bir web sitesidir. Duyarlı e-postaları denemek veya tasarım ilhamı almak istiyorsanız Stripo'yu düşünebilirsiniz.

4. Sürekli Temas

Constant Contact, kaydolduktan sonra erişilebilen 200'den fazla profesyonel e-posta şablonu sunar. Aşağıdaki örneğe baktığınızda, platformun duyarlı e-posta şablonları sunduğunu görebilirsiniz.

Görüntü Kaynağı

Constant Contact'ın şablonlarında sürükle ve bırak düzenleme, anket ekleme seçeneği, e-ticaret işlevleri ve bir fotoğraf kitaplığı aracı bulunur. Bu özelliklerin tümü, abonelerin görmek istediği e-postaları oluşturmaya yardımcı olabilir.

Belirli araçlar, yukarıdaki örnekte olduğu gibi tutarlılığı korumanıza izin verdiğinden, Constant Contact gibi bir hizmet kullanmak yararlıdır. E-postanın duyarlı doğasının tasarım öğelerinin hiçbirinden taviz vermediğini söyleyebilirsiniz.

Artık bazı şablon seçeneklerine göz attığımıza göre, en iyi uygulamalarla birlikte duyarlı e-postaları çalıştırmanın başka bir yoluna bakalım.

Duyarlı E-posta En İyi Uygulamaları

Duyarlı e-postanızın tam tasarımı, kampanyanızın hedeflerine göre değişir. Ancak bu ipuçları, okuyucularınız için en iyi deneyimi sağlamanıza yardımcı olabilir.

• Duyarlı e-postanızın ölçeklenebilir ve esnek olduğundan emin olun. Mesajınızın duyarlı olduğundan emin olmak için e-postayı farklı cihazlarda önizleyin.
• Kendi e-postanızı kodluyorsanız, CSS medya sorgularının sabit alanları değişken alanlara değiştirdiğini unutmayın.
• Daha küçük ekranlarda okunması kolay olacak daha büyük yazı tipleri kullanın.
• Tek sütunlu düzenlerin ölçeklenmesi daha kolaydır. Basit düzenler web sayfalarınız için iyiyse, bunları kesinlikle yanıt veren e-postalar için düşünün.

"Programla"ya basmadan önce e-postalarınızı test ettiğinizden emin olun. Tasarımları ancak birden fazla ekran çözünürlüğünde nasıl göründüklerini gördüğünüzde sonlandırın. Pek çok kişi, e-postalara yalnızca kolaylık sağlamak için mobil olarak erişiyor.

E-postanızın etkililiğini kontrol etmenin basit bir yolu, onu kendinize veya ekibinize bir test olarak göndermektir; gelen kutunuzdaki diğer yanıt veren pazarlama e-postalarıyla karşılaştırılabilir mi? Öyleyse, göndermeye hazırsınız.

Duyarlı E-postalara Başlarken

Duyarlı e-postalar, müşterileriniz için daha iyi, daha erişilebilir bir deneyim yaratır. Geçişi yeni yapıyorsanız, önceden hazırlanmış duyarlı e-posta şablonlarını keşfederek başlayın. Bunlar size tasarım esnekliği sağlarken size zaman kazandıracaktır.

Ardından, ikinci bir görüş alın. Bir iş arkadaşınızdan masaüstünde ve telefonunda bir e-posta açmasını isteyin. Her iki deneyim hakkında da dürüst geri bildirimlerini alabilirsiniz.

Son olarak, denemekten korkmayın. En çok yankı uyandıran bir düzen bulana kadar farklı duyarlı tasarımları A/B testi yapabilirsiniz.

Yakında yanıt veren e-postalar gönderecek ve açık oranlarınızı artıracaksınız.