Responzívny web je taký, ktorý sa vie automaticky prispôsobiť zariadeniu, na ktorom je zobrazený. Toto riešenie prináša so sebou veľké množstvo výhod, no vytvorenie takejto webstránky je časovo náročnejšie ako klasická verzia.
Jednou z hlavných výhod tohto riešenia je, že odpadá potreba riešiť separátne HTML pre mobilnú verziu stránok a môžeme zvýrazňovať prvky, ktoré sú pre užívateľov na konkrétnom zariadení dôležité. V opačnom prípade vypustiť tie, ktoré dôležité nie sú.
Ako na to?
Najjednoduchší spôsob, ako riešiť responzívny web, je využiť niektorý z CSS frameworkov, ktoré ponúkajú veľa funkcií, majú pripravené responzívne prvky a je ich možné škálovať podľa toho, čo na konkrétnej stránke využijeme. Medzi najznámejšie frameworky patria Twitter Boostrap a Foundation. Na otázku, ktorý z nich je lepší, neexistuje jasná odpoveď. Stačí si troška pogoogliť a je jasné, že každý má iného favorita. Osobne používam práve Twitter Bootstrap.
Pri responzívnom dizajne využívame vo veľkej miere media-query, cez ktoré môžeme určiť, ktorý obsah zobrazovať na akom zariadení (podľa veľkosti).
Príklad media query: @media (max-width: 768px) { … }
Ako úplne prvú vec pri začiatkoch s responzívnym dizajnom vám odporúčam vytvoriť si najprv v novom projekte Grid, ktorému nastavíte pravidlá. Tento Grid nám neskôr umožní rýchlejšiu tvorbu podstránok a zaručí, že sa layout bude správať rovnako na všetkých podstránkach. Spomínané frameworky obsahujú prepracovaný Grid systém s pravidlami správania pre jednotlivé zariadenia.
Mobile first a optimalizácia
Pomerne nová technika vytvárania responzívnych webov je mobile first. Už samotný názov naznačuje, že začíname kódiť web len pre mobilné telefóny. Dôvod, prečo existuje aj tento spôsob kódovania, je jednoduchý. Keď si prezeráme webstránky cez mobil, zvyčajne nie sme pripojení na wifi sieť, ale ideme cez dátové balíčky mobilných operátorov. Tie nie sú zrovna najlacnejšie a najrýchlejšie (pomer cena/výkon). Pri mobile first píšeme CSS pre mobil a jeho vlastnosti overridujeme pre zariadenia iných veľkostí (tablet, notebook, desktop).
Príklad mobile first kódu:
/* Malý obrázok pre mobil */
.moj-obrazok { background: #fff url(‘mobilny-obrazok.png’) no-repeat; }
/* Obrázok pre defaultnú verziu (viac ako 768px) */
@media (min-width: 768px) {
.moj-obrazok { background: #fff url(‘obrazok.png’) no-repeat; }
}
Takto docielime, že sa nám renderuje len malá časť kódu, menšie obrázky atď., a len v prípade, že spĺňame podmienku (min-width: 768px), načítavame zvyšok CSS.
Ako si efektívne otestovať svoj responzívny dizajn?
Pri testovaní responzívneho dizajnu sa vám určite zíde nástroj, ktorý zmenší okno webového prehliadača tak, aby bola veľkosť stránky rovnaká ako na zariadení, ktoré chcete testovať. Pre Google Chrome je to napríklad Window Resizer. Na komplexnejšie testovanie v rôznych prehliadačoch, zariadeniach a rozlíšeniach však odporúčam Browserstack.com.
Ak máte skúsenosti s tvorbou responzívneho webu, podeľte sa s nami o vaše skúsenosti v komentároch.
21 odpovedí na “Aký je to responzívny web?”
sikovna vec na testovanie je http://www.responsinator.com
Hmm, dik za zhrnutie,
musím ale zareagovať, že „first-mobile“ technika mi príde divný trend (samozrejme nepočujem to prvý krát), pretože napriek obrovskému nárastu používania webu mobilmi (a tento trend sa bude určite zvyšovať do závratných čísel) primárny bude ešte dlho desktopový, pretože aj keď bude mať menší objem prehliadania, to čo je pre väčšinu webov dôležité – nákupy, alebo konverzie budú mať ešte dlho prevahu desctop. A preto prispôsobovať najskôr robiť mobil a jemu potom prispôsobiť decstop mi príde divné…
Mas uplnu pravdu, ze primarny bude este dlho desktop. Preco ale neusetrit uzivatelom par MB zbytocne stahovanych dat a par sekund casu pri ich nacitavani, ked sa to da docielit, len zmenou zapisu CSS ?
Vo firefoxe je dobra skratka na testovanie rozliseni CTRL+SHIFT+M
Inak dobry clanok 🙂
Pekneeee 🙂
perfektné.. 🙂
no neschval to 🙂
Zdravim, pekny clanok.
Mam otazku, ak poznate odpoved, budem Vam velmi vdacny
Ak by som poupravil Vas kod pre nacitanie maleho obrazku na takyto kod, ako je dole uvedeny:
/* Malý obrázok pre mobil */
.moj-obrazok { background: #fff url(‘obrazok.png’) no-repeat; width=“300px“ height=“150px“}
/* Obrázok pre defaultnú verziu (viac ako 768px) */
@media (min-width: 768px) {
.moj-obrazok { background: #fff url(‘obrazok.png’) no-repeat; }
}
Nacitany maly obrazok ma urceny width aj height. Tym padom sa zobrazi ako zmenseny obrazok, ale ako sa zachova velkost nacitaneho .png obrazku? Bude zmensena, alebo to na to nema vplyv?
Dakujem
Ahoj,
neviem ci som uplne pochopil otazku, ale skusim odpovedat.
V priapde ze si upravis zapis width a height tato velkost bude pouzita aj na ostatnych zariadeniach. Bud das velkost do samostatnem media query len pre telefon, alebo ju na ostatnych zariadeniach overridnes.
On sa pytal na to, aky velky bude nacitany obrazok.
Ten zostane rovnako velky nech mu das width a height akykolvek, len zobrazeny bude vo velkosti aku chces.
Snad som to napisal ako tak zrozumitelne 😀
Ps, na testovanie rozliseni pouzivam:
http://www.mattkersley.com/responsive/
Ja by som len dodal, že mobile-first podľa mňa nie je len o veľkosti dát. Pre mňa ako dizajnéra výrazne ovplyvňuje o výsledný experience užívateľov. Keď navrhujem web týmto smerom, všimol som si, že aj uvažujem inak. A mnohokrát lepšie (niečo ako lean thinking verzia lean startupu): od jednoduchšieho k zložitejšiemu, od potrebného obsahu k extra obsahu atď. Výsledkom je jasnejší „message“ stránky lebo idem viac po „koreni veci“ a nemám toľko miesta na zbytočnosti.
Dalsia sikovna vec na testovanie: http://cybercrab.com/screencheck/
Je pekne & trendove zaujimat sa o resposive design 😉 ale tento „výPLod“ ma urazil ako plytkosťou záberu moderátora, tak aj reakciami publika, ChYo WebSupport, kedy uz ma konecne prestanu budit SMSky o nedostupnosti Vami hostovanych domén? Staci zrusit monitoring, viem, alebo vypnut SMS oznamenia, alebo na noc vypnut mob. ako to robia vsetci slusni ľudia, alebo poskytovat standardne Cloud sluzby… ale Vy > responsive > Twitter Bootstrap …. :'(
Tomáš sa v blogposte venuje úvodu do tvorby responzívneho dizajnu a preto je pre úplne inú cieľovú skupinu. Ak je tvoj pohľad na tento blogpost taký, ako si uviedol, tak si v pokročilom štádiu štúdia a tvorby responzívneho dizajnu, čo nás veľmi teší. Odbornejšie sa budeme venovať responzívnemu dizajnu v nasledujúcich blogoch.
Vdaka Tomas, urcite SAAS /Software as a service/ suvisi s temou….
Ja by som podotkol ešte dôležitý media queries a to s podmienkou na pixel density. Mobily majú najnovšie FullHD displej na 4″ až 5 palcoch, nehovoriac o najnovších vychytávkach, a to Retina displejoch. Ak by som používal len pixel-width, tak nenastavým optimálnu veľkosť fontov pre každé zariadenie a užívateľ by musel zoomovať, aby si vedel obsah pohodlne prečítať.
Ahoj, konkretne optimalizacii pre retinu ako aj viac zlozitejsim tipom sa budem venovat v pokracovaniu tohto blogu.
Ja by som len podotkol ze spravny vyraz je Mobile first a nie First mobile 🙂
Mas pravdu, dakujem za pripomienku opravim.
je tam maly preklep: Boostrap => Bootstrap
[…] je responzívna a tak by sa mala zobrazovať optimálne pre všetky zariadenia od stolových počítačov až po […]