Choreografie nebo design

Máte-li přímý či nepřímý vztah k IT sféře a vývoji webu, pravděpodobně jste nejednou slyšeli pojmy jako adaptivní design, flexibilní layout, positioning a podobně. Tyto pojmy přímo souvisejí s tím, co bude diskutováno v našem článku. Budeme mluvit o hierarchii obsahu v designu stránek a také o konceptu choreografie.

Když poprvé uslyšíte termín „obsahová choreografie“, nedobrovolně si to spojujete s tancem a výtvarným uměním a je na tom kus pravdy i s ohledem na strukturu webových zdrojů. Trent Walton použil tento koncept ve svém článku poprvé. S největší pravděpodobností šlo o metaforu, která symbolizovala ovládání chování bloků obsahu při změně rozvržení stránky. Nabízí se otázka: kdy k takové změně dojde? Je to všechno o tom velmi adaptivním designu.

Otevřete si libovolnou webovou stránku v běžném prohlížeči na počítači a zároveň na telefonu či tabletu. Pokud si všimnete výrazného rozdílu v uspořádání informačních bloků a dalších částí obsahu již na hlavní stránce, pak byl tento design s největší pravděpodobností vytvořen jako adaptivní (responzivní). Tento návrh zahrnuje změnu umístění částí obsahu webových stránek v závislosti na rozlišení displeje, ať už jde o stolní PC, notebook, tablet nebo chytrý telefon.

Zachování hierarchie obsahu a zároveň citlivost

Představme si, že máme web pro určitou obchodní organizaci, jeho struktura je velmi standardní a jeho design je navržen tak, aby byl responzivní. Co budeme pozorovat? Na hlavní stránce, ve standardním designu takového webu, je obvykle navigační panel, prezentace, pod kterou může být několik bloků se seznamem služeb této společnosti.

Váš cílový uživatel může stránky webu navštívit tak, že jej otevře na obrazovce svého tabletu, a uvidí, že bloky se službami, které byly vodorovně vedle sebe, se náhle mírně posunou a budou umístěny nad sebou. V zásadě to pro něj nebude hrát velkou roli, ale vy jako vlastník webu musíte klienta upozornit na konkrétní služby ze seznamu. Proto se musíte ujistit, že jsou umístěny úplně nahoře na hlavní stránce a nejsou nikam posunuté.

V responzivním designu jsou sloupce uspořádány takto: první sloupec ve vodorovném seznamu zůstává první, druhý je umístěn bezprostředně pod ním, když se sníží rozlišení obrazovky, třetí je umístěn pod druhým atd. V tekutém rozložení se obsah jednoduše posune zmenšením šířky bloků. V ideálním případě by se obsah měl pohybovat s posunem sloupců. Bylo by hezké mít kontrolu nad sekvencí obsahu, která není omezena na původní pořadí v html značení.

Právě tuto neomezenou kontrolu nad texty v blocích lze považovat za choreografii. Ale dnes můžete pomocí kódu organizovat pouze pohyb sloupců nad sebou nebo jednoho pod jedním, to znamená, že obsahová choreografie ve svém logickém smyslu není implementována.

Hierarchie obsahu a návrh webových stránek

Za hierarchii obsahu, pokud odpovídá designu stránek, lze považovat i rozložení obsahu po stránkách, různé velikosti a typy písma, poměr bílého místa a textu na stránkách a podobně.

1. Objemy obsahu

Pokud mluvíme o objemu, může se týkat jednotlivých bloků obsahu a dalších prvků v designu, jako jsou obrázky, vektory a další. Zde je důležité určit harmonickou kombinaci částí obsahu mezi sebou a jejich soulad s obecným stylem a designem webu. Pokud jsou některé bloky nebo části obsahu větší než jiné, znamená to jejich stupeň důležitosti ve srovnání s jinými částmi informací. Proto stojí za zvážení, na kterou část obsahu musíte uživatele upozornit, a v souladu s tím určit velikost informačních bloků.

2. Styly písma

Pro zdůraznění důležitosti jednotlivých podnadpisů v souvislém textu se obvykle používají různé styly a typy písma. Změnou stylu a typu písma tak upozorňujeme uživatele na jednotlivé body v textu. A obecně platí, že skutečný SEO text si nelze představit bez podnadpisů, frází vytištěných tučně, obrázků zabalených do textu, hypertextových odkazů a mnoha dalších funkcí.

3. Použití barvy

Za efektivní způsob zobrazování obsahu lze považovat změnu barvy jednotlivých částí obsahu. Neznamená to, že musíte své stránky vytvořit neuvěřitelně zářivě, ale tato barva může usnadnit zaměření na určité části obsahu, zvýraznění textu nebo zvýraznění obrázku a mnoho dalšího.

4. Umístění a vyrovnání

Způsob, jakým prezentujeme náš obsah, má obrovský dopad na to, jak uživatelé vnímají naše stránky. Zarovnání se provádí pomocí CSS a je obvykle stejné pro všechny stránky projektu. Správně zarovnaný obsah vytváří na stránkách pořádek, usnadňuje na nich najít potřebné informace a neplete se v množství textů. Vše zde samozřejmě závisí na rozvržení a provádí se pomocí CSS a HTML.

5. Mezery a mezery

Vizuální hierarchie obsahu se projevuje jak v určování vzdálenosti mezi jednotlivými bloky obsahu, tak i mezi prázdnými místy na stránkách a texty či obrázky. Důležitá je zde také harmonie, texty by neměly být příliš blízko u sebe, aby uživatel dokázal rozlišit, kde končí jeden článek a kde začíná druhý. Samotné články musí mít odrážky mezi odstavci, podnadpisy, někdy i číslování nebo abstrakty, tedy vše, co text usnadňuje čtení a vizuální vnímání.

Na základě výše uvedeného můžeme dojít k závěru, že pouze web, který současně vyhovuje webovým standardům a dodržuje všechny jemnosti hierarchie obsahu, může zajistit maximální efektivitu interakce uživatele.

Profesionál a to mluví za vše! V internetovém marketingu již více než 10 let. Začínal psaním příspěvků, vypracoval marketingovou strategii pro vstup na trh a později vedl celé Promo oddělení pro propagaci produktů na tržišti TemplateMonster. Nyní je Ilya profesionální obchodník s rozsáhlými zkušenostmi, který je vždy připraven pomoci kolegům ne slovy, ale činy. Najděte Ilyu na LinkedIn.