Muhtemelen mükemmel e-posta imzasını tasarlamak için saatler harcadınız - renkleri seçtiniz, yazı tiplerini seçtiniz, hatta belki bir kaligrafi imzası kişisel bir dokunuş için. Sonra gönder tuşuna basarsınız ve her şey... kötü görünür. Logo ezilmiş, afiş kesilmiş, resimlerin yüklenmesi sonsuza kadar sürüyor.
Boyutlar önemlidir. Soyut bir tasarım ilkesi nedeniyle değil, imzanız her biri kendine özgü tuhaflıklara sahip düzinelerce e-posta istemcisinde dolaştığı için. Gmail'de keskin görünen bir imza Outlook'ta bozulabilir. Masaüstünde anında yüklenen bir şey mobil cihazlarda çökebilir.
Hadi bunu düzeltelim.
İçindekiler
E-posta İmza Görsel Boyutlarını Optimize Etme
Görsel boyutlarını doğru ayarlamak kurallara uymakla ilgili değildir - bu, bir kişi e-postanızı açtığında ne olduğunu anlamakla ilgilidir.
E-posta İmzalarında Boyut Neden Önemlidir?
Çoğu insanın gözden kaçırdığı şey şu: e-posta istemcileri imzanızı sadece görüntülemiyor. Yeniden boyutlandırır, sıkıştırır, bazen de tamamen reddederler.
2 MB'lık bir vesikalık mı? Outlook bunu çıkaracaktır. 50x50 piksellik bir logo? Retina ekranlarda okunamaz. 800 piksel genişliğinde bir banner? Mobil cihazlarda yarıya iner.
Her e-posta istemcisinin sınırları vardır. Gmail resimleri toplam 10MB ile sınırlar, ancak 4G bağlantısında bunu yüklemede iyi şanslar. Apple Mail büyük dosyaları daha iyi işliyor, ancak onları agresif bir şekilde sıkıştırıyor. Outlook - en kötü suçlu - bazen sadece kırmızı bir X gösteriyor.
Boyut üç şeyi etkiler: iletilebilirlik, yükleme süresi ve ne kadar profesyonel göründüğünüz. Herhangi birini yanlış yaparsanız, imzanız bir sorumluluk haline gelir.
Dosya Boyutunun E-posta Yüklemesine Etkisi
Günde 50 e-posta gönderiyorsunuz. Her birinin 500KB imzası var. Bu, sadece imzalar için 25MB bant genişliği demektir. Bunu şirketinizdeki herkesle çarpın.
Alıcılar yavaş yüklemeleri fark eder. "Büyük dosya" diye düşünmezler - "bu kişinin e-postaları yavaş" diye düşünürler. Sonra da onları görmezden gelmeye başlarlar.
En iyi nokta? Tüm imza için 50KB'nin altında. 20KB'ın altı daha iyidir.
Ağır resimler yavaş yüklenmekten daha kötü bir şey yapar - spam filtrelerini tetiklerler. E-posta sağlayıcıları mesaj boyutuna bakar. 1MB imzalı 5KB'lık bir metin e-postası mı? Şüpheli. Doğrudan spam klasörüne.
Dosya boyutu hızla artar. 300x100 piksellik bir PNG logosu 80KB olabilir. Bir banner, sosyal simgeler ve belki bir vesikalık ekleyin - aniden 200KB'a ulaşırsınız. Bu sıkıştırmadan önceydi.
Boyut Marka Algısını Nasıl Etkiliyor?
İmzanız otomatik pilotta çalışır. Her e-posta, her yanıt, her ileti - sizi temsil eder.
Pikselli bir logo insanlara ayrıntılara önem vermediğinizi söyler. Büyük boy bir afiş "Ne yaptığımı bilmiyorum" diye bağırır. Yüklenmeyen görseller mi? Profesyonel görünmüyorsunuz.
Marka tutarlılığı boyutlarda yaşar. Logonuz tanınabilir olmalı ancak ezici olmamalıdır. Banner'lar baskın değil tamamlayıcı olmalıdır. Her şeyin cihazlar arasında düzgün ölçeklendirilmesi gerekir.
Sizi etkileyen son imzayı düşünün. Muhtemelen temiz, kompakt, okunabilir. Dikkat çekmek için savaşan hiçbir şey yok. Bu işte kasıtlı boyutlandırma.
Önerilen Logo Boyutları
Logolar aldatıcıdır. Çok küçük olursa kimse görmez. Çok büyük olursa diğer her şeye hakim olur.
İdeal Logo Boyutları
Maksimum 300x100px ile başlayın. Bu, genişlik ve yükseklik demektir. Çoğu logo bu alana rahatça sığar.
Yatay logolar mı? 300x80px çalışır. Kare logolar? 100x100 piksel deneyin. Dikey logolar zordur - en fazla 80x120 piksel, yoksa her şeyi aşağı iterler.
Gerçek dosya boyutları görüntülenenin iki katı olmalıdır: 600x200px kaydedilmiş, 300x100px görüntülenmiş. Bu, dosyaları devasa hale getirmeden retina ekranları idare eder.
Neden bu sayılar? E-posta istemcileri imzaları dar bir sütunda oluşturur - genellikle 500-600 piksel genişliğinde. Logonuz bunun en fazla yarısını kaplamalıdır. Metin, iletişim bilgileri ve diğer öğeler için yer bırakın.
Farklı logo yönelimleri farklı yaklaşımlar gerektirir. Geniş logolar daha iyi ölçeklenir. Uzun logolar yükseklik kısıtlamalarına ihtiyaç duyar, aksi takdirde mobil ekranlara hakim olurlar.
Kalite Kaybı Olmadan Logoları Ölçekleme
Asla bir logoyu esnetmeyin. Asla. Kaynak dosyanız 400x200 piksel ise, 300x150 piksel olarak görüntülemeyin - oranlar değişir.
Orijinal en boy oranını kullanın. 2:1 logo 300x150 piksel veya 200x100 piksel de olsa 2:1 olarak kalır. E-posta istemcileri, genişlik VEYA yükseklik ayarlarsanız bunu korur, ikisini birden ayarlamazsanız.
Mümkün olduğunda vektör dosyalarından çalışın. 2 kat görüntü boyutunda dışa aktarın. 250 piksel genişliğinde bir logo mu gösteriliyor? PNG'yi 500 piksel genişliğinde dışa aktarın. Bu, büyük dosya boyutları olmadan retinaya hazır görüntüler sağlar.
Karar vermeden önce farklı boyutlarda test edin. 300 pikselde iyi görünen bir şey 150 pikselde ayrıntılarını kaybedebilir. Önce ince ayrıntılar kaybolur - ince çizgiler, küçük metinler, karmaşık şekiller.
Logo Dosya Formatlarını Seçme
Şeffaflığa sahip PNG - bu sizin varsayılan ayarınızdır. 24 bit PNG renkleri iyi işler, saydamlığı mükemmel şekilde kullanır ve makul şekilde sıkıştırır.
Fotoğraflar veya karmaşık gradyanlar için JPEG. Ama metin içeren logolar? PNG kazanır. JPEG'ler keskin kenarların etrafında yapaylıklar oluşturur. Metin bulanıklaşır.
SVG caziptir - sonsuz ölçeklenebilir, küçük dosyalar. Ancak e-posta istemcileri bunları engelliyor. Outlook SVG'yi hiç görüntülemiyor. Gmail bunları siler. PNG ile devam edin.
Dosya boyutu için PNG'leri sıkıştırma işleminden geçirin. TinyPNG veya ImageOptim gibi araçlar 60-70%'yi görünür kalite kaybı olmadan keser. 80KB'lık bir logo 25KB olur. Aynı görünüm, daha hızlı yükleme.
Doğru renk derinliğinde kaydedin. Çoğu logonun milyonlarca renge ihtiyacı yoktur. 256 renkli PNG-8 genellikle PNG-24 ile aynı görünür ancak yarı boyuttadır.
- Dağınık karalamalara elveda deyin
- Günler içinde şık ve kendinden emin bir imzaya sahip olun
Optimum Banner ve Öğe Boyutları
Banner'lar imzanızdaki tanıtım alanlarıdır. Yanlış kullanırsanız spam olurlar. Doğru kullanırsanız tıklama alırsınız.
Daha İyi Tıklama Oranları için Banner Boyutları
Standart banner: Maksimum 600x100 piksel. Bu, çoğu e-posta istemcisinin içeriği sarmadan veya kesmeden önce ayırdığı genişliktir.
Dar afişler daha iyi çalışır - 600x70px veya 600x80px. İmzayı boğmazlar. Alıcılar iletişim bilgilerinizi bir reklam panosunu kaydırmadan görebilirler.
Mobil cihazlar her şeyi değiştiriyor. O 600 pikseller? Telefon ekranlarında 320-375 piksel olurlar. Önce bu genişlik için tasarım yapın. Metin 320 pikselde okunabilir olmalıdır. Harekete geçirici mesajlar dokunulabilir olmalıdır.
Banner yerleşimi boyut kadar önemlidir. İmzanın alt kısmı en iyi sonucu verir - önce iletişim bilgileri, sonra tanıtım. Üst yerleştirme adınız ve unvanınızla rekabet eder.
Tıklanabilir alanların boşluğa ihtiyacı vardır. Afişinizdeki bir düğme en az 44x44 piksel olmalıdır - Apple'ın minimum dokunma hedefi. Daha küçük olursa insanlar mobil cihazlarda bunu kaçırır.
E-posta Kısıtlamaları Dahilinde Banner Oluşturma
E-posta istemcileri süslü kodları kaldırır. Hover efektleri, animasyonlar, karmaşık düzenler yok. Afişiniz sadece bir resim ve bir bağlantıdan ibarettir.
Metni büyük tutun - en az 14px yazı tipi boyutu, 16px daha güvenlidir. Küçük metinler küçültüldüğünde okunamaz hale gelir.
Kontrast, e-postalarda web sitelerinden daha önemlidir. Açık renk arka planlar üzerindeki açık renk metinler önizleme bölmelerinde kaybolur. Yüksek kontrast, e-posta istemcilerinde okunabilirlik sağlar.
Web için güvenli renklere sadık kalın. E-posta istemcileri renkleri farklı işler. O mükemmel deniz mavisi marka mı? Outlook'ta mavi, Apple Mail'de yeşil görünebilir. İstemciler arasında test yapın.
Dosya boyutu sınırları banner'ları zorluyor. 600x100 piksellik bir banner 30KB'yi geçmemelidir. Mümkün olduğunca gradyanlar yerine düz renkler kullanın. Agresif bir şekilde sıkıştırın. Her kilobayt önemlidir.
E-posta İmzası Çözümlemesinin Teknik Yönleri
Çözünürlük, imzanızın keskin mi yoksa bulanık mı görüneceğini belirler. Yanlış yaparsanız, mükemmel boyutlar bile sizi kurtarmaz.
Görüntü Çözünürlüğü Etkisi
E-posta imzaları standart ekran çözünürlüğü olan 72 DPI (inç başına nokta) değerinde görüntülenir. Baskıda 300 DPI kullanılır, ancak bunun burada bir önemi yoktur.
Önemli olan: piksel boyutları ve farklı ekranlarda nasıl işlendikleri.
Retina ekranlar 2 kat daha fazla piksel gösterir. Normal ekranda 300 piksellik bir logo retinada 600 mantıksal piksele dönüşür. Kaynak resminiz yalnızca 300 piksel ise bulanık görünür.
Çözüm: görüntüleri 2 kat boyutta oluşturun, 1 kat boyutta görüntüleyin. 200x80 piksel olarak görüntülenen bir logo 400x160 piksel olarak kaydedilmelidir. HTML veya CSS bunu küçülterek size net bir retina görüntüsü sağlar.
Çoğu e-posta istemcisi, görüntü boyutlarını doğru ayarlarsanız bunu otomatik olarak halleder. Bazıları bunu yapmaz. Gerçek cihazlarda test edin - Mac'ler, iPhone'lar, yüksek çözünürlüklü Windows makineler.
En İyi Görüntü Dosyası Formatları
Şeffaflık veya metin içeren her şey için PNG. Logolar, simgeler, düğmeler - PNG bunları yapaylık olmadan işler.
Yalnızca fotoğraflar için JPEG. Bir vesikalık fotoğraf, bir ürün fotoğrafı - JPEG bunları PNG'den daha iyi sıkıştırır. Ancak kaliteyi 80-85%'de tutun. Daha düşük olursa yüzler tuhaf görünür.
GIF basit grafikler için işe yarar ve animasyonu destekler, ancak imzalardaki animasyonlu GIF'ler? Dikkat dağıtıcıdır ve genellikle engellenir. Statik görüntülere sadık kalın.
WebP daha iyi sıkıştırma sunar, ancak e-posta istemcisi desteği yetersizdir. Outlook WebP'yi tamamen görmezden geliyor. Gmail bunu hallediyor. Yalnızca Gmail kullanıcılarını hedeflemediğiniz sürece risk almaya değmez.
BMP, TIFF veya diğer egzotik formatları asla kullanmayın. Bunlar ya çok büyüktür ya da desteklenmemektedir.
Kalite Kaybı Olmadan Dosya Boyutunu Azaltma
Sıkıştırma pazarlık konusu değildir. Orijinal dışa aktarımlar her zaman gerekenden daha büyüktür.
PNG için: TinyPNG, ImageOptim veya Squoosh gibi araçları kullanın. Pikselleri değiştirmeden dosya yapısını optimize ederler. 100KB'lık bir logo sıfır görünür farkla 30KB olur.
JPEG için: 80-85% kalitesinde dışa aktarın. 100% ile 80% arasındaki fark çoğu kişi için görünmezdir ancak dosya boyutunu yarıya indirir.
PNG'ler için renk paletini azaltın. Logonuz 10 renk kullanıyorsa neden milyonlarca renkle kaydedesiniz ki? Sınırlı bir palete sahip PNG-8 önemli ölçüde daha küçüktür.
Kullanılmayan alanı kırpın. Her iki tarafında da beyaz boşluk olan 800x200 piksel logo mu? 600x150 piksele kırpın. Daha az piksel = daha küçük dosya.
Meta verileri kaldırın. Görüntü dosyaları EXIF verileri, renk profilleri ve ihtiyacınız olmayan diğer bilgileri içerir. Hepsini çıkarın. ImageOptim gibi araçlar bunu otomatik olarak yapar.
"Ge-Sign yeni e-posta imzamı oluşturdu ve anında yüklenirken profesyonel görünüyor."
Kevin F., Emlakçı
E-posta İmzalarını Test Etme ve Uyarlama
İmzanız e-posta istemcinizde çalışıyor. Harika. Peki ya alıcılarınızın kullandığı diğer düzinelerce istemci?
E-posta İmzalarını Test Etmenin Önemi
Outlook Web'e karşı Outlook Desktop'a karşı Outlook Mobile - üç farklı işleme motoru, üç farklı sonuç.
Chrome'da Gmail, Safari'de Gmail, iOS'ta Gmail uygulaması - hepsi biraz farklı.
Apple Mail, Thunderbird, Yahoo Mail, Proton Mail - her birinin tuhaflıkları var.
Test etmek isteğe bağlı değildir. Farklı platformlardaki hesaplara test e-postaları gönderin. Masaüstü ve mobil cihazları kontrol edin. Şuna bakın:
- Görüntüler doğru yükleniyor
- Sabit tutulan boyutlar
- Garip boşluklar veya aralıklar yok
- Bağlantılar çalışıyor
- Okunabilir kalan metin
Yaygın hatalar: Outlook'ta uzatılmış resimler, Apple Mail mobil uygulamasında kesilen afişler, Gmail uygulamasında boşluk sorunları.
Şirket genelinde imza gönderiyorsanız Litmus veya Email on Acid gibi test araçlarını kullanın. Bu araçlar düzinelerce müşteride aynı anda önizleme gösterir.
Manuel testler de işe yarar - sadece zaman alıcıdır. Büyük sağlayıcılarda ücretsiz hesaplar oluşturun. Kendinize test e-postaları gönderin. Telefonunuzdan kontrol edin.
İmzaları Mobil Cihazlar için Uyarlama
E-postaların 50%'sinden fazlası mobil cihazlarda açılıyor. İmzanızın öncelikle orada çalışması gerekir.
Mobil ekranlar 320-428 piksel genişliğindedir. Bu 600 piksellik banner? Sığdırmak için küçültülür. Metin küçülür. Görüntüler ayrıntılarını kaybeder.
Mobil öncelikli bir zihniyetle tasarlayın:
- Toplam imza genişliğini 500 pikselin altında tutun
- Daha büyük yazı tipi boyutları kullanın (minimum 16px)
- Tıklanabilir öğeleri en az 44x44 piksel yapın
- Mümkün olduğunda elemanları dikey olarak istifleyin
- Gerçek telefonlarda test edin, sadece tarayıcıyı yeniden boyutlandırmayın
Görüntüler orantılı olarak ölçeklendirilmelidir. HTML'de maksimum genişliği 100% olarak ayarlayın. Bu, e-posta istemcilerinin düzeni bozmadan görüntüleri ekranlara sığacak şekilde küçültmesini sağlar.
Mobil veri hızlarını düşünün. O 200KB'lık imza mı? Yavaş bağlantılarda yüklenmesi saniyeler sürer. Alıcılar görünmeden önce kaydırarak geçerler.
Bazı şirketler ayrı mobil imzalar oluşturur - daha basit, daha küçük, daha hızlı. İşi iki katına çıkarır ama harika bir mobil deneyim sağlar.
Ekran Sorunlarından Kaçınma
E-posta istemcileri imzaları tahmin edilebilir şekillerde bozar. İşte neyin yanlış gittiği ve bunun nasıl önleneceği:
Tablolar, divler değil. E-posta HTML'si 2005 yılında kalmış. Yapı için tablo düzenlerini kullanın. Div'ler ve modern CSS genellikle başarısız olur.
Yalnızca satır içi stiller. Harici stil sayfaları çıkarılır. etiketleri yok sayılır. Stilleri doğrudan öğelere yerleştirin: <td style="padding: 10px;">.
Mutlak görüntü URL'leri. Ekli dosyalara değil, bir sunucuda barındırılan resimlere bağlantı verin. Ekli resimler yanıtlarda veya iletilerde görüntülenmeyebilir.
Her şey için alt metin. Resimler yüklenmediğinde (istemci veya yavaş bağlantı tarafından engellendiğinde), alt metin gösterilir. İmzaları resim olmadan okunabilir hale getirir.
Arka plan resmi yok. Outlook bunları yok sayar. Bunun yerine düz renkler veya normal resimler kullanın.
Bağlantı biçimlendirmesini test edin. Bazı istemciler URL'leri otomatik biçimlendirerek stilize metin bağlantılarını bozar. Bağlantılı metnin doğru göründüğünü her zaman kontrol edin.
Egzotik yazı tiplerinden kaçının. Web yazı tipleri çalışmıyor. Sistem yazı tiplerine sadık kalın: Arial, Helvetica, Georgia, Times. Her yerde görüntülenirler.
Çizgi yüksekliğine ve aralığına dikkat edin. Düzenleyicinizde iyi görünen bir şey Outlook'ta fazladan boşluklarla işlenebilir. Aralıklar için belirli piksel değerleri kullanın.
E-posta imzanız statik değildir - düşman topraklarında seyahat eden bir koddur. Her müşteri onu farklı yorumlar. Uygun boyutlar ve dosya boyutları, her yerde profesyonel görünmeniz için size en iyi şansı verir.
Bu özelliklerle başlayın:
- Logolar: 300x100px maksimum, 20KB altında
- Afişler: Maksimum 600x80px, 30KB altında
- Toplam imza: 50KB altında
- Tüm görüntüler: Retina için 2x piksel yoğunluğu
Her yeri test edin. Neyin işe yaradığına göre ayarlayın. İmzanız yüzlerce e-postada sizi temsil eder. Önemli olmasını sağlayın.
Ge-Sign Editör Ekibi tarafından yazılmıştır.
