Technique

Comment définir la largeur optimale de votre email ou de votre newsletter ?

Avec l’utilisation d’écrans de bureau de plus en plus grands et surtout larges (communément jusqu’à 24 pouces de diagonale en 16/9ème), la question de la taille et de la largeur des e-mails nous est fréquemment posée. Découvrez les contraintes et les règles d’affichage à respecter lors de la création de vos emails et newsletters.

Définitions

Rappelons quelques définitions d’écran (en points affichés, en px), en fonction de la taille :

Ces résolutions sont des moyennes indicatives et peuvent varier en fonction des cartes graphiques installées et des drivers utilisés.

N’oublions pas que la résolution VGA majoritairement utilisée il y a une dizaine d’années sur les ordinateurs de bureau correspond maintenant à la résolution moyenne des Smartphones !

Les écrans de grande taille

Si l’on regarde un email au sein d’un client de messagerie (Outlook 2010) sur un écran très large, on peut penser que l’on a un espace inutilisé très important de part et d’autres des emails (sous réserve qu’ils soient centrés) comme dans cet exemple (les espaces rosés sont inutilisés ) :

Affichage en plein écran Outlook 2010

Regardons maintenant le même email avec en mode prévisualisation avec volet d’aperçu à droite, et avec le « volet de navigation » (colonne gauche) apparent ainsi que le volet « barre des tâches » (colonne droite) :

On constate que – malgré l’utilisation d’un grand écran – on peut lire l’email dans sa pleine largeur, mais il n’y a plus d’espace vide de chaque côté et toute la surface de l’écran est utilisé.

Le volet de prévisualisation horizontal

Dans le cas d’un volet de prévisualisation horizontal activé, seule la partie supérieure de l’email est affichée, et des espaces apparaissent de part et d’autre de l’email.

L’affichage sur un ordinateur portable

Voici un exemple d’email affiché cette fois sur un écran d’ordinateur portable (17 pouces) :

Et avec le volet de prévisualisation vertical :

B2B

Rappelons que dans le cadre d’une communication B2B, la plupart de vos correspondants utilisent un client de messagerie de type Outlook et vont lire vos emails sur des ordinateurs portables, équipés d’écrans de bien plus petite taille (15 à 17 pouces) que sur un PC fixe équipé d’un moniteur large.

Notons également que les webmails utilisent également les volets de prévisualisation.

Largeur variable ?

Nous ne répèterons jamais assez que l’encodage d’un email ou d’une newsletter est très différent de la création d’un site web (nous reviendrons très bientôt sur le sujet) et ne DOIT PAS intégrer de fonctionnalités telles que la largeur variable.

Voici un exemple réalisé en largeur variable et affichage des images désactivé sur un grand moniteur :

La lecture s’avère très difficile.

L’affichage sur mobiles

La plupart des Smartphones modernes utilisés en entreprise par les cadres permettent un affichage d’emails d’une largeur raisonnable, ne dépassant pas 600 px.

Voici un exemple sur Iphone :

Cette lettre fait 600 px de large et est facilement lisible, quel que soit le support.

Conclusion

La bonne pratique consiste à permettre – quelle que soit la configuration du volet de prévisualisation – d’identifier l’expéditeur et si possible d’avoir un résumé du contenu du message en début de mail.

Cette pratique permet d’inciter le destinataire à ouvrir l’email en ne l’obligeant pas à scroller pour connaitre les sujets abordés, ni à ouvrir complètement le message.

La largeur « idéale » est de 600 px, ce chiffre permet un affichage correct dans un maximum de configurations, reste simple et d’un coût abordable.

Conseil : Ajoutez en début d’email un mini sommaire qui reprend les grands titres contenus dans l’email.

La plupart des emails ouverts sur un périphérique mobile est ensuite rouvert lorsque la personne rentre au bureau, sous réserve proposer un contenu de qualité, et adapté au profil du destinataire.

Plusieurs gabarits ou un gabarit adaptable ?

La solution idéale mais également la plus chère et complexe est de développer un gabarit « adaptable » qui module l’affichage en fonction de l’équipement du destinataire (type de navigateur et taille de l’écran).

Il est également possible de développer plusieurs versions distinctes du gabarit, ce qui assurera un bon affichage sur le périphérique destinataire.

Cette pratique implique de bien connaître les équipements utilisés par les destinataires de vos emails, informations que l’on peut obtenir de deux manières :

  • Demande du type de périphérique préféré pour recevoir vos communications
  • Réalisation d’une campagne de détection du périphérique utilisé lors des ouvertures

Version mobile en landing page

Une autre solution simple et efficace consiste à créer une version mobile du message sur une landing page dédiée à l’affichage mobile :

N’hésitez pas à nous contacter pour en savoir plus, faire analyser vos bases et adapter vos gabarits.

Publicités

Discussion

Pas encore de commentaire.

Laisser un commentaire

Entrez vos coordonnées ci-dessous ou cliquez sur une icône pour vous connecter:

Logo WordPress.com

Vous commentez à l'aide de votre compte WordPress.com. Déconnexion / Changer )

Image Twitter

Vous commentez à l'aide de votre compte Twitter. Déconnexion / Changer )

Photo Facebook

Vous commentez à l'aide de votre compte Facebook. Déconnexion / Changer )

Photo Google+

Vous commentez à l'aide de votre compte Google+. Déconnexion / Changer )

Connexion à %s

Entrez votre adresse mail pour suivre ce blog et recevoir des notifications de nouveaux articles par mail.

%d blogueurs aiment cette page :