Comment garantir des expériences visuelles optimales sur tous les appareils

Mis à jour le 22 août 2022

Ouvrez la page qui génère le plus de conversions sur votre site Web sur trois appareils : mobile, tablette et ordinateur de bureau.

Vraiment, fais-le. J'attendrai.

Votre contenu s'affiche-t-il aussi bien que prévu ?

De nombreux spécialistes du marketing trouveront que ce n'est pas le cas. L'expérience utilisateur et la cohérence de la messagerie ne sont pas satisfaisantes. Parfois, c'est carrément horrible.

Comment es-tu arrivé là? Après tout, votre entreprise investit beaucoup de ressources pour publier du contenu. Vous maximisez même ces ressources de contenu en adoptant la méthode COPE - créez une fois, publiez partout.

Et c'est peut-être l'erreur.

Courage, cher spécialiste du marketing de contenu. Je suis ici pour aider avec un léger ajustement - COPE-M.

Comprendre pourquoi COPE-M est nécessaire

En utilisant une stratégie COPE traditionnelle, vous téléchargez une fois un bloc de contenu (définition, image, description, etc.), et le CMS extrait (et non colle) ce bloc en plusieurs livrables. Lorsque vous mettez à jour le contenu d'origine, la mise à jour se répercute sur votre référentiel.

En tant que stratégie de contenu, le contenu COPE est élégant. C'est efficace. C'est logique. Il augmente la réutilisation de votre contenu et amortit vos investissements dans le contenu original. Il fonctionne avec du texte, de l'audio et de la vidéo.

Mais COPE n'est pas une panacée pour votre publication de contenu. Les navigateurs modernes redistribuent votre texte, mais les images sont réduites pour vos appareils. Une image qui a fière allure sur un ordinateur de bureau peut être méconnaissable sur un appareil mobile. (Votre public n'aime pas cela et Google non plus, ce qui peut nuire au classement de votre contenu.)

COPE est un excellent point de départ, mais une approche plus complexe du contrôle de l'image est nécessaire. Je l'appelle COPE-M - créer une fois, publier partout la plupart du temps. COPE-M peut être le pont entre une bonne et une excellente expérience utilisateur.

L'adoption d'une approche COPE-M pour votre stratégie de publication de contenu peut améliorer votre expérience utilisateur, augmenter la cohérence et améliorer votre optimisation pour les moteurs de recherche (SEO) avec un contenu actualisé.

Les images ne sont pas nécessairement les meilleures amies de COPE

Beaucoup de choses ont changé depuis 2009, lorsque Daniel Jacobson a décrit le concept et l'approche technique de cette stratégie de réutilisation de contenu. COPE reste un concept solide, mais aujourd'hui, le contenu est distribué via plusieurs types d'appareils. Le public consomme également le contenu dans plus de formats.

Le texte à source unique affiché dans plusieurs navigateurs fonctionne toujours, mais c'est un problème pour les images. Le texte peut être séparé de son apparence. Les feuilles de style en cascade permettent de modifier l'apparence du texte, comme la taille des polices et la largeur des colonnes, sans modifier la source d'origine.

Les images ne sont pas aussi malléables. Les graphiques rendus (par exemple, les fichiers JPEG, PNG) ne peuvent pas être séparés de leur apparence. Une taille d'une seule source ne convient pas toujours à tous. Une infographie qui a l'air bien sur un ordinateur de bureau peut être illisible sur un iPhone. Cela laisse le spectateur pincer, zoomer, plisser les yeux et grommeler en essayant de le voir.

Choisissez les images à multisource

Jusqu'à ce que les systèmes de gestion de contenu deviennent suffisamment intelligents pour offrir automatiquement des expériences de visionnage idéales pour chaque image sur chaque appareil, vous devez déterminer quand FAIRE FACE et quand ne pas FAIRE FACE à vos images.

Revenez à ma demande d'origine - ouvrez votre meilleure page de conversion pour voir comment elle apparaît sur plusieurs appareils. Faites cela avec les autres pages et images importantes de votre site Web. Vous les avez probablement déjà marqués dans votre logiciel d'analyse.

CONSEIL : Limitez votre sélection de pages à celles qui génèrent un trafic important à partir d'appareils mobiles.

Pour identifier les images à multisourcer, testez les pages sélectionnées sur plusieurs appareils. Prenez une pile d'appareils et un concepteur, un stratège de contenu ou une personne UX. Chargez votre contenu comme le ferait votre client. Si une image semble écrasée, ajoutez-la à une liste d'images devant être multisources.

ASTUCE : ne vous contentez pas de regarder si l'image s'affiche. Jetez un coup d'œil à la façon dont il s'affiche. Si l'utilisateur doit pincer et zoomer pour voir l'intégralité d'une image, COPE n'est probablement pas la meilleure méthode.

Partagez les résultats avec toutes les équipes liées au contenu, y compris la stratégie de contenu, la conception, l'ingénierie de contenu et l'expérience utilisateur, qui doivent savoir comment les images de votre site Web se chargent.

Conception pour les écrans multiples

Avec une image compromise sur les extrémités hautes et basses pour s'adapter à l'écran d'un appareil mobile, il peut être intéressant de télécharger plusieurs images et d'indiquer au système à quel point d'arrêt utiliser chacune d'elles.

Un point d'arrêt est un point auquel le système arrête d'extraire une image et en extrait une version qui convient mieux à l'appareil de visualisation. Les points d'arrêt sont déterminés par la largeur de l'appareil, car les utilisateurs peuvent faire défiler verticalement à l'infini mais ne peuvent pas élargir l'écran.

Cette illustration montre trois points d'arrêt possibles : 320 pixels pour un téléphone portable, 720 pixels pour une tablette ou un grand téléphone et 1 024 pixels pour un ordinateur portable :

Dans cet exemple, l'image originale de mes deux filles et de notre chien fait 800 pixels de large. Il a fière allure sur un bureau rendu en taille réelle (côté gauche de l'image). Sur un écran de la taille d'une tablette, l'image originale perd en détails, ce qui diminue son impact.

Si cette image était un graphique ou une infographie, elle pourrait devenir illisible sur un écran plus petit. C'est pourquoi vous devriez faire des efforts supplémentaires pour trouver plusieurs images. Cette approche est appelée « direction artistique réactive ». C'est une astuce de navigateur qui vous donne un peu plus de contrôle sur la façon dont les images s'affichent pour vos utilisateurs.

Voici comment cela fonctionne avec l'exemple original. Cette fois, j'ai pris des photos différentes pour chaque taille - 800, 400 et 200 pixels de large. Lors de la publication, leurs visages ont approximativement la même taille dans chacun.

Dans la version horizontale de 800 pixels, une fille est assise dans les escaliers avec notre chien, tandis que l'autre se tient le long de la balustrade avec un aperçu du quartier en arrière-plan. Dans la version verticale de 400 pixels, les deux filles sont assises sur les marches avec le chien à côté de l'une d'elles avec les deux balustrades visibles. Dans la version verticale de 200 pixels, chaque fille et le chien ont leur propre pas, et une seule balustrade est visible.

Cette approche n'est pas COPE. C'est la partie la moins importante du COPE-M. Je me suis créé trois fois plus de travail. C'est pourquoi vous devez limiter ce travail chronophage au seul contenu de conversion essentiel.

Découvrez comment les images multisources sont codées

Bien que cet article ne soit pas un tutoriel sur la façon d'écrire ce type de code, vous trouverez peut-être utile de voir à quoi il ressemble :

Entre les balises "image", j'ai spécifié les trois images source, qui sont nommées en fonction de la largeur de l'image :

• jpg
• jpg
• jpg

Désormais, chaque image s'activera lorsqu'elle atteindra son point d'arrêt :

• 499 pixels (max) pour les smartphones
• 799 pixels (max) pour les tablettes
• 800 pixels (minimum) pour le bureau

Mettez COPE-M au service de votre marque

La plupart des systèmes de gestion des actifs numériques (DAM) peuvent créer plusieurs sorties d'une même image dans différentes tailles et ratios. Si vous ne pouvez pas reprendre les photos, recadrez-les pour garantir la meilleure expérience sur toutes les tailles d'écran. Cela peut représenter beaucoup de travail, alors ne demandez pas à vos concepteurs ou développeurs de reconcevoir chaque image de votre site Web. Concentrez-vous sur l'impact.

Si le référencement est une priorité absolue, consultez vos spécialistes du référencement avant de mettre en œuvre l'approche multi-images. L'algorithme de Google peut pénaliser les pages Web qui n'offrent pas exactement la même expérience sur ordinateur et sur mobile. Même si vous offrez une meilleure expérience aux humains, un robot Google ne le sait peut-être pas encore. Bien sûr, si plus de personnes trouvent votre page digne de leur temps en raison d'une meilleure expérience d'image, Google aimera cela.

Et votre équipe ? Créez-vous parfois plusieurs versions de vos images importantes pour s'adapter à une gamme de tailles d'écran ? Qu'avez-vous appris en testant vos images sur plusieurs appareils ? Faites-moi savoir dans les commentaires.

Image de couverture par Joseph Kalinowski/Content Marketing Institute