E-posta Tasarımının Geleceği Bu

E-posta tasarımının geçmişte takılıp kalması hakkında çok şey söylendi. İlk projeleriyle uğraşan tasarımcılar, tabloların ve satır içi stillerin kullanımından yakınıyorlar. İlk kampanyalarını planlayan pazarlamacılar, toplu ve patlatma zihniyetinin ötesini düşünmeyi reddediyor.

Ancak birkaç gözü pek gönderici, e-posta tasarımını çevreleyen (bazen) modası geçmiş teknolojilerin ve zihniyetlerin onları geride bırakmasına izin vermeyi reddediyor. Abonelerini şaşırtmak, memnun etmek ve onlarla bağlantı kurmak için gelişmiş web tasarımında yaygın olarak bulunan teknikleri kullanarak e-posta tasarımının sınırlarını zorluyorlar.

Deneysel e-posta tasarımıyla ilgili zorluklara bir göz atalım ve favori fütüristik e-posta kampanyalarımızdan bazılarını özetleyelim.

2020'de E-posta Pazarlama Önde gelen 20 uzmanın görüşlerinin yanı sıra binlerce pazarlamacı ve tüketicinin anket sonuçlarıyla e-posta pazarlamasının geleceğine hazırlanın. Şimdi İndirin

E-posta tasarımının sınırlayıcı olması gerekmez

Çoğu insan e-posta pazarlamasını düşündüğünde, bir şeyler satmak isteyen şirketler tarafından gönderilen sıkıcı, sıkıcı haber bültenlerini düşünür. Ve bir e-posta kampanyası oluşturmakla görevlendirildiyseniz, muhtemelen bir yığın HTML tablosuna ve satır içi CSS'ye bakıyor ve her yerde sorunsuz çalışan bir e-postayı bir araya getirmeyi bitirene kadar dakikaları sayıyorsunuz.

E-posta tasarımının temellerinin biraz eski olduğu doğru olsa da, biraz yaratıcılık, planlama ve çok sayıda test yapıldığında onlarla yapabileceklerinizin gerçekten bir sınırı yoktur. Evet, e-posta tasarımcıları tablo tabanlı tasarımlar (teşekkürler, Outlook!), satır içi CSS kullanmalı ve bir hack denizinde yüzmelidir, ancak aşağıdaki örneklerin gösterdiği gibi, yine de gelen kutusundan bazı harika şeyler çekebilirsiniz.

Bunu kanıtlamak için, kuralları çiğneyen ve e-posta tasarımının sınırlarını zorlayan favori e-posta örneklerimizden bazılarını burada bulabilirsiniz.

Bir e-postada bir Carousel?

Bir süre önce, İngiltere perakendecisi B&Q, endüstriyi ateşe veren bir e-posta gönderdi.

Bu kampanyada, kullanıcılar fareyle düğmelerin üzerine gelebilir veya dokunabilir ve farklı içerik bölümlerinin e-postaya sorunsuz bir şekilde girip çıkmasını izleyebilir. Yaygın olarak atlıkarınca olarak adlandırılan bu teknik, web dünyasında yaygın olarak kullanılmaktadır, ancak e-posta kampanyaları için nadirdir. Bazıları, atlıkarıncaların etkisiz olduğundan ve yalnızca gösteriş için olduğundan şikayet edebilir, ancak B&Q kampanyası, e-posta abonelerini şaşırtmak için en son tekniklerin nasıl kullanılacağına harika bir örnektir.

E-posta, sihrini gerçekleştirmek için bazı akıllı hedefleme ile birlikte bir dizi CSS3 özelliği kullanır. Tasarımcılar, CSS geçişlerini, animasyonları, z-index'i ve taşma özelliğini kullanarak, yalnızca dokunulmayı bekleyen akıllı bir e-posta hazırladılar.

Daha da etkileyici olan şey, bu daha gelişmiş teknikleri desteklemeyen e-posta istemcileri için her şeyin güzel bir şekilde geri gelmesidir.

Çılgın renkler ve Star Wars

İngiltere e-posta ajansı Action Rocket, bir süredir e-posta tasarımında başı çekiyor. E-posta haberlerinin akıllıca başlıklı haftalık özeti E-posta Haftalık ile, sonunda müşteri kampanyalarına girebilecek bazı yaratıcı teknikleri test ediyorlar.

En sevdiğimiz örneklerden biri, “Bu e-posta ne renk?” Sorusunu soran e-postalarıdır.

CSS ana kare animasyonlarını kullanarak, büyüleyici, halüsinasyon etkisi yaratan başlık bölümünün arka plan renklerini canlandırıyorlar. İlk başta göze batmasa da, bir abone animasyonu bir kez anladığında geri dönemez.

Action Rocket'tan bir başka harika örnek, herkesin en sevdiği bilim kurgu filminin ikonik açılış taramasını yeniden yaratmak için CSS dönüşümleriyle birlikte deneysel -webkit-perspektif özelliğini kullanan Star Wars'tan ilham alan son özetleridir.

Bir e-postadaki Infographics?

E-posta ajansı görüntüleme bloğu sürekli olarak harika e-postalar gönderirken, gerçekten dikkatimizi çeken en son infografik e-postaları oldu.

E-posta Haftalık örneğindeki arka plan renklerine benzer şekilde, görüntüleme bloğu, zaten iyi tasarlanmış bir kampanyaya biraz hayat eklemek için CSS ana kare animasyonlarını kullanır. Gerçekten harika olan şey, e-postanın güzel bir şekilde yanıt vermesi ve her bölümü mobil cihazlarda güzel bir şekilde istiflemesidir. Duyarlı tasarım ve hareketli simgelerin tümü, mobil e-posta kullanımıyla ilgili bazı harika verileri geliştirmeye hizmet eder.

Bir e-postada bunun gibi çok fazla bilgi grafiği görmedik, bu da onu daha etkileyici ve çığır açan kılıyor. Daha fazla bilgi grafiği örneği görmek isteriz, bu yüzden onlara ayrılmış bir Topluluk Yarışması düzenliyoruz!

HTML5 Video ve Etkileşimli Turlar

Vaaz ettiğimiz şeyleri uygulamayı seviyoruz, bu yüzden ağırlıklı olarak masaüstü bir kitleye sahip olmamıza rağmen e-postalarımızı güzel ve duyarlı hale getiriyoruz. Geçen yılki E-posta Tasarım Konferansı'ndan (bu yaz yine ev sahipliği yapıyoruz…) HTML5 video arka planımız gibi kendi son teknoloji e-posta kampanyalarımızdan bazılarının arkasındaki sebep de budur.

Tasarımcımız Kevin, başka türlü basit bir tasarımı aşamalı olarak geliştirmeyi hedefleyen bazı gelişmiş e-posta istemcileri kullandı. Tam olarak nasıl başardığını merak ediyorsanız, süreci detaylandıran bir blog yazısı yazdı.

Ve e-posta kodu düzenleyicimiz Builder'ın lansmanını kutlamak için, doğrudan bir e-postada etkileşimli bir tur oluşturarak işleri daha da ileri götürdü.

CSS animasyonlarından, onay kutusu hack'inden ve CSS içerik özelliğinin liberal kullanımından yararlanarak, Builder'ın bazı özelliklerini doğrudan gelen kutusunda gösterir ve abonelere oturum açmaya bile gerek kalmadan ürünün tadına bakmalarını sağlar. Çok şey var. Onu çalıştıran kod, ancak doğrudan Builder'da kontrol edebilirsiniz (bir tür e-posta Başlangıç ​​​​gibi).

Daha Lezzetli E-posta Menüleri

Dönen e-posta gibi, tasarımcı Jerry Martinez de mobil aboneler için bir hamburger menüsü uygulamak için web'den ilham aldı.

Gezinme öğeleri, özellikle mobil cihazlarda e-posta tasarımcıları için her zaman bir hiledir. İstiflendiğinde önemli miktarda yer kaplama eğiliminde olduklarından, bir kampanyadaki ana harekete geçirici mesajdan dikkati dağıtabilirler. Sorunu çözmek için Jerry, mobil kullanıcıların gezinme öğelerini seçerek görüntülemesine olanak tanıyan zarif bir hamburger menüsü hazırladı.

Jerry'nin çözümünden o kadar etkilendik ki, insanları Topluluk Yarışmalarımızdan birinde diğer yaratıcı gezinme kalıplarını sergilemeye davet ettik…

Topluluk Yarışmaları: Gerçekten Son Teknoloji

Topluluk Yarışmalarımız, insanları çılgın fikirler bulmaya gerçekten zorladığımız yerdir. Her ay onlara bir tema veriyoruz ve becerilerini geliştirmelerine izin veriyoruz. ALT metninin yaratıcı kullanımlarını inceleyen ilk yarışmamız, bir e-postadaki Space Invaders gibi bazı şaşırtıcı sonuçlar verdi:

İkinci yarışmamız için, insanlardan ilginç navigasyon kalıpları bulduk. Remi Parmentier'in aşırı duygusal navigasyon konsepti gibi bazı sonuçlar bizi şaşırttı:

Yeni bir şey mi deniyorsun?

E-postada yeni şeyler denemek heyecan verici olsa da, kampanyalarınızı kapsamlı bir şekilde test etmezseniz birçok şey ters gidebilir. E-posta Önizlemeleri, masaüstü, web postası ve mobil e-posta istemcilerinde herhangi bir tekniği test etmeyi kolaylaştırır.

Litmus'u ücretsiz deneyin →