Baner na stronę internetową: jak połączyć obraz i czytelny komunikat?

Co nazywasz banerem na stronie?

Baner może być dużą sekcją otwierającą stronę, niewielką informacją o akcji albo obrazem prowadzącym do kategorii. Najpierw ustal jego funkcję. Sekcja na początku strony powinna wyjaśniać, gdzie użytkownik trafił i co może zrobić. Pasek promocyjny ma przekazać jedną krótką wiadomość. Grafika w środku artykułu może kierować do powiązanego tematu. Jeden projekt nie musi działać w każdej z tych ról.

Zapisz, do kogo mówisz i co ma zostać zapamiętane po kilku sekundach. Nie zaczynaj od przypadkowego zdjęcia, do którego później dopasujesz hasło. Wybierz komunikat, potem obraz wspierający jego sens. Gdy baner pokazuje coś innego niż nagłówek, użytkownik musi sam połączyć te rzeczy. Przycisk powinien prowadzić do strony rozwijającej obietnicę, a nie do miejsca, w którym odbiorca musi zaczynać poszukiwania od nowa.

Jak ułożyć nagłówek, obraz i działanie?

Nagłówek nazwij konkretnie. „Nowa kolekcja opakowań” mówi więcej niż „Odkryj przyszłość”. Pod nim możesz doprecyzować dla kogo jest oferta lub co zmieniło się w asortymencie. Przycisk powinien opisywać następny krok, na przykład „Zobacz kolekcję” albo „Sprawdź terminy”. Nie umieszczaj na nim ogólnego „Kliknij tutaj”, gdy możesz wskazać cel.

Tekst banera zapisz jako tekst strony, nie wtapiaj go w zdjęcie. W3C zaleca unikanie obrazów tekstu poza sytuacjami, w których sam wygląd liter jest częścią treści. Prawdziwy tekst może zmieniać rozmiar, układać się na różnych ekranach i pozostać widoczny, gdy obraz nie zostanie pobrany. Jeśli zdjęcie jest dekoracyjne, niech nie dubluje nagłówka w opisie alternatywnym. Jeśli pokazuje ważny produkt lub informację, opisz jego rolę.

Jak przygotować baner na telefon?

Wąski ekran zwykle wymaga innego kadru i innego układu niż monitor. Zdjęcie poziome może stracić produkt po przycięciu, a tekst nałożony na jasny fragment fotografii może stać się nieczytelny. Sprawdź kilka szerokości, nie tylko jeden model telefonu. Zostaw miejsce na nagłówek, nie zasłaniaj twarzy lub produktu przyciskiem i nie polegaj na dokładnym ustawieniu obrazu w jednym rozmiarze.

Nie szukaj jednego „wymiaru banera na WWW” dla wszystkich stron. Liczy się proporcja miejsca w konkretnym układzie oraz sposób podawania obrazu przez stronę. web.dev wyjaśnia, że obrazy responsywne pozwalają dostarczyć urządzeniu odpowiedni wariant zamiast pełnego pliku desktopowego. W kalkulatorze proporcji obrazu możesz przetestować planowane kadry, ale ostateczną decyzję podejmij w rzeczywistym szablonie strony.

Jak zachować szybkość ładowania?

Duży obraz na początku strony może mieć wpływ na czas pojawienia się najważniejszej treści. web.dev opisuje, że obraz hero często jest elementem mierzonego Largest Contentful Paint. Dlatego eksportuj kilka odpowiednich rozmiarów i sprawdź jakość przy rozsądnej wadze pliku. Nie włączaj pobierania wielkiego obrazu tylko po to, by wyświetlić go w małym pasku. Pomiar na prawdziwej stronie jest ważniejszy niż sama liczba kilobajtów pliku.

Projektant może przygotować warianty i wskazać ważny kadr, ale sposób ładowania zależy też od wdrożenia. Przy obrazie widocznym od razu trzeba sprawdzić, czy nie jest odkładany na później. web.dev zaleca, by kluczowy obraz był możliwy do odkrycia wcześnie przez przeglądarkę; techniczne ustawienia warto potwierdzić z osobą wdrażającą stronę.

Co sprawdzić po wdrożeniu banera?

Otwórz stronę na telefonie, komputerze i przy wolniejszym połączeniu. Sprawdź, czy nagłówek nie znika pod obrazem, przycisk daje się nacisnąć, a ważny fragment zdjęcia nie jest ucięty. Przejdź linkiem do strony docelowej i oceń, czy kontynuuje ten sam temat. Sprawdź tekst alternatywny obrazu zgodnie z jego funkcją. Przy obrazie będącym jedynym linkiem W3C zaleca opisanie celu działania, nie samego wyglądu grafiki.

Baner na własnej stronie różni się od grafiki do reklamy Display: jest częścią układu strony i może korzystać z jej prawdziwego tekstu, nawigacji oraz przycisków. Jeśli potrzebujesz przygotować obrazy i warianty kreacji, zobacz grafikę reklamową. Do zapytania dołącz zrzut obecnej strony, wymiary obszaru w szablonie, komunikat i potrzebne kadry.