E-Mail-Signatur Hölle - Wie kann man ein Logo einfügen und es scharf halten?

11

Ich habe in diesem Forum einige nützliche Themen in Bezug auf die Probleme gefunden, die durch das (Anzeigen) von Bildern in E-Mail-Signaturen entstehen - hier zum Beispiel - und ich habe im gesamten Web gesucht, aber immer noch keine gute Lösung dafür gefunden adressiert das Problem ausreichend. Ein Kunde von mir möchte einfach, dass das Logo seines Unternehmens in die Signatur seiner E-Mails aufgenommen wird, und die Probleme, auf die ich gestoßen bin, können wie folgt zusammengefasst werden:

  1. Ich kann eine gerasterte Version des Logos von AI in der tatsächlichen Größe exportieren. Auf dem Desktop sieht es scharf aus, auf Displays mit hoher Dichte (z. B. "Retina") wie dem iPhone jedoch pixelig / verschwommen.
  2. Wie in dem Thread, auf den ich verwiesen habe, vorgeschlagen, kann ich das Logo mit dem 2-3-fachen der tatsächlich angezeigten Größe exportieren, um auf die Displays mit hoher Dichte abzuzielen. Das Logo sieht dann auf Displays ohne hohe Dichte weich aus, wenn es verkleinert wird . Dies ist in diesem Fall ein besonderes Problem, da das Logo Text enthält, der schrecklich aussieht, wenn er dem tatsächlichen Text im Browser / E-Mail-Client gegenübergestellt wird.
  3. Ich habe .svgals Option in Betracht gezogen , aber anscheinend ist die Unterstützung nicht großartig; In diesem Fall gehe ich davon aus, dass die überwiegende Mehrheit der Benutzer, die die E-Mails dieses Clients lesen, Outlook verwenden. Daher ist etwas, das nur in iOS / Webkit / etc ordnungsgemäß gerendert wird, keine praktikable Option.

Ich bin zu diesem Zeitpunkt ratlos und frage mich, ob es da draußen noch eine andere mögliche Option gibt. Ich bin mir zum Beispiel nicht sicher, ob es möglich ist, ein Bild mit hoher Dichte und einem Fallback mit niedriger Auflösung in einer E-Mail-Signatur zu implementieren.

Anregungen / Erkenntnisse hier sind sehr willkommen. Es ist fast komisch, wie schwierig sich diese Aufgabe herausgestellt hat.

Nickpish
quelle
6
Es ist eine Narrenjagd - aber Kunden sind sich oft nicht bewusst oder unmöglich zu überzeugen. Sie können den E-Mail-Client des Benutzers nicht steuern. Viele Benutzer (wie ich) sehen nur E-Mails im Klartext an. Unabhängig davon, was Sie tun, handelt es sich lediglich um einen Bildanhang, der sinnlos ist.
Scott
Sehr richtig; und es ist in der Tat eine Narrenjagd. Leider bekomme ich die Antwort "Aber ich habe E-Mail-Signatur-Logos gesehen, die scharf aussehen", wodurch jede technische Erklärung, so
wahr sie auch sein mag
3
Ich finde es nicht universell zu erklären, was für den E-Mail- Client des Kunden funktioniert . Zum Beispiel passt diese Hose zu Ihrem Körper, aber wie viele Körper passen nicht ? Sie können auf etwas Bestimmtes zielen, aber Sie können nicht auf das Universum zielen. Natürlich können gehostete Bilder reagieren, aber diese sind selbst nie Teil der E-Mail. Es ist zweifelhaft, dass Ihr Kunde mehr tun möchte, als nur das Bild an seine E-Mails anzuhängen - was niemals funktionieren wird.
Scott
Richtig. Ich habe viel zu viel Zeit damit verbracht / verschwendet, wie es ist. Da es sich bei dem fraglichen Logo hauptsächlich um Text handelt, ist die beste Lösung, die ich gefunden habe, die nächstgelegene "web-sichere" Schriftart zu finden und das Ganze in reinem HTML / CSS ohne Bilder zu erstellen. Natürlich stimmt die Schriftart nicht genau überein und wie Sie bereits erwähnt haben, wer weiß, wie viele E-Mail-Empfänger das Ding jemals sehen werden, in welcher Form es letztendlich auch immer sein
mag
@ font-face ist auch in E-Mail-Clients unzuverlässig.
Scott

Antworten:

8

Wenn ich du wäre, würde ich die Idee aufgeben. Die Bearbeitung von Mitarbeitern ist das geringste Ihrer Probleme, da E-Mails einfach keine Unterstützung bieten.

Aber die Probleme beginnen früher. Die meisten E-Mail-Clients entfernen Bilder und fügen eine Schaltfläche hinzu, über die der Benutzer die Bilder aktivieren kann. All diese Aufregung für nur ein Logo ist einfach zu mühsam.

Ich würde einfach das Sig mit Klartext schreiben und das wars.

Aber vielleicht willst du das nicht aufgeben diese etwas sein könnte für Ihre

Oder verwenden Sie diese Technik:

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

KSPR
quelle
Danke für die Antwort und die Links, Kaspar; Ich werde sie auf jeden Fall überprüfen. Am liebsten hätte ich das Ganze vor einer Woche aufgegeben, aber der Kunde kann die technischen Einschränkungen nicht vollständig erfassen. Es ist schwierig zu erklären, wie etwas scheinbar so Einfaches in Wirklichkeit zutiefst schwierig, wenn nicht unmöglich ist, ha.
Nickpish
4
Normalerweise werfe ich E-Mail-Client-Support-Diagramme auf den Client, die sehr gut zeigen, wie schlecht der Support für verschiedene Dinge ist. Auf diese Weise ist es einfacher , dass die Humanressourcen zu zeigen , besser mit etwas anderes genutzt werden: campaignmonitor.com/resources/will-it-work/image-blocking
KSPR
Guter Punkt - diese Tabelle ist sehr hilfreich, danke.
Nickpish
4

Technische Lösungen könnten sein:

  1. Hosten Sie das Image auf einem Server und binden Sie einfach ein ein <img> Tag mit der Adresse ein. Der Server könnte die Metainformationen der HTTP-Anfrage verwenden, die das Bild abrufen und die richtige Bildgröße für das Gerät liefern.

  2. Machen Sie dasselbe mit CSS, das die Anzeigegröße berücksichtigt (aber ich weiß nicht, wie gut dies bei verschiedenen E-Mail-Clients unterstützt wird). Im Wesentlichen können Sie jedoch beide Bilder an die E-Mail anhängen und CSS für verschiedene Anzeigegrößen verwenden, um das anzuzeigen rechtes Bild (und Sie können sogar ein spezielles Bild zum Drucken angeben ...)

Falco
quelle
1
Hm, danke für die Vorschläge; Beziehen Sie sich in Bezug auf Letzteres auf Medienabfragen und verwenden Hintergrundbilder, die basierend auf dpi oder Ansichtsfenster ausgetauscht werden?
Nickpish
# 1 Ich habe in den obigen Kommentaren darauf hingewiesen. Dies ist so ziemlich die einzig mögliche Lösung. # 2 funktioniert nicht für viele E-Mail-Clients - Outlook fällt sofort ein.
Scott
@nickpish genau! Dies wird auf vielen modernen Websites (meistens mobil) verwendet, daher gibt es viele Tutorials.
Falco
@Scott Ja - gehostete Bilder ermöglichen serverseitige Logik und damit Reaktionsfähigkeit :-) Aber wie Kaspar in seiner Antwort erwähnt hat, werden die meisten Clients wahrscheinlich Bilder entfernen oder ganz blockieren, sodass die letzte Lösung wahrscheinlich das Senden von Klartext-Mails mit einem Link zu wäre eine gehostete Kopie der Mail als "schön gestaltete E-Mail online anzeigen"
Falco
@Falco Die Lösung für Medienabfragen ist faszinierend. Ich bin ein Webdesigner, der sich so gut auskennt. Obwohl, wie Scott
betont
2

Viele Mail-Clients unterstützen heute SVG (Scalable Vector Graphics). Zeigen Sie für diese Clients eine SVG an. Es wird garantiert nicht durch Skalierung zerstört, da es sich wie ein Computerprogramm liest (z. B. einen Kreis zeichnen, dann eine mit diesem Kreis verbundene Linie bei 120 und 240 Grad zeichnen usw.), sodass der Prozessor ein nicht verschwommenes Bild korrekt wiedergibt in unterstützender Software.

Es gibt eine Vielzahl von Fallback-Techniken, wenn Sie sich für ältere Clients interessieren. Sie müssen jedoch ermitteln, welche Fallbacks Sie gegebenenfalls interessieren (z. B. bei welchen E-Mail-Clients Sie die Signatur anzeigen möchten). Ich persönlich würde eine Methode wählen, die mit minimalem Aufwand eine nahezu universelle Abdeckung bietet, anstatt eine komplizierte 100% ige Abdeckung oder keine Abdeckung zu versuchen - es gibt eine nette Methode, die alle außer Android 2.3 unterstützt, was wahrscheinlich selten ist und nur vier Zeilen umfasst Code.

Andererseits sollten CSS-Medienselektoren wahrscheinlich auch funktionieren. Wenn die Bildschirmauflösung weniger als beispielsweise 800 Pixel beträgt, verwenden Sie das heute verwendete PNG oder JPEG, andernfalls ein SVG. Ich bin mir ziemlich sicher, dass Geräte mit "Retina-Display" SVG unterstützen würden, oder zumindest die Mehrheit.

Phyrfox
quelle
1
Für SVG ist die letzte Frage in diesem Fall, ob es von Outlook unterstützt wird, was ich nicht glaube.
Nickpish
1
@nickpish SVG funktioniert in Outlook nicht, deshalb habe ich den Fallback-Mechanismus erwähnt. Outlook unterstützt gerne CSS, das das Originalbild anstelle des SVG rendert. Und soweit mir bekannt ist, mag niemand Outlook unter iOS (wie in, sie werden es verwenden, wenn sie müssen , aber ...).
Phyrfox
1
Verstanden ... Ich werde auf jeden Fall den von Ihnen bereitgestellten Link untersuchen. das könnte die Antwort sein. Danke Phyrfox.
Nickpish
Obwohl Sie HighDPI nicht gleich iOS-Geräten einstellen sollten ... Es gibt immer modernere Geräte (Smartphones, Tablets, Laptops, Desktops) mit höherer Dichte und Symbolskalierung, was zu unscharfen Bildern führt!
Falco
0

Wirklich alter Beitrag, aber da ich stundenlang mit dem gleichen Problem zu kämpfen hatte und es gerade gelöst habe, werde ich beschreiben, wie ich es gemacht habe. Das Problem, mit dem ich konfrontiert war, war, dass das Firmenlogo, das ich auf Desktop-Monitoren (sogar in HD) gut angezeigt hatte. Aber es sah verschwommen / verschwommen aus, wenn es auf einem Retina-Display-Telefon gesehen wurde. Das Bild, das ich vom Kunden erhalten habe, entsprach genau der gewünschten Größe. Das Problem (ausschließlich für Entwickler :) bei Retina-Displays ist, dass sie viermal mehr Pixel in einer Einheitsfläche haben als Standardbildschirme. Sie benötigen also ein Bild mit der doppelten Größe, die Sie auf dem Bildschirm haben möchten. Wenn Sie beispielsweise möchten, dass Ihr Logo eine Breite und Höhe von 124 x 48 hat, erstellen Sie ein Bild von 248 x 28. Dies verdoppelt die Bildauflösung und vervierfacht die Anzahl der Pixel. Verwenden Sie dann HTML, um zu erzwingen, dass Ihr neues Bild mit der Hälfte seiner neuen Breite angezeigt wird, d. H.<img src=”your_image.jpg” width=”124” />. Dadurch sollten Bildpixelungen oder Unschärfen behoben werden. Prost

Schnee
quelle
0

Ich hatte das gleiche Problem! Super frustrierend, aber ich fand schließlich heraus, dass die Verwendung einer Zeichenfläche mit einer Größe von 120 x 300 x Breite (Breite), beispielsweise in Illustrator, und der Export für Bildschirme als PNG 8 mit einer Auflösung von 96 ppi für Microsoft Outlook-Signaturen gut funktioniert!

Rachel
quelle
1
Das ist ein E-Mail-Client von insgesamt unzähligen. Haben Sie diese Methode in mehreren anderen E-Mail-Clients getestet?
Zach Saucier
1
Warum sollte ppi etwas tun?
Joojaa