Kiedy nie współpracować z obrazami internetowymi [wideo]

Aby myśleć strategicznie o treści wizualnej w Internecie, musisz zrobić coś więcej niż tylko wybrać obrazy, których chcesz użyć; musisz również upewnić się, że te obrazy działają na dużych i małych ekranach.

Jeśli obraz działa na wszystkich rozmiarach ekranu, świetnie. Prześlij jeden plik (obraz z jednego źródła) i gotowe.

Nie wszystkie obrazy ułatwiają Ci życie. Czasami warto poświęcić chwilę na udostępnienie wielu wersji obrazu, aby dać ludziom to, czego potrzebują, z obrazu na dowolnym urządzeniu.

Tak mówi Buddy Scalera, starszy dyrektor ds. Strategii treści w The Medicines Company. W swoim wykładzie na konferencji Intelligent Content Conference, pt. Tworzenie i wykonywanie strategii treści wizualnych, która skaluje, Buddy powiedział nam, że wszyscy są za pozyskiwaniem pojedynczych źródeł… z wyjątkiem sytuacji, gdy tak nie jest. Opowiada się za tym, co on i inni nazywają „głównie COPE” (COPE-M), zwłaszcza jeśli chodzi o obrazy.

COPE oznacza „utwórz raz, opublikuj wszędzie”. Treść COPE to zawartość pochodząca z pojedynczego źródła. Pod wieloma względami zawartość COPE jest idealna. Raz tworzysz fragment treści - opis produktu, specyfikację, definicję, obraz - a system może wciągnąć (a nie wkleić) ten fragment do wielu elementów dostarczanych. Kiedy aktualizujesz źródło, aktualizacja przechodzi przez repozytorium. Zawartość COPE jest elegancka. To wydajne. To logiczne. Oszczędza to firmom miliony dolarów na kosztach tłumaczeń. Pomaga im uniknąć kłopotliwych, szalonych i pociągających za sobą niespójności. COPE działa dobrze z tekstem, dźwiękiem i wideo (jeśli korzystasz z YouTube).

Mimo to, czasami COPE jest złą drogą. Nowoczesne przeglądarki zmieniają tekst, ale obrazy są skalowane w dół dla Twoich urządzeń. Obraz, który świetnie wygląda na komputerze, może stać się nierozpoznawalny na smartfonie. (Cześć, uszczypnij i powiększ.)

W tym miejscu pojawia się M w COPE-M. „Chociaż przygotowanie treści do ponownego wykorzystania w wielu kanałach jest dobrym celem, nie wszystkie treści można skutecznie skalować w modelu COPE” - mówi Buddy.

W tym artykule podsumowuję rady Buddy'ego z jego wystąpienia w ICC. Wszystkie zdjęcia w tym poście pochodzą z jego slajdów, a wszystkie cytaty, o ile nie zaznaczono inaczej, pochodzą z jego wystąpienia i moich kolejnych rozmów z nim.

Dlaczego trudno jest współpracować z niektórymi obrazami

Buddy rzuca coś, co nazywa „bombą prawdy” na temat obrazów: to nie to samo, co tekst.

Tekst nadaje się do pozyskiwania pojedynczych źródeł, ponieważ można go oddzielić od jego wyglądu. Kaskadowe arkusze stylów umożliwiają zmianę wyglądu tekstu w różnych instancjach bez zmiany źródła tekstu. „Tekst to wspaniały, elastyczny, płynny, wielokrotnego użytku, niezależny od kanału zasób, który świetnie sprawdza się w cyfrowym świecie” - mówi.

Nie dotyczy to obrazów. Nie można ich oddzielić od ich wyglądu. W przypadku obrazów jeden rozmiar nie zawsze pasuje do wszystkich.

Jak Justyn Hornor ujął to kilka lat temu, „słoń w pokoju” w responsywnym projektowaniu stron internetowych „to sposób obsługi obrazów”. Mały obraz może wyglądać ostro na telefonie komórkowym i śmiesznie mały na monitorze o wysokiej rozdzielczości. W przypadku dużego obrazu renderowanie na małym urządzeniu może zająć dużo czasu, a wystarczyłby mniejszy obraz.

Jak myśleć o obrazach multisourcingowych

Zamiast oczekiwać, że pojedynczy obraz będzie działał na wszystkich urządzeniach, narażając się na wysokie i niskie poziomy, może się okazać, że przynajmniej od czasu do czasu warto przesłać wiele obrazów, a następnie poinformować system, w którym punkcie przerwania ma używać każdego z nich.

Punkt przerwania to punkt, w którym system przestaje pobierać jeden obraz i zamiast tego pobiera inny - większy lub mniejszy, w zależności od rozdzielczości urządzenia. Ta ilustracja przedstawia trzy możliwe punkty przerwania: 320 pikseli dla telefonu komórkowego, 720 pikseli dla tabletu lub dużego telefonu i 1024 pikseli dla laptopa.

Punkty przerwania są definiowane zgodnie z szerokością urządzenia, ponieważ mamy nieograniczoną możliwość przewijania w pionie, ale ograniczoną szerokość.

Buddy opisuje sytuację, kiedy jeden z zespołów merytorycznych w jego firmie wydrukował broszurę zawierającą wykres odpowiadający na pytania lekarzy dotyczące określonego produktu.

Wykres wyglądał świetnie w druku. A potem umieścili to na stronie internetowej, która się zmniejszyła. Na smartfonie wykres był nieczytelny. Osoby wyszukujące coś na smartfonie w szpitalu są bardzo pilne. Potrzebują odpowiedzi. Nie muszą szczypać i powiększać.

W wielu przypadkach dopuszczalne jest przesłanie jednego dużego obrazu do swojej witryny (innymi słowy, do obrazu z jednego źródła) i pozwolenie przeglądarce na skalowanie go za Ciebie. W innych przypadkach obrazy stają się prawie nieczytelne po ściśnięciu w małym oknie lub na ekranie. Aby zilustrować ten punkt, Buddy pokazuje, co się dzieje, gdy przeglądarka skaluje zdjęcie jego córek o szerokości 800 pikseli:

To jest przykład COPE. Niestety, gdy przeglądarka skaluje ten obraz do wąskiego okna lub ekranu, trudno jest zobaczyć twarze dziewcząt. Gdyby ten obraz był wykresem lub infografiką, tekst na mniejszym ekranie mógłby stać się nieczytelny.

W przypadku elementów wizualnych krytycznych dla narracji Twojej marki możesz włożyć dodatkowy wysiłek w użycie wielu obrazów. Takie podejście, które Buddy nazywa „responsywnym kierownictwem artystycznym”, daje ludziom większą szansę dostrzeżenia ważnych szczegółów na dowolnym ekranie.

Gdy Buddy zmienia szerokość obrazu z 800 na 400 na 200 pikseli, zmienia także kompozycję obrazu: To nie jest COPE. To jest planowanie wizerunku. Zdjęcie o szerokości 800 pikseli przedstawia dziewczyny i psa obok siebie w tak zwanym, poziomym ujęciu na trzy szerokości. Zdjęcie o szerokości 400 pikseli zbliża dziewczyny do siebie i wsuwa psa przed siebie, tworząc pionowe ujęcie na dwie szerokości. Ujęcie o szerokości 200 pikseli ściska wszystkie trzy postacie w układzie totemu.

Jeśli przeglądasz przykładową stronę Buddy w przeglądarce i rozciągasz i zawężasz okno, obraz zmieni się za każdym razem, gdy osiągniesz jeden z punktów przerwania określonych w kodzie HTML. Aby poznać wrażenia użytkownika, odtwórz ten sześciosekundowy film:

Aby doświadczyć tego zachowania we własnej przeglądarce, odwiedź przykładową stronę Buddy na urządzeniu, które umożliwia zmianę szerokości okna.

Chociaż ten post nie jest samouczkiem na temat pisania tego rodzaju kodu, warto zobaczyć, jak wygląda ten kod:

Najważniejszą rzeczą, na którą należy zwrócić uwagę (spójrz między znaczniki „obraz”), jest to, że Buddy określił trzy obrazy źródłowe:

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

Każdy plik JPG jest przypisany do punktu przerwania:

• max-width: 499px
• max-width: 799px
• min-width: 800px

Ile punktów przerwania należy utworzyć? Jak określacie ich maksymalne i minimalne szerokości? Nie ma zasad. W znakomitym artykule, na który wskazuje Buddy, Jason Grigsby mówi: „Wybór punktów przerwania obrazu to coś, z czym każdy będzie musiał się zmierzyć i szczerze mówiąc, nie mam dla ciebie dobrych odpowiedzi”.

Prawdopodobnie nie utworzysz wielu obrazów dla każdego obrazu w swojej witrynie. Określ, które obrazy naprawdę mają znaczenie dla Twojego klienta. Jeśli wiesz, że obraz (np. Wykres, wykres, zdjęcie produktu) jest naprawdę ważny dla Twojego użytkownika, nie pozostawiaj tego przeglądarce internetowej, aby zdecydować, jak wyrenderować ten obraz. Przejąć kontrolę.

Warto zauważyć, że niektóre systemy zarządzania zasobami cyfrowymi (DAM) mogą tworzyć wiele wyników pojedynczego obrazu w różnych rozmiarach i proporcjach. Nie powiela tego, co zrobił Buddy z oddzielnymi zdjęciami, ale powinieneś sprawdzić, co oferuje twój system oprogramowania.

Jedyną zasadą, jaką mogę zasugerować, jest podejmowanie strategicznych decyzji dotyczących obrazów w ten sam sposób, w jaki podejmujesz strategiczne decyzje dotyczące innych treści: zadaj sobie pytanie, czego potrzebują Twoi odbiorcy i dlaczego. Eksperymentuj z różnymi obrazami i punktami przerwania. Powtarzać.

Aby dowiedzieć się więcej o tym, co Buddy ma do powiedzenia na temat tworzenia i wykonywania skalowalnej strategii dla treści wizualnych, zobacz jego opisaną prezentację ICC.

Kiedy korzystać z wielu źródeł

Chociaż nie chciałbyś kłopotać się tworzeniem wielu plików źródłowych dla każdego obrazu, rozważ skorzystanie z multisourcingu tych obrazów, które mają największy wpływ, na przykład główne obrazy na stronach konwersji. Jak mówi Buddy:

Pomyśl o wszystkich pieniądzach wydanych na Twojej stronie. Jeśli pozwalasz maszynom decydować, jak radzić sobie ze wszystkimi obrazami, a ludzie czasami nie widzą kluczowych obrazów, tracisz okazję.

Znasz ważne strony i obrazy w swojej witrynie. Prawdopodobnie masz już je otagowane w oprogramowaniu analitycznym. Szczególnie ważne jest testowanie tych stron na urządzeniach mobilnych, „nie tylko na wspaniałych monitorach szerokoekranowych, których projektanci używali do tworzenia treści” - mówi Buddy.

Weź również pod uwagę możliwość korzystania z obrazów z wielu źródeł na innych stronach, które większość ludzi przegląda na małych urządzeniach. „Sprawdź, ile ruchu generują Twoje smartfony. Jeśli tak jak my, 65% to twoi odbiorcy. Musisz ich zaspokoić ”- mówi Buddy. Jeśli użytkownicy smartfonów nie mogą odczytać obrazu bez szczypania i powiększania, możesz dostosować obraz do małych ekranów.

Najlepszym sposobem, aby dowiedzieć się, które obrazy mają być objęte wieloma źródłami, jest przetestowanie stron internetowych na wielu urządzeniach . Wszystkie zespoły zajmujące się treścią - w tym współpracownicy zajmujący się strategią treści, projektowaniem, inżynierią treści i doświadczeniem użytkownika - muszą wiedzieć, jak obrazy Twojej witryny ładują się na smartfony. Chwyć stos urządzeń i projektanta, stratega treści lub osobę UX. Ładuj swoje treści tak, jak zrobiłby to Twój klient. „Jeśli obrazy, które z miłością załadowałeś na swoją stronę internetową, wyglądają na trochę zgniecione, zastanów się, w jaki sposób przeglądarka skaluje Twoje zasoby graficzne” - mówi Buddy i odpowiednio zaplanuj.

Wniosek

Dopóki nasze systemy treści nie staną się na tyle inteligentne, aby automatycznie zapewniać użytkownikom idealne wrażenia z każdego obrazu na dowolnym urządzeniu, zastanów się, kiedy należy COPE, a kiedy nie. Niektóre obrazy mogą się opłacać włożyć dodatkowy wysiłek i korzystać z wielu źródeł.

A co z twoim zespołem? Czy czasami tworzysz wiele wersji ważnych obrazów, aby dostosować je do różnych rozmiarów ekranu? Czego się nauczyłeś, testując swoje obrazy na wielu urządzeniach? Daj nam znać w komentarzu.

Oto fragment przemówienia Buddy'ego:

Zarejestruj się, aby otrzymywać nasz cotygodniowy e-biuletyn dotyczący strategii treści dla marketerów , który zawiera wyjątkowe historie i spostrzeżenia głównego doradcy ds. Treści CMI, Roberta Rose'a. Jeśli jesteś jak wielu innych sprzedawców, których spotykamy, z niecierpliwością czekasz na przeczytanie jego przemyśleń w każdą sobotę.

Zdjęcie na okładce: Joseph Kalinowski / Content Marketing Institute