V zajetí gridu

Pár článků zpátky jsme vás seznámili se systémem gridů. Ve zkratce se jedná o vodící linky, které nepatrně pomáhají uživateli v orientaci v obsahu a developerům velmi ulehčují práci. Dále pokud optimalizujete stránky čistě pomocí breakpointů, velmi se vám celý proces zjednoduší. S dobrým frameworkem nemusíte skoro vůbec responsivní design řešit a o základní věci se postará právě grid.

Ale abych se dostal k tématu... Všeho moc škodí a někdy může grid systém nadělat více škody než užitku. Prvním častým neduhem je omezování se uvnitř předem dané šířky. Nějaký ten rok je spousta z nás uvězněna v 960.gs (včetně mě). Teprve nedávno jsem si grid rozšířil do stran - přeci jen víc jak 80 % uživatelů má víc jak 1024px na šířku. Celkový uživatelský zážitek je narušen, pokud máte přes střed stránky dlouhou nudli. Přitom by se tento whitespace (ahoj starší verze google plus) dal velmi pěkně využít. Samozřejmě dělat všechny stránky na jedno brdo v 960 je jednodušší a šetří to čas. To ale není v pořádku ani u menších projektů s nižším budgetem.

Dalším neduhem je omezení obsahu a spolupráce uvnitř bloku. Grid nás svádí k omezování se šířkou bloku a to může velmi snižovat informační hodnotu bloku. Na druhou stranu se také může stát, že budete chtít jeden takový blok přidat navíc (např. 4. sloupec k 3.), protože se vám to jednoduše hodí do designu. Nebo potřebujete s blokem vybočit z gridu a tím jej opticky zvýraznit. Tomu se vyhnete, když skryjete vodící linky (cmd + ; nebo cmd + h). Vaše mysl bude volnější a vy se budete moct zaměřit na obsah. Samozřejmě je nemějte skryté po celou dobu s tím, že si výsledek akorát na konci zkontrolujete.

Grid vás také může velmi omezovat v kreativitě (což jsem prakticky vysvětlil v předchozím odstavci). Pokud chcete tvořit jedinečné stránky s unikátní strukturou a obsahem, je lepší si grid nadobro skrýt, nebo vytvářet unikátní na míru. Také jsou zde jistá omezení, pokud pracujete s horizontálními gridy. Obsah je ve většině případů editovatelný (málokdo rovnou tvoří s předepsanými texty), a tak se vám mřížka může snadno na výšku rozbít.

Ve výsledku je grid systém velmi účinný, ale smyslem článku bylo upozornit na jisté omezení, které každé zjednodušení provází.

 

komentovat

 

04.07.2013 - 17:08

Adam Amran
Zajímavý článek. Je to dost diskutabilní téma. Hlavně z hlediska responsive designu - problém u uvedeného příklady s bloky totiž neřešíš jen v rámci jedné šířky, ale hned několika. Proto je často lepší řešit tenhle problém nejdřív pro ty nejmenší šířky (mobily) a rozpracovávat to dále k větším rozměrům (např. 1200px grid pro velké monitory).
K horizontálním gridům: myslím, že smysl jejich použití tkví hlavně v tom, aby web měl nějaký vertikální rytmus, sladěná odsazení apod., než pro přesné pozicování prvků (což, jak píšeš, je zbytečné vzhledem k editovatelnosti obsahu).

28.03.2017 - 16:07

Lýdie
Grid systémy používám docela často, protože práce s nimi je podstatně ryhlejší. Nejčastěji to býval Bootstrap, který ovšem poslední dobou odsunuji na druhou kolej, a hledám sémantičtější řešení, převážně pak pro WordPress. Vadí mi, že BP má málo breakpointů, a že neustále musím psát col-md- a spol. Určitě existuje elegantnější řešení, naoříklad s pomocí Sass nebo Less preprocesorů. No uvidíme, který to nakonec vyhraje. Jinak se zeptám, vy používáte jaký framework a proč? Co se Vám na něm osvědčilo?

 

 

Meebio