Çoğu imza detaylarda çöküyor — fazla büyük logo, fazla küçük ikonlar, mobilde bozulan banner. Bu kılavuz işe yarayan ölçüleri veriyor; zevke göre ayarlamaya hazır. Doğru yapmak tahmin gerektirmiyor; e-postanın öngörülebilir kısıtlamaları var ve bu kısıtlamalar zamanla net çalışma aralıklarına oturmuş. Gerçek sayılar, arkasındaki mantık ve bunları görmezden gelince yapılan hatalar — hepsi burada.
E-postada boyutlandırma nasıl çalışır (ve neden web'den farklıdır)
Bir web sayfasında görsellerin her ekrana uyum sağlaması için responsive CSS, viewport birimleri ve media query kullanabilirsiniz. E-posta istemcileri bunların çoğunu güvenilir biçimde desteklemez. Gmail belirli CSS kurallarını kaldırır. Outlook (masaüstü) Word'ün render motorunu kullanır ve HTML'i 2003'tekiymiş gibi işler. Apple Mail daha iyi davranır — ama kendine özgü sürprizleri hâlâ var.
Pratik sonucu şu: e-posta imzaları sabit genişlikli görseller gerektiriyor; yalnızca CSS üzerinden değil, doğrudan HTML özniteliklerinde ayarlanması gerekiyor. Görsel görüntüleme genişliğini CSS'te ayarlarsanız ve e-posta istemcisi CSS'i yok sayarsa, görsel tam dosya çözünürlüğünde görüntülenir — 140px istediğinizde 600px olabilir bu.
Güvenli yöntem: görseli istediğiniz görüntüleme boyutunun 2 katında dışa aktarın (retina netliği için), ardından HTML genişlik özniteliğini görüntüleme boyutuna ayarlayın. 140px genişliğinde görünmesini istediğiniz logo, 280px dosyası olarak dışa aktarılmalı ve HTML'de width="140" yazılmalı. Signoff Studio bunu oluşturucu üzerinden yüklediğinizde otomatik halleder — bu bölüm size doğru başlangıç sayılarını veriyor.
Logo ölçüleri
Yatay logo için çalışma aralığı 100–180px görüntüleme genişliği (dosya boyutu değil, HTML'deki genişlik özniteliği). 100px altında yatay logolar okunması güçleşir ve detay kaybeder. 180px üstünde imzaya hakim olmaya başlar, profesyonel tanımlayıcıdan çok banner başlığı gibi görünür.
Dikey ya da kare logolar ve monogramlar için çalışma aralığı 60–100px görüntüleme genişliği. Bu markalar yatayda daha az alan kullanır ve tam wordmark yerine ikon olarak okunma eğilimindedir; bu yüzden okunabilirliği kaybetmeden daha küçük boyutlarda da çalışırlar.
Retina için dosyayı görüntüleme genişliğinin 2 katında dışa aktarın. 140px görüntülenecek logo 280px dosyası olarak dışa aktarılmalı. Bu, HTML genişlik özniteliğinin küçülttüğü standart DPI ekranlarda aşırı büyük görünmeden yüksek DPI ekranlarda (modern dizüstü ve telefonların çoğu) net kalmasını sağlar.
Logo dosya formatı ve boyutu
Logolar için PNG kullanın. PNG, düz rengi, keskin kenarları ve şeffaflığı JPG'den iyi işler. JPG logo, harf formlarının kenarlarında sıklıkla sıkıştırma bozukluğu gösterir — beyaz e-posta istemci panelinde beyaz arka plana karşı en belirgin bu.
Dosya boyutunu 50KB altında tutun. E-posta istemcileri logoyu her e-posta açılışında yükler; ağır görsel dosyası render süresini yavaşlatır ve bazı yapılandırmalarda büyük ekleri işaretleyen spam puanlama sistemlerini tetikler. Yukarıdaki boyutlardaki temiz logo PNG'lerinin çoğu 50KB'nin çok altında gelir — sizinkisi daha büyükse muhtemelen gereksiz meta veri içeriyor ya da daha iyi sıkıştırmayla yeniden dışa aktarılabilir.
SVG logolar için ideal olur — sonsuz ölçeklenebilir, küçük dosya boyutu — ama güvenlik gerekçesiyle çoğu e-posta istemcisi tarafından engelleniyor. PNG'de kalın.
Profil fotoğrafı ölçüleri
E-posta imzalarında profil fotoğrafları genellikle daire ya da kare olarak görüntülenir. Çalışma görüntüleme boyutu 80–120px. 80px altında yüzler okunması güçleşir ve fotoğraf sağlaması gereken sıcaklığı kaybeder. 120px üstünde metin bloğuyla öne çıkma yarışına girer.
Görüntüleme boyutunun 2 katında dışa aktarın: 100px görüntülenecek fotoğraf 200px dosyası olarak dışa aktarılmalı. Yüzleri kırpmada iyi merkezlenmiş tutun — dairesel maskeler köşeleri gizler; kare dosyada hafif merkezden kaymış bir yüz, dairesel kırpmadan sonra çok fazla kaymış hale gelebilir.
Dosya boyutu 80KB altında. Fotoğraflar logodan daha iyi sıkıştırılır (burada JPG uygundur), ama e-posta bir DSLR'dan tam çözünürlüklü portre ekleyecek yer değil. Özellikle bu kullanım için yeniden boyutlandırıp dışa aktarın. İmzada 3MB'lik fotoğraf, göründüğü her e-posta yazışmasını yavaşlatır.
Sosyal ikon ve arayüz ikonu ölçüleri
LinkedIn, Instagram, X gibi sosyal ikonlar 16–24px görüntüleme boyutunda en iyi çalışır. 16px'de iletişim bilgilerinden dikkat çekmeden platform ikonu olarak tanınırlar. 24px'de biraz daha ön plana çıkarlar — ikonlar metin bağlantılarının tamamlayıcısı değil birincil bağlantı mekanizmanız olduğunda bu uygun.
İkonlar arası boşluğu tutarlı tutun — her biri arasında 8–12px. Düzensiz boşluk rastlantısal görünür. Baştan sona tek bir görsel stil kullanın: hepsi dolu, hepsi çizgili ya da hepsi düz. Dolu LinkedIn ikonu ile çizgili Instagram ikonunu bir arada kullanmak, tasarlanmış değil bir araya getirilmiş izlenimi veren bir tutarsızlıktır.
Dörtten ya da beşten fazla sosyal ikon kullanmayın. Bunun ötesinde satır, profesyonel iletişim bloğu yerine sosyal medya açılış sayfası gibi hissetmeye başlar. Altı aktif platformunuz varsa profesyonel varlığınızın en güçlü olduğu iki ya da üçünü seçin ve yalnızca onlara bağlantı verin.
Genel imza genişliği
Toplam imza genişliğini 600px'de ya da altında tutun. Bu, e-posta içeriği için genel olarak kabul görmüş güvenli genişlik — çoğu masaüstü e-posta istemcisinde okunabilecek kadar geniş, küçük ekranlarda yatay kaydırmaya zorlamayacak kadar dar.
Çoğu e-posta istemcisi içeriği 700px'in çok altında bir sütunda render eder; mobilde sütun 320–390px'e daralır. 600px üzerine kurulu imza mobilde yeniden düzenlenir ya da küçülür. 750px üzerine kurulu imza çoğu telefonda kesilir ya da yatay kaydırma zorlar — ve geniş değil, bozuk bir tasarım gibi görünür.
Çift sütunlu düzen kullanıyorsanız (solda fotoğraf, sağda iletişim bloğu), toplam genişlik 600px içinde kalmalı. Her sütun bilinçli bir orana sahip olmalı — keyfi görünen 50/50 bölünme değil; fotoğraf için 100px ve iletişim bloğu için 480px gibi bir şey.
Boşluk kullanımı ve mobil görünüm notları
İmzadaki dikey boşluğun dar bir çalışma aralığı var. Az olursa imza sıkışık görünür; fazla olursa e-postaya yanlışlıkla beyaz alan eklenmişmiş gibi hissettirir. Pratik hedef: bir blok içindeki unsurlar arasında 4–8px (sırasıyla ad, rol, şirket), ayrı bloklar arasında 12–16px (iletişim bloğu, sosyal ikonlar, CTA).
Mobilde, dokunulabilir unsurların yakınlaştırmaya gerek kalmadan tıklanabilecek kadar büyük olması gerekiyor. CTA butonu en az 44px yüksekliğinde olmalı — Apple'ın İnsan Arayüzü Kılavuzları bunu dokunma hedefleri için minimum olarak kullanıyor ve e-posta için de işe yarayan bir referans noktası. İletişim bloğundaki metin bağlantıları biraz fazla satır yüksekliğinden (1,5–1,8×) yarar sağlar; imza dar ekrana yeniden düzenlendiğinde birbirine karışmaz.
İmzayı yayına almadan önce kendinize test e-postası gönderin ve telefonunuzda açın. Bu, çoğu insanın atladığı ve en çok sorunu yakalayan tek adım — yatay kaydırma zorla logo, sadece 20px yüksekliğinde CTA butonu, kafa karıştırıcı sırada tek sütuna çökmüş çift sütunlu düzen. Test iki dakika alır; beş yüz e-postaya girdikten sonra sorunu düzeltmek daha uzun sürer.
Hızlı referans: önerilen ölçüler
- Yatay logo: 100–180px görüntüleme genişliği, 2× dışa aktarım, PNG, 50KB altı.
- Kare veya dikey logo: 60–100px görüntüleme genişliği, 2× dışa aktarım, PNG, 50KB altı.
- Profil fotoğrafı: 80–120px görüntüleme genişliği, 2× dışa aktarım, JPG veya PNG, 80KB altı.
- Sosyal ikonlar: 16–24px görüntüleme boyutu, tutarlı stil, her biri arasında 8–12px boşluk.
- Genel imza genişliği: maksimum 600px.
- CTA butonu yüksekliği: dokunma hedefi için minimum 44px.
- Banner yüksekliği: maksimum 80–100px, maksimum 600px genişlik.
- Blok içi dikey boşluk: 4–8px.
- Bloklar arası dikey boşluk: 12–16px.
İmzanı oluştur
Bunu uygulamaya geçir — bir şablon seç, bilgilerini ekle ve özenli imzanı dakikalar içinde gelen kutuna kopyala.