Archives de catégorie : Performance

Auto Added by WPeMatico

Emailing & newsletter : alléger le poids du fichier html

Cet article est apparu en premier sur le site : https://email-designer.net/emailing-newsletter-alleger-poids-fichier-html/

La vérification et l’optimisation du poids du fichier html d’un emailing ou d’une newsletter sont parfois négligées par les intégrateurs emailing.  Ce qui n’est pas sans conséquence sur l’expérience utilisateur et la délivrabilité : temps d’affichage laborieux sur mobile, message tronqué dans Gmail, mise en spam plus fréquente si le fichier html dépasse les 100k. (cf. article sur le poids idéal d’un emailing)

je vous propose d’étudier 6 pistes pour alléger le poids du fichier html.

01.

Ne pas surcharger inutilement le code.

Certains intégrateurs emailing ont la fâcheuse tendance à doubler de manière systématique les attributs html avec leurs propriétés css équivalentes.

Exemple :


Cette technique est utilisée dans l’espoir d’améliorer la compatibilité du rendu dans les outils de messagerie. Sa mise en oeuvre systématique est la plupart du temps inutile. Elle est souvent déployée quand l’intégrateur emailing n’a pas d’outil permettant de tester exhaustivement et efficacement l’affichage de sa production.

En adoptant un outils de tests-rendering comme Email on Acid ou Litmus vous pourrez déterminer avec précision quels attribut html vaut la peine d’être doublé ou non. Par la même occasion la maintenabilité du code html sera améliorée.

02.

Eviter les templates html « prêt à l’emploi »

Il existe des kits html prêts à l’emploi pour créer des emailings ou des newsletters. Ces modèles sont généralement développer pour que l’affichage fonctionne sur n’importe quel outil de messagerie au niveau mondial. Le code est en outre largement commenté pour vous permettre de le modifier. Cela entraîne une surcharge de code qui augmente considérablement le poids du fichier html. Mais avez-vous besoin que votre emailing fonctionne par exemple dans le webmail américain d’Aol, sachant qu’il est destiné à un public français ?

Conseil

Privilégier les templates « made in France » ou faites appel à un intégrateur emailing qui codera vos templates html en prenant en compte les outils de messagerie qui comptent vraiment au regard de votre public.

03.

Utiliser les commentaires html avec parcimonie

Les commentaires html facilitent la compréhension du code et permettent de se repérer plus facilement dans le chaos des structures tabulaires des emailings et des newsletters. Le nombre et la longueur des commentaires html peuvent finir par peser sur le poids final du fichier html. Il faut donc :

  • Limiter le nombre de commentaires
  • Ecrire des commentaires courts

A la place de :


texte du preheader

Vous pourriez écrire :


texte du preheader

04.

Arrêter les styles inline

Pour créer des styles, les intégrateurs ont pris l’habitude de créer des styles css en les incorporant dans chaque balise html contenant du contenu, faute de quoi le rendu ne fonctionnait pas correctement dans Gmail.

Exemple de style inline :


Il fallait alors répéter l’attribut style et ses propriétés autant de fois qu’il y avait de bloc contenant un texte, ce qui alourdissait considérablement le poids du fichier html.

Depuis fin 2016, Gmail gère les styles y compris lorsqu’il sont créés dans l’entête du document html. L’intégration des styles dans la partie facilite la mise à jour mais permet aussi d’alléger considérablement le poids du fichier html.

Code avec des styles inline

...



...
style="font-family:Arial, sans-serif; font-size:14px; color:#ff0000"> mon texte 
td style="font-family:Arial, sans-serif; font-size:14px; color:#ff0000"> mon texte 
..

Code sans style inline





...
class="texteCourant"> mon texte 
td class="texteCourant"> mon texte 
..

05.

Compresser le code HTML

Commentaires html, retour à la ligne et indentation du code augmentent le poids du fichier html. Il est possible de les supprimer intégralement et de gagner de 10 à 40% du poids du fichier html.

L’outil en ligne HTML Minifier permet de compresser le code html de votre emailing. Le résultat est assez impressionnant notamment quand le fichier html comporte de nombreuses lignes de code et de nombreux commentaires.


Avec l’outil HTML Minfier le poids fichier html de cette newsletter a été divisé quasiment par 2, passant de 70k à 40k !

N’oubliez pas de conserver une version non compressée de votre fichier html car la version « minifiée » est certes légère mais illisible au niveau du code.


Fichier html – non compressé – 70 k

Fichier html – compressé – 40 k

06.

Effectuer un travail de veille

L’intégration html d’un email évolue au grès de l’évolution des outils de messagerie. Ainsi les récents changements opérés par Gmail, nous amène à repenser la manière de coder les styles css dans un email. C’est la connaissance de ces changements et  la mise en place d’une veille technologique régulière qui amène l’intégrateur emailing à délivrer un code html toujours plus moderne, robuste et léger.

Cet article Emailing & newsletter : alléger le poids du fichier html est apparu en premier sur email designer.

Powered by WPeMatico

Plus de termes

  • poids fichier html

Améliorer la conception de vos emailings grâce à l’approche UX

Cet article est apparu en premier sur le site : https://email-designer.net/ameliorer-la-conception-de-vos-emailings-grace-a-lapproche-ux/

L’approche UX (User Experience) est largement adoptée dans le processus de conception d’un site ou d’une appli mobile. Elle a fait ces preuves en matière d’efficacité et de retour sur investissement. Alors pourquoi ne pas adopter une telle approche dans la conception d’un emailing ou d’une newsletter ? Quels bénéfices pourraient – on en retirer ?

Les 7 facettes de l’expérience utilisateur

Peter Morville, célèbre architecte de l’information schématise sous la forme d’un nid d’abeilles (honeycomb) les différents composants d’une expérience utilisateur réussie. Initialement pensée pour un site web, voyons comment ces différentes facettes peuvent être appliquées à la conception d’un emailing.

schéma des 7 facettes de l'UX

Les 7 facettes de l’expérience utilisateur

 

Mon emailing est-il utile (useful) ?

Il ne suffit pas que l’emailing soit utile pour l’expéditeur, faut-il encore qu’il soit utile pour les destinataires. Cela suppose de s’intéresser à eux, de connaître leurs besoins et leurs envies. La segmentation de la base de contacts est un moyen très efficace de rendre vos contenus encore plus utiles pour les destinataires finaux. Elle rend possible la personnalisation du contenu en fonction des différents segments.

La newsletter de Zalando est un exemple de segmentation simple et efficace en vue de proposer des produits vraiment utiles aux abonnés. Si le destinataire est un homme, les produits présentés sont uniquement des vêtements masculins et inversement si le destinataire est une femme. Zalando personnalise aussi la barre de menu qui n’est pas la même en fonction du genre. Sans cette segmentation 50% du contenu présenté serait inutile pour le destinataire final.

Newsletter Zalando

La newsletter de Zalando – version homme

Mon emailing est-il utilisable (useable) ?

Ici ce n’est plus l’utilité que l’on évalue mais la facilité d’utilisation de l’emailing, son ergonomie.

Voici quelques points incontournables pour rendre un email utilisable :

  • Le libellé de l’expéditeur, l’objet et le pre-header renseignent clairement le destinataire sur le contenu du message
  • L’emailing est conçu de telle sorte que l’utilisateur puisse  immédiatement repérer le message essentiel et l’action principale (CTA)
  • le message essentiel et l’action principale sont visibles  y compris quand les images sont bloquées
  • Le rendu de l’emailing a été testé et s’affiche correctement dans la plupart des outils de messagerie. A cet effet il est possible d’utiliser des outils qui permettent d’automatiser les tests (Email on Acid ou Litmus)
  • L’emailing s’affiche correctement sur un smartphone, sans avoir besoin de zoomer
  • Les interactions ont été pensées pour le tactile et les petits écrans
  • Les pages de destination s’affichent convenablement sur mobile
  • L’emailing s’affiche rapidement, notamment sur smartphone
  • Les textes sont facile à lire (choix de la police, taille du caractère, longueur de ligne, interligne)
  • Si le contenu du message est long, il est facile de balayer rapidement le texte
  • Le destinataire peut facilement se désabonner

Mon emailing est-il désirable ?

Un email ne doit pas être seulement utile et utilisable il doit être agréable, susciter de l’émotion ou du plaisir ou encore provoquer de la surprise. Les émotions jouent un rôle essentiel dans la mémorisation d’une information et favorisent l’engagement.

Les évènements portant une charge émotionnelle persistent beaucoup plus longtemps dans nos mémoires et on peut se les remémorer plus précisément que les souvenirs neutres. John Médina, biologiste moléculaire

Exemples de design émotionnel appliqués à l’emailing

Jouer sur l’effet de surprise
Message et ambiance graphique décalés, le tout renforcé par une petite animation rigolote, mettront à coup sur le sourire aux lèvres des destinataires de cet email.

Le pouvoir du beau
La newsletter d’Invision brille par son élégance. L’harmonie générale qui s’en dégage rend la lecture agréable et plaisante. L’utilisation du principe de la pyramide inversée, incite le lecteur à l’action.Newsletter Invision

Le pouvoir émotionnel de l’image
Comment ne pas ressentir de l’empathie devant ce visage d’enfant souriant ? En convoquant des émotions positives chez le lecteur, cet emailing invite à passer à l’action (faire un don).

Mon emailing est-il crédible ?

Il s’agit ici de créer un climat de confiance avec le destinataire de votre message, de le rassurer sur le bien fondé de votre offre. Voici quelques points à vérifier pour rendre votre emailing crédible :

  • Le libellé de l’expéditeur permet d’identifier immédiatement l’expéditeur du message

    exemple de libellé flou

    Ce libellé ne permet pas d’identifier clairement l’expéditeur

  • L’objet du mail est crédible et ne fait pas appel à des superlatifs outranciers
  • Le contenu du mail permet d’identifier clairement l’expéditeur (logo)
  • Le design graphique de l’emailing est en phase avec le design du site (couleurs, pictos, polices de caractères)
  • Le lien de désabonnement est suffisamment visible
  • Il y  a des mentions liées à l’utilisation des données personnelles (CNIL).

Exemple
En reprenant les codes graphiques et typographiques du site Web, la newsletter de Wufoo permet au destinataire du message de savoir immédiatement qui lui parle. Cela « rassure » le destinataire et renforce la crédibilité du message.

newsletter wufoo

La newsletter de Wufoo reprend les codes graphiques du site Web.

Mon emailing est-il accessible ?

Rendre un emailing accessible c’est donner l’opportunité à des personnes handicapés d’accéder au même titre que les autres  aux différents contenus de l’emailing. Les personnes touchées par un handicap représentent 26% de la population française soit 12 millions (source).

Voici quelques pistes pour améliorer l’accessibilité de vos emailings :

  • Créer une version texte brute de l’emailing.Elle permet  au destinataire qui le souhaite d’accéder au contenu sans aucun élément graphiques.
  • Renseigner le texte alternatif des images (exemple)
  • Eviter le texte sous forme d’images
  • Indiquer explicitement la destination des liens.
  • Utiliser l’attribut title si la destination du lien n’est pas explicite
  • Veiller à suffisamment contraster les couleurs

Tester et améliorer l’accessibilité d’un emailing

Accesible-email.org est un outil en ligne gratuit  et remarquable pour tester l’accessibilité de votre emailing. Il suffit de fournir le code html de votre email ou d’indiquer l’adresse URL de votre version en ligne, puis l’outil vous délivre un rapport détaillé concernant l’accessibilité de votre emailing.

Exemple de rapport détaillé

Exemple de rapport d’accessibilité

Cerise sur le gâteau, accessible-email.org propose aussi un outil en ligne pour modifier le code html de son emailing en vue d’en améliorer l’accessibilité. Après avoir copié le code html de son emailing,  l’outil vous guide pas à pas et permet même d’appliquer automatiquement certaines modifications.

rapport accessibilité emailing

accessible-email.org offre la possibilité d’améliorer l’accessibilité de son emailing

Mon emailing est-il délivrable (trouvable) ?

Rendre un site Web trouvable, consiste à rendre visible le site dans les moteurs de recherche (référencement) ou via les médias sociaux.  Dans un contexte emailing cette facette de l’UX n’a pas grand sens.  On peut la remplacer par un aspect essentiel de l’emailing : la délivrabilité. Un message est délivré lorsqu’il arrive dans la boîte de réception principal ou secondaire (l’onglet Promotions dans Gmail par exemple) de l’abonné.  La délivrabilité est un sujet complexe, où de nombreux paramètres entrent en jeu. Parmi les plus importants on peut citer :

  • La qualité de la base de contacts
  • L’entretien de la base de contacts
  • La gestion des bounces (NPAI)
  • Le choix de l’outil de routage
  • Comportements des abonnés (taux d’ouverture faible, suppression du message sans l’avoir lu, mise en spam, etc. )
  • L’utilisation de spam words dans l’objet ou le corps du message
  • Emailing entièrement sous forme d’images
  • Le poids du fichier html (<100k)

Tester l’indésirabilité d’un emailing

Mail-tester.com est un outil en ligne gratuit qui vous permet de vérifier avant l’envoi si votre message sera considérer ou non comme du spam.

L'interface du site mail-tester

Quelle est la valeur ajoutée de mon emailing (valable) ?

Toute campagne emailing a pour but de créer de la valeur ajoutée. Dans un contexte commercial, cela peut être l’augmentation des ventes, l’acquisition de nouveaux prospects ou encore l’amélioration de la relation client. Dans un contexte non lucratif, cela peut-être par exemple l’acquisition de nouveaux adhérents pour une association, ou pour une administration un meilleur service rendu auprès des usagers. Il est évidemment essentiel de mettre en place un sytème permettant de mesurer le plus précisément possible la performance d’une campagne. Voici quelques indicateurs clés à prendre en compte  :

  • Le taux de délivrabilité : nombre d’emails aboutis sur nombre d’emails envoyés
  • Le taux d’ouverture : nombre d’email ouverts sur nombre d’emails envoyés
  • Le taux de réactivité : nombre de clics sur nombre d’emails ouverts
  • Le taux de désabonnement : nombre de désabonnement sur nombre d’emails envoyés

D’autres indicateurs peuvent être pris en compte en fonction des objectifs de la campagne emailing :

  • Le taux de conversion : nombre d’achats sur nombre de clics
  • Le taux d’inscription : nombre d’inscriptions sur nombre d’emails ouverts

L’UX nous oblige à opérer une révolution copernicienne dans notre stratégie email marketing

L’emailing est par nature un envoi de masse. La masse est par définition impersonnelle. Cet aspect peut vous faire perdre de vue l’essentiel :  derrière chaque adresse email, il y a un humain singulier. Cet humain a des attentes, des besoins, des envies, un système de valeurs. Il ressent aussi des émotions. En plaçant l’utilisateur final au centre du processus de conception, l’approche UX oblige à opérer une révolution copernicienne dans la stratégie email marketing en adoptant le point de vue de l’utilisateur (le destinataire de notre emailing), plutôt que le point de vue du commanditaire. L’approche UX  apporte ainsi une valeur ajoutée inestimable à la conception d’une campagnes emailing.

Lire aussi

Powered by WPeMatico

Plus de termes

  • ux design et le diagramme en nid d’abeilles de peter morville

Emailing : réduire le poids des images avec Compressor.io

Cet article est apparu en premier sur le site : https://email-designer.net/emailing-reduire-le-poids-des-images-avec-compressor/

Les éléments visuels présents dans un emailing ou une newsletter contribuent grandement à l’expérience utilisateur à la condition qu’ils s’affichent rapidement, notamment sur mobile.  Compressor est un outil en ligne gratuit, simple et efficace dont la fonction consiste à  réduire le poids des images au format JPEG, PNG ou GIF tout en préservant au maximum leur qualité visuelle. Si vous avez l’habitude de compresser vos images avec Photoshop vous constaterez un gain spectaculaire au niveau du poids des fichiers en utilisant Compressor.

Mode d’emploi de Compressor

Pour compresser une image il faut se rendre sur le site de Compressor puis :

1. Glisser/déposer l’image que l’on souhaite compresser dans le cadre prévu à cet effet :

interface de Compressor

Note : l’image de départ doit obligatoirement être au format JPEG, PNG, GIF ou SVG. Dans un contexte emailing on oubliera le format SVG peu compatible avec la plupart des clients de messagerie.

2. Compressor effectue alors automatiquement la compression et indique le gain de poids obtenu :

Résultat de la compression

3. Cliquer sur le bouton « download your file » pour télécharger l’image compressée. Compressor propose aussi d’enregistrer l’image directement dans Google Drive ou Drop Box.

Quelques exemples de gain

Un gain de 65% sur un logo au format PNG

Résultat compression logo

Comme le montre les images ci-dessous, la compression effectuée par Compressor ne s’effectue pas au détriment de la qualité du rendu. Le fichier est bien plus léger et la qualité du rendu est identique à celle de Photoshop !

Logo exporté au format PNG Avec Photoshop CC : 30 Ko

Logo exporté au format PNG Avec Photoshop CC : 30 Ko

logo compressé avec Compressor

Le même logo compressé avec Compressor : 10 Ko

 

Un gain de 81% sur une photo au format JPEG

Gain compressor sur un JPEG

Je suis parti d’un JPEG faiblement compressé (qualité 100) le gain de poids est alors spectaculaire : on passe de 160 ko à 30 ko.  L’image ainsi compressée perd légèrement en finesse de détails mais le rapport gain de poids / qualité du rendu est franchement intéressant.

chaussure-qualite100

Photo original – format JPEG – Qualité 100 – 160 ko

 

Photo compressé avec Compressor - format JPEG - 30 ko

Photo compressé avec Compressor – format JPEG – 30 ko

 

Malgré le gain impressionnant de poids obtenu, Compressor est-il plus fort que Photoshop pour réduire le poids d’un JPEG ?
Pas tant que ça… En jouant sur la qualité de compression, on obtient des résultats très proches avec Photoshop. Pour ma part, je trouve même que Photoshop permet de travailler plus subtilement le rapport gain de poids / qualité du rendu que Compressor pour les images au format JPEG.

photo Photoshop

Photo compressé avec Photoshop (Qualité 50%) – format JPEG – 30 ko

 

En conclusion

Compressor est un outil efficace et redoutablement simple pour réduire le poids des images d’un emailing ou d’une newsletter. Il fait même mieux que Photoshop pour les images au format PNG. Pour les images au format JPEG, le gain de poids est certes spectaculaire mais Photoshop fait aussi bien, voir mieux car il laisse à l’utilisateur la possibilité de régler finement la qualité de compression du JPEG pour obtenir le meilleur rapport qualité / poids.

Utiliser Compressor

Lire aussi

 

PS : merci à Jean Loup pour la découverte de cet outil

 

Powered by WPeMatico