Redaktorzy gazet odkryli to na długo przed powstaniem internetu. Historia warta przeczytania trafia nad fizyczną linię zgięcia gazety. Wszystko pod nim konkuruje z decyzją, by przewrócić stronę. Na stronie internetowej obowiązuje ta sama zasada, tyle że dotyczy pierwszego ekranu, który odwiedzający widzi, zanim przewinie.
Above the fold to fragment podstrony widoczny w oknie przeglądarki po pierwszym wczytaniu, zanim odwiedzający w ogóle zacznie przewijać. To jedyna część podstrony, którą widzi każdy odwiedzający. Wszystko poniżej musi zasłużyć na przewinięcie. Termin pochodzi z druku: gazeta złożona na pół na kiosku pokazuje tylko górną połowę pierwszej strony. Ta górna połowa musiała przyciągnąć uwagę. Obszar above the fold na stronie działa tak samo.
To, co jest above the fold, zależy od urządzenia, rozmiaru ekranu i przeglądarki każdego odwiedzającego. Duży monitor pokazuje powyżej zgięcia znacznie więcej niż telefon trzymany pionowo. Projektowanie z myślą o tym obszarze oznacza myślenie o wszystkich urządzeniach, a nie tylko o wersji, którą widzisz na własnym ekranie.
Dlaczego treść above the fold ma znaczenie?
Badania zachowań czytelników konsekwentnie pokazują, że odwiedzający spędzają więcej czasu z treściami blisko góry podstrony. Im niżej leży treść, tym mniej osób do niej dociera. To nie jest brak uwagi. To racjonalna reakcja na ograniczony czas. Odwiedzający szybko ocenia, czy podstrona jest warta czytania, i ta ocena zapada w pierwszej widocznej sekcji.
Above the fold odpowiadasz na pierwsze pytanie odwiedzającego: czy jestem we właściwym miejscu? Jeśli nagłówek, obraz i kilka pierwszych linijek tekstu jasno to pokazują, odwiedzający przewijają. Jeśli są zdezorientowani lub niepewni, większość nie daje reszcie podstrony szansy.
Co umieścić above the fold?
Obszar above the fold ma ograniczone miejsce i wysoką stawkę. Każdy element, który się tam pojawia, powinien zasłużyć na swoje miejsce, służąc odwiedzającemu lub celowi podstrony.
Wyraźny nagłówek, który mówi, o czym jest podstrona i co odwiedzający z niej wyniesie. Zdanie wspierające lub podtytuł, który dodaje kontekstu lub konkretu. Obraz, który wzmacnia przekaz, a nie tylko go ozdabia. Wezwanie do działania, które daje odwiedzającemu jasny następny krok, jeśli jest już przekonany.
Nawigacja należy do obszaru above the fold. Odwiedzający oczekują, że na górze podstrony znajdą drogę do reszty witryny, a menu schowane lub ukryte od razu tworzy tarcie. Artykuł o tym, czym jest nawigacja strony, opisuje, jak projektować menu, które dobrze działają na wszystkich urządzeniach.
Nie należy tam niczego, co zajmuje miejsce, a nie pomaga odwiedzającemu zrozumieć lub zdecydować. Duże ozdobne obrazy bez wartości informacyjnej, obracające się banery opóźniające wczytywanie czy bloki wstępnego tekstu, przez które trzeba przewinąć, zanim dojdzie się do sedna, marnują najcenniejsze miejsce na podstronie.
Czym różni się above the fold na telefonie?
Na telefonie obszar above the fold jest znacznie mniejszy niż na komputerze. Ekran telefonu w pionie pokazuje mniej więcej 600 do 800 pikseli wysokości. Monitor komputera może pokazać od 900 do 1200 pikseli. Ten sam projekt może na komputerze odsłonić dwie lub trzy sekcje powyżej zgięcia, a na telefonie tylko nagłówek i obraz.
W praktyce oznacza to, że odwiedzający na telefonie podejmują decyzję, czy zostać, czy przewinąć, mając znacznie mniej informacji niż odwiedzający na komputerze. To, co najważniejsze, musi zmieścić się w mniejszym oknie. Częsty problem to sekcje hero z dużym obrazem w tle i minimum tekstu: na komputerze wyglądają efektownie, a na telefonie wypełniają cały ekran przy bardzo małej ilości treści, zanim trzeba przewinąć.
Testowanie above the fold na prawdziwym telefonie ma znaczenie, bo podglądy w przeglądarce i symulacje na komputerze nie oddają dokładnie tego, co widzą odwiedzający na telefonach. Pełną listę kontrolną dla telefonów znajdziesz w artykule o tym, jak dostosować stronę do telefonów, który opisuje, co sprawdzić przed uruchomieniem.
Czy above the fold wpływa na szybkość strony?
Bezpośrednio. Obszar above the fold to pierwsze, co renderuje przeglądarka, więc każdy zasób, który opóźnia jego wyświetlenie, pogarsza odczuwalny czas wczytywania, nawet jeśli reszta podstrony wczytuje się szybko.
Duże obrazy hero, czcionki webowe, które muszą się wczytać, zanim pojawi się tekst, i skrypty uruchamiane przed renderowaniem podstrony spychają treść above the fold w dół. Z perspektywy odwiedzającego podstrona ładuje się wolno, nawet jeśli techniczny czas wczytywania jest rozsądny. Pusty lub częściowo wczytany obszar above the fold, gdy reszta podstrony nadrabia, to jedna z najczęstszych przyczyn wysokiego współczynnika odrzuceń na skądinąd dobrze zaprojektowanych podstronach.
Najskuteczniejsze rozwiązania to optymalizacja obrazu hero, nadanie priorytetu wczytywaniu zasobów above the fold i odroczenie nieistotnych skryptów. Artykuł o tym, czym jest szybkość strony, opisuje techniczną stronę wydajności wczytywania i to, co wpływa na nią najbardziej.
Czy above the fold wpływa na SEO?
Treść above the fold to sygnał, którego wyszukiwarki używają do oceny jakości podstrony. Podstrony, które above the fold ładują ciężkie reklamy lub treści niskiej jakości, spychając główną treść w dół, są karane. Była to konkretna aktualizacja algorytmu wymierzona w strony chowające przydatne treści pod dużymi blokami reklam.
Poza tą konkretną karą above the fold wpływa na SEO pośrednio przez sygnały zachowania. Odwiedzający, którzy wchodzą na podstronę i od razu wychodzą, bo obszar above the fold nie dał im powodu, by zostać, generują wysoki współczynnik odrzuceń i krótki czas pobytu. Z czasem te sygnały mówią wyszukiwarkom, że podstrona nie odpowiadała na intencję stojącą za wyszukiwaniem.
Dobry projekt above the fold wspiera też lepszą strukturę nagłówków. Wyraźny nagłówek widoczny above the fold, poparty logiczną strukturą podstrony poniżej, pomaga zarówno odwiedzającym, jak i wyszukiwarkom szybko zrozumieć podstronę. Artykuł o tym, czym jest projektowanie stron, opisuje, jak decyzje układowe, takie jak hierarchia nagłówków, kształtują doświadczenie odwiedzających. Pełny obraz rankingów w wyszukiwarce znajdziesz w artykule o tym, czym jest SEO, który opisuje czynniki techniczne i treściowe, które liczą się najbardziej.
Jak WEMASY podchodzi do projektowania above the fold
Szablony kreatora stron WEMASY są budowane z myślą o obszarze above the fold. Sekcje hero są zoptymalizowane pod szybkie wczytywanie, a edytor wizualny pozwala podejrzeć, jak każda sekcja wygląda na różnych rozmiarach ekranu przed publikacją. Podgląd mobilny pokazuje dokładnie to, co odwiedzający widzą na telefonie, zanim przewiną, więc możesz dopasować treść i układ bez zgadywania.
Zobacz, co jest w zestawie, w kreatorze stron WEMASY, albo sprawdź pakiety na stronie z cennikiem.
Najczęściej zadawane pytania
Czy above the fold jest nadal ważny przy dzisiejszym przewijaniu?
Tak. Odwiedzający przewijają chętniej niż dekadę temu, ale obszar above the fold nadal ma nieproporcjonalnie duże znaczenie. Odwiedzający spędzają więcej czasu z treściami blisko góry podstrony, niezależnie od tego, ile przewijają. To właśnie tam zapada decyzja, czy zostać, czy wyjść. Zadbanie, by był jasny, szybki i przekonujący, jest dziś tak samo ważne jak zawsze. W kreatorze stron WEMASY możesz to ustawić bezpośrednio na swojej stronie.
Jak wysoka powinna być sekcja hero?
Sekcja hero powinna odsłaniać wystarczająco dużo treści above the fold, by przekazać cel podstrony, bez zajmowania całego widocznego obszaru. Na komputerze hero wypełniające całą wysokość ekranu samym nagłówkiem i obrazem może wyglądać efektownie, ale opóźnia dostęp do właściwej treści. Lepiej, gdy hero jest na tyle wysokie, by zrobić dobre pierwsze wrażenie, a jednocześnie pokazuje fragment treści poniżej, sygnalizując odwiedzającym, że po przewinięciu jest więcej do zobaczenia.
Czym jest wezwanie do działania above the fold?
Wezwanie do działania above the fold to przycisk lub link umieszczony w pierwszej widocznej sekcji podstrony, który daje już przekonanym odwiedzającym możliwość działania od razu, bez przewijania. Typowe przykłady to „Zacznij”, „Umów rozmowę” czy „Zobacz cennik”. Nie każdy odwiedzający above the fold jest gotowy działać, dlatego istnieje reszta podstrony, ale wyraźne działanie dostępne od razu zmniejsza tarcie u tych, którzy są gotowi.
Czy każda podstrona potrzebuje mocnej sekcji above the fold?
Tak, ale to, co znaczy „mocna”, zależy od typu podstrony. Above the fold na stronie głównej musi pokazać, kim jesteś i co oferujesz. Above the fold w artykule na blogu musi potwierdzić czytelnikowi, że jest we właściwym artykule, i dać powód, by czytać dalej. Above the fold na stronie produktu musi wyraźnie pokazać produkt i ułatwić dostęp do ceny. Zasada jest ta sama dla każdego typu podstrony: pierwszy ekran powinien odpowiadać na najbardziej bezpośrednie pytanie odwiedzającego.
Jak sprawdzić, co pojawia się above the fold na różnych urządzeniach?
Najdokładniej jest sprawdzić własne podstrony na prawdziwych urządzeniach. Użyj monitora komputera, tabletu i telefonu trzymanego pionowo i poziomo. Narzędzia deweloperskie przeglądarki mają tryb symulacji urządzeń, który daje rozsądne przybliżenie, ale nie uwzględnia pasków narzędzi, pasków adresu i obszarów powiadomień, które na prawdziwych telefonach zmniejszają widoczną wysokość ekranu. To, co wygląda dobrze w podglądzie przeglądarki, często ma wyraźnie inną granicę zgięcia na prawdziwym urządzeniu.