Responsive design je v poslednej dobe je tak omieľaný trend, že o ňom hovorí pomaly aj moja babka. V zásade ide o fajn koncept. Namiesto kódenia a udržiavania niekoľkých samostatných verzií stránky (normálnej desktopovej verzie a mobilnej verzie) sa spraví jedna s pár dodatočnými informáciami, vďaka ktorým sa stránka prispôsobí akémukoľvek (rozumnému) rozlíšeniu. Od mobilu až po FullHD display.

Otvorte si demo, pohrajte sa so šírkou prehliadača a hneď pochopíte.

Skôr, ako prejdem ku konkrétnemu kódu, by bolo vhodné povedať, prečo uprednostniť responsive design pred starším trendom mobilných verzií.

Nuž. V ideálnom prípade stačí responsive design vytvoriť pridaním pár riadkov CSSka, v horšom aj pár riadkami JavaScriptu (tj. robota na pár hodín). Mobilná verzia je proste iná verzia generovaná serverom. Čiže má samostatné HTML, CSS a zrejme aj JavaScripty. Ak chcete niečo pridať, musíte prepisovať obe verzie.

Mobilné verzie sa často nachádzajú na inej adrese (napríklad http://m.nieco.com/clanok), takže keď niekto z mobilu zdieľa link a vy si ho otvoríte na desktope, vybehne na vás škaredá roztiahnutá mobilná verzia.

Výhodou responsive designu je aj to, že môže mať ľubovoľne veľa variánt (napríklad varianta pre menej ako 960px, menej ako 500px, menej ako 400px, menej ako 320px, atď.), ktoré sa dokážu za chodu meniť (napríklad pri otočení zariadenia naležato). Mobilná verzia je iba jedna.

Tým, že prispôsobivé stránky upravujú pôvodný vzhľad, zväčša je aj dizajn konzistentný s originálom. Možno je to detail, ale podstatný. Ak je človek zvyknutý na plnohodnotnú verziu, silne ho naserie, keď sa niektoré features presunú na nečakané miesto alebo dokonca zmiznú. To je situácia kedy hľadám prepínač normálnej verzie.

Veľmi populárny plugin WPtouch je príkladom anti-responsive dizajnu. Chudákom na mobilných zariadeniach podstrkuje niečo úplne iné ako vidia návštevníci stránky na desktopoch. A aby nebolo málo, ešte aj zbalí všetky články tak, že vidieť len nadpisy. Z hľadiska použiteľnosti je to strašné. V praxi vyzerá WPTouch takto: http://m.bgr.com vs. pôvodná verzia http://bgr.com.

Existujú aj horšie mobilné verzie, z takých známejších je Guardian (normálna vs. mobilná verzia) alebo z našich končín iMHD (normálna vs. mobilná verzia. V mobilnej verzii iMHD sa za toho boha sa neviem zorientovať. Ešte aj vyhľadávacie chlieviky sa volajú každý inak ("Spojenie - odkiaľ, kam" vs "Plánovač cesty - štart, cieľ").

Naopak príkladom dobrej mobilnej verzie je sieť lifehacker/gawker/kotaku/io9/... Tú si na desktope ani nepozriete, lebo automaticky presmerováva. Rozloženie takisto zostáva logické a konzistentné s veľkou verziou. Ale vráťme sa k responsive designu.

Choose your destiny

K vývoju prispôsobivých stránok sa dá pristupovať z dvoch smerov:
"Desktop first" - ako prvá sa vytvorí "veľká" desktopová verzia a postupne ju upravujeme pre nižšie rozlíšenia.
"Mobile first" - začína pri malej mobilnej verzii a postupne rozširuje vzhľad (tzv. progressive enhancement).

Druhý spôsob je teoreticky lepší - na najshitnejšom mobilnom zariadení sa zobrazí základná verzia a čím lepšie zariadenie a prehliadač, tým vymakanejšia verziu dokáže zobraziť. Design takisto začína od mobilnej verzie a postupne sa rozširuje.

Prax je ale iná. Paradoxne lacné Androidové prdítko má oveľa lepší prehliadač ako veľké PCčko, na ktorom beží obávaný... áno.. Internet Explorer. Toto ale vieme čiastočne ošetriť polyfillmi, omnoho väčší problém je, že dizajnéri takto nefungujú. Keď im budete zväzovať ruky, dostanete naprd dizajn. A to bude asi dôvod prečo som nevidel "mobile first" stránku, ktorá by vizuálne za niečo stála.

Let's build some responsive shit

Základom responsive designu sú media queries. Veľmi jednoduchá a účinná vec - media query je blok CSSka, ktorý sa použije len za určitých podmienok (napríklad ak je šírka obrazovky menšia alebo rovná 600 pixelov).

/* v desktopovej verzii máme položky menu vedľa seba */
ul.menu li {
	float: left;
}

/* MEDIA QUERY - v mobilnej verzii roztiahnuté a pod sebou */
@media (max-width: 600px) {
	ul.menu li {
		float: none; width: 100%;
	}
}

/* Media queries môžeme aj kombinovať*/
@media projection and (min-width: 400px) and (max-width: 700px) {
	…
}

Ak by vás zaujímalo aké parametre sa dajú používať v media queries, kuk do špecifikácie. V praxi sa používa viacmenej len min-width a max-width.

Šírka sa z nejakého divného dôvodu ráta aj SO scrollbarom. Keďže samotný obsah siaha len po scrollbar a keďže scrollbar má na každej platforme inú šírku, je to veľmi nezmyselné. Na mobilných zariadeniach je našťastie šírka scrollbaru vždy 0, takže sa nad tým ani nemusíme zamýšľať. Sranda je, že Webkitové prehliadače počítajú šírku bez scrollbaru, takže lepšie kopírujú správanie mobilných zariadení.

A teraz prichádza prevelice dôležité CSS pravidlo, ktoré sa málokde spomína. Ladies and gentlemen... box-sizing.

box-sizing: border-box;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;

Základné správanie CSS je definovať širku/výšku obsahu a paddingy + bordery pripočítať navyše (content-box). Ak by sme chceli vedľa seba dať 2 stĺpce, každý so šírkou 50% a paddingom 20 pixelov, v CSS2 máme problém. Vždy by prečnievali od šírku paddingu/borderov.

Tento problém by sa dal obísť jedine neelegantným špinením HTMLka obaľovacími elementami. V CSS3 môžeme vďaka border-box-u definovať šírku kompletne celého elementu (border-box). Využitie ste mohli vidieť v deme (lišta s menu).

CSS3 je ďalší dôvod prečo sa vydať cestou "desktop first". Pre retardované prehliadače (IE8 a nižšie) sa budú používať fixné veľkosti a pre moderné prehliadače môžme prostredníctvom media queries doplniť CSS o vylepšenia a napríklad cez border-box ľahko vyrobiť fluidné/percentuálne layouty. V media queries môžeme rátať s tým, že prehliadač pozná :before, :after, :last-child a kopu užitočných CSS3 vecí, bez ktorých by sa responsive design robil ťažšie.

Toto je v podstate všetko čo treba vedieť k robeniu responsive stránok. Skoro.. ešte treba myslieť na to, že stránky optimalizujeme pre...

...mobilné zariadenia

Responsive design je cielený na mobilné zariadenia a tie majú isté špecifiká, ktoré treba dodržať, aby sa stránka vôbec správala prispôsobivo. Napríklad iPhone má predvolenú širku okna 980px a treba mu povedať, aby použil svoje reálne rozlíšenie. Dobrou praktikou je zakázať zoomovanie, ktoré je pri "natívnom" rozlíšení zbytočné a mohlo by k nemu nedopatrením dôjsť. Dosiahneme to vložením nasledovného kódu do hlavičky HTML dokumentu.

<meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;">

width=device-width je magický parameter, ktorý nastaví "natívne" rozlíšenie. V úvodzovkách natívne preto, lebo nové iOS zariadenia s retina displejmi nenastavia reálne dvojnásobné rozlíšenie (640px), ale pôvodné (320px).

Čo sa týka minimálnej šírky, kľudne môžete rátať s tým, že 320 pixelov máte určite k dispozícii. Ancientné telefóny s menším rozlíšením aj tak nepoznajú media queries.

A posledná rada, je dobré zakázať automatickú optimalizáciu veľkosti textu a nastaviť ho ručne.

<style type="text/css">
html {
	-webkit-text-size-adjust: 100%;
	-ms-text-size-adjust: 100%;
}
</style>

Pre inšpiráciu, ako vyzerajú responsive stránky, na http://mediaqueri.es/ je pekná a obsiahla galéria.