Responsive design a Bootstrap 3 z pohledu grafika

24. 3. 2014 | Lukáš Sucharda

I když se může zdát, že pravidla Bootstrapu mohou grafiky a kreativce v jejich rozletu značně brzdit, opak je pravdou. Bootstrap usnadnil práci web designérům a grafikům dal do ruky velice variabilní nástroj, jehož výsledkem je responsivní design bez dlouhého spekulování.

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

FG Forrest, a.s., je internetovou agenturou založenou v roce 1996.

Navrhuje optimální využití digitálních médií a kompletně realizuje zejména webové prezentace, intranety a mobilní aplikace. Vlastní produkce, profesionální přístup, redakční systém Edee CMS a prokazatelné přínosy jsou důvody, proč vybrat za partnera FG Forrest. Mezi dlouhodobé klienty patří Skupina ČEZ, McDonald's, Komerční banka, AC Sparta Praha nebo Kancelář prezidenta republiky.

Na seznam článků

Přeskočit na hlavní nabídku