Drobný šedý text na rušivém pozadí. Oči vás pálí dřív, než dočtete první větu. Právě proto je obsah nad ohybem pro vaši značku důležitý. Když se rozvržení a barvy perou se sdělením, lidé odejdou a nikdy vám neřeknou proč.
Obsah nad ohybem je to, co je vidět před posunem stránky na dané velikosti obrazovky. Tato kapitola jednoduše vysvětluje, co to znamená, proč to ovlivňuje váš web a marketing a jak to použít, aniž byste se ztratili v odborných výrazech. Uvidíte také, jak do stejného obrazu zapadá design úvodní stránky. Pojďme na to krok za krokem.
Co je obsah nad ohybem a proč na něm záleží
Obsah nad ohybem je to, co je vidět před posunem stránky na dané velikosti obrazovky.
V praxi se obsah nad ohybem objevuje v záhlaví webu, na stránkách služeb, v grafikách pro sítě i v tištěných materiálech. Když ho správně pojmenujete, rychleji zadáte práci designérům a návrhy zkontrolujete s jistotou.
Související myšlenky, například design úvodní stránky, na něj přímo navazují. Mějte je na paměti, když čtete zbytek tohoto modulu.
Určuje první dojem a rozhoduje, zda návštěvníci čtou dál.
Proč na obsahu nad ohybem záleží pro vaši firmu?
Zákazníci posuzují důvěryhodnost podle rozvržení dřív, než přečtou každé slovo. Přehledná vizuální struktura snižuje tření a nabídku usnadňuje pochopit.
Design úvodní stránky musí s obsahem nad ohybem zacházet na mobilu a na počítači různě.
Zkontrolujte svůj ohyb na více velikostech telefonů, ne jen na notebooku.
Pokud chcete vidět, jak to souvisí se sousedními tématy, přečtěte si dále kapitoly jak navrhnout landing page a osvědčené postupy designu landing page.
Praktický seznam, který můžete použít hned dnes
Zkontrolujte svůj ohyb na více velikostech telefonů, ne jen na notebooku.
Při kontrole jakékoli stránky se ptejte, zda je obsah nad ohybem vidět už při prvním posunu na mobilu. Pokud ne, přeuspořádejte sekce dřív, než začnete ladit detaily.
Ukládejte si snímky obrazovky před změnami i po nich, abyste poznali, co se u obsahu nad ohybem na vašem webu skutečně pohnulo.
Sdílejte tento seznam s každým, kdo váš web upravuje, aby design úvodní stránky zůstal na nových stránkách jednotný.
Vyberte si tento měsíc jedno číslo ke sledování, třeba čas na stránce nebo začaté formuláře, aby se změny designu vázaly na obchodní výsledky, a ne jen na vkus.
Jak toto téma souvisí s celou vaší značkou
Vizuální rozhodnutí málokdy platí jen pro jednu stránku. Design úvodní stránky musí s obsahem nad ohybem zacházet na mobilu a na počítači různě.
Vaše příspěvky na sítích, e-maily i tištěné materiály by měly opakovat stejnou hierarchii, barvy a pravidla písma jako web.
Když se vizuál značky rozjede, zákazníci cítí nenápadný nesoulad, i když ho neumí popsat.
Použijte kapitolu design tlačítek a porovnejte poznatky s příbuznou kapitolou v tomto modulu.
Určuje první dojem a rozhoduje, zda návštěvníci čtou dál.
Časté otázky, které lidé přehlížejí
Související výrazy jako design úvodní stránky a záhlaví webu vám pomohou najít hlubší příklady a porovnat svou práci s běžnými standardy.
Design úvodní stránky musí s obsahem nad ohybem zacházet na mobilu a na počítači různě.
Zapište si jednu změnu před a po, kterou tento týden vyzkoušíte na živé stránce. Malé změřené úpravy porazí nejasné plány.
Společná slovní zásoba kolem obsahu nad ohybem ve vašem týmu zkracuje kola úprav s designéry a agenturami.
Nástroje, které usnadní vizuální úpravy
K vylepšení mnoha problémů s rozvržením a stylem nepotřebujete vlastní kód. Vizuální editor vám umožní upravit mezery, barvy a typografii a přitom sledovat náhled na mobilu i na počítači.
WEMASY obsahuje Tvůrce webů s vizuálními úpravami, takže změny zveřejníte, aniž byste kvůli každé drobnosti čekali na vývojáře. Otevřete Tvůrce webů, až budete chtít uplatnit, co jste se naučili.
Po zveřejnění úprav si znovu projděte kapitoly jak navrhnout landing page a osvědčené postupy designu landing page, ať vám modul zůstane v hlavě pohromadě.
Nyní máte k dispozici použitelný pohled na obsah nad ohybem. Využijte ho při kontrole webu, schvalování marketingových materiálů nebo zadávání práce designérovi. Pokračujte kapitolami osvědčené postupy designu landing page a design tlačítek, ať v tomto modulu nepolevíte.
Často kladené otázky
Jak dlouho trvá zlepšit obsah nad ohybem?
Většina malých firem uvidí přehlednější stránky během několika soustředěných sezení, jakmile uplatní základy z této kapitoly. Začněte úvodní stránkou a stejná pravidla pak rozšiřte na stránky služeb a kontaktu.
Potřebujete na obsah nad ohybem designéra?
Designér pomůže u složitější změny značky, ale mnoho oprav kolem obsahu nad ohybem zvládnete sami, jakmile víte, na co se dívat. Spolu s touto kapitolou využijte kapitolu jak navrhnout landing page.
Pomůže WEMASY s uplatněním obsahu nad ohybem na vašem webu?
WEMASY obsahuje v Tvůrci webů vizuální editor, takže rozvržení, barvy i typografii upravíte bez kódu. Otevřete Tvůrce webů, upravte šablony a zkontrolujte náhled na mobilu.
Jaká je nejčastější chyba u obsahu nad ohybem?
Lidé se snaží opravit všechno najednou místo jedné stránky po druhé. Vyberte si jednu prioritu, třeba čitelnost nebo kontrast, a pro další zlepšení se podívejte na kapitolu osvědčené postupy designu landing page.
Jak obsah nad ohybem souvisí se SEO?
Jasná vizuální hierarchie a čitelné písmo udrží návštěvníky na stránce déle, což podporuje signály zapojení, které vyhledávače sledují. Opravy designu spojte s dobrou strukturou obsahu a výsledky budou nejlepší.
Kam se posunout po obsahu nad ohybem?
Pokračujte kapitolami jak navrhnout landing page a osvědčené postupy designu landing page v této knize a vybudujte si úplný vizuální systém své značky online.