Responsive Design

Vo webdesigne sú trendy rýchle a vrtkavé, ale niektoré z noviniek sa uchytia tak, že (dobrý) webdizajnér musí razom updatovať svoj skillset. Responzívnosť sa objavila ako pojem možno rôčik dozadu, keď začalo byť nad slnko jasné, že prístup na web z mobilov a tabletov vzrástol natoľko, aby stránky boli nútené zhodiť svoj gridový šat za 960 pixelov a prispôsobiť sa... dobe.

Responzívnosť je ako strečové gate

Teraz je už celkom jasné, že stránky sú zobrazované na monitoroch malilinkých (mobil), stredných (tablet, netbook), bežných (desktop), snáď ale aj obrovských (trebárs v budúcnosti smart telky). Nezávisle od platformy a zariadenia, responzívny interface musí vhodne fungovať na každom screene a device. Však už aj Steve Jobs nám povedal, že dizajn nie je vzhľad, ale chovanie... (vraj to fakt povedal).

Používateľa si treba rozmaznávať! Neposkytnem mu na mobile stránku, ktorú kvôli obrovským ilustračným obrázkom v hlavičke bude načítavať polhodinu. Neposkytnem mu trojstĺpcový text, na ktorý kvôli "zmršteniu" na 320 pixelovom monitoríku nedovidí. A nebudem dúfať, že klikne na menu, ktoré vďaka svojej šírke pretieklo do nenávratna.

V nedávnej minulosti bolo len málo spoločností (nedajbože ešte na Slovensku), ktoré investovali do vývoja mobilných verzií stránok. Ak na to bol rozpočet, väčšinou sa pripravila druhá, naklonovaná a upravená verzia, na ktorú sa stránka presmerovala, keď zistila, že je na ňu pristúpené z mobilného zariadenia.

Responzívne techniky poskytujú inteligentnejšie riešenie - stačí mať jednu webstránku, ktorá je sama o sebe maximálne flexibilná (v podstate sa naťahuje a sťahuje podľa potreby). Jej rozmiestnenie, veľkosť písma a obrázkov sa prispôsobuje s veľkosťou obrazovky, na ktorej je prezeraná. Prehliadače, ktoré sú dnes značne vyvinuté na rôzne experimentátorské techniky, konečne dovoľujú takúto prispôsobiteľnosť ľahko implementovať. Stačí na to CSS3!

Plánovanie & príprava

Všetko to začína pri počiatočnom plánovaní štruktúry webu. Je potrebné tvoriť wireframy a sketche a hlavne ujasniť si dôležitosť obsahu - ktorá sekcia sa kde na tom a tom zariadení prehodí. Čiže je to všetko o prispôsobiteľností sekcií obsahu. Väčšinou moderne responzívne webstránky je možné otestovať tak, ze chytíte okno prehliadača a zmenšujete ho hore-dole; tam sa ukáže, ako sa obsah pri rôznych šírkach inteligentne prehadzuje a stránka prispôsobuje svoju veľkosť.

Štandardom mnohých dizajnérov pri príprave je nakresliť si niekoľko rôznych chlievikov (odpusťte mi, že použijem iProdukty ako príklad): iPhone na ležiaka, iPhone na stojáka, iPad na ležiaka, iPad na stojáka a štandardná šírka desktop monitora.

Keď sa všetky obsahové elementy stránky rozvrhnú do jednotlivých chlievikov tak, aby stránka na každej šírke dýchala a bola čitateľná, na svete je responzívny dizajn.

Media Queries

Či už kóder zvolí techniku zdola hore (CSS sa začína tvoriť prvotne pre najmenšiu obrazovku) alebo naopak (zo štandardnej veľkosti sa pomocou media queries upravuje smerom k nižším), hlavnú úlohu zohrávajú media queries.

Media queries sú pravidlá v CSS súbore, ktoré upravujú pôvodné pravidlá na základe istých vlastností (väčšinou maximálnej alebo minimálne šírky alebo orientácie zariadenia).

Napríklad, ak chcem niečo upraviť pre iPhone so šírkou maximálne 480px, do CSS pridám:

@media screen and (max-width: 480px) {
  .column {
    width: 100%;
    float: none;
  }
}

Môžem určiť aj rozmedzie šírok obrazovky (samozrejme každý dizajn bude mať iné čísla a iné hodnoty):

@media screen and (max-width: 699px) and (min-width: 520px) {
  .text {
    font-size: 1.4em;
  }
}

Do hlavičky HTML súboru nesmieme zabudnúť pridať:

meta name="viewport" content="width=device-width, minimum-scale=1.0, maximum-scale=1.0">

aby sa na malých obrazovkách stránky nenačítali v štandardnej "autoscale" veľkosti, ale aby sa prispôsobili rozlíšeniu zariadenia.

Media queries sú podporované všetkými modernými prehliadačmi. IE < 9 ich nepoznajú, no keďže tieto staré prehliadače na mobilných zariadeniach nie sú používané, neprekáža to nikomu.

Špecifikácia W3C pre zvedavých (pretože čítať špecifikácie je príjemná aktivita každého dňa): http://www.w3.org/TR/css3-mediaqueries/#media1

Odporúčané inšpirácie

Galérie nádherne vypracovaných responzívnych stránok:

• http://mediaqueri.es/
• http://www.awwwards.com/tag/responsive-design