Bir e-posta kampanyasının kaderi çoğu zaman tek bir şeye bağlıdır: buton tıklanıyor mu? Görsel mükemmel, metin net, teklif cazip… ama CTA butonu çalışmıyorsa bütün akış çöker. Üstelik “çalışmıyor” şikâyeti bazen gerçek anlamda tıklanamamaktan, bazen de tıklanınca yanlış yere gitmekten, bazen de güvenlik nedeniyle linkin bloke edilmesinden kaynaklanır.
Bu yazı, özellikle Türkçe içerik üreten ekiplerin sık yaşadığı “Outlook’ta bozuldu”, “iPhone Mail’de tıklanmıyor”, “Gmail linki kesti” gibi can sıkan durumları pratik şekilde çözüme bağlamak için hazırlandı. 🧰
1) E-posta istemcisi “gerçek tarayıcı” değildir
İlk ve en önemli gerçek şu: E-postalar, modern bir Chrome/Safari sayfası gibi render edilmez. Her istemcinin kendi HTML/CSS motoru vardır. Bazıları (özellikle masaüstü Outlook) web standartlarına uzak davranır. Bu yüzden web’de sorunsuz çalışan bir buton, e-postada bambaşka bir şeye dönüşebilir.
Özellikle şu platformlarda farklılık bekleyin:
- Masaüstü Outlook (Windows): Word tabanlı render, CSS desteği sınırlı.
- Gmail (Web/Mobil): Bazı CSS’leri ve etiketleri kırpabilir, güvenlik kuralları katı.
- iOS Mail: Genelde iyi ama bazı overlay/position hatalarında link bozulabilir.
- Android mail uygulamaları: Üreticiye göre değişen davranışlar görülebilir.
2) Buton aslında “link” değildir (yanlış HTML)
E-postada tıklanabilir bir butonun en güvenli formu, çoğu zaman inline stilli bir <a> etiketidir. Ancak bazı tasarımlar butonu <div> içine koyar, onclick ile davranış vermeye çalışır ya da JavaScript bekler. E-postada JavaScript neredeyse her yerde engellidir. Sonuç: buton güzel görünür ama hiçbir şey yapmaz.
Sağlam yaklaşım: Buton = link. Yani tıklanabilir alanın kendisi <a href="..."> olmalı, stiller inline yazılmalıdır.
3) “Button” görüntüsü var ama üstünde görünmez bir katman (overlay) var
Bu, en sinir bozucu senaryolardan biridir: Butonun üstünde istemeden duran görünmez bir tablo hücresi, bir spacer, bir padding hack’i ya da yanlış hizalanmış bir görsel katmanı… Kullanıcı tıkladığını sanır ama tıklama başka bir elemana gider veya hiç gitmez.
Bu durum genellikle şu kaynaklardan gelir:
- Butonun üstüne taşan görsel veya banner
- Yanlış kapanmış table/tr/td yapısı
- Mobilde daralınca üst üste binen bloklar
- Negatif margin/padding hileleri
İpucu: E-posta şablonlarında “table-first” yaklaşımını bozacak kadar agresif CSS hilelerinden kaçının. Butonu ayrı bir tablo satırında, temiz bir hücrede tutmak çoğu problemi önler.
4) Link takip (tracking) sistemi URL’yi bozuyor
Birçok e-posta servis sağlayıcısı (ESP), tıklamaları ölçmek için linkleri yeniden yazar. Bu normaldir. Ancak bazı durumlarda link şu nedenlerle bozulur:
- URL içinde özel karakterler doğru encode edilmemiştir (ör. boşluk, Türkçe karakter, #, %).
- Çok uzun URL’ler bazı istemcilerde kırpılır.
- UTM parametreleri veya ek parametreler “&” karakteriyle yanlış birleşir.
- Tracking domain’i güvenlik filtrelerine takılır.
Çözüm yaklaşımı: URL’leri mümkün olduğunca kısa tutun, parametreleri düzgün encode edin ve kritik kampanyalarda linkleri test listesiyle farklı istemcilerde deneyin. Eğer mümkünse uzun parametreli link yerine, kısa yönlendirme linki kullanın.
5) Outlook’ta “buton” VML gerektirebilir
Outlook (Windows) dünyasında, modern CSS ile yuvarlak köşeli, arkaplan renkli buton yapmak bazen sürpriz sonuçlar verir: arkaplan görünmez, tıklanabilir alan daralır, hatta link çalışıyor gibi görünüp kullanıcıyı yanlış şekilde yönlendirebilir.
Bu yüzden bazı kurumsal şablonlar Outlook için VML (Vector Markup Language) ile “bulletproof button” yaklaşımı kullanır. VML kodu karmaşık görünse de amaç basittir: Outlook’un anlayacağı şekilde butonu çizmek ve linki sağlamlaştırmak.
Ne zaman gerekli? Eğer hedef kitlenizde Outlook oranı yüksekse (B2B, kurumsal listeler), “bulletproof button” yaklaşımı ciddi fark yaratır.
6) CSS desteği: hover/position/flex sizi yarı yolda bırakır
E-postada position: absolute, z-index, flex gibi web’de normal olan şeyler, istemciden istemciye değişken davranabilir. Butonu ortalamak için flex kullandınız diyelim; bazı istemcilerde hizalama bozulur, butonun tıklanabilir alanı kayar.
Güvenli seçim: Tablo tabanlı hizalama + inline CSS. Evet, 2026’da hâlâ tablo… ama e-posta böyle. 🙂
7) Görsel buton kullanıyorsanız: resim yüklenmezse “buton” gider
Bazı tasarımlarda CTA tamamen bir görsel (image) olarak konur ve görsele link verilir. Kullanıcı görselleri kapalı tutuyorsa (özellikle kurumsal Outlook ayarlarında), buton görünmez hale gelir. “Çalışmıyor” demesinin sebebi aslında görmemesidir.
Çözüm: Görsel buton yerine HTML buton kullanın. Görsel kullanmanız şartsa:
- Görsele anlamlı bir alt metin yazın.
- Görsel kapalıyken de CTA’yı taşıyan metin linki ekleyin.
- Butonu tek bir büyük görsele gömmek yerine, metin tabanlı CTA’yı koruyun.
8) “base” etiketi veya göreli URL kullanımı
Şablonlarda nadiren de olsa <base href="..."> kullanımı görülür. Bazı istemciler bunu beklenmedik şekilde işler ve linklerin hedefini değiştirir. Benzer şekilde, göreli URL (ör. /pricing) e-postada güvenilir değildir. Çünkü e-postanın bir “site kökü” yoktur.
Sağlam yaklaşım: Linkleri her zaman tam URL (https ile) verin ve base etiketinden kaçının.
9) Güvenlik filtreleri ve “şüpheli link” muamelesi
Kurumsal e-posta ağ geçitleri (secure email gateways) linkleri tarar, yeniden yazar veya riskli bulursa tıklamayı engeller. Kullanıcı butona basar, ama bir uyarı sayfasına gider ya da “blocked” mesajı görür. Kullanıcı bunu “buton çalışmıyor” diye tarif eder.
Bu genellikle şu durumlarda artar:
- Yeni veya düşük itibar puanlı domainler
- Çok fazla yönlendirme (redirect) zinciri
- Tracking domain’inin kara listeye yakın olması
- Linkin açtığı sayfanın SSL veya içerik sorunları
Çözüm: Tek tıkla açılan, https’li, temiz bir hedef sayfa kullanın. Redirect sayısını minimumda tutun. Kurumsal hedef kitleniz varsa tracking domain ve ana domain itibarını ayrı ayrı izleyin.
10) Tıklanabilir alan çok küçük (özellikle mobilde)
Mobil kullanıcı için butonun tıklanabilir alanı yeterince büyük değilse, kullanıcı tıklamaya çalışırken yanındaki linke basabilir veya hiçbir şeye basamamış gibi hisseder. Bu da “çalışmıyor” şikâyetine yol açar.
Pratik standart: Mobilde CTA alanını geniş tutun. Buton padding’i rahat olsun. Satır aralığı ve çevresindeki boşluklar “parmak payı” bırakacak şekilde planlansın.
11) Satır sonu, kopyala-yapıştır ve gizli karakterler
Bazen sorun teknik altyapıdan değil, basit bir içerik üretim kazasından çıkar. Link yazarken satır sonu girmişsinizdir, URL içine görünmez bir karakter girmiştir veya editör, & yerine düz & gibi bir dönüşüm yapmıştır.
Belirti: Bazı kullanıcıda çalışır, bazısında çalışmaz. Özellikle farklı istemcilerde farklı sonuç verir.
Çözüm: Linkleri her zaman “ham” haliyle kontrol edin, HTML entity dönüşümlerini doğrulayın, test maili gönderip link kopyalayarak hedefi inceleyin.
12) Buton çalışıyor ama yanlış yere gidiyor (kırık hedef)
Kullanıcı “tıklıyorum bir şey olmuyor” der, ama aslında sayfa 404’tür, hedef ülke/cihaz kısıtlıdır veya uygulama içi tarayıcı (in-app browser) hedefi açamaz. Örneğin bazı linkler, uygulama içi tarayıcıda oturum açma ekranında takılı kalabilir.
Çözüm:
- Hedef sayfanın mobil uyumunu ve yüklenme hızını kontrol edin.
- Uygulama içi tarayıcılarda (Instagram/FB/Twitter) deneme yapın.
- Ülke yönlendirmeleri varsa sadeleştirin veya net bir fallback planı koyun.
Hızlı kontrol listesi ✅ (yayına basmadan önce)
- Buton <a href> mi? Inline CSS kullanıyor mu?
- Tüm linkler https ve tam URL mi?
- URL parametreleri düzgün encode edilmiş mi?
- Görsel kapalıyken de CTA var mı (metin linki)?
- Outlook hedef kitlesi varsa “bulletproof button” yaklaşımı düşünülmüş mü?
- Gmail + iOS Mail + Outlook’ta test yapıldı mı?
- Tracking linkleri güvenlik filtrelerine takılıyor mu?
- Mobil tıklama alanı yeterli mi?
Bu listeyi bir alışkanlık haline getirdiğinizde, “buton çalışmıyor” krizi önemli ölçüde azalır. Hele bir de düzenli test akışı kurarsanız (ör. her şablon revizyonunda küçük bir test grubu), kampanyayı yayına almak daha stressiz olur. 😌
Son söz: E-postada “basit” olan genelde en sağlam olandır
Web’de büyüleyici efektler, hover animasyonları ve modern layout’lar güzel. Ama e-posta dünyasında “güzel görünen” ile “her yerde çalışan” çoğu zaman farklı şeylerdir. CTA butonunuz, tasarımın yıldızı olmalı ama teknik olarak en sade parçanız da o olmalıdır.
Temel hedef: her istemcide tıklanabilir, doğru yere götüren, güvenlik filtrelerine takılmayan bir buton. Bunu sağladığınız anda performansın kendiliğinden yükseldiğini göreceksiniz. 🚀