1. diel - Mobile first responzívne dizajn
Pre tento článok budeme ľahko využívať znalosti HTML 5, CSS 3 a CSS preprocesoru Sass. Ak teda jeden z uvedených jazykov nepoznáte, bude pre vás určite lepšie, ak sa ho pred prečítaním tohto článku naučíte z miestnych tutoriálov.
Webové stránky a mobilné zariadenia
Každodenný život si väčšina z nás (hlavne teda neITáků, že ...) bez mobilu nedokáže predstaviť.
Bežný deň pre "závislákov s mobilofóbií" prebieha asi takto: Prídu do školy, či do práce, a takmer neustále niekomu musí nutne písať, musí sa nutne pozerať na weby, čo samozrejme nepočká na ich osobné voľno ... Z toho vyplýva, že je nutné weby optimalizovať, aby sa na ne dostal každý kedykoľvek a odkiaľkoľvek.
Podľa štatistík približne 25% užívateľov navštevuje weby práve z mobilných zariadení. Čo by sme teda rozhodne ako vývojári webov mali brať do úvahy. 25%, čo určite sami prepočítate na 1/4, je jednoducho ohromná masa ľudí.
Vývoj používanie prehliadačov na zariadeniach - nákupný roku 2012 a 2013. Obrázok z code9media.com/mobile
Spôsobov ako zobraziť na mobilných zariadeniach webovú stránku je veľa, ale nie všetky spôsoby sú dobré či jednoducho vhodné. Také zlé riešenie je to, keď vytvoríme špeciálny subdoménu pre mobily - takto vážne nie, nie sme v praveku - použijeme media queries! Media queries využívajú sériu pravidiel, vďaka ktorým si presne určíme aké štýly pre aké rozmery obrazovky použiť. Možno to znie zložito, ale ja vás do toho dostanem!
Responzívne web design
Pojem responzívne dizajn označuje tvorbu stránky, ktorá sa dokáže prispôsobiť veľkosti displeja zariadenia podľa určitého pravidla s využitím media Breakpoint.
Hlavne si tento pojem nepomýlite so elastickými weby, čo nie je nič iné ako šikovné využitie percent pre šírku a pixelov, či iných vhodných jednotiek pre maximálnu šírku.
Prístupy
K responzivnímu web dizajnu môžeme pristupovať pomocou dvoch základných metód.
Desktop first
Keď sa povie responzívne web, väčšina z vás si predstaví web vytvorený pre desktopy, ktorý sa následne upraví pre mobilné zariadenia. Takto začínal každý - je to ľahké a pomerne efektívne. V podstate tvoríme normálne stránku, tak ako sme sa to učili, a prestavuje elementy podľa pravidiel pre menšie šírky.
Metóda má však jeden zásadný problém. Zmena rozloženia webu pre rôzne zariadenia je dosť zložitá a vyžaduje prepisovanie veľkej časti kódu - a my určite nechceme písať veľa kódu, že? Navyše často dochádza k nekorektnému zobrazenie. Však to poznáte - niečo sa zobrazí dobre, niečo zase nie - des a hrôza.
Mobile first
Mobile first je metóda tvorby webu, ktorá vyžaduje trochu iné myslenie. Metóda využíva v podstate opačného postupu, než-li desktop first. Z toho teda vyplýva, že sa začína od zobrazenia pre mobily. A verte alebo nie, je to paráda.
Mnoho ľudí, najmä začiatočníkov, metóda odrádza kvôli jej 'vyššej náročnosti' na pochopenie. Nezmysel, len sú leniví a nechce sa im premýšľať.
Mobile first je výhodná metóda - ušetrí veľa času a hlavne napíšete oveľa menej kódu, ktorý sa tak stane aj výrazne prehľadnejším.
V tejto metóde je tiež výhodné používať CSS preprocesoru, ktoré vďaka ponáranie všetko ešte viac uľahčí. Media queries jednoducho vložíme do bloku voliča pre daný element a všetko máme pekne prehľadne pri sebe.
Hraničnými
Veľmi odporúčam media hraničnými nikdy nedefinovat špecificky pre
určité šírky. Vždy voľte hraničnými tak, ako je to vhodné pre daný
element. Stránka sa tak bude zobrazovať ďaleko lepšie - predsa len menu sa
bude musieť preskupiť inokedy než obsah stránky, alebo nie? 
Viewport
Aby sme vôbec mohli webové stránky na mobilných zariadeniach spustiť, budeme potrebovať upraviť viewport. Ten nastavíme meta tagom, ktorý vložíme niekam do html hlavičky - úplne jedno kam. Ten v podstate nastaví reálnu šírku displeja, ktorú si internetové prehliadače v mobilných zariadeniach rady upravujú podľa seba.
Mojím osvedčeným nastavením je toto.
<meta name="viewport" content="width=device-width, viewport-fit=cover">
Box-sizing
Využívajte vlastnosť box-sizing. Dosť vám to pomôže stylovať lepšie. Najčastejšie sa používa s hodnotou border-box, čo nám mení rozpätie šírky elementu a počíta do neho aj padding a border. Môžeme teda potrebné nastaviť šírku na 500px, pridať padding či border a element bude mať konečne šírku naozaj len 500px. Určite vyskúšajte a napíšte do komentárov, ako sa vám vlastnosť páči.
A tu nájdete aké má využitie - http://caniuse.com/...
Nákupný
Poďme si teda ukázať krátke porovnanie.
Budeme mať napr. Nejakú jednoduchú galériu, ktorá bude pre počítače v dvoch stĺpcoch. Pre mobily potom budeme chcieť jedno-stĺpcové rozloženie. (Pre jednoduchosť zatiaľ vynecháme rôzne marginy, padding a podobne.)
Metódou desktop first by sme napísali asi takýto kód.
.galerie img { width: 50%; float: left; @media screen and (max-width: 700px) { .galerie img { width: 100%; float: none; } }
Metódou mobile first by sme napísali len tento kód.
@media screen and (min-width: 700px) { .galerie img { width: 50%; float: left; } }
Všimnite si, že u desktop first musíme niekoľko štýlov vyresetovať, čo je občas pri zložitejších štýloch pomerne ťažké a preto sa nám u tejto metódy môže často dizajn rozsypať kvôli zabudnutému štýlu. U mobile first však nič resetovať nemusíme a len jednoducho nastavíme nové hodnoty tam, kde ich chceme.
Ukážka mobile first
Ukážeme si ešte jeden príklad, teraz len s metódou mobile first, pretože verím, že je to zatiaľ najefektívnejšia metóda pre štýlovanie responzívne stránok. Preto sa tiež ostatnými metódami už zaoberať nebudeme.
Vytvoríme si jednoduché štýly pre stránku elementy pre jeden článok a dva (na tom ale nesejde) postranné panely. Nasledujúci kód bude s využitím CSS preprocesoru Sass, ale verím, že ho pochopíte aj pokiaľ preprocesor nepoznáte či nepoužívate.
HTML kód by mohol vyzerať nejako takto:
<div class="obsah"> <article class="clanek"></article> <aside class="postranni-panel"></aside> <aside class="postranni-panel"></aside> </div>
A CSS kód s využitím mobile fist by mohol vyzerať nejako takto.
.obsah { .clanek { box-sizing: border-box; width: 100%; height: 200px; margin: 20px 0; padding: 15px; background: blue; @media screen and (min-width: 900px) { width: 79%; float: left; } } .postranni-panel{ box-sizing: border-box; width: 100%; height: 100px; margin: 20px 0; padding: 10px; background: red; @media screen and (min-width: 900px) { width: 19%; float: right } } }
Vždy sa snažte vytvárať samostatné komponenty, ktoré nie sú závislé na konkrétnom elementu alebo pozíciu v HTML stránke, ale to už trochu predbieham a viac si o tom porozprávame v článku o objektovom CSSku - na čo sa vážne tešte!
Pri malej obrazovke dostaneme nasledujúce efekt.
Rozloženie na malých displejoch.
A pri väčšej obrazovke dostaneme inak rozmiestnené elementy.
Rozloženie na veľkých displejoch.
Vytvoril som online ukážku kódu vyššie, ktorú môžete sami editovať a hlavne meniť šírku okna a sami si vyskúšať, že nám kód naozaj funguje - a je sakramentsky jednoduchý. http://sassmeister.com/...04d151843f95
Flexibilnosť
V ére responzívne webov metódou desktop first ste mohli vidieť skôr fixné hodnoty pre šírku v každom @media rozmedzí. V metóde mobile first sa však často využíva kombinácia responzivnosti a flexibilnosti, teda nenastavujete pevnej hodnoty (px, em, rem ...), ale využívate predovšetkým percent (%). (bavíme sa predovšetkým o šírke elementov)
V jednoduchosti: snažte sa stránky robiť flexibilné od najmenších displejov až po najväčšie, kde, ak to samozrejme od webu chceme, používajte pevné hodnoty.
Záver
Tvorba naozaj dobre responzívne stránky fungujúce naprieč prehliadači rozhodne nie je prechádzka ružovou záhradou. Snažte sa teda využívať efektívnych ciest a vyhnite sa veciam, ktoré vás obmedzujú a sťažujú vám prácu.
Existujú tiež takzvané CSS / front-end frameworky, ako napr. Bootstrap alebo Foundation, ktoré vám (okrem iného) môžu pomôcť k jednoduchému responzivnímu dizajnu - hľadajte grid systém.
