Jak zapewnić optymalne wrażenia wizualne na różnych urządzeniach

Zaktualizowano 22 sierpnia 2022 r.

Otwórz najlepiej konwertującą stronę w swojej witrynie na trzech urządzeniach – telefonie komórkowym, tablecie i komputerze.

Naprawdę, zrób to. Poczekam.

Czy Twoje treści wyświetlają się tak, jak oczekiwałeś?

Wielu marketerów stwierdzi, że tak nie jest. Doświadczenie użytkownika i spójność wiadomości są niezadowalające. Czasami jest to wręcz okropne.

Jak się tu dostałeś? W końcu Twoja firma inwestuje dużo zasobów w publikowanie treści. Maksymalizujesz nawet te zasoby treści, stosując metodę COPE – twórz raz, publikuj wszędzie.

I to może być błąd.

Rozchmurz się, kolega content marketer. Jestem tu po to, żeby pomóc z drobną korektą – COPE-M.

Zrozum, dlaczego COPE-M jest niezbędny

Korzystając z tradycyjnej strategii COPE, przesyłasz fragment treści raz (definicję, obraz, opis itp.), a CMS pobiera (a nie wkleja) fragmenty w wielu elementach dostarczanych. Kiedy aktualizujesz oryginalną zawartość, aktualizacja przechodzi przez twoje repozytorium.

Treść COPE jako strategia treści jest elegancka. Jest wydajny. To logiczne. Zwiększa ponowne wykorzystanie Twoich treści i amortyzuje Twoje inwestycje w oryginalne treści. Działa z tekstem, dźwiękiem i wideo.

Ale COPE nie jest panaceum na publikowanie treści. Nowoczesne przeglądarki odświeżają tekst, ale obrazy skalują się w dół dla Twoich urządzeń. Obraz, który świetnie wygląda na komputerze, może być nierozpoznawalny na urządzeniu mobilnym. (Twoim odbiorcom to się nie podoba, podobnie jak Google, co może zaszkodzić rankingom Twoich treści).

COPE to świetny punkt wyjścia, ale konieczne jest bardziej warstwowe podejście do kontroli obrazu. Nazywam to COPE-M – raz twórz, najczęściej publikuj wszędzie. COPE-M może być pomostem między dobrym i świetnym doświadczeniem użytkownika.

Przyjęcie podejścia COPE-M do strategii publikowania treści może poprawić wrażenia użytkownika, zwiększyć spójność i poprawić optymalizację pod kątem wyszukiwarek (SEO) dzięki odświeżonym treściom.

Obrazy niekoniecznie są najlepszymi przyjaciółmi z COPE

Wiele się zmieniło od 2009 roku, kiedy Daniel Jacobson przedstawił koncepcję i techniczne podejście do tej strategii ponownego wykorzystania treści. COPE pozostaje solidną koncepcją, ale dziś zawartość jest dystrybuowana za pośrednictwem wielu typów urządzeń. Odbiorcy również konsumują treści w większej liczbie formatów.

Tekst z jednego źródła wyświetlany w wielu przeglądarkach nadal działa, ale jest to problem w przypadku obrazów. Tekst można oddzielić od jego wyglądu. Kaskadowe arkusze stylów umożliwiają zmianę wyglądu tekstu, takiego jak rozmiary czcionek i szerokości kolumn, bez zmiany oryginalnego źródła.

Obrazy nie są tak plastyczne. Renderowanej grafiki (np. plików JPEG, PNG) nie można oddzielić od ich wyglądu. Jeden rozmiar z jednego źródła nie zawsze pasuje do wszystkich. Infografika, która dobrze wygląda na pulpicie, może być nieczytelna na iPhonie. To sprawia, że ​​widz szczypie, powiększa, mruży oczy i narzeka, próbując to zobaczyć.

Wybierz obrazy do wielu źródeł

Dopóki systemy zarządzania treścią nie staną się wystarczająco inteligentne, aby automatycznie zapewniać idealne wrażenia podczas oglądania każdego obrazu na każdym urządzeniu, musisz rozważyć, kiedy RADYĆ SIĘ, a kiedy nie RADYĆ ze swoimi obrazami.

Wróć do mojej pierwotnej prośby – otwórz swoją najlepszą stronę do konwersji, aby zobaczyć, jak wygląda na wielu urządzeniach. Zrób to z innymi ważnymi stronami i obrazami w swojej witrynie. Prawdopodobnie już je oznaczyłeś w swoim oprogramowaniu analitycznym.

WSKAZÓWKA: Zawęź wybór stron do tych, które generują duży ruch z urządzeń mobilnych.

Aby określić, które obrazy należy pobrać z wielu źródeł, przetestuj wybrane strony na wielu urządzeniach. Chwyć stos urządzeń i projektanta, stratega treści lub osobę UX. Załaduj swoje treści tak, jak zrobiłby to Twój klient. Jeśli obraz wygląda na zgnieciony, dodaj go do listy obrazów, które mają być wieloźródłowe.

WSKAZÓWKA: Nie patrz tylko, aby zobaczyć, czy obraz się wyświetla. Przyjrzyj się uważnie, jak się wyświetla. Jeśli użytkownik musi szczypać i powiększać, aby wyświetlić cały obraz, COPE prawdopodobnie nie jest najlepszą metodą.

Podziel się wynikami ze wszystkimi zespołami zajmującymi się treścią, w tym strategią treści, projektowaniem, inżynierią treści i doświadczeniem użytkownika, którzy powinni wiedzieć, jak ładują się obrazy Twojej witryny.

Projekt dla wielu ekranów

Gdy obraz jest zagrożony na wysokim i niskim końcu, aby zmieścić się na ekranie urządzenia mobilnego, warto przesłać wiele obrazów i wskazać systemowi, w którym punkcie przerwania użyć każdego z nich.

Punkt przerwania to punkt, w którym system przestaje pobierać jeden obraz i pobiera wersję, która jest lepiej dopasowana do urządzenia wyświetlającego. Punkty przerwania są określane na podstawie szerokości urządzenia, ponieważ użytkownicy mogą przewijać w pionie w nieskończoność, ale nie mogą poszerzyć ekranu.

Ta ilustracja przedstawia trzy możliwe punkty przerwania: 320 pikseli w przypadku telefonu komórkowego, 720 pikseli w przypadku tabletu lub dużego telefonu oraz 1024 piksele w przypadku laptopa:

W tym przykładzie oryginalny obraz moich dwóch córek i naszego psa ma szerokość 800 pikseli. Świetnie wygląda na biurku renderowanym w pełnym rozmiarze (lewa strona obrazu). Na ekranie wielkości tabletu oryginalny obraz traci szczegóły, co zmniejsza jego wpływ.

Gdyby ten obraz był wykresem lub infografiką, mógłby stać się nieczytelny na mniejszym ekranie. Dlatego powinieneś włożyć dodatkowy wysiłek w pozyskiwanie wielu obrazów. Takie podejście nazywa się „responsywnym kierownictwem artystycznym”. Jest to sztuczka przeglądarki, która zapewnia nieco większą kontrolę nad sposobem wyświetlania obrazów użytkownikom.

Oto jak to działa z oryginalnym przykładem. Tym razem zrobiłem różne zdjęcia dla każdego rozmiaru – 800, 400 i 200 pikseli szerokości. Po opublikowaniu ich twarze są w przybliżeniu tego samego rozmiaru w każdym z nich.

W 800-pikselowej wersji poziomej jedna córka siedzi z naszym psem na schodach, a druga stoi wzdłuż balustrady, a w tle widać okolicę. W 400-pikselowej wersji pionowej obie córki siedzą na schodach z psem obok jednej z nich z widocznymi obiema barierkami. W 200-pikselowej wersji pionowej każda córka i pies mają swój własny krok, a widoczna jest tylko jedna barierka.

Takie podejście to nie COPE. To nie tylko część COPE-M. Stworzyłem dla siebie trzy razy więcej pracy. Dlatego powinieneś ograniczyć tę czasochłonną pracę tylko do niezbędnej konwersji treści.

Zobacz, jak kodowane są obrazy wieloźródłowe

Chociaż ten artykuł nie jest samouczkiem na temat pisania tego rodzaju kodu, może okazać się przydatne, aby zobaczyć, jak on wygląda:

Pomiędzy tagami „picture” określiłem trzy obrazy źródłowe, których nazwy są oparte na szerokości obrazu:

• jpg
• jpg
• jpg

Teraz każdy obraz zostanie uruchomiony, gdy osiągnie swój punkt przerwania:

• 499 pikseli (maks.) dla smartfonów
• 799 pikseli (maks.) dla tabletów
• 800 pikseli (minimum) dla komputerów stacjonarnych

Spraw, aby COPE-M działał dla Twojej marki

Większość systemów zarządzania zasobami cyfrowymi (DAM) może tworzyć wiele wydruków jednego obrazu w różnych rozmiarach i proporcjach. Jeśli nie możesz ponownie zrobić zdjęć, przytnij je, aby zapewnić najlepsze wrażenia na wszystkich rozmiarach ekranu. Może to wymagać dużo pracy, więc nie proś projektantów ani programistów o przeprojektowanie każdego obrazu w Twojej witrynie. Skoncentruj się na wpływie.

Jeśli SEO jest najwyższym priorytetem, skonsultuj się ze specjalistami SEO przed wdrożeniem podejścia opartego na wielu obrazach. Algorytm Google może nakładać kary na strony internetowe, które nie zapewniają dokładnie tego samego doświadczenia na komputerach i urządzeniach mobilnych. Nawet jeśli zapewniasz ludziom lepsze wrażenia, robot Google może jeszcze o tym nie wiedzieć. Oczywiście, jeśli więcej osób uzna Twoją stronę za godną ich czasu ze względu na lepsze wrażenia wizualne, Google to polubi.

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 nauczyłeś się testując swoje obrazy na wielu urządzeniach? Daj znać w komentarzach.

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