Responsive design a Bootstrap 3 z pohledu grafika

Gridy v Bootstrapu

Základní prvky jsou v Bootstrapu předdefinované, jako např. gridy nebo-li mřížky. Tyto mřížky:

• mohou mít šířku 750, 970 nebo 1170 px
• využívají 12sloupového dělení
• mají pevnou 30 px mezeru mezi sloupečky.

Kdykoliv tedy navrhujeme layout stránky, ctíme grid a veškeré prvky umisťujeme tak, aby byly v souladu se zvolenou mřížkou.  To znamená, že pokud navrhujeme obsah podstránky s levým kontextovým menu, zvolíme jeho šířku tak, aby zabíral několik sloupců (např. 3 sloupce). Obsahová část stránky pak zabírá zbylých 9 sloupců. A máme hotovo.

Pokud do obsahové části chceme dále umístit např. fotogalerii a v ní mít několik obrázků vedle sebe, využijeme zbylých 9 sloupců a umístíme 3 obrázky vedle sebe (každý tak zabere přesně 3 sloupce podle Bootstrapu, viz příklad III.).  

Když toto splníme, odmění nás Bootstrap funkčním responsive designem až na úroveň mobilu a snadnou implementací.

Mobil first

Nad návrhy přemýšlíme vždy podle zásady „mobile first“. Je důležité mít konkrétní představu, jak se co bude na tabletech nebo mobilech chovat a jak to bude vypadat, aniž bychom to vše museli od začátku rozkreslovat.

Tak jako tak, ale musí vedle návrhu pro desktop (používáme většinou grid o šířce 1170 px) vzniknout také návrh pro mobil (pro rozlišení 320 px), bez kterého webař nemůže práce začít. A je jedno, zda vznikne v podobě grafiky, wireframu nebo jen slovní domluvy mezi webařem a grafikem.

Opačný postup, při kterém vzniknul nejdříve grafický návrh pro desktop a teprve poté jej začal webař přizpůsobovat pro mobil, byl mnohem pracnější, komplikovanější a pro webaře nervydrásající.

Další dobré rady:

• Při realizaci grafického návrhu pro mobil je dobré počítat s omezením malého rozlišení displeje (titulek nebo první texty na stránce by měly být vidět již cca od 160 pixelů – počítáno při rozlišení mobilu 320x480 px, ale i 480x320 px u iPhone!).
• Vyplatí se také omezit počty typových stránek se změnou využití šíře obsahu. To znamená, že pokud pro desktop navrhneme stránku, která má levé menu, obsahovou část a pravé kontextové menu, musíme zákonitě myslet na zobrazení na tabletech a mobilech. Na tabletu pak budeme mít pro nedostatek prostoru již jen levé menu a obsahovou část a na mobilu dokonce jen obsahovou část. Což je špatně, nebo alespoň toto nese spoustu úprav na straně webaře.
• Nově také Bootstrap u tabletu a mobilu umožňuje libovolně měnit umístění a pořadí prvků (rozuměj: menu, promítačku, footer, kontextové menu a další boxy/obsah na stránce), což nám dává více možností, jak stránky v menším rozlišení přeskládat. Takže můžeme lépe sledovat a dodržovat logiku a smysluplnost obsahu stránky.

Break points vs. fluidní responsive

Obecně platí, že responsive je v základu podle Bootstrap fluidní, chceme-li pro všechna rozlišení.  V rozlišení od 320 px po "tablet" je responsive navíc jednosloupcový a bez gridu. To znamená, že celý obsah se "natahuje" podle šířky prohlížeče.

Tam, kde by fluidní řešení podle grafického návrhu a grafika nevypadalo dobře nebo to návrh "nedovoluje" (typickým případem je, když se responsive dodělává dodatečně u starších projektů), lze udělat responsive "skokový", tj. pevný dle předdefinovaných break points:

• od 320 px do 480 px je responsive fluidní a jednosloupcový
• nad 480 px lze již využít mřížku a 12 sloupců
• od 768 px nahoru se využívá grid 750
• od 992 px nahoru se využívá grid 970
• od 1200 px nahoru se využívá grid 1170
• mezi gridy 750 a 970 nebo mezi 970 a 1170 lze mít responsive také fluidní.

I tady platí, že domluva mezi grafikem a webařem je základem dobrého řešení.

Nestandardní řešení

Všechno jde a lze udělat v Bootstrapu, ALE.  Jsou situace, kdy Bootstrap nestačí a kdy je potřeba sáhnout k nestandardnímu řešení, které se musí doimplementovat a odladit. Zde se dvojnásob vyplatí přemýšlet, jak se nestandardní prvek bude chovat v responsive. To, co z pohledu desktopu vypadá dobře, může být v mobilu jednoduše průšvih.  

Nejčastějším nestandardním řešením mohou být různé úpravy fotogalerií, tabulek, velkých bannerových promítaček, map, sliderů s obsahem přes celou šířku, různé centrování obsahu atd. Zdá se, že jsou to drobnosti, ale pro webaře to můžou být komplikace a znamenat hodně času navíc. Jako např.:

• vycentrování 3 obrázků různých velikostí, ale mimo mřížku – grid
• slider fotogalerie, navíc s pevně pozicovanými posuvníky na krajích displeje
• fotogalerie s větším počtem obrázků vyplňující zároveň větší plochu u rozlišení např. nad 1680 px.                                           

Osobně si myslím, že klíčovým pro řešení všech nestandardních prvků je myslet na to, jaký to bude mít pro klienta přínos. A pokud je možnost, všem nestandardním situacím se radši předem vyhnout.

photo credit: Sylvain Bourdos via photopin cc