Jak na responzivní webdesign?

Trendy v oblasti webových stránek se neustále mění. V minulosti webdesignéři a vývojáři pracovali pouze s jedním médiem – monitorem počítače. V uplynulých letech se však internet rozšířil do přenosných zařízeních, jež mají různý tvar a rozlišení. Zde nastaly problémy se zobrazováním webových stránek na zařízeních s různými úhlopříčkami. Upustilo se tedy od layoutu s pevnou šířkou a na jeho místo nastoupil responsivní webdesign.

Responsive Web Design

Responzivní webdesign

Co je responsivní webdesign?

S myšlenkou responsivního webdesignu přišel Ethan Marcotte, který navrhl, že webové stránky by se měly přizpůsobit rozlišení jakéhokoliv zařízení. Ve své knize Responsive Web Design rozdělil realizaci responsivního webdesignu na tři hlavní části:

  1. 1.      Plovoucí mřížka
  2. 2.      Plovoucí obrázky
  3. 3.      Media queries

Nicméně tento článek je určen pro webdesignéry, nikoliv pro vývojáře, a proto se výše zmíněnými kroky zabývat podrobně. Pro designéry je však důležité pochopit, jak responsivní web funguje. Doporučuji přečíst si tyto tři články, pod nimiž se Ethan Marcotte podepsal jako autor: Plovoucí mřížka, Plovoucí obrázky a Responzivní webdesign.

Role webdesignera

Jestliže jste designer, který výhradně navrhuje webdesign a není zodpovědný za HTML a CSS, přesto byste o této oblasti měli něco vědět. Při navrhování responsivního webdesignu vám základní znalosti HTML a CSS výrazně pomohou.

Webová stránka je kombinace designu a kódu, a proto je pro webdesignery důležité pochopit, jak se později navrhovaná grafika bude realizovat v kódu, byť tyto znalosti budou jen okrajové.

Opět připomínám. Tento článek je určen jen pro webdesignery. V dalších odstavcích budeme diskutovat o tom, jaký postup návrhu zvolit, aby výsledný webdesign odpovídal pravidlům responsivního webu.

Mřížkový systém a vy

grids

The Grid System

Mřížkový systém je příklad dokonalého rozložení webové stránky, jehož byste měli usilovat. Při navrhování responzivního webdesignu byste měli mřížku používat. Hlavním principem je volba vhodných velikostí objektů tak, aby vytvořily vyváženou strukturu. Nejprve se zaměřujeme na vodorovné rozmístění (do sloupců), svislé rozložení není zas tak významné a nastavuje se odhadem.

Jedním z pilířů responzivního webdesignu je plovoucí mřížka. Tradičně se mřížka zadává v pixelech, nicméně u responzivního webu se bude šířka zadávat procentuálně. Šířka každého sloupce se potom změní tak, aby odpovídala rozlišení a velikosti obrazovky přenosného zařízení. Mřížka je při navrhování responzivního webdesignu nutností, ne delikátností. Není možné responzivní webovou stránku vytvořit bez mřížky.

Jestliže budeme rozdělovat stránku na čtyři stejně široké sloupce, zvolíme šířku 25 %. Se snižující se šířkou obrazovky se prostřednictvím media queries šířka sloupce zvětšuje a počet sloupců se snižuje.

1. Nepoužívejte ohraničené textury, jako jsou tyto:

textured_borders2. Nepoužívejte horizontální přechody:

horizontal_gradient3. Jako pozadí nepoužívejte fotografie a ilustrace.

Proporce

Na grafickém návrhu je titulek o velikosti 100pt, nicméně jak se zobrazí na iPhonu? Test bude například příliš velký a roztáhne se na několik řádků, čímž se může narušit celkový design. V takovém případě vývojář použije takzvané media queries a prostřednictvím těchto podmínek upraví velikost písma tak, aby odpovídala dané obrazovce. Tyto podmínky určí, kdy se má text zmenšit, kdy zůstat stejný a podobně. A vy jako webdesignéři byste měli s vývojářem komunikovat, abyste pomohli určit, co se může a nemůže zmenšit, co má zůstat stejné, jak uspořádat jednotlivé prvky, aby stránka neztrácela význam a podobně.

Jedná se o podmínky, které na základě aktuálně nastavené šířky prohlížeče aplikují určitá pravidla. Díky tomu můžeme pro jednotlivé buňky definovat, jak se bude měnit šířka v závislosti na aktuální šířce prohlížeče. Media queries se musí ladit v závislosti na jednotlivých zařízeních.

Představte si, že webová stránka vypadá takto:

modules_original

Je nezbytné definovat skupiny prvků, jež musí zůstat pohromadě při jakémkoliv rozložení. Například všechny navigační odkazy musí být pohromadě, jinak by to nedávalo smysl.

Responsivní stránka potom může vypadat následovně:

modules_resized

Závěr

Responzivní webdesign je evoluční, nikoliv revoluční. Jedná se o přirozený krok pro webové stránky a jako designéři musíme neustále přizpůsobovat naše pracovní postupy.

Zdroj: Webdesign TutPlus

Každý to rád bez pravopisných chyb.

Komentáře

Nahoru