Quand ne pas COPE avec vos images Web [Vidéo]
Publié: 2020-12-22 Pour réfléchir stratégiquement à votre contenu visuel Web, vous devez faire plus que choisir les images à utiliser; vous devez également vous assurer que ces images fonctionnent pour les grands et petits écrans.
Si une image fonctionne pour toutes les tailles d'écran, c'est parfait. Téléchargez un fichier (source unique de l'image) et vous êtes prêt à partir.
Toutes les images ne vous facilitent pas la vie. Parfois, cela vaut la peine de fournir plusieurs versions d'une image pour donner aux gens ce dont ils ont besoin de l'image sur n'importe quel appareil.
C'est ce que dit Buddy Scalera, directeur principal de la stratégie de contenu chez The Medicines Company. Dans son discours de conférence sur le contenu intelligent, Créer et exécuter une stratégie de contenu visuel qui évolue, Buddy nous a dit qu'il était tout à fait pour le mono-sourcing… sauf quand il ne l'est pas. Il plaide pour ce que lui et d'autres appellent «surtout le COPE» (COPE-M), en particulier en ce qui concerne les images.
COPE signifie «créer une fois, publier partout». Le contenu COPE est un contenu à source unique. À bien des égards, le contenu COPE est idéal. Vous créez un morceau de contenu une fois - une description de produit, une spécification, une définition, une image - et le système peut extraire (et non coller) ce fragment dans plusieurs livrables. Lorsque vous mettez à jour la source, la mise à jour se répercute sur votre référentiel. Le contenu COPE est élégant. C'est efficace. C'est logique. Cela permet aux entreprises d'économiser des millions de dollars en coûts de traduction. Cela les aide à éviter les incohérences embarrassantes, folles et susceptibles d'entraîner des poursuites. COPE fonctionne bien avec le texte, l'audio et la vidéo (si vous utilisez YouTube).
Pourtant, COPE est parfois la mauvaise voie à suivre. Les navigateurs modernes redistribuent votre texte, mais les images se réduisent pour vos appareils. Une image qui a fière allure sur le bureau peut devenir méconnaissable sur un smartphone. (Bonjour, pincez et zoomez.)
C'est là qu'intervient le M de COPE-M. «Bien que préparer votre contenu à une réutilisation multicanal soit un bon objectif, tous les contenus ne s'adaptent pas efficacement au modèle COPE», explique Buddy.
Créer une fois, publier partout (COPE) est souvent une mauvaise façon d'utiliser les images, dit @BuddyScalera. #intelcontent Cliquez pour tweeterDans cet article, je résume les conseils de Buddy tirés de son discours sur la CPI. Toutes les images de cet article proviennent de ses diapositives, et toutes les citations, sauf indication contraire, proviennent de son discours et de mes conversations ultérieures avec lui.
11 façons de dominer la scène sociale avec un contenu tueur
Pourquoi il est difficile de COPE avec certaines images
Buddy lâche ce qu'il appelle une «bombe de vérité» sur les images: ce n'est pas la même chose que du texte.
Le texte se prête à une source unique car le texte peut être séparé de son apparence. Les feuilles de style en cascade permettent au texte de varier en apparence d'une instance à l'autre sans changer la source de texte sous-jacente. «Le texte est un actif merveilleux, flexible, fluide, réutilisable et indépendant du canal qui fonctionne très bien dans le monde numérique», dit-il.
Ce n'est pas le cas avec les images. Ils ne peuvent pas être séparés de leur apparence. Avec les images, une seule taille ne convient pas toujours à tous.
Comme Justyn Hornor l'a dit il y a quelques années, «l'éléphant dans la salle» pour la conception Web réactive «est la façon de gérer les images». Une petite image peut sembler nette sur un téléphone portable et ridiculement petite sur un moniteur haute résolution. Le rendu d'une grande image peut prendre un certain temps sur un petit appareil où une image plus petite suffirait.
Pour une conception Web réactive, une taille unique ne convient pas à tous lors de la gestion des images, explique @jphornor. #intelcontent Cliquez pour tweeterComment penser les images multisourcing
Plutôt que de vous attendre à ce qu'une seule image fonctionne pour tous les appareils en faisant des compromis sur le haut et le bas, vous pourriez trouver au moins parfois utile de télécharger plusieurs images, puis d'indiquer au système à quel point d'arrêt utiliser chacune d'elles.
Téléchargez plusieurs images et indiquez au système à quel point d'arrêt utiliser chacune d'elles. @BuddyScalera #intelcontent Cliquez pour tweeterUn point d'arrêt est le point auquel le système arrête de tirer une image et en tire une autre à la place - une plus grande ou une plus petite, selon la résolution de l'appareil. 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.
Les points d'arrêt sont définis en fonction de la largeur de l'appareil car nous avons une défilement vertical infini mais une largeur limitée.
Buddy décrit une époque où l'une des équipes de contenu de son entreprise a imprimé une brochure qui comprenait un graphique répondant aux questions des médecins sur un certain produit.
Le graphique était superbe en version imprimée. Et puis ils l'ont mis sur un site Web, et il est devenu plus petit. Lorsqu'il était visualisé sur un smartphone, le graphique était illisible. Les personnes qui recherchent quelque chose sur un smartphone dans un hôpital ont un niveau d'urgence. Ils ont besoin de la réponse. Ils n'ont pas besoin de pincer et de zoomer.
Dans de nombreux cas, il est acceptable de télécharger une grande image sur votre site Web (en d'autres termes, de créer une source unique pour l'image) et de laisser le navigateur la mettre à l'échelle pour vous. Dans d'autres cas, les images deviennent presque illisibles lorsqu'elles sont pressées dans une petite fenêtre ou un petit écran. Pour illustrer ce point, Buddy montre ce qui se passe lorsqu'un navigateur met à l'échelle une photo de 800 pixels de large de ses filles:
Ceci est un exemple COPE. Malheureusement, lorsque le navigateur met cette image à l'échelle pour une fenêtre ou un écran étroit, il est difficile de voir les visages des filles. Si cette image était un graphique ou une infographie, le texte sur le petit écran pourrait devenir illisible.
Pour les éléments visuels essentiels à la narration de votre marque, vous voudrez peut-être faire l'effort supplémentaire d'utiliser plusieurs images. Cette approche, que Buddy appelle «direction artistique réactive», donne aux gens une meilleure chance de distinguer les détails importants sur n'importe quel écran.
Pour les # éléments visuels essentiels à la narration de votre marque, utilisez une direction artistique réactive, explique @BuddyScalera. Cliquez pour tweeter
Lorsque Buddy change la largeur de l'image de 800 à 400 à 200 pixels, il change également la composition de l'image: ce n'est pas COPE. C'est la planification de l'image. La photo de 800 pixels de large montre les filles et le chien côte à côte dans ce qu'il appelle une photo horizontale à trois larges. La photo de 400 pixels de large rapproche les filles et place le chien devant pour une photo verticale à deux larges. Le plan de 200 pixels de large serre les trois personnages dans un arrangement de totems.
Si vous visualisez la page d'exemple de Buddy dans un navigateur et que vous étirez et rétrécissez la fenêtre, l'image changerait chaque fois que vous atteigniez l'un des points d'arrêt spécifiés dans le code HTML. Pour avoir une idée de l'expérience utilisateur, lisez cette vidéo de six secondes:
Pour faire l'expérience de ce comportement dans votre propre navigateur, visitez la page d'exemple de Buddy sur un appareil qui vous permet de modifier la largeur de la fenêtre.
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 ressemble ce code:
La principale chose à noter (regardez entre les balises «image») est que Buddy a spécifié trois images sources:
- GirlsDog_200w.jpg
- GirlsDog_400w.jpg
- GirlsDog_800w.jpg
Chaque fichier JPG est affecté à un point d'arrêt:
- largeur maximale: 499px
- largeur maximale: 799px
- largeur min: 800px
Combien de points d'arrêt devez-vous créer? Comment déterminez-vous leurs largeurs maximale et minimale? Il n'y a pas de règles. Dans un excellent article que Buddy souligne, Jason Grigsby déclare: «La sélection des points d'arrêt d'image est une chose à laquelle tout le monde sera confronté, et franchement, je n'ai pas de bonnes réponses pour vous.»
Vous ne créerez probablement pas plusieurs images pour chaque image de votre site Web. Déterminez les images qui comptent vraiment pour votre client. Si vous savez qu'une image (par exemple, graphique, graphique, photo de produit) est vraiment importante pour votre utilisateur, ne laissez pas le navigateur Web déterminer comment rendre cette image. Prendre le contrôle.
Il convient de noter que certains des systèmes de gestion des actifs numériques (DAM) peuvent créer plusieurs sorties d'une seule image dans différentes tailles et rapports. Il ne reproduira pas ce que Buddy a fait avec des photos séparées, mais vous devriez explorer ce que votre système logiciel offre.
La seule règle que je peux suggérer est de prendre vos décisions stratégiques sur les images de la même manière que vous prenez des décisions stratégiques sur tout autre contenu: demandez-vous ce dont votre public a besoin et pourquoi. Expérimentez avec diverses images et points d'arrêt. Répéter.
Demandez ce dont votre public a besoin et pourquoi. Expérimentez avec diverses images et points d'arrêt. Répéter. @BuddyScalera Cliquez pour TweetPour en savoir plus sur ce que Buddy a à dire sur la création et l'exécution d'une stratégie évolutive pour votre contenu visuel, consultez sa présentation ICC annotée.
Comment créer du contenu visuel pour un public mobile
Quand multisourcez vos images
Bien que vous ne souhaitiez pas vous donner la peine de créer plusieurs fichiers source pour chaque image, envisagez de multisourcer les images qui ont le plus d'impact, par exemple les images principales sur vos pages de conversion. Comme le dit Buddy:
Multisourcez les images principales de vos pages de conversion, dit @BuddyScalera. #intelcontent Cliquez pour tweeterPensez à tout l'argent dépensé sur votre site Web. Si vous laissez les machines décider comment traiter toutes vos images et que les gens ne peuvent parfois pas voir les images clés, vous manquez une opportunité.
Vous connaissez les pages et images importantes de votre site Web. Vous les avez probablement déjà étiquetés dans votre logiciel d'analyse. Il est particulièrement important de tester ces pages sur des appareils mobiles, «pas seulement sur les magnifiques moniteurs à écran large que vos concepteurs ont utilisés pour créer du contenu», explique Buddy.
Pensez également aux images multisourcing sur toutes les autres pages que la plupart des gens voient sur de petits appareils. «Regardez le trafic que vous recevez de vos smartphones. Si c'est comme nous, 65%, c'est votre public. Vous devez répondre à eux », dit Buddy. Si les utilisateurs de smartphone ne peuvent pas lire une image sans pincer et zoomer, vous pouvez personnaliser l'image pour les petits écrans.
La meilleure façon de savoir quelles images multisource est de tester vos pages Web sur plusieurs appareils . Toutes les équipes de contenu - y compris vos collègues chargés de la stratégie de contenu, de la conception, de l'ingénierie de contenu et de l'expérience utilisateur - doivent savoir comment les images de votre site Web se chargent sur les smartphones. 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 les images que vous avez chargées avec amour sur votre site Web semblent un peu écrasées, pensez à la manière dont le navigateur met à l'échelle vos ressources d'image», explique Buddy, et planifiez en conséquence.
Votre contenu est-il prêt pour la prise de contrôle mobile?
Conclusion
Jusqu'à ce que nos systèmes de contenu deviennent suffisamment intelligents pour offrir automatiquement aux gens des expériences idéales de chaque image sur n'importe quel appareil, réfléchissez à quand COPE et quand ne pas COPE avec vos images. Il peut être payant de faire un effort supplémentaire et de multisource certaines images.
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-nous savoir dans un commentaire.
Voici un extrait de la conférence de Buddy:
Inscrivez-vous à notre bulletin électronique hebdomadaire sur la stratégie de contenu pour les spécialistes du marketing , qui présente des histoires et des idées exclusives du conseiller en chef du contenu de CMI, Robert Rose. Si vous êtes comme beaucoup d'autres spécialistes du marketing que nous rencontrons, vous aurez hâte de lire ses pensées tous les samedis.
Image de couverture par Joseph Kalinowski / Content Marketing Institute