Când nu vă confruntați cu imaginile dvs. web [Video]

Publicat: 2020-12-22

când-nu-copie-imagini-web-video Pentru a vă gândi strategic la conținutul dvs. vizual bazat pe web, trebuie să faceți mai mult decât să alegeți ce imagini să utilizați; trebuie, de asemenea, să vă asigurați că aceste imagini funcționează pentru ecrane mari și mici.

Dacă o imagine funcționează pentru toate dimensiunile ecranului, minunat. Încărcați un fișier (o singură sursă a imaginii) și sunteți bine să mergeți.

Nu toate imaginile îți fac viața atât de ușoară. Uneori merită să oferiți mai multe versiuni ale unei imagini pentru a oferi oamenilor ceea ce au nevoie din imaginea de pe orice dispozitiv.

Așa spune Buddy Scalera, director senior de strategie de conținut la The Medicines Company. În discursul său de Conferință de conținut inteligent, Crearea și executarea unei strategii de conținut vizual care se întinde, Buddy ne-a spus că este totul pentru o singură sursă ... cu excepția cazului în care nu este. El pledează pentru ceea ce el și alții numesc „COPE în cea mai mare parte” (COPE-M), mai ales când vine vorba de imagini.

COPE înseamnă „creați o dată, publicați peste tot”. Conținutul COPE este conținut unic. În multe feluri, conținutul COPE este ideal. Creați o bucată de conținut o singură dată - o descriere a produsului, o specificație, o definiție, o imagine - iar sistemul poate trage (nu lipi) acea bucată în mai multe livrări. Când actualizați sursa, actualizarea trece prin depozitul dvs. Conținutul COPE este elegant. Este eficient. Este logic. Economisește companiilor milioane de dolari în costuri de traducere. Îi ajută să evite inconsecvențele jenante, nebunești, care provoacă procese. COPE funcționează bine cu text, audio și video (dacă utilizați YouTube).

Cu toate acestea, uneori COPE este calea greșită de urmat. Browserele moderne vă redau textul, dar imaginile se micșorează pentru dispozitivele dvs. O imagine care arată minunat pe desktop poate deveni de nerecunoscut pe un smartphone. (Bună, ciupiți și măriți.)

Aici intervine M în COPE-M. „Deși este un obiectiv bun să vă pregătiți conținutul pentru reutilizarea multicanal, nu toate conținuturile sunt eficiente în modelul COPE”, spune Buddy.

Creați o dată, publicați oriunde (COPE) este adesea o modalitate greșită de a merge cu imaginile, spune @BuddyScalera. #intelcontent Faceți clic pentru a trimite un Tweet

În acest articol, rezum sfaturile lui Buddy din discuția sa ICC. Toate imaginile din această postare provin din diapozitivele sale și toate citatele, dacă nu se specifică altfel, provin din discuția sa și din conversațiile mele ulterioare cu el.

CONȚINUT RELATAT MANUAL:
11 moduri de a domina scena socială cu conținut ucigaș

De ce este greu să COPE cu câteva imagini

Buddy renunță la ceea ce el numește o „bombă de adevăr” despre imagini: nu sunt la fel ca textul.

Textul se pretează la o singură sursă, deoarece textul poate fi separat de aspectul său. Foliile de stil în cascadă permit ca textul să varieze ca aspect de la o instanță la alta, fără a modifica sursa textului de bază. „Textul este un element minunat, flexibil, fluid, reutilizabil, canal-agnostic, care funcționează excelent în lumea digitală”, spune el.

Nu la fel cu imaginile. Nu pot fi separați de aspectul lor. Cu imaginile, o mărime nu se potrivește întotdeauna cu toate.

Așa cum a spus Justyn Hornor cu câțiva ani în urmă, „elefantul din cameră” pentru designul web receptiv „este cum să gestionați imaginile”. O imagine mică poate părea clară pe un telefon mobil și ridicol de mică pe un monitor de înaltă rezoluție. O imagine mare poate dura mult timp pentru a fi redată pe un dispozitiv mic unde ar fi suficientă o imagine mai mică.

Pentru designul web receptiv, o singură dimensiune nu se potrivește tuturor atunci când se manipulează imagini, spune @jphornor. #intelcontent Faceți clic pentru a trimite un Tweet

Cum să vă gândiți la imagini multisourcing

Mai degrabă decât să vă așteptați ca o singură imagine să funcționeze pentru toate dispozitivele prin compromiterea capetelor superioare și inferioare, s-ar putea să vă fie cel puțin din când în când merită să încărcați mai multe imagini și apoi să spuneți sistemului la ce punct de întrerupere să le utilizați.

Încărcați mai multe imagini și spuneți sistemului la ce punct de întrerupere să le utilizați pe fiecare. @BuddyScalera #intelcontent Faceți clic pentru a trimite un Tweet

multi-sourcing-imagini-puncte de întrerupere

Un punct de întrerupere este punctul în care sistemul încetează să tragă o imagine și trage alta în schimb - una mai mare sau mai mică, în funcție de rezoluția dispozitivului. Această ilustrație prezintă trei puncte de întrerupere posibile: 320 pixeli pentru un telefon mobil, 720 pixeli pentru o tabletă sau un telefon mare și 1.024 pixeli pentru un laptop.

Punctele de întrerupere sunt definite în funcție de lățimea dispozitivului, deoarece avem o derulare verticală infinită, dar lățime limitată.

Buddy descrie un moment în care una dintre echipele de conținut ale companiei sale a tipărit o broșură care conținea un grafic care răspundea la întrebările medicilor despre un anumit produs.

Graficul arăta grozav în tipar. Și apoi l-au pus pe un site web și a devenit mai mic. Când a fost vizualizat pe un smartphone, graficul era ilizibil. Oamenii care caută ceva pe un smartphone într-un spital au un nivel de urgență. Au nevoie de răspuns. Nu trebuie să fie ciupite și mărite.

În multe cazuri, este acceptabil să încărcați o imagine mare pe site-ul dvs. web (cu alte cuvinte, să faceți o singură sursă a imaginii) și să lăsați browserul să o scaleze pentru dvs. În alte cazuri, imaginile devin aproape ilizibile atunci când sunt strânse într-o fereastră sau ecran mic. Pentru a ilustra acest punct, Buddy arată ce se întâmplă atunci când un browser scalează o fotografie a fiicelor sale cu o lățime de 800 de pixeli:

browser-scale-example

Acesta este un exemplu COPE. Din păcate, atunci când browserul redimensionează această imagine pentru o fereastră sau un ecran îngust, este greu să vezi fețele fetelor. Dacă această imagine ar fi o diagramă sau o infografică, textul de pe ecranul mai mic ar putea deveni ilizibil.

Pentru elementele vizuale critice pentru narațiunea mărcii dvs., vă recomandăm să depuneți un efort suplimentar pentru a utiliza mai multe imagini. Această abordare, pe care Buddy o numește „direcție de artă receptivă”, le oferă oamenilor o șansă mai bună de a vedea detaliile importante pe orice ecran.

Pentru elementele # vizuale critice pentru narațiunea mărcii dvs., utilizați o direcție de artă receptivă, spune @BuddyScalera. Faceți clic pentru a trimite un Tweet

responsive-arrt-direction

Pe măsură ce Buddy modifică lățimea imaginii de la 800 la 400 la 200 pixeli, el modifică și compoziția imaginii: Aceasta nu este COPE. Aceasta este planificarea imaginii. Fotografia cu o lățime de 800 de pixeli arată fetele și câinele unul lângă altul în ceea ce el numește o fotografie orizontală cu trei lățimi. Fotografia cu o lățime de 400 de pixeli aduce fetele mai strânse și împinge câinele din față pentru o fotografie verticală de două lățimi. Imaginea cu 200 de pixeli lățime strânge toate cele trei figuri într-un aranjament totem-pole.

Dacă ați vizualiza pagina de exemplu a lui Buddy într-un browser și ați întins și restrâns fereastra, imaginea s-ar schimba de fiecare dată când ați atins unul dintre punctele de întrerupere specificate în codul HTML. Pentru a cunoaște experiența utilizatorului, redați acest videoclip de șase secunde:

Pentru a experimenta acest comportament în propriul browser, vizitați pagina de exemplu a lui Buddy pe un dispozitiv care vă permite să modificați lățimea ferestrei.

Deși această postare nu este un tutorial despre cum să scrieți acest tip de cod, s-ar putea să vă fie de folos să vedeți cum arată acest cod:

exemplu de cod de punct de întrerupere

Principalul lucru de observat (uitați-vă între etichetele „imagine”) este că Buddy a specificat trei imagini sursă:

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

Fiecare fișier JPG este atribuit unui punct de întrerupere:

  • lățime maximă: 499 px
  • lățime maximă: 799 px
  • lățime minimă: 800 px

Câte puncte de întrerupere ar trebui să creezi? Cum determinați lățimile maxime și minime ale acestora? Nu sunt reguli. Într-un articol excelent pe care Buddy îl menționează, Jason Grigsby spune: „Selectarea punctelor de întrerupere a imaginii este ceva la care toată lumea se va confrunta și, sincer, nu am răspunsuri bune pentru tine”.

Probabil că nu veți crea mai multe imagini pentru fiecare imagine de pe site-ul dvs. web. Stabiliți ce imagini contează cu adevărat pentru clientul dvs. Dacă știți că o imagine (de exemplu, grafic, diagramă, fotografie de produs) este cu adevărat importantă pentru utilizatorul dvs., nu lăsați-o în sarcina browserului web pentru a determina cum să redați imaginea respectivă. Preia controlul.

Este demn de remarcat faptul că unele sisteme de gestionare a activelor digitale (DAM) pot crea ieșiri multiple ale unei singure imagini în diferite dimensiuni și rapoarte. Nu va reproduce ceea ce Buddy a făcut cu fotografii separate, dar ar trebui să explorați ce oferă sistemul dvs. software.

Singura regulă pe care o pot sugera este să luați deciziile strategice cu privire la imagini în același mod în care luați decizii strategice cu privire la orice alt conținut: întrebați-vă de ce are nevoie publicul și de ce. Experimentați cu diferite imagini și puncte de întrerupere. Repeta.

Întrebați de ce are nevoie publicul dvs. și de ce. Experimentați cu diferite imagini și puncte de întrerupere. Repeta. @BuddyScalera Faceți clic pentru a trimite un Tweet

Pentru mai multe din ceea ce Buddy are de spus despre crearea și executarea unei strategii scalabile pentru conținutul dvs. vizual, consultați prezentarea sa adnotată ICC.

CONȚINUT RELATAT MANUAL:
Cum să creați conținut vizual pentru un public mobil

Când să vă multiplicați imaginile

Deși nu ați dori să vă confruntați cu crearea mai multor fișiere sursă pentru fiecare imagine, luați în considerare multisourcing acele imagini care au cel mai mare impact, de exemplu, imaginile principale de pe paginile dvs. de conversie. După cum spune Buddy:

Gândiți-vă la toți banii cheltuiți pe site-ul dvs. web. Dacă lăsați mașinile să decidă cum să facă față tuturor imaginilor dvs., iar uneori oamenii nu pot vedea imaginile cheie, pierdeți o oportunitate.

Multisursa principalele imagini de pe paginile dvs. de conversie, spune @BuddyScalera. #intelcontent Faceți clic pentru a trimite un Tweet

Cunoașteți paginile și imaginile importante de pe site-ul dvs. web. Probabil că le aveți deja etichetate în software-ul dvs. de analiză. Este deosebit de important să testați aceste pagini pe dispozitive mobile, „nu doar pe superbele monitoare cu ecran lat pe care designerii dvs. le-au folosit pentru a crea conținut”, spune Buddy.

Luați în considerare, de asemenea, imagini multisourcing pe orice alte pagini pe care majoritatea oamenilor le văd pe dispozitive mici. „Uitați-vă la cât de mult trafic obțineți de pe dispozitivele dvs. smartphone. Dacă este ca noi, 65%, acesta este publicul tău. Trebuie să le faci față ”, spune Buddy. Dacă utilizatorii de smartphone-uri nu pot citi o imagine fără a ciupi și a mări, poate doriți să personalizați imaginea pentru ecrane mici.

Cea mai bună modalitate de a afla care imagini trebuie să fie multisursă este să vă testați paginile web pe mai multe dispozitive . Toate echipele de conținut - inclusiv colegii dvs. în strategie de conținut, proiectare, inginerie de conținut și experiență de utilizator - trebuie să știe cum se încarcă imaginile site-ului dvs. pe smartphone-uri. Luați o grămadă de dispozitive și un designer, un strateg de conținut sau o persoană UX. Încărcați-vă conținutul așa cum ar face clientul dvs. „Dacă imaginile pe care le-ai încărcat cu drag pe site-ul tău arată puțin stricate, ia în considerare modalitățile prin care browserul îți scalează resursele de imagine”, spune Buddy, și planifică în consecință.

CONȚINUT RELATAT MANUAL:
Este conținutul dvs. pregătit pentru preluarea dispozitivelor mobile?

Concluzie

Până când sistemele noastre de conținut devin suficient de inteligente pentru a oferi oamenilor în mod automat experiențe ideale pentru fiecare imagine de pe orice dispozitiv, luați în considerare când să COPE și când să nu COPE cu imaginile dvs. S-ar putea plăti să depuneți un efort suplimentar și să multiplicați anumite imagini.

Ce zici de echipa ta? Creați uneori mai multe versiuni ale imaginilor dvs. importante pentru a se potrivi unei game de dimensiuni ale ecranului? Ce ați învățat din testarea imaginilor dvs. pe mai multe dispozitive? Spuneți-ne într-un comentariu.

Iată un extras din discuția lui Buddy:

Înscrieți-vă la buletinul informativ săptămânal privind strategia de conținut pentru marketing , care conține povești și informații exclusive de la consilierul șef de conținut CMI Robert Rose. Dacă sunteți ca mulți alți comercianți pe care îi întâlnim, veți veni să așteptați cu nerăbdare să-i citiți gândurile în fiecare sâmbătă.

Imagine de copertă a lui Joseph Kalinowski / Content Marketing Institute