webrebel html css javascript laravel oop php mysql wordpress kurz

Ako na responsive design

napísal , 10 Apr 2012 [ CSS HTML ]

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.

Š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.

napísal , 10 Apr 2012

9 komentárov

komentuj
  1. tomix [ Utorok 10.4.2012, 15:49 ]

    Pekny clanok, ja mam iba velku dilemu ci nasadzovat CSS3 vo velkom (hoci osobne by som velmi rad), ale zial vela ludi pouziva este stale stare verzie IE ako je IE 7,8.

  2. yablko [ Utorok 10.4.2012, 16:05 ]

    na drobnosti v pohode
    nikto o nič nepríde, kopa niečo získa

  3. 81403 (blade) [ Utorok 10.4.2012, 16:36 ]

    tomix: určite áno

    Treba si dávať pozor, aby sa v IE nerozpadol základný layout a dekoratívne veci môžu kľudne chýbať. Aspoň majú ľudia dôvod prejst na normálne prehliadače. Prípadne skúsiť štastie s polyfillmi ako je http://css3pie.com/
    http://modernizr.com/ je tiež veľmi užitočný.

    Môj workflow je asi taký, že spravím normálnu CSS3 verziu (s pár obmedzeniami - bez :before, :after, border-box) a keď je hotová, idem hasiť oheň v IE.. a funguje to. Posledný projekt čo som robil má animácie, transitions, transformácie, multiple backgrounds, oblé rohy, tiene a rgba farby.. všetko CSS3 features a stránka je bez problémov použiteľná aj v IE7 :)

    IE6 je v dnešnej dobe už celkom bezpečné ignorovať.

  4. yablko [ Utorok 10.4.2012, 16:46 ]

    ad pekné "mobile first" stránky: http://jonikorpi.com/leaving-old-IE-behind/ táto je fajn

    a s tým zväzovaním rúk dizajnérom by som tiež nie vždy súhlasil: nejaké tie mantinely zvyknú občas pomôcť; bez nich sa môžu kompletne odtrhnúť z reťaze a spraviť niečo nepoužiteľné.. ale tak záleží od situácie a mantinelov a dizajnérov a všetko toto..

    box-sizing: border-box; je zaujímavá záležitosť (teda ak považujete nudné veci za zaujímavé;) ), pretože to paradoxne imituje staré IEčka - tie paddingy k veľkosti elementu nepripočítavali, čo je v rozpore so špecifikáciou, ale je to správne! pretože je ;)

  5. tomix [ Utorok 10.4.2012, 23:44 ]

    81403 (blade): Dobre vyskusam viac nasadzovat CSS3, aj ked moja "produkcia" je viac orientovana na webaplikacie a intranet a design je v tomto "volitelny doplnok",kazdopadne zacinam aj robit pomale pokroky aj v ramci webdesignu a pohlad na moznosti, ktore CSS3 poskytuje mi tak mi v hlave doslova exploduju napady ;-)...

  6. 81403 (blade) [ Streda 11.4.2012, 14:31 ]

    yablko: Hento som čítal a je to super myšlienka, ale možno príliš idealistická. V takej zjednodušenej forme, ako je podaná, by samozrejme fungovala (čiže čisto len na layout).
    No na stránke máš kopu elementov, ktoré potrebuješ zobraziť v ktorejkoľvek verzii (napríklad ako je tento komentár) a tie si nemôžeš dovoliť štýlovať cez CSS3 atribúty ako :after. V IE by sa rozpadli.

  7. yablko [ Streda 11.4.2012, 15:01 ]

    mne teraz nešlo o myšlienku ale o výzor.. si povedal, že si "nevidel mobile first stránku, ktorá by vizuálne za niečo stála" a ja hovorím, že tamtá vyzerá fajn

  8. snow [ Nedeľa 9.2.2014, 19:09 ]

    ahoj yablko,
    celkom by ma zaujimalo co si myslis o css frameworkoch v ktorych je uz responsibilita zaclenena.
    velke - foundation, bootstrap, skeleton ...
    alebo na mensie veci ako pure a vela dalsich.
    Pouzivas nejaky ? Ak ano, aky ?

  9. Vašek [ Sobota 15.2.2014, 21:38 ]

    Díky za věcný a stručný návod. Ode dneška jen responsive design! :-) Moc se mi líbí tvůj styl psaní, málokdy se u podobných článků člověk zasměje, což se mi tady podařilo několikrát. SUPER!