Mail imza boyutu ve HTML: logo ve banner neden bozuk görünür?

Tarayıcıda kusursuz görünen bir imza, alıcının Outlook'unda dev bir logoya, Gmail'de boş bir kutuya ya da telefonda yana kayan bir tabloya dönüşebilir. Bunun nedeni mail uygulamalarının HTML'i web tarayıcıları gibi göstermemesidir. Bu yazıda en sık görülen bozulmaları ve nedenlerini anlatıyoruz.

Doğru mail imza boyutu

• İmza bloğunun genişliği 600 pikseli geçmesin; çoğu imza için 400–500 piksel yeterlidir ve telefonda kaymadan okunur.
• Logo genellikle 150–250 piksel genişliğinde kullanılır.
• Banner için yaygın genişlik 600 piksele kadardır; yüksekliği 100–150 piksel civarında tutmak imzanın maili ezmesini önler.
• Her görselin dosya boyutu 50 KB'ın altında kalsın. Ağır görseller her yanıtta tekrarlandığında maili büyütür.

Logo neden kocaman ya da bulanık görünüyor?

Klasik Outlook HTML'i Word motoruyla gösterir ve CSS'teki genişlik değerlerini her zaman dikkate almaz. Görselin genişliği img etiketinde width ve height öznitelikleriyle yazılmamışsa Outlook görseli kendi gerçek boyutunda gösterir; 1000 piksellik bir logo imzayı kaplar. Yüksek ölçeklemeli Windows ekranlarında da aynı nedenle boyutlar kayabilir.

• Görselin gösterileceği genişliği img etiketinde width özniteliğiyle piksel olarak yazın.
• Retina ekranlarda net görünmesi için görseli gösterileceği boyutun iki katı çözünürlükte hazırlayıp HTML'de yarı genişliğe ayarlayın.
• Görseli küçültmek için yalnızca CSS'e güvenmeyin.

Logo neden boş kutu olarak görünüyor?

• SVG ve WebP: Outlook SVG görselleri engeller, Gmail SVG göstermez. Logoyu PNG ya da JPG olarak kullanın.
• Erişilemeyen adres: Görsel paylaşıma kapalı bir bulut klasöründeyse ya da http ile sunuluyorsa alıcıda açılmaz. Herkese açık bir https adresi kullanın ya da görseli maile gömün.
• Görsel engelleme: Birçok mail uygulaması bağlantılı görselleri alıcı izin verene kadar indirmez. Bu yüzden ad ve iletişim bilgileri görselin içinde değil, metin olarak yazılmalı; görsele alternatif metin eklenmelidir.

Karanlık modda kaybolan logo

Karanlık modda mail uygulamaları arka planı koyulaştırır, bazen renkleri ters çevirir. Şeffaf arka planlı siyah bir logo koyu zeminde görünmez olur. Logoya açık renkli bir arka plan ya da ince bir kenar vermek ve saf siyah yerine koyu gri kullanmak çoğu durumda sorunu çözer.

Outlook'ta bozulmayan HTML mail imza kuralları

• Yerleşimi div ve flexbox ile değil, tablolarla kurun.
• CSS'i style bloğunda değil, her öğenin üzerinde satır içi (inline) yazın.
• Arka plan görselleri klasik Outlook'ta çoğu zaman görünmez; önemli bilgiyi arka plana koymayın.
• Arial, Helvetica, Verdana, Tahoma, Segoe UI ya da Georgia gibi her bilgisayarda bulunan yazı tiplerini kullanın.
• Telefonu tel:, mail adresini mailto: bağlantısıyla yazın.
• Word'den kopyalanan imzalar gizli biçimlendirme taşır; Gmail'in 10.000 karakterlik imza sınırını aşabilir.

Gömülü görsel mi, bağlantılı görsel mi?

Maile gömülü görseller alıcı izin vermeden görünür, ama maili biraz büyütür ve bazı uygulamalarda ek (ataç) gibi listelenebilir. Bağlantılı görseller maili hafif tutar, ama alıcı tarafında engellenebilir. Hangisini seçerseniz seçin, imzayı Outlook, Gmail, Apple Mail ve telefonda test etmeden yaygınlaştırmayın.

Bu kuralları herkesin imzasında korumak

Tek bir imzayı bu kurallara göre hazırlamak bir öğleden sonranızı alır. Asıl sorun, çalışanların imzayı kendi bilgisayarlarına kopyalarken ya da düzenlerken bu yapıyı bozmasıdır. Mail imza yönetimiyle HTML şablon tek bir yerde durur ve her maile sunucu tarafında aynı kodla eklenir. VantaSignBox logo ve banner dahil imza görsellerini maile gömer; böylece görseller alıcının izin vermesini beklemeden görünür.