Cum să asigurați experiențe vizuale optime pe toate dispozitivele

Actualizat 22 august 2022

Deschideți pagina cu cea mai bună conversie de pe site-ul dvs. pe trei dispozitive - mobil, tabletă și desktop.

Într-adevăr, fă-o. Voi aștepta.

Conținutul dvs. se afișează așa cum vă așteptați?

Mulți agenți de marketing vor descoperi că nu. Experiența utilizatorului și consistența mesajelor sunt nesatisfăcătoare. Uneori, este de-a dreptul îngrozitor.

Cum ai ajuns aici? La urma urmei, compania ta investește o mulțime de resurse pentru a publica conținut. Chiar și maximizați acele resurse de conținut prin adoptarea metodei COPE - creați o dată, publicați peste tot.

Și asta poate fi greșeala.

Înveselește-te, colege de marketing de conținut. Sunt aici pentru a vă ajuta cu o ușoară ajustare – COPE-M.

Înțelegeți de ce este necesar COPE-M

Folosind o strategie COPE tradițională, încărcați o bucată de conținut o dată (definiție, imagine, descriere etc.), iar CMS-ul extrage (nu lipește) acea bucată în mai multe livrabile. Când actualizați conținutul original, actualizarea trece prin depozitul dvs.

Ca strategie de conținut, conținutul COPE este elegant. Este eficient. Este logic. Mărește reutilizarea conținutului dvs. și vă amortizează investițiile în conținutul original. Funcționează cu text, audio și video.

Dar COPE nu este un panaceu pentru publicarea de conținut. Browserele moderne vă redistribuie textul, dar imaginile sunt reduse pentru dispozitivele dvs. O imagine care arată grozav pe un desktop poate fi de nerecunoscut pe un dispozitiv mobil. (Publicului tău nu-i place asta și nici Google, ceea ce poate afecta clasamentul conținutului tău.)

COPE este un punct de plecare excelent, dar este necesară o abordare mai stratificată a controlului imaginii. Eu îl numesc COPE-M – creați o dată, publicați peste tot mai mult. COPE-M poate fi puntea de legătură între o experiență bună de utilizator și una excelentă.

Adoptarea unei abordări COPE-M a strategiei dvs. de publicare a conținutului vă poate îmbunătăți experiența utilizatorului, crește consistența și vă poate îmbunătăți optimizarea pentru motoarele de căutare (SEO) cu conținut reîmprospătat.

Imaginile nu sunt neapărat cele mai bune prietene cu COPE

S-au schimbat multe din 2009, când Daniel Jacobson a subliniat conceptul și abordarea tehnică a acestei strategii de reutilizare a conținutului. COPE rămâne un concept solid, dar astăzi conținutul este distribuit prin mai multe tipuri de dispozitive. Publicul consumă, de asemenea, conținutul în mai multe formate.

Textul dintr-o singură sursă vizualizat în mai multe browsere încă funcționează, dar este o problemă pentru imagini. Textul poate fi separat de aspectul său. Foile de stil în cascadă permit modificarea aspectului textului, cum ar fi dimensiunile fontului și lățimea coloanelor, fără a modifica sursa originală.

Imaginile nu sunt la fel de maleabile. Elementele grafice redate (de exemplu, fișiere JPEG, PNG) nu pot fi separate de aspectul lor. O mărime dintr-o singură sursă nu se potrivește întotdeauna tuturor. O infografică care arată bine pe un desktop poate fi ilizibilă pe un iPhone. Îl lasă pe spectator să ciupească, să mărească, să miște ochii și să mormăie încercând să-l vadă.

Alegeți imaginile pentru multisursă

Până când sistemele de management al conținutului devin suficient de inteligente pentru a oferi automat experiențe de vizionare ideale pentru fiecare imagine de pe fiecare dispozitiv, trebuie să vă gândiți când să faceți față și când să nu faceți față imaginilor dvs.

Reveniți la solicitarea mea inițială – deschideți cea mai bună pagină de conversie pentru a vedea cum apare pe mai multe dispozitive. Faceți asta cu celelalte pagini și imagini importante de pe site-ul dvs. Probabil că le-ați etichetat deja în software-ul dvs. de analiză.

SFAT: restrângeți selecția paginii la cele care obțin trafic semnificativ de pe dispozitivele mobile.

Pentru a identifica ce imagini de multisursă, testați paginile selectate pe mai multe dispozitive. Luați un teanc 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ă o imagine pare strivită, adăugați-o la o listă de imagini care vor fi multisurse.

SFAT: Nu vă uitați doar pentru a vedea dacă imaginea este afișată. Aruncă o privire atentă la modul în care se afișează. Dacă utilizatorul trebuie să ciupească și să mărească pentru a vedea toată imaginea, probabil că COPE nu este cea mai bună metodă.

Împărtășiți rezultatele tuturor echipelor legate de conținut, inclusiv strategie de conținut, design, ingineria conținutului și experiența utilizatorului, care ar trebui să știe cum se încarcă imaginile site-ului dvs.

Design pentru mai multe ecrane

Cu o imagine compromisă la nivelurile superioare și inferioare pentru a se potrivi pe ecranul unui dispozitiv mobil, poate fi util să încărcați mai multe imagini și să spuneți sistemului la ce punct de întrerupere să le folosească pe fiecare.

Un punct de întrerupere este un punct în care sistemul nu mai extrage o imagine și trage o versiune care se potrivește mai bine dispozitivului de vizualizare. Punctele de întrerupere sunt determinate de lățimea dispozitivului, deoarece utilizatorii pot derula vertical la infinit, dar nu pot lărgi ecranul.

Această ilustrație arată 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:

În acest exemplu, imaginea originală a celor două fiice ale mele și a câinelui nostru are o lățime de 800 de pixeli. Arată grozav pe un desktop redat la dimensiune completă (partea stângă a imaginii). Pe un ecran de dimensiunea unei tablete, imaginea originală pierde detalii, ceea ce îi diminuează impactul.

Dacă această imagine ar fi o diagramă sau o infografică, ar putea deveni ilizibilă pe un ecran mai mic. De aceea, ar trebui să depuneți un efort suplimentar pentru a obține mai multe imagini. Această abordare se numește „direcție de artă receptivă”. Este un truc de browser care vă oferă un pic mai mult control asupra modului în care imaginile sunt afișate utilizatorilor dvs.

Iată cum funcționează cu exemplul original. De data aceasta, am făcut fotografii diferite pentru fiecare dimensiune – 800, 400 și 200 de pixeli lățime. Când sunt publicate, fețele lor au aproximativ aceeași dimensiune în fiecare.

În versiunea orizontală de 800 de pixeli, o fiică stă pe scări cu câinele nostru, în timp ce cealaltă stă de-a lungul balustradei cu o privire asupra cartierului în fundal. În versiunea verticală de 400 de pixeli, ambele fiice se așează pe trepte cu câinele lângă una dintre ele cu ambele balustrade vizibile. În versiunea verticală de 200 de pixeli, fiecare fiică și câinele au propriul pas și este vizibilă doar o balustradă.

Această abordare nu este COPE. Nu este cea mai mare parte a COPE-M. Am creat de trei ori mai multă muncă pentru mine. De aceea, ar trebui să limitați această muncă intensă de timp doar la conținutul esențial de conversie.

Vedeți cum sunt codificate imaginile cu mai multe surse

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

Între etichetele „picture”, am specificat cele trei imagini sursă, care sunt denumite în funcție de lățimea imaginii:

• jpg
• jpg
• jpg

Acum, fiecare imagine va începe când va atinge punctul de întrerupere:

• 499 pixeli (maximum) pentru smartphone-uri
• 799 pixeli (maximum) pentru tablete
• 800 pixeli (minim) pentru desktop

Faceți COPE-M să funcționeze pentru marca dvs

Majoritatea sistemelor de management al activelor digitale (DAM) pot crea mai multe ieșiri ale unei singure imagini în diferite dimensiuni și rapoarte. Dacă nu puteți reînregistra fotografiile, decupați-le pentru a asigura cea mai bună experiență pe toate dimensiunile de ecran. Poate fi multă muncă, așa că nu le cereți designerilor sau dezvoltatorilor să reproiecteze fiecare imagine de pe site-ul dvs. Concentrați-vă pe impact.

Dacă SEO este o prioritate de top, consultați specialiștii dvs. SEO înainte de a implementa abordarea cu mai multe imagini. Algoritmul Google poate penaliza paginile web care nu oferă exact aceeași experiență pe desktop și pe mobil. Chiar dacă oferiți o experiență mai bună pentru oameni, este posibil ca un crawler Google să nu știe încă acest lucru. Desigur, dacă mai mulți oameni consideră pagina dvs. demnă de timpul lor din cauza unei experiențe de imagine mai bune, Google îi va plăcea asta.

Ce zici de echipa ta? Uneori creați mai multe versiuni ale imaginilor dvs. importante pentru a se adapta la o gamă largă de dimensiuni de ecran? Ce ați învățat din testarea imaginilor pe mai multe dispozitive? Anunță-mă în comentarii.

Imagine de copertă de Joseph Kalinowski/Content Marketing Institute