Web, UX & Technologie

Above the fold

Část webu viditelná bez nutnosti rolování

(česky: nad ohybem)

Co je above the fold

Above the fold je část stránky, kterou návštěvník uvidí hned po načtení, bez rolování. Pojem si web vypůjčil od novin: složený výtisk na stánku ukazoval jen horní polovinu titulní strany, takže do ní redakce cpaly to nejsilnější.

Na webu ta analogie kulhá. Novinový přehyb je fyzický a pro všechny stejný, kdežto na obrazovkách hranice závisí na úhlopříčce, rozlišení, orientaci zařízení, výšce prohlížečových lišt a klidně i na cookie liště, která ukousne spodní pruh. Místo jedné linky tedy máte rozsah. Orientačně se dá odvodit z analytiky, kde si vytáhnete nejčastější rozlišení obrazovky svých návštěvníků, a doplnit heatmapou hloubky rolování.

Technická poznámka, na které se dá spálit: obrázek nad foldem se nemá odkládat lazy loadingem. Odložené načítání šetří přenesená data u obsahu níž na stránce, jenže horní obrázek bývá právě tím prvkem, podle kterého se počítá LCP. Když ho prohlížeč začne stahovat až po vykreslení zbytku, metrika se zhorší a projeví se to v hodnocení Core Web Vitals.

Mýtus „všechno důležité nahoru“

Z existence foldu se kdysi odvodilo pravidlo, že nad ním musí být kompletní nabídka, telefon, formulář i argumentace. Výsledkem bývá přeplněná obrazovka, ve které zanikne i to hlavní. Lidé rolují a rolovali i v době, kdy se tvrdilo, že ne. Co nad foldem opravdu potřebujete, je odpověď na otázku, jestli je návštěvník správně, a jasný další krok. Konkrétní skladbu úvodního bloku rozebírám u pojmu hero section.

Praktičtější je počítat s tím, že první obrazovka má jediný úkol: udržet návštěvníka o pár vteřin déle, než mu dojede palec ke scrollu. Zbytek argumentace klidně následuje níž, kde na ni je místo. Jestli to vychází, poznáte z hloubky rolování. Pokud většina lidí nedojede ani ke druhé sekci, problém nebude v tom, kde končí fold, ale v tom, co jste umístili nad něj.

Časté otázky

Kde přesně končí fold?

Nikde napevno. Hranice se mění podle úhlopříčky displeje, rozlišení, orientace zařízení a výšky prvků prohlížeče, takže jde o rozsah, ne o jednu linku. Orientačně se dá vzít nejčastější rozlišení návštěvníků z analytiky a odečíst od něj výšku lišt.

Má se obrázek nad foldem lazy-loadovat?

Nemá. Odložené načítání se hodí pro obsah níž na stránce. U horního obrázku tím zdržíte vykreslení prvku, podle kterého se počítá LCP, a metrika se zhorší, i když objem přenesených dat klesne.

Musí být nad foldem hlavní tlačítko?

Neškodí to, povinné to ale není. Důležitější je, aby návštěvník poznal, kam přišel a co tu může udělat. Když se nad fold vejde úplně všechno, ztratí se v tom i hlavní sdělení.