Etkileşimli E-posta için Geri Dönüşler: Etkileşim için Sınırlı Destekle Nasıl Mücadele Edilir

Üst üste üçüncü yıl için, etkileşimli e-posta deneyimleri en sıcak e-posta tasarım trendlerinden biri olarak seçildi . Peki neden gelen kutularımızda daha fazla etkileşimli e-posta görmüyoruz? Birçok marka için sınırlı gelen kutusu sağlayıcı desteği, daha fazla etkileşimli kampanya göndermemelerinin ana nedenidir.

Yerinde bir geri dönüşünüz varsa, sınırlı destekten korkmanıza gerek yok. Desteklendikleri yerde ilgi çekici, etkileşimli e-postalar oluşturmanıza yardımcı olurken diğer tüm gelen kutularında işlevsel ve güzel bir deneyimi garanti etmeye devam eden birçok yöntem vardır.

Yedekler Neden Önemlidir?

HTML ve CSS desteği, e-posta istemcilerine göre değişir ve e-postada etkileşimi güçlendirmek için kullanabileceğiniz HTML ve CSS öğelerinin çoğu her yerde desteklenmeyebilir.

Desteklenmediği durumları hesaba katmazsanız, e-postanız bozuk görünebilir. Güzel bir etkileşimli resim karuselinin şu örneğine bakalım:

Etkileşimli atlıkarınca, güçlü görüntüleri ile Apple Mail'de harika görünüyor ve abonelerin okları veya onay kutularını kullanarak resimler arasında gezinmesine olanak tanıyor. Ancak, aynı e-postanın Yahoo! Yerinde bir geri dönüş yoksa postalayın:

Yedekler olmadan, e-posta bozuk görünür ve büyük olasılıkla çok fazla tıklama görmez. Bunun olmasını istemiyoruz! Öyleyse, kurşun geçirmez geri dönüşlerle etkileşimli e-postaların her yerde çalışmasını nasıl sağlayabileceğimize bakalım.

Gizle ve göster çerçevesinin gücünü kullanma

Sakla ve göster çerçevesi, e-postada etkileşim ve geri dönüşler ayarlamak için en temel ve yaygın taktiktir. Basit olsa da, hala çok güçlü.

Çerçeve tam olarak adından da anlaşılacağı gibi yapar: Onu desteklemeyen istemciler için etkileşimi gizler ve bunun yerine bir geri dönüş gösterir.

HTML'nizde, biri etkileşimli içeriğiniz, diğeri statik yedeğiniz için olmak üzere tamamen ayrı iki bölüm kurarsınız. Bu şekilde, yalnızca bu iki farklı içerik türünü belirlemekle kalmaz, aynı zamanda e-postanızın her sürümü için farklı bağlantılar ve farklı izlemeler ayarlayarak etkileşimli ve statik sürümleri izlemeyi ve karşılaştırmayı mümkün kılar. Bunu tek bir e-postada A/B testi olarak düşünün .

Bu basitleştirilmiş örnekle (veya CodePen'e göz atarak) bunu e-posta kodunuzda nasıl gerçekleştirdiğinize bakalım:

 <!-- start INTERACTIVE_SECTION --> <!--[if (!mso)&(gte IE 10)]> <! -- --> <div > <div class=" content " > This is where the Interactive Content goes. </div> </div> <!--<![endif]--> <!-- end INTERACTIVE_SECTION --> <!-- start FALLBACK_SECTION --> <div > This is where the Fallback Content goes. </div> <!-- end FALLBACK_SECTION -->

İnteraktif bölüm etkileşim desteklemeyen e-posta istemcileri gelen gizlemek içeriğine koşullu ifadeler kullanır. Bu, etkileşimi desteklemeyen Outlook sürümlerinden aralarındaki her şeyi gizleyecek MSO koşullu ifadelerinin yanı sıra etkileşimli olmayan diğer e-posta istemcilerinin içeriğini görsel olarak gizleyen satır içi CSS'yi içerir (kod yeşildir). Ardından, koyu kırmızıyla vurgulanan kod, etkileşimli bölümün kodunu geçersiz kılan ve bunun yerine yedek bölümü gizlemeye zorlayan stilleri çeker .

İçerik, görünür olmasa bile yüklendiği için "görsel olarak" seslenmek istedik. Etkileşimli bölümde çekebileceğiniz tüm resimler ve diğer dosyalar, geri dönüş düzeninin yükleme süresini etkileyeceğinden, bunu not etmek önemlidir. Geçici bir çözüm olarak, her iki düzen için de mümkün olduğunca aynı görüntülerden yararlanmayı deneyin.

İçerik için, geri dönüş bölümünü herhangi bir geleneksel e-posta koduyla doldurabilir veya bu <div> kodlarını sahip olabileceğiniz herhangi bir mevcut statik e-posta kodunun etrafına sarmanız yeterlidir . Etkileşimli bölümü için, uygulanmasında konum ilgilenen CSS okunur teknikleri size her türlü uğraşmak çekinmeyin. Yalnızca CSS'ye özel atlıkarıncaları, etkin noktaları, testleri, kaydırma efektlerini vb. aramak harika bir ilham kaynağı olabilir!

Harici bağlantılı stil sayfalarını kullanma

Bu arada, koyu kırmızı kodda atıfta bulunulan CSS, aşağıdaki gibi kod içeren harici olarak bağlantılı bir CSS dosyasında barındırılır:

 #interactive { display: block !important; max-height: inherit !important; overflow: visible !important; } #staticfallback { display: none !important; } #interactive .content { Font-family: Arial, Helvetica, sans-serif; font-size: 20px; line-height: 30px; display: block; color:#ffffff; }

#İnteractive ve #staticfallback stilleri tümüne sahip önemli!; HTML'nizdeki satır içi CSS'yi geçersiz kılmalarına izin veren kurallar. Bunlar, düzenlerinizi gizleyen ve gösteren temel stil bildirimleridir. #İnteractive .content beyanı interaktif düzenleri genellikle daha işe bu örnekte daha gerektirecektir olsa, aslında stil etkileşimli içerik için kullandığımız kodunu temsil eder. Örneğin, yalnızca etkileşimli düzende görünen bir CTA'ya stil vermek istiyorsanız, #interactive .cta (veya seçici etkileşimli bölüme özel olduğu sürece .interactive-cta) gibi yeni bir bildirim oluşturur ve eklersiniz. stillerinizi CSS dosyasına ekleyin.

Ardından , bu basitleştirilmiş örnekte olduğu gibi, <head> etiketinizin en altındaki bu harici stil sayfasına başvuran HTML'nize bir bağlantı etiketi eklersiniz .

 <head> <style type="text/css"> /* Boilerplate Styles */ /* Responsive Media Query Styles */ /* Progressive Enhancement Styles */ </style> <!-- External CSS for Interactive Version --> <link rel="stylesheet" type="text/css" href=" http://your-url.com/hideshow.css "> </head>

CSS özgüllüğünde uzmanlaşma

Anlayabileceğiniz gibi, çok fazla CSS özgüllüğü hilesi var. CSS'nin kendisi, belirlilik söz konusu olduğunda CSS'nizin basamaklandırdığı sırayı ifade eden " Basamaklı Stil Sayfaları" anlamına gelir. Ve özgüllük, hangi kuralın kazanacağını belirler. Bu nedenle, <link> etiketinin tüm gömülü CSS'nizden sonra yerleştirilmesi, harici CSS dosyasındaki tüm stillerin kendisinden önce gelen stilleri geçersiz kılmasına izin vermek için çok önemlidir.

Öyleyse neden gömülü veya satır içi CSS yerine harici olarak bağlantılı bir CSS dosyası? Çünkü bir e-posta istemcisi bu özelliği destekliyorsa, büyük olasılıkla harici CSS dosyasında bulunan tüm stilleri destekler. Etkileşimli CSS'nizi bu şekilde ayrı tutmak, etkileşimli stillerinizin etkileşimli olmayan kodunuzla çakışma olasılığını azalttığınız anlamına gelir, böylece istenmeyen sonuçlarla karşılaşmazsınız.

Pastanın üzerine krema: Aşamalı geliştirmelerle sınırlı etkileşimli destek için optimize edin

İki ana sürümünüzü (etkileşimli sürüm ve statik geri dönüş) ayarladıktan sonra, devam edebilir ve bazı temel etkileşimli öğelerle statik geri dönüş sürümünüzü geliştirebilirsiniz. Logo ve CTA için fareyle üzerine gelme efektleri kullanılarak daha ilgi çekici hale getirilen yukarıdaki e-postanın statik sürümü:

Burada bu basit ama güçlü etkisi oluşturmak için nasıl öğrenebilirsiniz.

BUNUN GİBİ DAHA FAZLA KAYNAK İSTER MİSİNİZ?

En iyi e-posta pazarlama ve tasarım ipuçlarını, istatistikleri ve kaynakları doğrudan gelen kutunuza alın ve e-posta inovasyonunun ön saflarında kalın.

Bilgide kalın →