Aký je to responzívny web?


  • Zdieľať na Google+

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.

Komentáre

  • kapu
    Odpovedať
    Autor
    kapu

    sikovna vec na testovanie je http://www.responsinator.com

  • Viliam
    Odpovedať
    Autor
    Viliam

    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é…

    • Tomáš Líška
      Odpovedať
      Autor
      Tomáš Líška

      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 ?

  • Stano
    Odpovedať
    Autor
    Stano

    Vo firefoxe je dobra skratka na testovanie rozliseni CTRL+SHIFT+M
    Inak dobry clanok 🙂

    • SNiPI
      Odpovedať
      Autor
      SNiPI

      Pekneeee 🙂

    • Viliam
      Odpovedať
      Autor
      Viliam

      perfektné.. 🙂

  • LacKo
    Odpovedať
    Autor
    LacKo

    no neschval to 🙂

  • Filip
    Odpovedať
    Autor
    Filip

    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

    • Tomáš Líška
      Odpovedať
      Autor
      Tomáš Líška

      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.

      • MiChAeLoKGB
        Odpovedať
        Autor
        MiChAeLoKGB

        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/

  • Martin Adamko
    Odpovedať
    Autor
    Martin Adamko

    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.

  • Marko
    Odpovedať
    Autor
    Marko

    Dalsia sikovna vec na testovanie: http://cybercrab.com/screencheck/

  • McDan Evan
    Odpovedať
    Autor
    McDan Evan

    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 …. :'(

    • WebSupport
      Odpovedať
      Autor
      WebSupport WebSupport

      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.

  • McDan Evan
    Odpovedať
    Autor
    McDan Evan

    Vdaka Tomas, urcite SAAS /Software as a service/ suvisi s temou….

  • Attila
    Odpovedať
    Autor
    Attila

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

    • Tomáš Líška
      Odpovedať
      Autor
      Tomáš Líška

      Ahoj, konkretne optimalizacii pre retinu ako aj viac zlozitejsim tipom sa budem venovat v pokracovaniu tohto blogu.

  • TheRiseAgainst
    Odpovedať
    Autor
    TheRiseAgainst

    Ja by som len podotkol ze spravny vyraz je Mobile first a nie First mobile 🙂

    • Tomáš Líška
      Odpovedať
      Autor
      Tomáš Líška

      Mas pravdu, dakujem za pripomienku opravim.

  • ja
    Odpovedať
    Autor
    ja

    je tam maly preklep: Boostrap => Bootstrap

  • Nová webstránka SSS | Slovenská speleologická spoločnosť
    Odpovedať
    Autor
    Nová webstránka SSS | Slovenská speleologická spoločnosť

    […] je  responzívna a tak by sa mala zobrazovať optimálne pre všetky zariadenia od stolových počítačov až po […]