Above the fold

Co znamená Above the fold?

Above the fold označuje část webové stránky, kterou návštěvník vidí na obrazovce ihned po načtení, aniž by musel scrollovat dolů. Jde o tu nejcennější oblast celého webu. Proč? Protože je to první, co každý návštěvník uvidí. Máte přesně pár vteřin na to, abyste zaujali a přesvědčili člověka, že je na správném místě.

Statistiky jsou nekompromisní. Průměrný návštěvník rozhodne během 3-5 sekund, zda na webu zůstane nebo odejde. Rozhodnutí padá právě na základě toho, co vidí above the fold. Pokud tato oblast nesplňuje očekávání, nezaujme designem nebo neposkytne jasnou odpověď na otázku „Proč bych měl zůstat?", návštěvník klikne zpět. A už se nevrátí.

Dobře navržená oblast above the fold komunikuje value proposition (co nabízíte a proč je to relevantní), buduje důvěru vizuálním zpracováním a vede návštěvníka k akci pomocí výrazného call-to-action. Není to jen o estetice. Jde o strategii, která přímo ovlivňuje konverzní poměr vašeho webu. Každý prvek zde má své opodstatnění a měl by sloužit jednomu cíli – přimět návštěvníka jednat.

Historie pojmu – odkud above the fold pochází?

Pojem „above the fold" pochází z novinového průmyslu. Fyzické noviny byly tradičně složené napůl, a to, co bylo vytištěno v horní polovině titulní strany (tedy nad přehybem – „fold"), rozhodovalo o tom, zda si lidé noviny koupí. Stánky s novinami měly omezený prostor, takže vrchní polovina titulní strany byla jedinou viditelnou částí při prvním pohledu.

Redaktoři novin věděli, že nejzajímavější titulky, nejdůležitější zprávy a nejatraktivnější fotografie musí být právě above the fold. Pokud tato oblast nezaujala, noviny zůstaly na stánku. Tento princip převzal webdesign – s jedním zásadním rozdílem. U novin byl „fold" fyzicky daný. Na webu se „fold" mění podle velikosti obrazovky, rozlišení monitoru a typu zařízení.

V časech raného webu (90. léta) měla většina uživatelů monitory s rozlišením 800×600 pixelů. Dnes je situace mnohem komplexnější. Máme desktopy s 4K monitory, tablety v různých velikostech a mobily s různými poměry stran. Above the fold už není jedno konkrétní místo – je to koncept, který se přizpůsobuje kontextu. Proto je důležité testovat, jak váš web vypadá na různých zařízeních a optimalizovat každou verzi zvlášť.

Proč je above the fold důležité?

Lidská pozornost je dnes vzácnější než kdykoliv předtím. Návštěvníci webu jsou netrpěliví. Otevřou stránku, a pokud během pár vteřin nenajdou to, co hledají, nebo nejsou zaujati, odejdou. Výzkumy ukazují, že více než 50% času stráveného na webové stránce je věnováno oblasti above the fold. To znamená, že polovina celkové pozornosti směřuje na prvních několik set pixelů.

Above the fold přímo ovlivňuje bounce rate (míru okamžitého opuštění webu). Pokud návštěvník neuvidí ihned relevantní obsah nebo se necítí oslovený, zavře záložku. Vysoký bounce rate zase negativně ovlivňuje SEO, protože Google vnímá rychlé odchody jako signál, že stránka nesplňuje očekávání uživatelů. Je to začarovaný kruh – špatný above the fold = vysoký bounce rate = nižší pozice ve vyhledávání = méně návštěvníků.

Další klíčový aspekt je konverze. Studie ukazují, že umístění call-to-action tlačítka (CTA) above the fold může zvýšit konverze až o 80%. Proč? Protože minimalizujete friktion. Návštěvník vidí okamžitě, co má udělat, a nemusí hledat. Každé dodatečné kliknutí nebo scroll je další příležitost k odchodu. Čím jednodušší cestu k akci vytvoříte, tím vyšší budou vaše konverze.

Co by mělo být above the fold?

• Hlavní headline a value proposition

Návštěvník musí okamžitě pochopit, co nabízíte a proč je to pro něj relevantní. Headline by měl být krátký, srozumitelný a zaměřený na benefit pro zákazníka. Místo obecného „Vítejte na našem webu" raději použijte konkrétní value proposition jako „Získáte rychlý web, který vám přináší zákazníky". Podtitulek může poskytnout další kontext, ale hlavní sdělení musí být čitelné na první pohled. Vyhněte se prázdným frázím a marketingovému žargonu. Mluvte jazykem vašich zákazníků a řešte jejich konkrétní problémy.

• Výrazné CTA tlačítko (Call-to-Action)

Tlačítko by mělo být viditelné, barevně odlišené a s jasným textem, který říká, co se stane po kliknutí. Místo obecného „Odeslat" nebo „Klikněte zde" použijte specifický text jako „Získat cenovou nabídku" nebo „Začít zdarma". CTA tlačítko by mělo být největším a nejvýraznějším prvkem above the fold hned po hlavním nadpisu. Studie eye-trackingu ukazují, že oči návštěvníků automaticky směřují k tlačítkům v kontrastních barvách. Pokud má váš web modrou barvu, použijte pro CTA oranžovou nebo zelenou. Ujistěte se také, že tlačítko je dostatečně velké na to, aby se na něj dalo snadno kliknout i na mobilních zařízeních.

• Hero image nebo video

Vizuální prvek komunikuje význam rychleji než text. Hero image by mělo být relevantní k vašemu produktu nebo službě a navozovat správnou emocionální odezvu. Vyhněte se generickým stock fotográfiím s usmívajícími se lidmi – vypadají nepravdivě a snižují důvěryhodnost. Místo toho použijte autentické fotografie vašeho produktu, týmu nebo zákazníků v reálném prostředí. Video může být ještě účinnější, ale pozor na technické provedení – musí se rychle načíst a nesmí bránit zobrazení důležitého obsahu. Každý vizuální prvek by měl podporovat hlavní sdělení, ne odvádět pozornost.

• Navigace a logo

Návštěvník potřebuje vědět, kde je a jak se orientovat. Logo patří do levého horního rohu (nebo do středu u některých designů), navigační menu by mělo být jednoduché a intuitivní. Příliš mnoho položek v menu zmátá. Držte se 5-7 hlavních položek a používejte jasné názvy – místo „Řešení" raději „Naše služby", místo „O nás" raději „Náš tým". Na mobilech je navigace ještě kritičtější, protože zabírá cenný prostor. Proto se často používá hamburger menu (tři čárky), které navigaci skryje a uvolní prostor pro důležitější prvky. Zahrňte také kontaktní údaje nebo odkaz na kontaktní formulář – pokud někdo chce okamžitě jednat, usnadněte mu to.

Above the fold a SEO

Google v roce 2012 představil „Page Layout Algorithm", který penalizoval weby s přílišným množstvím reklam above the fold. Algoritmus hodnotí, kolik hodnotného obsahu je viditelné ihned po načtení stránky. Pokud návštěvník vidí pouze reklamy, pop-upy nebo prázdné místo, Google to vnímá jako špatnou uživatelskou zkušenost a stránka klesá v rankingu.

Rychlost načítání oblasti above the fold je také součástí Core Web Vitals, což jsou metriky, které Google používá k hodnocení výkonu webu. Largest Contentful Paint (LCP) měří, jak rychle se načte největší viditelný prvek above the fold. Google doporučuje, aby LCP byl pod 2,5 sekundy. Pokud se hlavní obsah načítá pomalu, zhoršuje to uživatelskou zkušenost i SEO pozice.

Další nepřímý SEO efekt je bounce rate a time on page. Pokud návštěvníci okamžitě opouštějí stránku kvůli špatně navržené oblasti above the fold, Google to zaznamenává. Vysoký bounce rate a nízký čas strávený na stránce jsou negativní signály, které mohou vést k poklesu v rankingu. Optimalizace above the fold tedy není jen o designu a konverzích – je to i SEO strategie.

Above the fold na mobilech vs desktop

Mobilní zařízení mají výrazně menší viditelnou oblast než desktopy. Průměrný mobil zobrazí above the fold oblast o velikosti přibližně 360×640 pixelů, zatímco desktop monitor může být 1920×1080 pixelů nebo větší. To znamená, že na mobilu máte zhruba třetinu až čtvrtinu prostoru než na desktopu. Každý pixel se počítá.

Na mobilech je klíčové dodržet mobile-first přístup. To znamená nejdříve navrhnout above the fold pro mobil a až poté rozšířit design pro desktop. Na mobilu by měl být headline kratší, CTA tlačítko větší (dostatečně velké pro palec) a hero image optimalizované pro menší rozlišení. Často se používá vertikální orientace a prvky jsou řazeny pod sebe, zatímco na desktopu můžete používat horizontální layout se dvěma nebo třemi sloupci.

Důležité je také testování. Co funguje above the fold na desktopu, nemusí fungovat na mobilu. Použijte nástroje jako Google Chrome DevTools k simulaci různých zařízení a testujte, jak váš web vypadá na nejběžnějších rozlišeních. Podle statistik více než 60% webového provozu pochází z mobilních zařízení, proto by měl být mobilní above the fold vaší prioritou.

Nejčastější chyby v oblasti above the fold

Přehlcení informacemi je nejčastější chyba. Snaha nacpat vše důležité above the fold vede k chaosu. Návštěvník neví, kam se dívat, a nakonec neudělá nic. Místo toho se zaměřte na jednu hlavní zprávu a jednu hlavní akci. Pokud chcete komunikovat více věcí, použijte strukturu stránky tak, aby uživatel přirozeně scrolloval a objevoval obsah postupně.

Nejasné nebo slabé CTA je další problém. Tlačítka s texty jako „Zjistit více" nebo „Klikněte zde" jsou příliš obecná a nevytvářejí dostatečnou motivaci k akci. Používejte konkrétní a akční výrazy: „Získat nabídku", „Začít zdarma", „Stáhnout průvodce". Barva tlačítka by měla kontrastovat s pozadím – pokud je tlačítko stejné barvy jako zbytek stránky, lidé ho přehlédnou.

Pomalé načítání zabíjí účinnost above the fold. Pokud se hlavní obsah načítá 5-10 sekund, většina návštěvníků odejde dříve, než ho vůbec uvidí. Optimalizujte obrázky, používejte lazy loading pro prvky below the fold a prioritizujte načítání kritického CSS a JavaScriptu. Nástroj jako Google Lighthouse vám ukáže, co zpomaluje vaši stránku.

Ignorování mobilní verze je fatální chyba v dnešní době. Pokud váš web vypadá skvěle na desktopu, ale na mobilu je nečitelný nebo rozbitý, ztrácíte většinu potenciálních zákazníků. Testujte above the fold na reálných mobilních zařízeních, ne jen v emulátoru. Každý telefon má trochu jiné rozlišení a poměr stran.

Související pojmy