Kesinlikle İşe Yarayan Güzel Kurşun Geçirmez E-posta Düğmeleri Nasıl Oluşturulur

Yayınlanan: 2021-06-11

Web sayfanız mağazanız ve e-postanız mağaza vitrininizse, harekete geçirici mesaj (CTA) düğmeniz, insanları içeri çeken muhteşem vitrininizdir. Veya başka bir şey. Metaforum orada dağılmış olabilir.

Söylemeye gerek yok, CTA'nız e-postanızın en önemli parçalarından biridir. Ve bulması zor, kullanımı zor veya herhangi bir şekilde bozuksa, aboneleriniz kaçacaktır. (Kaçmak!)

Yine de endişelenme. CTA düğmenizin abonelerinizi uzaklaştıran kana susamış bir tavşan olmadığından emin olmak için buradayız. Bu blog yazısında, aboneleriniz için kurşun geçirmez olduklarından emin olmak için düğme oluşturma yöntemlerini biraz daha derinlemesine inceleyeceğiz.

Öğrenmeye hazır olun:

Kurşun geçirmez düğme nedir?
Düğme tasarımında en iyi uygulamalar
5 kodlama tekniği
- Koşullu doldurma düğmesi
- VML düğmesi
- dolgu düğmesi
- kenarlık düğmesi
- Dolgu + kenarlık düğmesi
Gelişmiş geliştirmeler
E-posta istemci desteği

Kurşun geçirmez düğme nedir?

Kurşun geçirmez düğmeler, resimler yerine kodla oluşturulmuş eylem çağrısı düğmeleridir. GIF'lerinizi, PNG'lerinizi ve JPEG'lerinizi HTML ve CSS için güvenilir bir şekilde değiştirebilirsiniz. Yalnızca kod kullanıldığında düğme, resimler kapalıyken bile tüm e-posta istemcilerinde görüntülenecek ve bu nedenle onları "kurşun geçirmez" hale getirecektir.

Ayrıca, HTML şablonunuzu düzenleyerek düğmelerinizin içeriğini ve stilini güncelleyebilirsiniz. Artık Photoshop gibi bir tasarım aracında düğmeler oluşturmak, bunları bir sunucuya yüklemek ve HTML'nizi güncellemek için zaman harcamanıza gerek yok.

resimleri kullanma

Bunu bir kez söyleyeceğim ve bir daha asla söylemem. Tek gerçek kurşun geçirmez düğme bir görüntüdür.

*soluk soluğa*

Biliyorum. Ancak bu, düğmenizin e-posta istemcilerinin %100'ünde tamamen aynı görünmesini garanti etmenin gerçekten tek yolu. Çünkü e-postalarımızın farklı e-posta istemcileri, uygulamaları ve cihazları arasında ne kadar tutarsız görünebileceğini hepimiz biliyoruz.

Buna rağmen, asla görüntü tabanlı bir düğme kullanmamalısınız. Görüntü engelleme nedeniyle görüntüler kapatıldığında görüntü düğmeleri kaybolur ve ekran okuyucu kullanan aboneleriniz bunlara erişemez (bir saniye içinde daha fazlası).

resimler açık ve kapalı olan resim e-posta düğmesi — *Görüntüler devre dışı bırakıldığında görüntü düğmesi etkisini kaybediyor*

CTA'larınız resimlerde yer alıyorsa, abonelerin mesajınızı kaçırıyor olma ihtimali yüksektir. Daha da kötüsü, kampanyalarınızla etkileşime girmiyorlar.

Görüntü tabanlı CTA düğmelerinin kullanılması, e-postanızın erişilebilirliğini de etkiler. CTA'nın içeriğini bir görüntünün içinde saklıyorsanız, ekran okuyucular bunları okuyamayabilir ve bu da görme engelli aboneler için e-postanıza erişilemez hale gelebilir.

Artık görüntü düğmeleri hakkında daha fazla bilgi sahibi olduğunuza göre, ilk ifademin yalnızca çoğunlukla doğru olduğunu anlamalısınız. Görüntü tabanlı düğmeler, görüntülerin açık olduğu her e-posta istemcisinde ve yalnızca abone bir ekran okuyucu kullanmıyorsa aynı görünür. Yani gerçekten kurşun geçirmezler mi? Hayır değiller. Ve yukarıda bahsedilen her iki durumu da standart e-posta takibi kullanarak izlemek imkansız olduğundan, abonelerinizin yüzde kaçının bu kötü deneyimi yaşadığını bilmenizin bir yolu yok.

Bu nedenle, görsel CTA'yı bir kenara bırakın ve abonelerinizin hangi cihazı kullanıyor olurlarsa olsunlar CTA'larınızı görüp kullanabileceğinden emin olun.

Güzel bir düğme tasarımının yapımları

Düğmeler sadece koddan daha fazlasıdır. Düğmelerinizi kullanılabilir ve göz alıcı hale getiren birkaç faktör vardır.

Düğme şekli

Düğmelerinizin düğme gibi görünmesini sağlayın.

Hepimiz eğlenceli ve benzersiz düğmeler yapmayı severiz, ancak genellikle beklenenden çok uzaklaşırsanız, aboneler amacı kaçıracak ve harekete geçmeyecektir. Evet, kelimeler bir şeyin tıklanabilir olduğunu söyleyebilir, ancak dedikleri gibi, "Bir resim bin kelimeye bedeldir."

standart düğme şekillerine örnekler

Özellikle tarama yapıyorlarsa, insanların dikkatini çekmenizi sağlamak için standart düğme şekillerini kullanın. Standart şekiller şunları içerir:

Yuvarlatılmış köşeler
Kare köşeler
hap şeklinde
hayalet düğmesi
gölgeli düğme

Bu, düğmelerle eğlenceli şeyler yapamayacağınız anlamına gelmez. Magic Spoon, onlara daha da fazla dikkat çekmek için düğmelerine bazı eğlenceli animasyonlu GIF'ler ekledi.

animasyonlu GIF'lere sahip düğmelerin sihirli kaşık e-posta örneği

Düğme boyutu

Yıllık e-posta istemcisi pazar payı verilerimize göre, abonelerin %40'ından fazlasının e-postalarını mobil cihazlarda açmasıyla, düğmenizin tüm cihazlarda çalışacak şekilde tasarlanmış olması önemlidir.

Düğmeniz çok küçükse, mobil cihazlarda tıklamanız zor olacaktır. Çok büyükse, bir düğmeye daha az ve daha çok bir tasarım öğesine benziyor.

Dokunmatik ekranlardaki buton boyutları üzerine birkaç çalışma yapıldı, ancak araştırma en yaygın olarak ana ölçüm birimi olarak milimetre ile yapılıyor gibi görünüyor. Hangisi idealden daha az. Ancak bazıları iyi bir milimetre-piksel oranı elde etti.

Mobil cihazlarda kolay tıklama için ideal buton boyutu 42px ile 72px (yaklaşık 11-19mm) arasında olacak şekilde çevrilmiştir. Bu, web'de görülen ortalama düğme yüksekliği gibi görünüyor ve burada Litmus'ta kullandığımız düğmeler de bu aralığa giriyor.

30 mm'ye kadar çıkan bir çalışmada, dokun ve tıkla doğruluğu 20 mm'de sabitlendi, bu nedenle düğme boyutunun artık o kadar büyük bir fark yaratmadığı bir nokta var.

Düğme alanı

Düğmelerinizin çevresinde de yeterince boşluk olduğundan emin olun, böylece öne çıkarlar. Bu, abonelerinizin doğru düğmeyi tıklamasını da kolaylaştırır.

Bunun en iyi örneği, bir paragrafta çok sayıda bağlantı içeren bir e-posta olacaktır. Bağlantılarınızı birbirine yakın bir şekilde gruplandırırsanız, aboneleriniz, özellikle mobilde, tıklamalarını istediğiniz şeye asla doğru bir şekilde tıklamayacaktır.

Görsel geri bildirim

Her e-posta istemcisi etkileşimli öğeleri desteklemez, ancak mümkün olduğunda görsel geri bildirim sağlamak için biraz etkileşim eklemek, abonelerin etkileşimlerinin kaydedildiğini bilmelerine yardımcı olur.

Bu onlar için bir şeyin tıklanabilir olduğunun fazladan bir işaretidir.

Bu, renk değişikliği kadar basit veya gitmek istediğiniz kadar karmaşık olabilir. (Bazen her şeyi ortaya koymanın eğlenceli olduğunu biliyoruz, bu yüzden geri adım atmayın - ama ne zaman dizginleneceğinizi bilin.)

Kendi standart butonumuz bir renk değişimine ve bir basmalı buton efektine sahiptir.

basma düğmesi efektinin e-posta örneği

Ancak biz de yeni bir şey denedik ve Ocak bülteni düğmelerimizle çok eğlendik. "Zorlamak" için de eğlenceli olan harika bir tasarım öğesi.

turnusol e-postası bir düğmeyle ilgili görsel geri bildirim örneği

Düğme metni

Gerçek CTA kopyanızı veya etiketinizi eyleme geçirilebilir ve konuya uygun tutun. Abonelere ne yapmalarını istediğinizi olabildiğince açık ve net bir şekilde söyleyin.

1 ila 5 kelime genellikle yeterlidir.

Bu uzunluk ayrıca e-postanızın taranabilir olmasını sağlar. Ya daha söyleyecekleriniz varsa? Düğmenin üzerine bir başlığa ekleyin. CTA'ları düzenli olarak 1 ila 5 kelime arasında tutarak, üzerinden geçtiğiniz nadir anları çok daha anlamlı bir şekilde öne çıkarır.

Kurşun geçirmez bir düğmeyi kodlamanın 5 yolu

300.000'den fazla potansiyel e-posta oluşturma ile, her yerde çalışan tek bedenli bir düğme yapamamanız gerçekten şaşırtıcı mı?

Yapabileceğiniz şey, hemen hemen her yerde çalışan bir düğme yapmak. Ve ihtiyaçlarınıza bağlı olarak bu düğmeleri oluşturmak için birkaç farklı yöntem vardır. Abonelerinizi desteklemek için hangisinin en iyi sonucu verdiğini bulmak için bunlara bir göz atın.

1. Koşullu doldurma düğmesi

Bu koşullu doldurma düğmesi için Mark Robbins'e teşekkürler. Litmus'ta kullandığımız bu.

koşullu düğme

Bu düğme, Outlook dışındaki herkes için stil vermek için bağlantıdaki stili kullanır. Ardından, Outlook'a özgü dolgu eklemek için koşullu kod kullanır. Outlook dolgusu ayrı olarak kontrol edildiğinden, diğer e-posta istemcilerinde düğmenin nasıl göründüğünü etkilemeden Outlook dolgusunu düzenleyebilirsiniz.

<a href="https://www.litmus.com/" style="background-color: #1F7F4C; font-size: 18px; font-family: Helvetica, Arial, sans-serif; font-weight: bold; text-decoration: none; padding: 14px 20px; color: #ffffff; border-radius: 5px; display: inline-block; mso-padding-alt: 0;">
	<!--[if mso]>
	<i style="letter-spacing: 25px; mso-font-width: -100%; mso-text-raise: 30pt;">&nbsp;</i>
	<![endif]-->
	<span style="mso-text-raise: 15pt;">I am a button &rarr;</span>
	<!--[if mso]>
	<i style="letter-spacing: 25px; mso-font-width: -100%;">&nbsp;</i>
	<![endif]-->
</a>

mutlu yüz ve onay işareti ile e-posta gelen kutusu

İşe yaradı mı?

Kırık iyi bir görünüm değil. Litmus E-posta Önizlemeleri ile 90'dan fazla e-posta istemcisinde, uygulamasında ve cihazda düğmelerinizin nasıl göründüğünü test edin. Ve her seferinde markaya uygun, hatasız e-postalar oluşturduğunuzdan emin olun.

Daha fazla bilgi edinin →

Koşullu doldurma düğmesinin artıları ve eksileri

Artıları:

Çoğu e-posta istemcisinde büyük destek vardır (aşağıdaki tabloya bakın).
Tüm düğmenin kendisi tıklanabilir.

Eksileri:

Dolguyu Outlook'ta tam olarak elde etmek için koşullu kodla oynamayı gerektirir.
Outlook sürümü, ne olursa olsun köşeleri kareye sahiptir.

2. VML tabanlı düğmeler

Kurşun geçirmez düğmelere geleneksel yaklaşım, Campaign Monitor geliştiricisi Stig tarafından popüler hale getirildi.

vml düğmesi

Bu yaklaşım, çoğu e-posta istemcisi için düğmeyi yapılandırmak ve biçimlendirmek için bağlantının kendisinde stil kullanır. Yapı, çizgi yüksekliği ve genişlik özellikleri aracılığıyla sağlanır.

Microsoft Outlook için bir geri dönüş olarak, Vektör İşaretleme Dili (VML), Outlook'a özgü bir koşullu yorumda kullanılır. VML, Outlook'ta bağlantının etrafında bir kutu oluşturur, ardından diğer herkes için düğme tasarımını oluşturmak üzere bağlantı etiketini şekillendirir.

<div><!--[if mso]>
  <v:roundrect xmlns:v="urn:schemas-microsoft-com:vml" xmlns:w="urn:schemas-microsoft-com:office:word" href="http://" style="height:50px;v-text-anchor:middle;width:170px;" arcsize="10%" stroke="f" fillcolor="#1F7F4C">
<w:anchorlock/>
<center>
<![endif]-->
<a href="http://litmus.com" style="background-color:#1F7F4C;border-radius:5px;color:#ffffff;display:inline-block;font-size: 18px; font-family: Helvetica, Arial, sans-serif;font-weight:bold;line-height:50px;text-align:center;text-decoration:none;width:170px;-webkit-text-size-adjust:none;">I am a button &rarr;</a>
<!--[if mso]>
</center>
</v:roundrect>
<![endif]--></div>

Bu düğmenin daha karmaşık sürümleri için, aslında düğmenin biri VML'de diğeri herkes için olmak üzere iki sürümünü oluşturursunuz.

VML tabanlı bir düğmenin artıları ve eksileri

Artıları:

Çoğu e-posta istemcisinde büyük destek vardır (aşağıdaki tabloya bakın).
Tüm düğmenin kendisi tıklanabilir.
Outlook'ta yuvarlatılmış köşeler korunur.

Eksileri:

Yeni kurşun geçirmez düğmeler oluşturmayı ve mevcut olanları güncellemeyi zaman alıcı ve sinir bozucu hale getiren Microsoft Office paketine özel, yabancı bir dilin (VML) kullanımına dayanır.
Kurşun geçirmez düğmenin genişliği ve yüksekliği bildirilmelidir, bu nedenle CTA kopyasında yapılacak herhangi bir değişiklik düğmenin boyutlarında değişiklik yapılmasını gerektirecektir.
VML düğmesinin daha karmaşık sürümleri, değiştirilmesi gereken iki URL gerektirir. Ve bazı ESP'ler, VML bölümündeki URL'yi izlemez.
VML sabit bir yükseklik ve genişlik gerektirir, bu nedenle bu düğme, CTA'daki kopyanın uzunluğunun değişebileceği şablonlar için pek iyi çalışmaz.

VML'nin tüm ayrıntılarını öğrenmek istemiyorsanız (ve dürüst olmak gerekirse, kim yapar?), Campaign Monitor'ün geleneksel kurşun geçirmez düğmeler oluşturmak için ücretsiz bir çevrimiçi aracı vardır. Buttons.cm, harika görünecek ve çoğu e-posta istemcisinde iyi çalışacak yeni CTA düğmeleri oluşturmayı kolaylaştırır.

İlaç e-postaları üzerinde çalışırken düğmeleri kodlamak için tercih ettiğim stil buydu. En büyük artısı, yüksek düzeyde düzenlenmiş endüstri için gerekli olan Outlook'ta köşeleri yuvarlatılmış tutma yeteneğidir.

3. Dolgu tabanlı düğmeler

dolgu düğmesi

Bu yöntem, düğme için basit bir HTML tablosu kullanır. Düğmeyi yapılandırmak için tablo hücresi düzeyinde dolgunun yanı sıra düğmeyi biçimlendirmek için HTML niteliklerine ve CSS'ye dayanır.

<table border="0" cellspacing="0" cellpadding="0">
    <tr>
        <td style="padding: 12px 18px 12px 18px; border-radius:5px; background-color: #1F7F4C;" align="center">
            <a href="http://litmus.com" target="_blank" style="font-size: 18px; font-family: Helvetica, Arial, sans-serif; font-weight: bold; color: #ffffff; text-decoration: none; display: inline-block;">I am a button &rarr;</a>
        </td>
    </tr>
</table>

Dolgu tabanlı bir düğmenin artıları ve eksileri

Artıları:

Çoğu e-posta istemcisinde iyi çalışır (aşağıdaki tabloya bakın).
E-posta tasarımcılarının aşina olduğu HTML ve CSS kodlarını kullanır, bu da yeni kurşun geçirmez düğmeler oluşturmayı ve mevcut olanları güncellemeyi çok kolaylaştırır.

Eksileri:

Düğmenin tamamı tıklanabilir değildir; bu, bir düğmeye tıkladığını veya dokunduğunu düşünen aboneler arasında sürtüşmeye yol açabilir.
Outlook, yuvarlatılmış köşeleri desteklemez.

4. Sınır tabanlı düğmeler

kenarlık düğmesi

Kenarlık tabanlı düğmeler, önceki yönteme benzer bir yaklaşım benimser. Basit HTML ve CSS kullanarak, harekete geçirici mesajlarınızı yapılandırabilir ve biçimlendirebilirsiniz. Ancak, yapı için tablo hücresi düzeyinde dolguya güvenmek yerine, CTA'nızı oluşturmak için bağlantının kendisine kalın kenarlıklar ekleyin.

<a href="http://litmus.com" target="_blank" style="font-size: 18px; font-family: Helvetica, Arial, sans-serif; color: #ffffff; font-weight: bold; text-decoration: none; border-radius: 5px; background-color: #1F7F4C; border-top: 12px solid #1F7F4C; border-bottom: 12px solid #1F7F4C; border-right: 18px solid #1F7F4C; border-left: 18px solid #1F7F4C; display: inline-block;">I am a button &rarr;</a>

Bağlantı etiketinin blok düzeyinde bir öğe olarak ayarlandığını ve kenarlıkların "doldurma"mızı sağlamak için kullanıldığını unutmayın. Bu, eski masaüstü istemcilerinde bile tüm düğmenin üzerine gelinebilir ve tıklanabilir olmasını sağlar.

Kenarlık tabanlı bir düğmenin artıları ve eksileri

Artıları:

Tüm stiller, kodu basitleştiren gerçek bağlantı etiketindedir.
Sadece bir düğme kullanılır. Çift düğme veya kafa karıştırıcı VML kodu gerekmez.
Belirli yükseklik veya genişlik tanımlarına ihtiyacınız yoktur, bu da düğmeleri yüksek düzeyde ölçeklenebilir hale getirir.

Eksileri:

Outlook, kenarlıkların boyutunu küçük bir miktar azaltır.
Outlook, <a> etiketlerini blok düzeyinde öğeler olarak tanımıyor.
Outlook, yuvarlatılmış köşeleri desteklemez.
Tam bağlantı öğesinde fazladan kenarlıklar gibi daha gelişmiş stiller ekleme olanağı yoktur.

5. Dolgu ve kenarlık tabanlı düğmeler

Dolgu ve kenarlık tabanlı düğmeler, önceki iki yaklaşımın öğelerini birleştirir.

dolgu ve kenarlık e-posta düğmesi

Esasen, bu yaklaşım, bağlantının hem dolgu hem de en az 1 piksellik katı bir kenarlıkla şekillendirilmesiyle aynı yapıyı kullanır. Ardından, bağlantının tüm arka planını doldurmak için <td> öğesine bir arka plan rengi uygulanır. Outlook, <a> etiketindeki yatay dolguyu tanımadığından bu örnekte <a> yerine <td> öğesine arka plan renginin uygulanması gerekir (çünkü blok düzeyinde olmayan HTML için bu tür bir stili desteklemez). elementler).

<table border="0" cellspacing="0" cellpadding="0">
    <tr>
        <td align="center" style="border-radius: 5px; background-color: #1F7F4C;">
            <a href="https://litmus.com" target="_blank" style="font-size: 18px; font-family: Helvetica, Arial, sans-serif; color: #ffffff; font-weight: bold; text-decoration: none;border-radius: 5px; padding: 12px 18px; border: 1px solid #1F7F4C; display: inline-block;">I am a button &rarr;</a>
        </td>
    </tr>
</table>

Dolgu ve kenarlık düğmesinin artıları ve eksileri

Artıları:

Yalnızca bir düğmenin kodlanması gerekir, bu da bu tekniği kullanan düğmelerin güncellenmesini kolaylaştırır.
Düğmeler için özel boyutlar gerekli değildir.
Arka plan resimleri bu yöntemle desteklenebilir.

Eksileri:

Stil, bir <td> ve <a> arasında ayrılır, bu nedenle düğmenin stilinde değişiklik olduğunda her ikisinin de güncellenmesi gerekir.
Outlook, yuvarlatılmış köşeleri desteklemez.

Peki ya anlamsal HTML?

Semantik html kullanmayı seviyoruz, ancak ne yazık ki <button> etiketi e-postada desteklenmiyor. Çoğu e-posta istemcisinde, tıklanabilir olmayan veya doğru şekilde oluşturulmayan <div> değerine indirgenmiştir.

Bağlantı etiketlerinizin içine div'ler veya tablolar yerleştirme yapılabilir. Ama anlamsal olarak doğru değil. Ayrıca, bu yöntemlerin her ikisi de Outlook'ta çalışmayan düğmelere neden olur. Tablolar söz konusu olduğunda, bağlantı tıklanabilir değildir ve div'ler söz konusu olduğunda… peki, kendiniz görün:

bölme düğmesi	Outlook'ta Div düğmesi

Gelişmiş saldırılar ve geliştirmeler

Yukarıdaki yöntemlerin tümü kurşun geçirmez düğmeler oluşturmak için harika başlangıç noktalarıdır, ancak her teknik daha iyi kurşun geçirmez düğmeler oluşturmak için daha fazla değiştirilebilir.

Outlook için yatay dolgu hilesi

Outlook, CTA metninizin kurşun geçirmez düğmenizin sol ve sağ kenarlarına çok yakın olmasına neden olabilecek yatay dolguyu desteklemez.

Outlook için yatay "dolguyu" artırmak için kullanılabilecek hızlı bir kesme, bağlantının her iki tarafına koşullu olarak satır içi, bölünmeyen boşluk(lar) eklemektir. Koşullu doldurma düğmesi, düğmenin kenarlarına boşluk eklemek için harf aralığı özelliğiyle birlikte bunu zaten kullanır.

<!--[if mso]>&nbsp;<![endif]-->

Medya sorgularıyla aşamalı geliştirme

Kurşun geçirmez düğmenizin tasarımını geliştirmek için kenarlıklar, degradeler, web yazı tipleri, fareyle üzerine gelme efektleri ve daha fazlası gibi gelişmiş stilleri medya sorgularıyla kullanabilirsiniz.

standart e-posta düğmesi ve aşamalı olarak geliştirilmiş düğme

VML ile Outlook geliştirmeleri

Düğmelerinizin gerçekten parlamasını istiyorsanız, düğmelerinize biraz pizazz eklemek için VML'ye dalabilirsiniz.

VML ne kadar sinir bozucu olursa olsun, arka plan resimleri, degradeler ve gölgeler içeren çok eğlenceli düğmeler oluşturmanıza olanak tanır. Kesinlikle bir dereceye kadar deneme yanılma var, ancak sonuçlar çarpıcı olabilir.

Örnek olarak Ocak bültenimizdeki düğmemize göz atın:

Eğlenceli VML düğmesi ile e-posta örneği — *Diğer e-posta istemcilerindeki alt gölgeyle eşleşmesi için Outlook'ta bir düğme gölgesi eklemek için VML'yi kullanma*

Peki, e-posta istemci desteği nasıldır?

E-posta istemcileri, bu yazı ilk kez 2017'de yazıldığından beri desteklerini güncellediler, bu nedenle bu düğmeler kurşun geçirmezliğe çok yakın. En az destek beklendiği gibi Outlook'ta, ancak orada bile düğmeler çok bozuk değil.

Litmus testlerinin tamamına buradan göz atabilirsiniz.

E-posta İstemcisi	koşullu	VML	Dolgu malzemesi	Sınır	Dolgu + Kenarlık
elma postası
Nilüfer Notları	✘	✘
IBM Notları 10	✘	✘
Görünüm 2007-2016	*		*	*†	*
Mac için Outlook
Office365 (masaüstü)	*		*	*†	*
Gmail
AOL
yahoo
Outlook 365 (web postası)
Outlook.com
Mail.ru
GMX.de	*		*	*	*
T-Online.de	†
Web.de	*		*	*	*
Gmail Uygulaması (Android)
Gmail Uygulaması (iOS)
iPhoneiPad
Samsung Posta
Görünüm (Android)
Outlook (iOS)
Karanlık Mod
elma postası
Gmail Uygulaması
iPhoneiPad
Ofis 365 (masaüstü)		✘
Outlook.com

* Yuvarlatılmış köşeler oluşturulmaz. † Düğme boyutu bozuk.

Karanlık Mod desteği ve hack'ler

Karanlık Mod, kurşun geçirmez düğmelere ilginç bir dokunuş getiriyor. Çoğu HTML ve CSS gibi, medya sorguları olan düğmeler için Karanlık Mod stillerini kontrol edebilirsiniz.

Ancak Gmail ve Outlook.com, düğme renklerini tersine çevirebilir.

Düğmelerinizdeki arka plan renklerini korumak istiyorsanız, bazı hileler vardır. Yine de, düğmelerdeki kopyanın rengini tersine çevirmeye dikkat edin. Outlook'ta yazı tipi renklerinizin değişmesini engellemenin bir yolu yoktur, ancak Remi Parmentier'in CSS karışımı geçici çözümüyle düğmelerinizdeki beyaz metni beyaz tutabilirsiniz.

Bu kurşun geçirmez buton seçeneklerinde en büyük destek eksikliği VML butonlarıdır.

Koyu Modunda Office 365 Arka plan renkleri tersine olacak, ama olacak değil VML içinde dolgu rengi invert. Böylece şuna benzeyen düğmeler elde edersiniz:

Karanlık modda VML düğmesi

Bunun için bir düzeltme var: Düğmenizin <a> etiketinde arka plan rengi için RGBA değerini şu şekilde kullandığınızdan emin olun:

<div>
    <!--[if mso]>
        <v:roundrect xmlns:v="urn:schemas-microsoft-com:vml" xmlns:w="urn:schemas-microsoft-com:office:word" href="http://" style="height:50px;v-text-anchor:middle;width:170px;" arcsize="10%" stroke="f" fillcolor="#1F7F4C">
        <w:anchorlock/>
        <center>
    <![endif]-->
    <a href="http://litmus.com" style="background-color:rgba(31, 127, 76,1);border-radius:5px;color:#ffffff;display:inline-block;font-size: 18px; font-family: Helvetica, Arial, sans-serif;font-weight:bold;line-height:50px;text-align:center;text-decoration:none;width:170px;-webkit-text-size-adjust:none;">I am a button &rarr;</a>
    <!--[if mso]>
        </center>
        </v:roundrect>
    <![endif]-->
</div>

Böylece bunun yerine şuna benzeyen bir düğme elde edersiniz (çok daha iyi, değil mi?):

Karanlık Mod düzeltmeli VML e-posta düğmesi

Arka plan rengi olarak RGBA değeri Outlook'ta desteklenmez, bu nedenle VML rengine geri döner. Bu düzeltme için Wilbert Heinen'e teşekkürler! Outlook'ta Koyu Modda yazı tipi rengini kontrol edemediğimiz için, bu düğmeyi kullanacaksanız, yazı tipi renginiz tersine çevrildiğinde de renk seçimlerinizin erişilebilirliği hesaba kattığından emin olun. (Kullandığımız örnek hangi renklerin kullanılmaması gerektiğine güzel bir örnektir.)

Kampanyalarınız kurşun geçirmez mi?

Hangi yaklaşımı seçerseniz seçin, harekete geçirici mesajlar için kurşun geçirmez düğmeler kullanmak, görüntülere güvenmekten çok daha üstündür. Görüntüleri engelleyen e-posta istemcilerinde bile kurşun geçirmez düğmeler, mesajınızın hedef kitleniz için net olmasını sağlayarak abonelerinizin etkileşim olasılığını artırır. Artık bozuk e-posta yok!

Litmus ile markaya özel, hatasız e-postalar oluşturun

Bozuk e-postalar, özellikle CTA düğmeleri, daha az tıklama ve dönüşüm anlamına gelir. Ah. Litmus, görüntü engelleme, bozuk bağlantılar ve daha fazlası için otomatik bir kontrolle her şeyin mükemmel olmasını sağlamanıza yardımcı olur.

Ücretsiz denemenizi başlatın →

En sevdiğiniz kurşun geçirmez düğme tekniği nedir?

Aşağıdaki yorumlarda kurşun geçirmez e-posta düğmelerini nasıl oluşturduğunuzu bize bildirin.

İlk olarak 1 Kasım 2017'de Jason Rodriguez tarafından yayınlandı. En son 22 Haziran 2021'de güncellendi.