Mailing Tasarımı Nasıl Yapılır? Ölçü ve Boyutları Nasıl Olmalı?

Mailing tasarımı, markaların kampanya, ürün, hizmet veya duyurularını email yoluyla hedef kitlelerine etkili biçimde ulaştırmasını sağlayan görsel ve teknik hazırlık sürecidir. Başarılı bir mailing yalnızca estetik görünmemeli; farklı ekranlarda doğru görüntülenmeli, kolay okunmalı ve kullanıcıyı belirlenen aksiyona yönlendirmelidir.

Web sitesi tasarımından farklı olarak email tasarımında Gmail, Outlook, Apple Mail ve Yahoo Mail gibi farklı istemcilerin teknik sınırlamaları dikkate alınmalıdır. Web sayfalarında sorunsuz çalışan bazı CSS özellikleri email istemcilerinde desteklenmeyebilir. Bu nedenle mailing tasarımlarında sade yapı, tablo tabanlı HTML kodlama, mobil uyumluluk ve gönderim öncesi test büyük önem taşır.

Bu rehberde mailing tasarımının nasıl yapılacağını, ideal email genişliğini, banner ve görsel boyutlarını, mobil görünüm ölçülerini ve dönüşüm odaklı tasarım kurallarını ayrıntılı olarak inceleyeceğiz.

Mailing Tasarımı Nedir?

Mailing tasarımı; email içerisinde yer alacak başlıkların, metinlerin, görsellerin, butonların ve bağlantıların belirli bir düzen içerisinde hazırlanmasıdır.

Profesyonel bir mailing tasarımı genellikle şu bölümlerden oluşur:

• Ön izleme metni
• Logo veya üst bilgi alanı
• Ana kampanya görseli
• Başlık ve açıklama metni
• Ürün veya hizmet alanları
• CTA butonu
• İletişim ve sosyal medya bağlantıları
• Abonelikten çıkış bağlantısı

Bu bölümlerin sıralaması kampanya hedeflerine göre değiştirilebilir. Ancak kullanıcının emaili açtıktan sonra ana mesajı ve yapması beklenen işlemi kısa sürede anlayabilmesi gerekir.

Mailing Tasarımı Kaç Piksel Olmalı?

Email tasarımında en yaygın kullanılan masaüstü içerik genişliği 600 pikseldir. Bununla birlikte tasarım yapısına ve kullanılan platforma göre 600 ile 640 piksel arasında bir genişlik tercih edilebilir.

Daha geniş tasarımlar hazırlanması mümkün olsa da bazı email istemcilerinde yatay kaydırma, daralma veya görüntü bozulması yaşanabilir. Bu nedenle özel bir gereksinim bulunmadıkça 600 piksel genişlik güvenli bir başlangıç noktasıdır.

Önerilen Mailing Ölçüleri

• Masaüstü email genişliği: 600–640 px
• Mobil email genişliği: Ekranın %100'ü, yaklaşık 320–480 px
• Ana banner genişliği: 600–640 px
• Ana banner yüksekliği: Genellikle 250–400 px
• Logo genişliği: Yaklaşık 120–200 px
• CTA buton yüksekliği: En az 44 px
• İçerik kenar boşlukları: 20–30 px

Bunlar kesin zorunluluklar değil, farklı email istemcilerinde daha güvenli sonuçlar sağlayan genel tasarım ölçüleridir.

Mailing Tasarımının Yüksekliği Ne Kadar Olmalı?

Email tasarımları için zorunlu bir toplam yükseklik bulunmaz. Tasarım, içeriğin uzunluğuna göre dikey olarak uzayabilir. Ancak gereğinden fazla uzun emailler kullanıcıların ana mesajı ve CTA butonunu gözden kaçırmasına neden olabilir.

Promosyon ve satış odaklı mailinglerde toplam tasarımın yaklaşık 1.000–2.000 piksel arasında tutulması değerlendirilebilir. E-bülten ve içerik odaklı gönderimler daha uzun olabilir.

Uzun bir email hazırlanıyorsa:

• İçerik belirgin bölümlere ayrılmalıdır.
• Başlıklar arasında yeterli boşluk bırakılmalıdır.
• Ana CTA yalnızca en alta yerleştirilmemelidir.
• İçeriğin üst bölümünde de yönlendirme bulunmalıdır.
• Gereksiz ürün ve mesaj kalabalığından kaçınılmalıdır.

Mailing Banner Ölçüleri Nasıl Olmalı?

Emailin üst bölümünde kullanılan ana kampanya görseli veya hero banner, tasarımın dikkat çeken ilk alanlarından biridir. Banner genişliği, emailin ana içerik genişliğiyle uyumlu olmalıdır.

600 piksel genişliğinde bir email hazırlanıyorsa banner da görüntüleme boyutunda 600 piksel genişliğe sahip olabilir. Daha net görüntü için tasarım dosyası iki kat çözünürlükte, örneğin 1.200 piksel genişliğinde hazırlanıp HTML içerisinde 600 piksel olarak gösterilebilir.

Retina Görseller Nasıl Hazırlanır?

Yüksek çözünürlüklü ekranlarda daha net görünüm elde etmek için görsel, görüntüleneceği ölçünün iki katı büyüklükte hazırlanabilir.

Örneğin:

• Mailde 600 × 300 px gösterilecek banner, 1.200 × 600 px hazırlanabilir.
• Mailde 200 × 200 px gösterilecek ürün görseli, 400 × 400 px hazırlanabilir.
• Mailde 150 px genişliğinde gösterilecek logo, 300 px genişliğinde hazırlanabilir.

Görsel büyük hazırlanmasına rağmen HTML içerisindeki görüntüleme genişliği mutlaka tanımlanmalıdır. Aksi halde bazı istemciler görseli gerçek boyutunda gösterebilir.

Mailing Görsellerinin Dosya Boyutu Ne Olmalı?

Yüksek çözünürlük tek başına yeterli değildir. Büyük dosya boyutları emailin yavaş açılmasına, mobil veri kullanımının artmasına ve görsellerin geç yüklenmesine neden olabilir.

Mümkün olduğunda:

• Banner görselleri yaklaşık 150–300 KB altında tutulmalıdır.
• Küçük ürün görselleri mümkünse 100 KB altında olmalıdır.
• JPG, PNG ve destek durumuna göre GIF formatları kullanılmalıdır.
• Gereksiz şeffaflık bulunmuyorsa fotoğraflarda JPG tercih edilebilir.
• Her görsele açıklayıcı alt metin eklenmelidir.

Email istemcileri görselleri otomatik olarak engelleyebileceği için kampanyanın ana mesajı yalnızca görsel içerisine yazılmamalıdır. Başlık, fiyat, kampanya koşulu ve CTA gibi önemli bilgiler mümkün olduğunca canlı HTML metni olarak eklenmelidir.

Mobil Uyumlu Mailing Tasarımı Nasıl Yapılır?

Mobil uyumlu mailing tasarımında içerik, kullanıcının ekran genişliğine göre otomatik olarak yeniden düzenlenir. Masaüstünde yan yana bulunan ürünler mobil görünümde alt alta sıralanabilir.

Mobil Mailing Tasarımında Dikkat Edilecekler

• Tek sütunlu yapı tercih edilmelidir.
• İçerik genişliği mobilde %100 olmalıdır.
• Görsellere maksimum %100 genişlik verilmelidir.
• Metinler yakınlaştırma gerektirmeden okunabilmelidir.
• Butonların çevresinde yeterli tıklama alanı bırakılmalıdır.
• Yan yana yerleştirilen küçük bağlantılardan kaçınılmalıdır.
• Önemli içerikler emailin üst bölümünde gösterilmelidir.

Responsive email tasarımlarında genellikle 600 piksel civarında bir kırılım noktası kullanılır. Bu değerin altındaki ekranlarda kolonlar alt alta getirilebilir, yazı boyutları büyütülebilir ve gereksiz görsel alanlar gizlenebilir.

Mailing Yazı Boyutları Nasıl Olmalı?

Mailing tasarımında yazıların masaüstünde ve mobilde rahatça okunabilmesi gerekir. Çok küçük yazılar kullanıcı deneyimini olumsuz etkilerken gereğinden büyük yazılar tasarım dengesini bozabilir.

Önerilen Yazı Boyutları

• Ana başlık: 26–36 px
• Alt başlık: 20–26 px
• Gövde metni: 15–18 px
• CTA buton metni: 16–18 px
• Footer metni: 12–14 px

Mobil görünümde gövde metninin en az 16 piksel civarında kullanılması okunabilirlik açısından yararlı olabilir. Ayrıca satır yüksekliği, yazı boyutunun yaklaşık 1,4–1,6 katı olacak şekilde ayarlanabilir.

CTA Buton Ölçüleri Nasıl Olmalı?

CTA, kullanıcının email içerisinde yapması beklenen ana işlemi temsil eder. “Hemen Satın Al”, “Kampanyayı İncele”, “Teklif Al” veya “Ücretsiz Başla” gibi ifadeler kullanılabilir.

CTA butonlarında şu ölçüler tercih edilebilir:

• Minimum 44 px yükseklik
• Yaklaşık 120–240 px genişlik
• Sağ ve solda 20–30 px iç boşluk
• Butonlar arasında en az 10–15 px boşluk
• En az 16 px yazı boyutu

Buton rengi arka planla yeterli kontrasta sahip olmalı ve CTA metni kullanıcının tıkladığında neyle karşılaşacağını açıkça anlatmalıdır.

Mailing Tasarımı Adım Adım Nasıl Hazırlanır?

1. Kampanya Hedefini Belirleyin

Tasarıma başlamadan önce emailin satış, trafik, kayıt, bilgilendirme veya ürün tanıtımı amaçlarından hangisine hizmet edeceği belirlenmelidir.

2. İçerik Hiyerarşisini Oluşturun

Ana mesaj, kampanya avantajı ve CTA üst bölümlerde konumlandırılmalıdır. İkincil bilgiler daha aşağıda gösterilebilir.

3. Grid ve Kolon Yapısını Belirleyin

600–640 piksel genişliğinde bir ana kapsayıcı oluşturulabilir. Mobil uyumluluk açısından tek veya iki kolonlu basit yapılar tercih edilmelidir.

4. Marka Kimliğini Uygulayın

Logo, kurumsal renkler, yazı stilleri ve görsel dil tutarlı biçimde kullanılmalıdır. Ancak marka renklerinin okunabilirliği azaltmasına izin verilmemelidir.

5. Görselleri Optimize Edin

Görseller doğru ölçülerde dışa aktarılmalı, sıkıştırılmalı ve alt metinlerle desteklenmelidir.

6. HTML Email Şablonuna Dönüştürün

Email HTML kodlamasında tablo tabanlı yapı, inline CSS ve geniş destek sağlayan temel CSS özellikleri kullanılmalıdır. Web sitesi için hazırlanmış standart HTML kodu doğrudan email olarak kullanılmamalıdır.

7. Footer Alanını Ekleyin

Footer bölümünde firma bilgileri, iletişim kanalları ve görünür bir abonelikten çıkış bağlantısı bulunmalıdır.

8. Test Gönderimi Gerçekleştirin

Email; Gmail, Outlook, Apple Mail ve mobil cihazlarda test edilmelidir. Farklı istemcilerin aynı HTML kodunu farklı yorumlayabileceği unutulmamalıdır.

Dark Mode Uyumlu Mailing Nasıl Hazırlanır?

Dark mode kullanan email istemcileri arka plan ve metin renklerini otomatik olarak değiştirebilir. Bu durum logoların kaybolmasına, metinlerin okunmamasına veya kurumsal renklerin farklı görünmesine neden olabilir.

Dark mode için:

• Şeffaf logolar açık ve koyu arka planda test edilmelidir.
• Logonun çevresine koruyucu boşluk veya sabit arka plan eklenebilir.
• Metin ile arka plan arasında yeterli kontrast sağlanmalıdır.
• Tamamen siyah veya tamamen beyaz geniş alanlar dikkatli kullanılmalıdır.
• Gmail, Outlook ve Apple Mail üzerinde ayrı testler yapılmalıdır.

Tüm email istemcilerinde dark mode renklerini tamamen sabitlemek mümkün olmayabilir. Bu nedenle tasarımın otomatik renk dönüşümlerinden sonra da kullanılabilir kalması hedeflenmelidir.

Mailing Tasarımında Sık Yapılan Hatalar

• Emaili tek bir büyük görsel olarak hazırlamak
• 600–640 pikselden çok daha geniş sabit tasarım kullanmak
• Mobil görünümü test etmemek
• Görselleri sıkıştırmadan yüklemek
• Çok küçük yazı ve butonlar kullanmak
• Ana CTA'yı yalnızca emailin en altına yerleştirmek
• Görsellere alt metin eklememek
• Web fontlarına tamamen bağımlı olmak
• Abonelikten çıkış bağlantısını gizlemek
• Gmail ve Outlook testlerini atlamak

Mailing Gönderilmeden Önce Kontrol Listesi

• Email genişliği 600–640 piksel aralığında mı?
• Mobil görünümde kolonlar doğru sıralanıyor mu?
• Başlık ve metinler rahat okunuyor mu?
• CTA butonları kolay tıklanabiliyor mu?
• Tüm bağlantılar doğru sayfalara gidiyor mu?
• Görseller optimize edildi mi?
• Görsellere alt metin eklendi mi?
• Kişiselleştirme alanları doğru çalışıyor mu?
• Dark mode görünümü kontrol edildi mi?
• Abonelikten çıkış bağlantısı çalışıyor mu?

Mailing tasarımı hazırlarken yalnızca görsel estetiğe değil; teknik uyumluluk, okunabilirlik, mobil deneyim ve dönüşüm hedeflerine de odaklanılmalıdır. Çoğu kampanya için 600–640 piksel genişliğinde, responsive ve sade bir tasarım güvenli bir başlangıç sağlar.

Doğru banner ve görsel ölçülerinin kullanılması, dosya boyutlarının optimize edilmesi, CTA butonlarının kolay tıklanabilir hazırlanması ve farklı email istemcilerinde test yapılması kampanya performansını destekler.

Profesyonel bir email pazarlama platformunda hazır şablonlardan veya sürükle bırak editörlerden yararlanarak teknik bilgi gerektirmeden mobil uyumlu mailing tasarımları oluşturulabilir. Tasarım tamamlandıktan sonra test gönderimi yapılmalı ve kampanya sonuçları açılma, tıklama ve dönüşüm metrikleri üzerinden analiz edilmelidir.

Kaynaklar

• Mailchimp – Email Şablonu Genişlikleri
• Mailchimp – HTML Email Temelleri
• Campaign Monitor – Email Genişliği ve Görsel Boyutları
• Campaign Monitor – Responsive Email Tasarımı
• Litmus – Responsive ve Hybrid Email Tasarımı