E-posta imza cehennemi - Bir logo resmi nasıl eklenir ve keskin kalır?


11

Ben e-posta izler-- içinde (görüntüleme) görüntüleri yarattığı sorunlar açısından bu forumunda bir kaç yararlı konuları buldum burada hala iyi bir çözüm olduğunu web üzerinden tüm, ama bulamadı Araştırılan sonra, örneğin ben ettik için, sorunu yeterince ele alıyor. Bir müşterim, şirketin logosunun e-postalarının imzasına dahil edilmesini ister ve karşılaştığım sorunlar aşağıdaki gibi özetlenebilir:

  1. Logonun rasterleştirilmiş bir sürümünü AI'dan gerçek boyutta dışa aktarabilirim ve masaüstünde keskin görünecek, ancak iPhone gibi yüksek yoğunluklu (ör. "Retina") ekranlarda pikselli / bulanık görünecektir.
  2. Referans verdiğim iplikte önerildiği gibi, yüksek yoğunluklu ekranları hedeflemek için logoyu gerçek, görüntülenen boyutun 2-3 katına aktarabilirim, ancak logo, yüksek yoğunluklu olmayan ekranlarda ölçeklendiğinde yumuşak görünecektir . Logo, tarayıcı / e-posta istemcisinde gerçek metinle yan yana yerleştirildiğinde korkunç görünen metin içerdiğinden, bu örnekte bu özel bir sorundur.
  3. .svgBir seçenek olarak düşündüm , ancak görünüşe göre destek harika değil; ve bu durumda, bu istemcinin e-postasını okuyan kullanıcıların büyük çoğunluğunun Outlook kullanacağını varsayıyorum, bu nedenle yalnızca iOS / webkit / etc'de düzgün bir şekilde görüntülenen bir şey geçerli bir seçenek değildir.

Bu noktada bir kayıptayım ve başka olası bir seçenek olup olmadığını merak ediyorum. Örneğin, bir e-posta imzasında lo-res yedek ile yüksek yoğunluklu bir görüntü uygulamak mümkün olup olmadığından emin değilim?

Burada herhangi bir öneri / anlayış çok takdir edilmektedir. Bu görevin ne kadar zor olduğu komik.


6
Bu bir aptalın işidir - ancak müşteriler genellikle ikna etmek için farkında değildir veya imkansızdır. Kullanıcının e-posta istemcisini kontrol edemezsiniz. Birçok kullanıcı (benim gibi) yalnızca düz metin e-postalarını görüntüler, bu nedenle ne yaparsanız yapın, yalnızca bir resim eki ve anlamsızdır.
Scott

Çok doğru; ve 'bu aptalın işidir. Ne yazık ki "ama keskin görünen e-posta imza logoları gördüm" yanıtı alıyorum, böylece gerçeğe uygun, poz vermek çok daha zor olan herhangi bir teknik açıklama yapıyor ...
nickpish

3
Müşteriler için işe yarayan e-posta istemcisinin evrensel olmadığını açıklamakta fayda var. Örneğin, pantolon, söz konusu ikili uyuyor vücudunuzu ama onlar kaç ceset yok değil sığacak? Belirli bir şeyi hedefleyebilirsiniz, ancak evreni hedefleyemezsiniz. Tabii barındırılan görüntüleri duyarlı olabilir, ama olanlardır asla aslında e-posta kendileri parçası. Müşterinizin görüntüyü e-postalarına iliştirmekten başka bir şey yapmak istemediği şüphelidir - ki bu asla işe yaramaz.
Scott

Sağ. Ben olduğu gibi bu konuda çok fazla zaman harcadım / boşa. Söz konusu logonun çoğunlukla metin olduğu göz önüne alındığında, ortaya çıkardığım en iyi çözüm, en yakın "web uyumlu" yazı tipini bulmak ve hiçbir şeyi saf html / css'de hiç görüntü oluşturmadan oluşturmaktır. Tabii ki, yazı tipi tam olarak eşleşmiyor ve bahsettiğiniz gibi, nihayetinde ne olursa olsun, kaç e-posta alıcısının gerçekten bir şey göreceğini kim bilebilir ...
nickpish

@ font-face, e-posta istemcilerinde de güvenilir değildir.
Scott

Yanıtlar:


8

Ben olsaydım Fikri terk ederdim. E-postalarda destek olmadığı için işe alımlar sorunlarınızın en azıdır.

Ancak sorunlar daha erken başlar. Çoğu e-posta istemcisi görüntüleri çıkarır ve kullanıcının görüntüleri etkinleştirebileceği bir düğme ekler. Sadece bir logo için tüm bu karışıklık sadece bir güçlük.

SIG sadece düz metin ile yazmak ve bu kadar.

Ama belki vazgeçmek istemiyorsun, bu senin için bir şey olabilir

Veya bu tekniği kullanın:

http://blog.mailchimp.com/keep-high-density-displays-from-uglifying-your-emails/


Yanıt ve bağlantılar için teşekkürler, Kaspar; Kesinlikle kontrol edeceğim. Bir hafta önce her şeyi terk etmiş olmak isterdim, ancak müşteri eldeki teknik sınırlamaları tam olarak kavrayamaz. Görünüşte bu kadar basit bir şeyin gerçekte imkansız olmasa bile çok zor olduğunu açıklamak zor, ha.
nickpish

4
Genellikle istemciye E-Posta İstemcisi destek grafiklerini atarım, bu da farklı şeyler için ne kadar zayıf desteğin çok güzel olduğunu gösterir. Bu şekilde, insan kaynaklarının başka bir şeyle daha iyi kullanıldığını göstermek daha kolaydır: kampanyamonitor.com/resources/will-it-work/image-blocking
KSPR

İyi bir nokta - bu grafik çok yardımcı oluyor, teşekkürler.
nickpish

4

Teknik çözümler şunlar olabilir:

  1. Görüntüyü bir sunucuda barındırın ve <img>adresli bir etiket yerleştirin . Sunucu, görüntüyü getirecek ve aygıt için doğru görüntü boyutunu sağlayacak olan HTTP İsteğinin meta bilgilerini kullanabilir.

  2. Ekran boyutu farkında olan CSS için de aynısını yapın (Ama bunun için desteğin çeşitli E-Posta İstemcilerinde ne kadar iyi olduğunu bilmiyorum) Ama aslında her iki görüntüyü postaya ekleyebilir ve görüntülemek için çeşitli ekran boyutları için CSS kullanabilirsiniz doğru görüntü (ve yazdırmak için özel bir görüntü bile belirtebilirsiniz ...)


1
Hm, öneriler için teşekkürler; ikincisi ile ilgili olarak, medya sorgularına atıfta bulunuyor musunuz ve dpi veya görünüm alanına göre takas eden arka plan resimleri kullanıyor musunuz?
nickpish

# 1 Yukarıdaki yorumlarda bahsettim. Bu hemen hemen tek olası çözümdür. # 2 pek çok e-posta istemcisi için çalışmaz - Outlook hemen akla gelir.
Scott

@nickpish tam olarak! Bu birçok modern Web sitesinde (çoğunlukla mobil) kullanılır, bu yüzden etrafında birçok öğretici vardır.
Falco

@Scott Evet - barındırılan görüntüler sunucu tarafı mantığına ve dolayısıyla yanıt verebilirliğe izin verir :-) Ancak Kaspar'ın cevabında belirtildiği gibi, çoğu Müşteri muhtemelen görüntüleri tamamen keser veya engeller, bu nedenle son çözüm muhtemelen bir bağlantı içeren düz metin postalar gönderir "çevrimiçi güzel e-postayı çevrimiçi görüntüle" olarak postanın barındırılan bir kopyası
Falco

@Falco medya sorgulama çözümü ilgi çekici bir çözümdür; Ben oldukça iyi bir web tasarımcısıyım. Scott'ın da belirttiği gibi, Outlook e-postadaki medya sorgularını desteklemiyorsa maalesef bir sorun değil
nickpish

2

Bugün birçok posta istemcisi SVG'yi (Ölçeklenebilir Vektör Grafikleri) desteklemektedir. Bu istemciler için bir SVG gösterin. Ölçekleme ile yok edilmemesi garanti edilir, çünkü bir bilgisayar programı gibi okunur (örneğin bir daire çizin, sonra o daireye bağlı bir çizgi 120 ve 240 derecede vb. Çizin), böylece işlemci doğru bir şekilde bulanık olmayan bir görüntü oluşturur iç destek yazılımı.

Eski istemcileri önemsiyorsanız çeşitli geri dönüş teknikleri vardır , ancak varsa hangi yedekleri önemsediğinizi belirlemeniz gerekir (örneğin, imzayı göstermekten endişe duyduğunuz e-posta istemcileri). Kişisel olarak, karmaşık bir% 100 kapsama alanı veya kapsama alanı denemek yerine neredeyse evrensel bir kapak sağlayan neredeyse bir yöntem seçerdim - Android 2.3 dışında, muhtemelen nadir olan ve dört satırdan oluşan güzel bir yöntem var. kodu.

Öte yandan, CSS medya seçicileri de muhtemelen çalışmalıdır. Ekran çözünürlüğü 800 pikselden daha düşükse, bugün kullandığınız PNG veya JPEG'i kullanın, aksi takdirde bir SVG kullanın. Herhangi bir "retina ekran" cihazının SVG'yi destekleyeceğinden veya en azından çoğunluğun destekleyeceğinden oldukça eminim.


1
SVG söz konusu olduğunda, bu durumda nihai soru, Outlook tarafından desteklenip desteklenmediği olup olmadığını düşünüyorum.
nickpish

1
@nickpish SVG Outlook'ta çalışmaz, bu yüzden yedek mekanizmadan bahsettim. Outlook, orijinal görüntüyü SVG yerine sunan CSS'yi memnuniyetle destekleyecektir. Ve, biliyorum kadarıyla, hiç kimse (olduğu gibi, onlar eğer kullanacağız iOS'ta Outlook sever var ..., ama).
phyrfox

1
Anladım-- Kesinlikle sağladığınız bağlantıya bakacağım; cevap bu olabilir. Teşekkürler phyrfox.
nickpish

HighDPI'yi iOS aygıtlarına eşit olarak ayarlamamış olsanız da ... Daha fazla yoğunluk ve simge ölçeklendirmesi olan daha bulanık modern görüntüler (Akıllı telefonlar, tabletler, dizüstü bilgisayarlar, masaüstü bilgisayarlar) var ve bulanık görüntülere neden oluyor!
Falco

0

Gerçekten eski yazı ama saatlerce aynı sorunla uğraştığım ve çözdüğüm için nasıl yaptığımı açıklayacağım. Karşılaştığım sorun, masaüstü monitörlerde (hatta HD) iyi gösterdiğim şirket logosuydu. Ancak retina ekranlı bir telefonda göründüğünde bulanık / bulanık görünüyordu. Müşteriden aldığım görüntü tam olarak istenen boyuta eşitti. Retina ekranlardaki sorun (kesinlikle devs için :) bir birim alanında standart ekranlardan dört kat daha fazla piksele sahip olmalarıdır. Yani ihtiyacınız olan şey, ekranda istediğiniz boyutun iki katı büyüklüğünde bir görüntü. Örneğin, logonuzun 124x48 genişlik ve yükseklikte olmasını istiyorsanız, 248x28 boyutunda bir resim oluşturun. Bu, görüntü çözünürlüğünü iki katına çıkarır ve piksel sayısını dört katına çıkarır. Ardından HTML'yi kullanarak yeni resminizi yeni genişliğinin yarısında göstermeye zorlayın;<img src=”your_image.jpg” width=”124” />. Bunu yapmak, görüntü pikseli veya bulanıklığını çözmelidir. Şerefe


0

Aynı sorunu yaşadım! Süper sinir bozucu, ama sonunda Illustrator'da 120 piksel (yükseklik) x 300 piksel (genişlik) çalışma yüzeyi kullanmanın, daha sonra 96 ​​ppi çözünürlüğe sahip bir PNG 8 olarak ekranlar için dışa aktarmanın Microsoft görünüm imzaları için iyi çalıştığını buldum!


1
Toplamda sayısız e-posta istemcisi. Bu yöntemi başka birden çok e-posta istemcisinde test ettiniz mi?
Zach Saucier

1
Neden ppi bir şey yapsın ki?
joojaa
Sitemizi kullandığınızda şunları okuyup anladığınızı kabul etmiş olursunuz: Çerez Politikası ve Gizlilik Politikası.
Licensed under cc by-sa 3.0 with attribution required.