spájame
slovenskú
IT komunitu
pridaj sa
Registrácia · Login

Darina Tyrpáková 2.7.2012
Hodnoť článok:
27 1

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:

Darina Tyrpáková Darina Tyrpáková

Jeden múdry muž mi raz povedal: "už sa toľko nesnaž, už dačo zrob!" a odvtedy sa už nesnažím.


Hodnoť článok:
27 1

4 komentáre k článku:

Komentovať môžu iba prihlásení

Zaregistruj sa cez bezplatnú registráciu alebo použi login cez Facebook (FB Connect)

Prihlás sa tu, ak už máš profil na Zajtra.sk:


Zabudol som heslo

0 0 We@st 16.2.2013 09:25:54
Konečne to niekto vykvákal von :)
0 0 Dušan Pirošík 4.7.2012 22:29:48
Tento článok ma zaujal a dúfam že mi to pomôže do budúcna.

Nemá niekto náhodou v pdf verzií tú knižku od Ethana Marcotte-a "Responzive web design" v čestine alebo slovenčine?
1 0 xKing.Bearx 4.7.2012 07:50:03
Konecne zas clanok, ktory nehovori velke hovno. Uz som myslel, ze to tu je uplne mrtve co sa tyka useful informacii. Naprikad media queries som nepouzival doteraz, ked som robil responsive web, tak som to spravil pomocou adaptive gridu (respektive, pouzil som vlastny grid, ale Adapt.js od toho typka co robi 960gs). Diky. Inak co sa tyka knih o Responsive a tak, mozno su vhodne pre nejakych cisto designerov alebo ludi co robia prototyp a riesia ako sa bude potom implementovat, ale si myslim, ze tieto veci idu tak rychlo dopredu, ze o rok uz bude responsive len nejaky buzzword, ktory frcal minuly rok a vsetky seriozne weby, ktore maju potencial byt pouzivane na inom nez 1024 rozliseni, take daco budu mat.
0 0 Ivan Minárik 3.7.2012 09:50:25
Ja by som odporučil knižku Responsive web design od Ethana Marcotte-a.
Zajtra.sk > Programovanie > CSS/HTML > Responsive Design


Kritika

Vieš ako robiť veci lepšie? Pomôž našim odvážnejším členom a skritizuj im projekty!

Reklama

Seriály zo Zajtra.sk

Reklama