L'enfer de la signature électronique - Comment inclure une image de logo et la garder nette?

11

J'ai trouvé quelques discussions utiles sur ce forum en ce qui concerne les problèmes posés par (l'affichage) d'images dans les signatures de courrier électronique - ici , par exemple - et j'ai cherché partout sur le Web, mais je n'ai toujours pas trouvé de bonne solution qui traite suffisamment le problème. Un de mes clients voudrait simplement que le logo de son entreprise soit inclus dans la signature de ses courriels, et les problèmes que j'ai rencontrés peuvent être résumés comme suit:

  1. Je peux exporter une version pixellisée du logo de l'IA à sa taille réelle, et elle sera nette sur le bureau mais pixelisée / floue sur les écrans haute densité (par exemple "rétine") tels que l'iPhone.
  2. Comme suggéré dans le fil de discussion auquel j'ai fait référence, je peux exporter le logo à 2-3 fois la taille réelle affichée pour cibler les écrans haute densité, mais le logo apparaîtra alors doux sur les écrans non haute densité lorsqu'il est réduit . C'est un problème particulier dans ce cas, car le logo contient du texte, qui a l'air terrible lorsqu'il est juxtaposé au texte réel dans le navigateur / client de messagerie.
  3. J'ai considéré .svgcomme une option, mais apparemment, le support n'est pas excellent; et dans ce cas, je suppose que la grande majorité des utilisateurs qui lisent l'e-mail de ce client utiliseront Outlook, donc quelque chose qui ne s'affiche correctement que dans iOS / webkit / etc n'est pas une option viable.

Je suis désemparé à ce stade et je me demande s'il y a une autre option possible. Je ne suis pas sûr, par exemple, s'il est possible d'implémenter une image haute densité avec repli en basse résolution dans une signature d'email?

Toutes suggestions / idées ici sont très appréciées. C'est presque comique à quel point cette tâche s'est avérée difficile.

nickpish
la source
6
C'est une course de dupe - mais les clients sont souvent inconscients ou impossibles à convaincre. Vous ne pouvez pas contrôler le client de messagerie de l'utilisateur. De nombreux utilisateurs (comme moi) ne voient que les e-mails en texte brut, donc peu importe ce que vous faites, c'est juste une pièce jointe d'image et inutile.
Scott
Très vrai; et la course de cet imbécile en effet. Malheureusement, je reçois la réponse "mais j'ai vu des logos de signature d'e-mail qui ont l'air nets", rendant ainsi toute explication technique, aussi véridique, que beaucoup plus difficile à poser ...
nickpish
3
Je trouve expliquer que ce qui fonctionne pour le client de messagerie des clients n'est pas une aide universelle. Par exemple, cette paire de pantalons s'adapte à votre corps, mais combien de corps ne conviennent -ils pas ? Vous pouvez cibler quelque chose de spécifique, mais vous ne pouvez pas cibler l'univers. Bien sûr, les images hébergées peuvent être réactives, mais elles ne font jamais partie du courrier électronique elles-mêmes. Il est peu probable que votre client veuille faire autre chose que de simplement joindre l'image à ses courriels - ce qui ne fonctionnera jamais .
Scott
Droite. J'ai passé / perdu trop de temps sur ce sujet. Étant donné que le logo en question est principalement du texte, la meilleure solution que j'ai trouvée est de trouver la police "web safe" la plus proche et de construire le tout en html / css pur sans aucune image. Bien sûr, la police ne correspond pas exactement et comme vous l'avez mentionné, qui sait combien de destinataires de courrier électronique verront jamais la chose, quelle que soit la forme qu'elle prendra finalement ...
nickpish
@ font-face n'est pas fiable non plus dans les clients de messagerie.
Scott

Réponses:

8

Si j'étais vous, j'abandonnerais l'idée. La gestion des embauches est le moindre de vos problèmes, car il n'y a tout simplement pas de support dans les e-mails.

Mais les problèmes commencent plus tôt. La plupart des clients de messagerie suppriment les images et ajoutent un bouton où l'utilisateur peut activer les images. Tout ce tapage pour juste un logo est trop compliqué.

Je voudrais juste écrire la signature avec du texte en clair et c'est tout.

Mais peut-être que vous ne voulez pas abandonner, cela pourrait être quelque chose pour votre

Ou utilisez cette technique:

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

KSPR
la source
Merci pour la réponse et les liens, Kaspar; Je vais certainement les vérifier. J'aurais aimé avoir abandonné le tout il y a une semaine, mais le client ne peut pas saisir pleinement les limites techniques à portée de main. Il est difficile d'expliquer comment quelque chose qui semble si simple est en réalité profondément difficile, voire impossible, ha.
nickpish
4
Je lance généralement des tableaux de support client E-Mail au client, qui montrent très bien à quel point le support pour les différentes choses est médiocre. De cette façon, il est plus facile de montrer que les ressources humaines sont mieux utilisées avec autre chose: campaignmonitor.com/resources/will-it-work/image-blocking
KSPR
Bon point - ce tableau est très utile, merci.
nickpish
4

Les solutions techniques pourraient être:

  1. Hébergez l'image sur un serveur et intégrez simplement une <img>balise avec l'adresse. Le serveur pourrait utiliser les méta-informations de la requête HTTP qui récupéreront l'image et fourniront la bonne taille d'image pour le périphérique.

  2. Faites de même avec les CSS sensibles à la taille d'affichage (mais je ne sais pas à quel point la prise en charge est bonne dans divers clients de messagerie) Mais essentiellement, vous pouvez ajouter les deux images au courrier et utiliser CSS pour différentes tailles d'affichage pour afficher le image de droite (et vous pouvez même spécifier une image spéciale pour l'impression ...)

Falco
la source
1
Hm, merci pour les suggestions; en ce qui concerne ce dernier, faites-vous référence aux requêtes des médias et à l'utilisation d'images d'arrière-plan qui s'échangent en fonction du dpi ou de la fenêtre d'affichage?
nickpish
# 1 Je l'ai mentionné dans les commentaires ci-dessus. C'est à peu près la seule solution possible. # 2 ne fonctionnera pas pour de nombreux clients de messagerie - Outlook vient immédiatement à l'esprit.
Scott
@nickpish exactement! Ceci est utilisé sur de nombreux sites Web modernes (principalement mobiles), il existe donc de nombreux didacticiels.
Falco
@Scott Oui - avoir des images hébergées permet une logique côté serveur et donc une réactivité :-) Mais comme Kaspar l'a mentionné dans sa réponse, la plupart des clients supprimeront ou bloqueront les images, donc la dernière solution serait probablement d'envoyer des e-mails en clair avec un lien vers une copie hébergée de l'e-mail en tant que "voir un bel e-mail stylé en ligne"
Falco
@Falco, la solution de requête multimédia est une solution intrigante; Je suis un concepteur de sites Web si bien versé. Bien que, comme le souligne Scott, si Outlook ne prend pas en charge les requêtes des médias dans les e-mails, c'est malheureusement
interdit
2

Aujourd'hui, de nombreux clients de messagerie prennent en charge SVG (Scalable Vector Graphics). Pour ces clients, montrez un SVG. Il est garanti de ne pas être détruit par la mise à l'échelle, car il se lit comme un programme informatique (par exemple, dessinez un cercle, puis tracez une ligne connectée à ce cercle à 120 et 240 degrés, etc.), de sorte que le processeur rendra correctement une image non floue. à l'intérieur du logiciel de support.

Il existe une variété de techniques de secours si vous vous souciez des clients plus âgés, mais vous devrez déterminer les solutions de repli, le cas échéant, dont vous vous souciez (par exemple, les clients de messagerie qui vous préoccupent de montrer la signature). Personnellement, je choisirais une méthode qui offre une couverture presque universelle avec un effort minimal plutôt que d'essayer une couverture compliquée à 100% ou pas de couverture - il y en a une qui prend en charge tout sauf Android 2.3, ce qui est probablement rare, et n'est que quatre lignes de code.

D'un autre côté, les sélecteurs de médias CSS devraient également fonctionner. Si la résolution d'écran est inférieure à, disons 800 pixels de large, utilisez le PNG ou JPEG que vous utilisez aujourd'hui, sinon utilisez un SVG. Je suis à peu près certain que tous les appareils à «affichage rétine» prendraient en charge SVG, ou du moins la majorité le feraient.

phyrfox
la source
1
en ce qui concerne SVG, la question ultime dans ce cas est de savoir si elle est prise en charge par Outlook, ce que je ne pense pas que ce soit ..
nickpish
1
@nickpish SVG ne fonctionnera pas dans Outlook, c'est pourquoi j'ai mentionné le mécanisme de secours. Outlook prendra volontiers en charge le CSS qui restitue l'image d'origine à la place du SVG. Et, à ma connaissance, personne n'aime Outlook sur iOS (comme dans, ils l'utiliseront s'ils le doivent , mais ...).
phyrfox
1
J'ai compris - je vais certainement regarder le lien que vous avez fourni; ce pourrait être la réponse. Merci phyrfox.
nickpish
Bien que vous ne deviez pas définir HighDPI égal aux appareils iOS ... Il existe de plus en plus d'appareils modernes (smartphones, tablettes, ordinateurs portables, ordinateurs de bureau) avec une densité plus élevée et une mise à l'échelle des icônes, ce qui donne des images floues!
Falco
0

Vraiment un vieux post, mais comme je me débattais avec le même problème pendant des heures et que je venais de le résoudre, je vais décrire comment je l'ai fait. Le problème que j'ai rencontré était que le logo de l'entreprise que j'avais bien affiché sur les moniteurs de bureau (même HD). Mais il semblait flou / flou lorsqu'il était vu sur un téléphone à écran rétine. L'image que j'ai reçue du client était exactement égale à la taille demandée. Le problème (strictement pour les développeurs :) avec les écrans rétine est qu'ils ont quatre fois plus de pixels dans une zone unitaire que les écrans standard. Vous avez donc besoin d'une image de deux fois la taille que vous souhaitez à l'écran. Par exemple, si vous souhaitez que votre logo ait une largeur et une hauteur de 124 x 48, créez une image de 248 x 28. Ce que cela fait, c'est qu'il double la résolution de l'image et quadruple le nombre de pixels. Ensuite, utilisez HTML pour forcer votre nouvelle image à s'afficher à la moitié de sa nouvelle largeur, c'est-à-dire<img src=”your_image.jpg” width=”124” />. Cela devrait résoudre toute pixellisation ou flou de l'image. À votre santé

neige
la source
0

J'ai eu le même problème! Super frustrant, mais j'ai finalement trouvé que l'utilisation d'un plan de travail 120px (hauteur) par 300px (largeur), par exemple, dans Illustrator, puis l'exportation pour les écrans au format PNG 8 avec une résolution de 96 ppi fonctionne bien pour les signatures Microsoft Outlook!

Rachel
la source
1
C'est un client de messagerie parmi d'innombrables au total. Avez-vous testé cette méthode dans plusieurs autres clients de messagerie?
Zach Saucier
1
Pourquoi ppi ferait-il quelque chose?
joojaa