Above the fold

Above the fold je časť webovej stránky, ktorá je viditeľná v okne prehliadača v momente, keď na ňu návštevník vstúpi — predtým, než posúva, klikne alebo akokoľvek interaguje. Všetko za touto počiatočnou hranicou viewportu je below the fold (pod záhybom).

Tento pojem označuje prvú obrazovku obsahu: nadpis, hero obrázok, navigáciu a akúkoľvek výzvu na akciu, ktorá sa načíta bez posúvania. Ide o zónu s najvyššou viditeľnosťou na každej stránke.

Čo znamená “above the fold”?

Vo web dizajne above the fold (často skracované ako ATF) znamená viditeľnú oblasť webovej stránky pred akýmkoľvek posúvaním. „Záhyb“ (fold) je pomyselná čiara na spodku okna prehliadača — hranica medzi tým, čo návštevník vidí okamžite, a tým, čo si vyžaduje akciu na odhalenie.

Tento pojem neoznačuje pevnú pixelovú výšku. Na 27-palcovom desktopovom monitore môže byť záhyb približne 900 – 1 000 pixlov od vrchu. Na telefóne držanom na výšku to môže byť len 500 – 600 pixlov. Záhyb sa mení s každým zariadením, veľkosťou obrazovky, panelmi nástrojov prehliadača a nastavením priblíženia.

Oblasť nad záhybom by mala takmer okamžite odpovedať na tri otázky:

1. O čom je táto stránka? — jasný, výstižný nadpis
2. Prečo by som mal zostať? — hodnotová ponuka alebo vyjadrenie prínosu
3. Čo mám urobiť ďalej? — viditeľná výzva na akciu alebo navigačný signál

Spustite svoj affiliate program ešte dnes

Nastavte pokročilé sledovanie za pár minút. Kreditná karta nie je potrebná.

Požiadať o demo Začať 30-dňovú bezplatnú skúšku

Odkiaľ pochádza “above the fold”?

Tento výraz pochádza z tlače novín. Fyzické noviny boli v stánkoch zložené na polovicu. Okoloidúcim bola viditeľná len horná polovica titulnej strany. Redaktori umiestňovali najdôležitejšie titulky, výrazné fotografie a hlavné príbehy do tohto priestoru, aby upútali pozornosť a podporili nákup.

Rovnaká logika sa preniesla aj do raného web dizajnu v 90. rokoch. Dizajnéri prevzali koncept „záhybu“ na opis toho, čo používatelia vidia pred posúvaním — digitálny ekvivalent novinového stánku.

Na rozdiel od novín však webová stránka nemá fyzický prehyb. Záhyb je virtuálny, definovaný výlučne viewportom návštevníka.

Prečo je above the fold dôležité?

Obsah nad záhybom rozhoduje o tom, či návštevník zostane alebo odíde.

Prvé dojmy a miera odchodov

Návštevník si vytvorí dojem o stránke približne do 50 milisekúnd. Ak oblasť nad záhybom pôsobí neprehľadne, mätúco alebo irelevantne, miera odchodov (bounce rate) stúpa. Stránky, ktoré jasne komunikujú svoj účel a hodnotu v počiatočnom viewporte, vykazujú merateľne nižšiu mieru opustenia.

Vplyv na konverzie

Výzvy na akciu, registračné formuláre a kľúčové ponuky umiestnené nad záhybom dlhodobo prekonávajú tie, ktoré sú pochované nižšie na stránke.

SEO dôsledky

Signály page-experience a Core Web Vitals od Googlu odmeňujú stránky, kde sa hlavný obsah načíta rýchlo a je okamžite dostupný. Hoci samotný záhyb nie je priamym rankingovým faktorom, stránky, ktoré tlačia podstatný obsah pod rušivé medzistránky alebo veľké hero obrázky, riskujú zníženie pozícií. Obsah, ktorý je ťažšie dosiahnuteľný, je obsah, ktorý sa umiestňuje menej konkurencieschopne.

Prihláste sa na odber noviniek

Buďte prvý, kto sa dozvie o nových funkciách a aktualizáciách produktu.

E-mailová adresa

Prihlásiť sa

Kde je záhyb na webovej stránke?

Neexistuje jediná línia záhybu. Záhyb sa mení v závislosti od:

1. Veľkosti a rozlíšenia obrazovky — 1920×1080 desktopový monitor zobrazí oveľa viac ako 375×667 telefón
2. Prvkov prehliadača — panely nástrojov, lišty záložiek a riadky kariet zmenšujú dostupný vertikálny priestor
3. Orientácie zariadenia — na šírku vs. na výšku pri tabletoch a telefónoch prináša rôzne pozície záhybu

Najbežnejší mobilný viewport je približne 390×660 pixlov. To znamená, že mobilní návštevníci vidia zhruba polovicu vertikálneho obsahu v porovnaní s desktopovými návštevníkmi — vďaka čomu je mobilný dizajn nad záhybom obmedzenejší a zároveň kritickejší.

Ako sa meria above the fold?

Web dizajnéri a marketéri používajú niekoľko metód na meranie toho, kde záhyb padá:

• Heatmap nástroje (Hotjar, Crazy Egg, Microsoft Clarity) — zobrazujú agregovaný dosah posúvania ako farebné gradienty
• BrowserStack a nástroje na responzívne testovanie — simulujú viewporty naprieč profilmi zariadení
• Manuálne testovanie — zmenšite prehliadač na bežné breakpointy a všimnite si, kde sa obsah odreže

Pravidlo 600 pixlov z začiatku 21. storočia je zastarané. Dizajnéri dnes pristupujú k záhybu ako k plynulému konceptu a testujú ho na najmenej piatich šírkach viewportu: 390px (malý telefón), 428px (veľký telefón), 768px (tablet na výšku), 1024px (tablet na šírku / malý notebook) a 1440px (desktop).

Je above the fold stále relevantné?

Áno — ale nie tak, ako sa chápalo pred desiatimi rokmi. Myšlienka, že všetok kritický obsah musí byť striktne nad záhybom, je zastaraná. Používatelia posúvajú a posúvajú často. Informačné kanály sociálnych sietí, nekonečne sa posúvajúce spravodajské weby a platformy s krátkymi videami naučili ľudí posúvať a rolovat ako druhú prirodzenosť.

Obsah nad záhybom však stále rozhoduje o tom, či sa návštevník vôbec rozhodne posúvať.

Zastarané rady:

• Napchávať všetky CTA, nadpisy a obrázky nad pevnú 600px hranicu
• Navrhovať len pre desktop a ignorovať mobilné viewporty
• Predpokladať, že používatelia nikdy neposúvajú

Súčasné osvedčené postupy:

• Umiestnite svoju hlavnú hodnotovú ponuku a jednu primárnu CTA nad záhyb
• Použite vizuálne signály — čiastočne viditeľný obsah na hranici, smerové šípky, animácie spúšťané posúvaním — aby ste signalizovali, že pod záhybom je viac obsahu
• Navrhujte najskôr pre najmenší bežný viewport, potom vylepšujte pre väčšie obrazovky

Čo patrí nad záhyb?

Presná skladba závisí od typu stránky. Domovská stránka, vstupná stránka a blogový článok slúžia na rôzne ciele.

Pre domovské a vstupné stránky

1. Jasný, na prínos zameraný nadpis — povedzte návštevníkom, čo robíte a prečo je to dôležité
2. Podporný podnadpis — jedna veta, ktorá dodáva kontext alebo sekundárny prínos
3. Primárne tlačidlo výzvy na akciu — výrazne umiestnené, vysoko kontrastné, akčne orientovaný text
4. Hero obrázok alebo krátke video — relevantný vizuál, ktorý posilňuje správu bez dominovania priestoru
5. Navigácia — čistá, minimálna a intuitívna

Pre blogové články a obsahové stránky

1. Názov článku — výstižný a bohatý na kľúčové slová
2. Hlavný obrázok — škálovaný tak, aby netlačil text pod záhyb
3. Úvodný odsek — uvádza tému a to, čo čitateľ získa
4. Obsah — pri dlhších príspevkoch pomáha navigačné menu čitateľom orientovať sa

Pre e-commerce stránky produktov

1. Názov produktu a kľúčový obrázok
2. Cena — viditeľná bez posúvania
3. Tlačidlo pridať do košíka
4. Hodnotenie hviezdičkami a počet recenzií — sociálny dôkaz na prvý pohľad
5. Kľúčový rozlišovací prvok — doprava zdarma, záruka alebo unikátna vlastnosť

Ako sa above the fold vzťahuje na affiliate marketing?

Affiliate marketéri — či už inzerenti, vydavatelia alebo programoví manažéri — sa spoliehajú na umiestnenie nad záhybom, aby maximalizovali viditeľnosť, kliknutia a konverzie.

Pre inzerentov (značky prevádzkujúce affiliate programy)

Vaše affiliate vstupné stránky musia komunikovať hodnotu okamžite. Ak pristane odporúčaný návštevník na stránke a nadpis, ponuka alebo CTA je pochovaná pod záhybom, kliknutie, za ktoré ste zaplatili, je premrhané.

• Testujte nadpisy vstupných stránok nad záhybom so svojimi najlepšie výkonnými affiliate partnermi
• Udržujte formulár alebo tlačidlo nákupu v počiatočnom viewporte na mobile

Pre vydavateľov (affiliates propagujúci ponuky)

Affiliate odkazy a bannery umiestnené nad záhybom generujú výrazne viac impresií a kliknutí ako tie v bočných paneloch alebo pätičkách. Avšak pokyny Googlu pre umiestňovanie reklám penalizujú stránky, ktoré tlačia obsah pod prebytok reklám nad záhybom.

• Integrujte affiliate CTA prirodzene — kontextové textové odkazy v prvých dvoch odsekoch často prekonávajú bannerové reklamy
• Vyhýbajte sa vrstveniu viacerých bannerov nad záhybom na obsahových stránkach
• Jasne zverejnite affiliate vzťah v blízkosti odkazu, nie pochovaný v pätičke

Pre affiliate programových manažérov

Keď posudzujete affiliate žiadosti a monitorujete výkon partnerov, vyhodnoťte, kde vaši partneri umiestňujú vaše odkazy. Partneri, ktorí umiestňujú vaše ponuky nad záhybom na stránkach s vysokou návštevnosťou, majú tendenciu generovať najviac konverzií. Použite tieto údaje na:

• Identifikáciu najlepšie výkonných umiestnení a zdieľanie týchto vzorov s menej výkonnými affiliate partnermi
• Poskytovanie kreatívnych materiálov (bannery, textové odkazy) vo veľkostiach pre bežné rozmery nad záhybom
• Monitorovanie dodržiavania pravidiel — uistite sa, že partneri nepoužívajú klamlivé umiestnenie, ktoré porušuje vaše podmienky

Mali by byť CTA nad alebo pod záhybom?

Stručná odpoveď: umiestnite svoju primárnu CTA nad záhyb a zahrňte podporné CTA pod záhyb.

CTA nad záhybom zachytáva návštevníkov, ktorí sa rozhodujú rýchlo. Ide o používateľov s vysokým zámerom — prišli s vedomím, čo chcú, a potrebujú len správny podnet na akciu.

CTA pod záhybom slúži návštevníkom, ktorí potrebujú viac informácií. Po prečítaní výhod, referencií alebo podrobností o produkte konvertujú s väčšou istotou. Tieto konverzie majú často vyššiu priemernú hodnotu objednávky a nižšiu mieru vrátenia.

Ani jedno umiestnenie nie je univerzálne lepšie. Najefektívnejší vzor, overený tisícami A/B testov, je:

• Jedna primárna CTA nad záhybom — akcia, na ktorú je väčšina návštevníkov pripravená okamžite
• Sekundárne CTA rozmiestnené pod záhybom — umiestnené po každej hlavnej sekcii, ktorá prináša presvedčivý argument
• Pevná CTA na mobile — trvalé tlačidlo ukotvené v spodnej časti obrazovky počas posúvania používateľa

Testujte obe umiestnenia. Sledujte nielen kliknutia, ale aj dokončené konverzie. CTA, ktorá generuje veľa kliknutí nad záhybom, ale málo dokončení, môže priťahovať nesprávne publikum. CTA pod záhybom s menším počtom kliknutí, ale vyššou mierou dokončenia, môže byť lepšie kvalifikovaná.