Quando non far fronte alle tue immagini web [video]

Per pensare in modo strategico al tuo contenuto visivo basato sul web, devi fare di più che scegliere quali immagini usare; devi anche assicurarti che quelle immagini funzionino per schermi grandi e piccoli.

Se un'immagine funziona per tutte le dimensioni dello schermo, bene. Carica un file (un'immagine da un'unica fonte) e sei a posto.

Non tutte le immagini ti semplificano la vita. A volte vale la pena fornire più versioni di un'immagine per dare alle persone ciò di cui hanno bisogno dall'immagine su qualsiasi dispositivo.

Così afferma Buddy Scalera, direttore senior della strategia dei contenuti presso The Medicines Company. Nel suo discorso alla conferenza sui contenuti intelligenti, Creazione ed esecuzione di una strategia per contenuti visivi scalabile, Buddy ci ha detto che è tutto per il single-sourcing ... tranne quando non lo è. Sostiene ciò che lui e altri chiamano "COPE principalmente" (COPE-M), soprattutto quando si tratta di immagini.

COPE sta per "crea una volta, pubblica ovunque". Il contenuto COPE è contenuto da un'unica fonte. In molti modi, il contenuto COPE è l'ideale. Si crea una porzione di contenuto una volta - una descrizione del prodotto, una specifica, una definizione, un'immagine - e il sistema può estrarre (non incollare) quella porzione in più deliverable. Quando aggiorni l'origine, l'aggiornamento si diffonde nel tuo repository. Il contenuto di COPE è elegante. È efficiente. È logico. Fa risparmiare alle aziende milioni di dollari in costi di traduzione. Li aiuta a evitare incongruenze imbarazzanti, pazze e che incorrono in cause legali. COPE funziona bene con testo, audio e video (se stai usando YouTube).

Tuttavia, a volte COPE è la strada sbagliata da percorrere. I browser moderni ridispongono il testo, ma le immagini si riducono per i tuoi dispositivi. Un'immagine che ha un bell'aspetto sul desktop potrebbe diventare irriconoscibile su uno smartphone. (Ciao, pizzica e ingrandisci.)

È qui che entra in gioco la M in COPE-M. "Sebbene sia un buon obiettivo preparare i tuoi contenuti per il riutilizzo multicanale, non tutti i contenuti vengono ridimensionati in modo efficace nel modello COPE", afferma Buddy.

In questo articolo, riassumo i consigli di Buddy dal suo discorso sull'ICC. Tutte le immagini in questo post provengono dalle sue diapositive e tutte le citazioni, se non diversamente specificato, provengono dal suo discorso e dalle mie successive conversazioni con lui.

Perché è difficile far fronte ad alcune immagini

Buddy lancia quella che chiama una "bomba della verità" sulle immagini: non sono la stessa cosa del testo.

Il testo si presta al single-sourcing perché il testo può essere separato dal suo aspetto. I fogli di stile sovrapposti consentono al testo di variare l'aspetto da un'istanza all'altra senza modificare l'origine del testo sottostante. "Il testo è una risorsa meravigliosa, flessibile, scorrevole, riutilizzabile e indipendente dal canale che funziona alla grande nel mondo digitale", afferma.

Non così con le immagini. Non possono essere separati dal loro aspetto. Con le immagini, una dimensione non va sempre bene per tutti.

Come ha affermato Justyn Hornor alcuni anni fa, "l'elefante nella stanza" per il responsive web design "è come gestire le immagini". Una piccola immagine può apparire nitida su un telefono cellulare e ridicolmente piccola su un monitor ad alta risoluzione. Un'immagine di grandi dimensioni può richiedere molto tempo per il rendering su un piccolo dispositivo in cui sarebbe sufficiente un'immagine più piccola.

Come pensare alle immagini multisourcing

Piuttosto che aspettarti che una singola immagine funzioni per tutti i dispositivi compromettendo le estremità alta e bassa, potresti trovare almeno occasionalmente utile caricare più immagini e quindi dire al sistema in quale punto di interruzione utilizzare ciascuna di esse.

Un punto di interruzione è il punto in cui il sistema smette di estrarre un'immagine e ne estrae invece un'altra, una più grande o più piccola, a seconda della risoluzione del dispositivo. Questa illustrazione mostra tre possibili punti di interruzione: 320 pixel per un telefono cellulare, 720 pixel per un tablet o un telefono di grandi dimensioni e 1.024 pixel per un laptop.

I punti di interruzione sono definiti in base alla larghezza del dispositivo perché abbiamo una scorrevolezza verticale infinita ma una larghezza limitata.

Buddy descrive una volta in cui uno dei team di contenuto della sua azienda ha stampato un opuscolo che includeva un grafico che rispondeva alle domande dei medici su un determinato prodotto.

Il grafico sembrava fantastico in stampa. E poi l'hanno messo su un sito Web e si è ridotto. Se visualizzato su uno smartphone, il grafico era illeggibile. Le persone che cercano qualcosa su uno smartphone in un ospedale hanno un livello di urgenza. Hanno bisogno della risposta. Non hanno bisogno di pizzicare e zoomare.

In molti casi, è accettabile caricare un'immagine di grandi dimensioni sul tuo sito web (in altre parole, per ricavare un'immagine da un'unica fonte) e lasciare che il browser la ridimensiona per te. In altri casi, le immagini diventano quasi illeggibili quando vengono compresse in una piccola finestra o schermo. Per illustrare questo punto, Buddy mostra cosa succede quando un browser ridimensiona una foto larga 800 pixel delle sue figlie:

Questo è un esempio COPE. Sfortunatamente, quando il browser ridimensiona questa immagine per una finestra o uno schermo stretto, è difficile vedere i volti delle ragazze. Se questa immagine fosse un grafico o un'infografica, il testo sullo schermo più piccolo potrebbe diventare illeggibile.

Per gli elementi visivi critici per la narrativa del tuo marchio, potresti voler fare uno sforzo extra per utilizzare più immagini. Questo approccio, che Buddy chiama "art direction reattiva", offre alle persone maggiori possibilità di distinguere i dettagli importanti su qualsiasi schermo.

Quando Buddy cambia la larghezza dell'immagine da 800 a 400 a 200 pixel, cambia anche la composizione dell'immagine: questo non è COPE. Questa è la pianificazione dell'immagine. La foto di 800 pixel mostra le ragazze e il cane fianco a fianco in quello che chiama uno scatto orizzontale di tre larghezze. La foto di 400 pixel di larghezza riunisce le ragazze più strette e mette il cane davanti per uno scatto verticale di due larghezze. Lo scatto di 200 pixel di larghezza comprime tutte e tre le figure in una disposizione totem-pole.

Se stavi visualizzando la pagina di esempio di Buddy in un browser e hai allungato e ristretto la finestra, l'immagine cambierebbe ogni volta che raggiungi uno dei punti di interruzione specificati nel codice HTML. Per avere un'idea dell'esperienza dell'utente, riproduci questo video di sei secondi:

Per provare questo comportamento nel tuo browser, visita la pagina di esempio di Buddy su un dispositivo che ti consente di modificare la larghezza della finestra.

Sebbene questo post non sia un tutorial su come scrivere questo tipo di codice, potresti trovare utile vedere come appare questo codice:

La cosa principale da notare (guarda tra i tag "picture") è che Buddy ha specificato tre immagini di origine:

• GirlsDog_200w.jpg
• GirlsDog_400w.jpg
• GirlsDog_800w.jpg

Ogni file JPG è assegnato a un punto di interruzione:

• larghezza massima: 499 px
• larghezza massima: 799 px
• larghezza minima: 800 px

Quanti punti di interruzione dovresti creare? Come si determinano le loro larghezze massime e minime? Non ci sono regole. In un eccellente articolo a cui fa riferimento Buddy, Jason Grigsby afferma: "La selezione dei punti di interruzione dell'immagine è qualcosa che tutti dovranno affrontare e, francamente, non ho buone risposte per te".

Probabilmente non creerai più immagini per ogni immagine sul tuo sito web. Determina quali immagini sono davvero importanti per il tuo cliente. Se sai che un'immagine (ad es. Grafico, grafico, foto del prodotto) è veramente importante per il tuo utente, non lasciare che sia il browser web a determinare come renderizzare quell'immagine. Prendere il controllo.

Vale la pena notare che alcuni dei sistemi di gestione delle risorse digitali (DAM) possono creare più output di una singola immagine in diverse dimensioni e rapporti. Non replicherà ciò che ha fatto Buddy con foto separate, ma dovresti esplorare ciò che offre il tuo sistema software.

L'unica regola che posso suggerire è di prendere le tue decisioni strategiche sulle immagini nello stesso modo in cui prendi decisioni strategiche su qualsiasi altro contenuto: chiediti di cosa ha bisogno il tuo pubblico e perché. Sperimenta con varie immagini e punti di interruzione. Ripetere.

Per ulteriori informazioni su ciò che Buddy ha da dire sulla creazione e sull'esecuzione di una strategia scalabile per il contenuto visivo, vedere la sua presentazione ICC annotata.

Quando multisorgere le tue immagini

Anche se non vorresti prenderti la briga di creare più file sorgente per ogni immagine, considera il multisourcing di quelle immagini che hanno il maggior impatto, ad esempio, le immagini principali sulle tue pagine di conversione. Come dice Buddy:

Pensa a tutti i soldi spesi sul tuo sito web. Se lasci che le macchine decidano come trattare tutte le tue immagini e le persone a volte non possono vedere le immagini chiave, perdi un'opportunità.

Conosci le pagine e le immagini importanti del tuo sito web. Probabilmente li hai già taggati nel tuo software di analisi. È particolarmente importante testare queste pagine su dispositivi mobili, "non solo sugli splendidi monitor widescreen che i tuoi progettisti hanno utilizzato per creare i contenuti", afferma Buddy.

Considera anche le immagini multisourcing su qualsiasi altra pagina che la maggior parte delle persone visualizza su piccoli dispositivi. "Guarda quanto traffico ricevi dai tuoi dispositivi smartphone. Se è come noi, il 65%, quello è il tuo pubblico. Devi provvedere a loro ", dice Buddy. Se gli utenti di smartphone non riescono a leggere un'immagine senza pizzicare e zoomare, potresti voler personalizzare l'immagine per schermi piccoli.

Il modo migliore per sapere quali immagini multisorgente è testare le tue pagine web su più dispositivi . Tutti i team di contenuti, inclusi i tuoi colleghi nella strategia dei contenuti, nella progettazione, nell'ingegneria dei contenuti e nell'esperienza utente, devono sapere come vengono caricate le immagini del tuo sito web sugli smartphone. Prendi una pila di dispositivi e un designer, uno stratega dei contenuti o una persona UX. Carica i tuoi contenuti come farebbe il tuo cliente. "Se le immagini che hai caricato amorevolmente sul tuo sito web sembrano un po 'schiacciate, considera i modi in cui il browser sta ridimensionando le tue risorse di immagini", dice Buddy e pianifica di conseguenza.

Conclusione

Fino a quando i nostri sistemi di contenuti non saranno abbastanza intelligenti da offrire automaticamente alle persone esperienze ideali di ogni immagine su qualsiasi dispositivo, considera quando COPE e quando non COPE con le tue immagini. Potrebbe valere la pena di impegnarsi ulteriormente e di utilizzare più fonti per determinate immagini.

E la tua squadra? A volte crei più versioni delle tue immagini importanti per adattarsi a una gamma di dimensioni dello schermo? Cosa hai imparato testando le tue immagini su più dispositivi? Faccelo sapere in un commento.

Ecco un estratto dal discorso di Buddy:

Iscriviti alla nostra newsletter elettronica settimanale sulla strategia dei contenuti per gli operatori di marketing , che presenta storie e approfondimenti esclusivi del consigliere per i contenuti di CMI Robert Rose. Se sei come tanti altri marketer che incontriamo, non vedrai l'ora di leggere i suoi pensieri ogni sabato.

Immagine di copertina di Joseph Kalinowski / Content Marketing Institute