Při tvorbě webu je prvním instinktem prostor vyplňovat. Přidat další sekci, další zvýrazněnou funkci, další řádek textu. Instinkt, který vede k lepším webům, je opačný: nechat místo. Prázdný prostor není prázdné místo. Díky němu je všechno ostatní na stránce čitelné, důvěryhodné a snadno použitelné.
Prázdný prostor v designu označuje prázdné oblasti mezi prvky na stránce a kolem nich. Zahrnuje mezeru mezi řádky textu, odsazení uvnitř tlačítka, mezeru mezi nadpisem a odstavcem pod ním a okraje kolem sekcí. Nic z toho není zbytečné. Všechno to pracuje.
Název je mírně zavádějící: prázdný prostor nemusí být bílý. Je to jakákoli oblast stránky, která není zabraná obsahem. Tmavé pozadí s velkorysými mezerami mezi sekcemi využívá prázdný prostor stejně účinně jako bílé pozadí.
Proč na webu záleží na prázdném prostoru?
Prázdný prostor ovlivňuje, jak návštěvníci obsah vnímají a zpracovávají. Stránky s velkorysým odsazením se snáz čtou, působí profesionálněji a důvěryhodněji. Stránky s malým odsazením působí přeplněně a hůř se v nich orientuje, bez ohledu na to, jak dobrý je obsah.
Kognitivní důvod je přímočarý. Když jsou prvky těsně u sebe, musí mozek pracovat víc, aby poznal, kde jeden končí a druhý začíná. Když mají prvky kolem sebe prostor, oko se stránkou pohybuje přirozeně a bez námahy. Menší úsilí návštěvníka znamená víc pozornosti pro skutečný obsah a výzvy k akci.
Prázdný prostor také sděluje postavení značky. Prémiové a luxusní značky důsledně používají víc prázdného prostoru než levné nebo na hodnotu zaměřené. Spojení mezi velkorysým odsazením a kvalitou je hluboce zakořeněné. Firemní web, který vypadá natěsnaně, signalizuje o značce něco nezamýšleného, ať text říká cokoli.
Jaké jsou typy prázdného prostoru ve webdesignu?
Makro prázdný prostor
Makro prázdný prostor je velký prostor mezi hlavními sekcemi stránky. Mezera mezi úvodní sekcí a sekcí s funkcemi, okraje po obou stranách obsahu, prostor mezi poslední sekcí a patičkou. Makro prázdný prostor dává stránce celkový prostor k nadechnutí a určuje, jak otevřeně nebo hutně rozvržení působí na první pohled.
Mikro prázdný prostor
Mikro prázdný prostor je drobné odsazení uvnitř obsahu: mezera mezi řádky textu (řádkování), mezera mezi popiskem a vstupním polem ve formuláři, odsazení uvnitř tlačítka. Mikro prázdný prostor určuje, jak čitelné jsou jednotlivé prvky. Odstavec s těsným řádkováním se čte hůř než stejný odstavec s velkorysým řádkováním, i když je velikost písma totožná.
Aktivní prázdný prostor
Aktivní prázdný prostor je prostor umístěný záměrně, aby směroval pozornost nebo vytvořil důraz. Velkorysé místo kolem tlačítka výzvy k akci ho například vizuálně izoluje a způsobí, že vynikne nad okolním obsahem. Zde se prázdný prostor používá jako designový nástroj, a ne jen jako místo k nadechnutí.
Pasivní prázdný prostor
Pasivní prázdný prostor je přirozené místo, které kolem obsahu vzniká jako důsledek rozvržení, a ne jako záměrné designové rozhodnutí. Mezera mezi koncem odstavce a okrajem sloupce obsahu, místo na konci stránky před patičkou. Je nezbytný, ale není strategický.
Kolik prázdného prostoru stačí?
Pevné pravidlo neexistuje, ale nejběžnější chybou je používat ho příliš málo, ne příliš mnoho. Když si nejste jistí, zvětšete odsazení a podívejte se, zda stránka působí lépe. Téměř vždy ano.
Množství prázdného prostoru, které funguje, závisí na typu obsahu a publiku. Dokumentace pro technické uživatele může být hutnější než domovská stránka zaměřená na běžné návštěvníky. Stránka luxusního produktu potřebuje víc prostoru k nadechnutí než srovnávací tabulka. Správné množství je takové, díky kterému se obsah nejsnáz čte a nejdůležitější prvky nejsnáz najdou.
Praktický test: když přimhouříte oči a všechno se slévá dohromady, prázdného prostoru je málo. Když oko hned najde nadpis a výzvu k akci, když se na stránku díváte jako na celek, odsazení funguje. Článek o tom, co je vizuální hierarchie, vysvětluje, jak odsazení spolupracuje s velikostí, barvou a kontrastem při vedení oka návštěvníka.
Časté chyby s prázdným prostorem na firemních webech
Nejčastějším problémem jsou sekce natlačené k sobě bez vizuálního oddělení. Když úvodní sekce, sekce s funkcemi, reference a výzva k akci splývají bez místa k nadechnutí, návštěvníci nepoznají, kde jedno téma končí a druhé začíná. Přidání svislého prostoru mezi sekce je obvykle jediná změna, která nejvíc zlepší přeplněnou domovskou stránku.
Těsné řádkování běžného textu zhoršuje čtení odstavců, zejména na mobilu, kde je řádek kratší a oko musí častěji měnit směr. Výška řádku alespoň 1,5násobek velikosti písma je široce používaný standard čitelnosti na webu.
Tlačítka s příliš malým vnitřním odsazením působí malá a špatně se na ně klepe. Tlačítko, které má technicky správnou velikost, ale minimální odsazení kolem textu, vypadá vizuálně menší, než je, a získává méně kliknutí. Velkorysé odsazení způsobí, že tlačítka působí důležitě a snadno se na ně reaguje.
Obsah, který běží od okraje k okraji bez bočních okrajů, se nepohodlně čte a stránka vypadá nedokončeně. Každá oblast obsahu těží ze stálého okraje, který drží text mimo okraje obrazovky, zejména na mobilu. Článek o tom, jak udělat web vhodný pro mobily, popisuje odsazení jako součást širší sady aspektů mobilního designu.
Jak prázdný prostor ovlivňuje SEO?
Prázdný prostor ovlivňuje SEO nepřímo, přes signály uživatelského zážitku, které vytváří. Stránky, které se snáz čtou, mají nižší míru opuštění a delší dobu na stránce. Tyto signály chování sdělují vyhledávačům, že stránka svým návštěvníkům dobře slouží, což časem přispívá k pozicím.
Roli hraje i rychlost stránky. Prázdný prostor sám o sobě nemá velikost souboru, takže přidání většího odsazení stránku nezpomalí. Ale designová rozhodnutí, která někdy provázejí hutná rozvržení, jako velké obrázky natěsnané k sobě, těžké animace mezi sekcemi nebo nadbytek obsahu, mohou ovlivnit dobu načítání. Čistší a prostornější rozvržení se často shoduje s rychlejším. Článek o tom, co je SEO, popisuje, jak uživatelský zážitek a technický výkon souvisejí s pozicemi ve vyhledávání.
Jak prázdný prostor řeší WEMASY
Šablony tvůrce webů WEMASY jsou vytvořeny s jednotným výchozím odsazením, které vytváří čitelné a profesionální rozvržení bez ručního nastavování. Vnitřní odsazení sekcí, výška řádků a rozestupy prvků jsou nastaveny na hodnoty, které fungují na všech zařízeních. Vizuální editor umožňuje upravit odsazení jednotlivých sekcí, když výchozí hodnota vašemu obsahu nevyhovuje, takže máte kontrolu, aniž byste museli začínat od nuly.
Co je zahrnuto, zjistíte na stránce tvůrce webů WEMASY, a balíčky najdete na stránce s ceníkem.
Často kladené otázky
Znamená víc prázdného prostoru méně obsahu?
Ne nutně. Prázdný prostor se týká odsazení mezi prvky a kolem nich, ne odstraňování obsahu. Můžete mít stránku bohatou na obsah, která přesto využívá prázdný prostor účinně, a to tím, že jasně seskupíte související obsah, dáte sekcím prostor k nadechnutí a nesnažíte se ukázat všechno najednou. Představa, že přidání prázdného prostoru znamená odebrání obsahu, je jedním z důvodů, proč firemní weby končí příliš hutné. Víc prázdného prostoru většinou znamená lépe uspořádaný obsah, ne jeho menší množství. S tvůrcem webů WEMASY si to můžete nastavit přímo na svém webu.
Je prázdný prostor důležitý na mobilu?
Ano, a pravděpodobně ještě víc než na počítači. Na malé obrazovce se příliš hutný obsah hůř čte a hůř se na něj přesně klepá. Cíle pro klepnutí potřebují kolem sebe odsazení, aby fungovaly spolehlivě. Výška řádků musí být velkorysá, aby krátké zalomené řádky textu zůstaly čitelné. Kvůli menší šířce obrazovky na mobilu každé rozhodnutí o odsazení ovlivňuje zážitek příměji než na širokém rozvržení pro počítač. Před zveřejněním zkontrolujte všechno odsazení na skutečném telefonu.
Může prázdný prostor zpomalit můj web?
Ne. Prázdný prostor je odsazení v CSS, které nemá smysluplnou velikost souboru. Přidání většího vnitřního odsazení, vnějšího okraje nebo výšky řádku na stránku nezvyšuje dobu načítání. Dobu načítání může ovlivnit obsah, který prostor vyplňuje: velké obrázky, vložená videa, těžké skripty. Prostorné rozvržení s optimalizovaným obsahem se načítá stejně rychle jako hutné se stejným obsahem a obvykle se výrazně příjemněji používá.
Jak poznám, že má můj web příliš málo prázdného prostoru?
Nejjasnějším znakem je, že stránka působí rušně nebo se špatně čte, když se na ni díváte jako na celek. Konkrétní ukazatele zahrnují text, který běží těsně k okraji obrazovky, sekce, které vizuálně splývají bez jasného předělu, tlačítka, která vypadají malá, ačkoli jsou technicky dost velká, a odstavce, které je únavné číst. Ukázat stránku někomu, kdo ji ještě neviděl, a sledovat, kam se jeho oko podívá jako první, je jeden z nejspolehlivějších způsobů, jak problémy s prázdným prostorem odhalit, protože znalost obsahu může hutnost před designérem skrýt.
Jaký je rozdíl mezi vnitřním a vnějším odsazením ve webdesignu?
Vnitřní odsazení (padding) je prostor uvnitř prvku, mezi jeho obsahem a okrajem. Vnější okraj (margin) je prostor vně prvku, mezi ním a okolními prvky. V praxi oba přispívají k prázdnému prostoru. Vnitřní odsazení tlačítka určuje, kolik místa obklopuje text tlačítka. Vnější okraj pod nadpisem určuje, jak blízko sedí následující odstavec. Obě vlastnosti se upravují tak, aby vytvořily odsazení, díky kterému je stránka čitelná a dobře uspořádaná.