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 :
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.
Discussion
Pas encore de commentaire.