Header

Co je to header (záhlaví webu)?

Header (záhlaví) je horní část webové stránky, která se obvykle zobrazuje na všech podstránkách. Najdete v něm logo firmy, hlavní navigaci, kontaktní údaje nebo vyhledávání. Header je první věc, kterou návštěvník vidí, když otevře váš web – a proto má zásadní vliv na první dojem a orientaci uživatele na stránce.

Důležitost headeru spočívá v jeho stálé přítomnosti. Zatímco obsah jednotlivých stránek se mění, header zůstává konzistentní. Návštěvník vždycky ví, kde najde navigaci nebo jak se vrátit na úvodní stránku – stačí kliknout na logo. Tato konzistence buduje důvěru a zlepšuje celkovou uživatelskou zkušenost (UX).

Co by měl header obsahovat

Dobrý header má jasně definované prvky, které pomáhají návštěvníkům orientovat se na webu:

• Logo firmy

Umístěné obvykle vlevo nahoře (někdy i uprostřed). Logo slouží jako odkaz na úvodní stránku. Tuto konvenci uživatelé automaticky očekávají – kliknutí na logo = návrat domů.

• Hlavní navigace

Seznam odkazů na klíčové sekce webu (O nás, Služby, Blog, Kontakt). Na desktopu vodorovný řádek, na mobilu často skrytá za hamburger menu.

• Call-to-action tlačítko

Výrazné tlačítko s hlavní akcí, kterou chcete, aby návštěvník provedl. Například "Nezávazná poptávka", "Zavolat", "Koupit nyní". Toto tlačítko by mělo vyčnívat barvou a pozicí.

• Kontaktní údaje

Telefon nebo email, často s ikonkou. Zejména u firemních webů nebo e-shopů. Zákazníci oceňují, když vidí kontakt hned v záhlaví.

• Vyhledávání (volitelně)

Ikona lupy, která otevře vyhledávací pole. Užitečné pro e-shopy, portály nebo rozsáhlé weby s hodně obsahem.

• Nákupní košík nebo uživatelský účet

U e-shopů ikona košíku s počtem položek. U webů s přihlášením ikona profilu. Tyto prvky umožňují rychlý přístup k důležitým funkcím.

Typy headerů podle designu

• Statický header

Nejjednodušší varianta. Header zůstává na své pozici nahoře a při scrollování mizí z obrazovky. Výhoda: nezabírá prostor, když uživatel scrolluje dolů. Nevýhoda: pro návrat do menu musí uživatel scrollovat nahoru.

• Sticky header (přilepený)

Header se "přilepí" k hornímu okraji obrazovky a zůstává viditelný i při scrollování. Návštěvník má navigaci stále na dosah. Nejčastěji používané řešení na moderních webech. Nevýhoda: zabírá prostor na obrazovce, zejména na mobilech.

• Smart sticky header

Inteligentní varianta – header se skryje při scrollování dolů a znovu se objeví, když návštěvník scrolluje nahoru. Poskytuje prostor pro obsah, ale zároveň snadný přístup k navigaci. Moderní a uživatelsky přívětivé.

• Transparent header (průhledný)

Header je průhledný a překrývá se s pozadím nebo obrázkem v hero sekci. Působí elegantně a moderně. Vhodné pro portfolia, kreativní weby nebo landing pages s výrazným úvodním obrázkem.

• Mega menu header

Při najetí myší na položku navigace se rozbalí velké menu s podkategoriemi, obrázky a dalšími odkazy. Používají ho velké e-shopy nebo portály s rozsáhlou strukturou. Umožňuje zobrazit mnoho odkazů bez přehlcení hlavního headeru.

Praktické tipy pro design headeru

• Nechte header jednoduchý a přehledný

Méně je více. Příliš mnoho prvků v headeru působí chaoticky. Vyberte si 5-7 nejdůležitějších položek navigace. Zbytek můžete dát do patičky nebo na samostatné stránky.

• Respektujte standardy a očekávání uživatelů

Logo vlevo (nebo uprostřed) a navigace vpravo je nejčastější uspořádání. Uživatelé to znají a automaticky to očekávají. Experimentální rozmístění může zmást.

• Zajistěte dostatečný kontrast

Text v headeru musí být dobře čitelný. Tmavé písmo na světlém pozadí (nebo naopak) je jistota. U průhledných headerů buďte obzvlášť opatrní – text může splynout s barevným pozadím.

• Optimalizujte výšku headeru

Příliš vysoký header zabírá cenný prostor na obrazovce. Ideální výška je 60-80 pixelů na desktopu a 50-60 pixelů na mobilu. Na mobilech je každý pixel cenný.

• Dejte prioritu call-to-action

Pokud máte v headeru tlačítko s výzvou k akci, nechte ho vyniknout. Výrazná barva, která kontrastuje se zbytkem headeru. Toto tlačítko má vést k vaší hlavní konverzi.

Header a mobilní zařízení

Na mobilu je design headeru jiný příběh. Prostor je omezený a každý pixel se počítá. Nemůžete si dovolit rozsáhlou navigaci, která zabere polovinu obrazovky.

Proto většina moderních webů používá zjednodušený mobilní header: logo vlevo nebo uprostřed, hamburger menu vpravo, případně výrazné CTA tlačítko. Zbytek navigace je schovaný v rozbalovacím menu.

Klíčová je responzivita. Header se musí automaticky přizpůsobit šířce obrazovky. Na širokém monitoru plnohodnotná navigace, na tabletu zmenšené prvky, na telefonu minimalistická verze s hamburger menu.

Další důležitý aspekt: dotykové ovládání. Tlačítka a odkazy musí být dostatečně velké na kliknutí prstem. Minimum je 44×44 pixelů podle Apple Human Interface Guidelines. Menší cíle jsou těžko trefitelné a frustrují uživatele.

Header a SEO

Ačkoliv header primárně slouží uživatelům, má vliv i na SEO. Vyhledávače analyzují strukturu stránky a header je důležitá část.

Používejte správné HTML značky. Header by měl být obalený v <header> tagu. Logo jako <img> s alt textem popisujícím firmu. Navigace v <nav> tagu s <ul> seznamem odkazů. Tato sémantická struktura pomáhá vyhledávačům pochopit význam prvků.

Odkazy v navigaci jsou důležité pro SEO. Měly by obsahovat klíčová slova relevantní pro cílové stránky. Místo obecného "Služby" použijte konkrétnější "Tvorba webů" nebo "Webdesign", pokud to odpovídá obsahu.

Rychlost načítání headeru ovlivňuje celkovou rychlost webu. Optimalizujte logo (použijte SVG nebo optimalizovaný PNG), minimalizujte JavaScript pro rozbalovací menu, použijte minifikované CSS. Rychlý web = lepší pozice ve vyhledávání.

Časté chyby při tvorbě headeru

• Přehlcený header

Příliš mnoho odkazů, tlačítek, ikon. Výsledek: chaos a ztráta orientace. Redukujte na minimum a prioritizujte. Méně je více.

• Logo není klikatelné

Uživatelé očekávají, že kliknutím na logo se vrátí na úvodní stránku. Pokud to nefunguje, jsou frustrovaní. Vždy zabalte logo do odkazu na homepage.

• Špatná čitelnost

Světle šedý text na bílém pozadí nebo průhledný header, kde se text ztrácí na pozadí. Vždy zajistěte dostatečný kontrast mezi textem a pozadím.

• Příliš vysoký header na mobilu

Zabírá polovinu obrazovky a uživatel nevidí obsah. Na mobilu buďte minimalisté. Ideálně do 60 pixelů výšky.

• Pomalé animace rozbalovacího menu

Když trvá vteřinu, než se menu otevře, působí to, že web laguje. Animace by měly být rychlé a plynulé – maximálně 300 milisekund.

Pro koho je jaký typ headeru vhodný

Sticky header je vhodný pro: E-shopy, blogy, portály – všude, kde uživatelé hodně scrollují a potřebují mít navigaci stále na dosah.

Statický header použijte pro: Portfolia, jednoduché prezentační weby, landing pages s lineárním příběhem, kde vedete uživatele od začátku do konce.

Průhledný header funguje na: Kreativních webech, portfoliích, landing pages s výrazným hero obrázkem nebo videem v pozadí.

Mega menu je nutnost pro: Velké e-shopy s desítkami kategorií, zpravodajské portály, univerzitní weby – všude, kde máte rozsáhlou strukturu.

Související pojmy