responsive-design

Susipažinkite – responsive dizainas!

Kas yra responsive dizainas?

Responsive dizainas

Pastaruoju metu vis dažniau išgirstame terminą „responsive design“. Kas yra tas responsive dizainas? Paprastai kalbant, tai dizaino būdas, kuriuo dizaineris kuria internetinį puslapį. Tokiu būdu sukurta svetainė reaguoja – mažėja arba didėja – priklausomai nuo to, kokio tipo įrenginys naudojamas. Tai gali būti milžiniškas stacionaraus kompiuterio monitorius, nešiojamas kompiuteris, 10 colių planšetinis kompiuteris ar mobilusis telefonas – jums nereikės keletos atskirų svetainių skirtingiems prietaisams, responsive dizainas prisitaikys prie kiekvieno įrenginio ekrano dydžio ir svetainė atrodys gerai. Lietuviškai responsive dizainą galima pavadinti prisitaikančiu arba adaptyviu dizainu.

Resonsive dizainas 2013 metais tapo „paskutiniu mados klyksmu“ ir šio prisitaikančio dizaino populiarumas nenustoja augti. Manoma, kad šiuo dizainu kuriamų svetainių vis daugės, nes milžiniškais tempais auga žmonių, naršymui internete naudojančių išmaniuosius telefonus bei planšetinius kompiuterius, skaičius.

Kaip atrodo responsive dizainas?

responsive web dizainas Responsive dizaino paskirtis – vienas tinklapis, bet su skirtingais elementais, kurie reaguoja skirtingai, priklausomai nuo to, kokių išmatavimų prietaiso, kuriuo atidaromas puslapis, ekranas. Pavyzdžiui, imkime įprastą, tradicinį (ne responsive) puslapį. Kai atidarome tokį puslapį kompiuterio ekrane, matome į tris kolonas suskirstytą puslapį, bet jei atidarysime tą patį puslapį su planšetiniu kompiuteriu, neišvysime to paties vaizdo, reikės „scrollinti“ horizontaliai, kad pamatytumėme turinį, esantį dešinėje. Gali būti, kad kai kurių elementų nerodys apskritai arba rodys sudarkytus. Dažnas puslapio lankytojas, išvydęs tokį vaizdą, susierzina. Reikia turėti omeny, kad situacija vėl keičiasi, kai vartotojas nusprendžia naršyti po tą patį puslapį planšetę laikydamas vertikaliai (didžioji dauguma planšetinių kompiuterių turi landscape view funkciją). Dar didesnių problemų gali kilti, bandant tokį puslapį atversti mobiliuoju telefonu. Dideli paveikslėliai gali iškraipyti puslapio išdėstymą, jeigu puslapyje daug grafikos, jis veiks lėtai. Situacija visiškai kitokia, jei internetinė svetainė naudoja responsive (prisitaikantį) dizainą. Atidarius svetainę planšetiniu kompiuteriu, trys kolonos automatiškai susiskleistų į dvi kolonas taip, kad būtų patogu skaityti ir ieškoti informacijos. Išmanusis telefonas tokią svetainę atverstų išdėstytą vienoje kolonoje vertikaliai. Paveikslėliai sumažėtų tiek, kiek reikia, neiškraipydami išdėstymo. Internetinė svetainė su responsive dizainu automatiškai prisitaiko priklausomai nuo prietaiso, kurį naudojate jai peržiūrėti.

Kaip veikia responsive dizainas?

Responsive dizainas naudoja fluid grid sistemą. T.y. visi svetainės elementai matuojami proporcijomis, o ne pikseliais. Taigi jei Jūsų puslapyje yra trys kolonos, Jūs turite nustatyti, kokio pločio jos bus. Tik plotis matuojamas santykinai su kitų kolonų pločiu. Pavyzdžiui, pirma kolona užims 50% puslapio, antra – 30% ir trečia – 20%. Paveikslėliai, video ir kiti elementai taip pat pakeičiami santykinai.

Responsive dizaino specifika

responsive dizainas telefone Pelė prieš piršto paspaudimą: stacionaraus ar nešiojamo kompiuterio naudotojai ekrano pasirinkimams paprastai naudoja pelytę, o planšetiniame kompiuteryje ar išmaniajame telefone naudotojai dažniausiai naudoja paspaudimą pirštu. Kas atrodo paprasta su pele, gali tapti neįmanoma naudojant „touch screen“, pavyzdžiui, paspausti mažytę nuorodą ekrano viršutiniame kampe. Tai reikėtų apmąstyti prieš kuriant dizainą. Grafika ir perkėlimo (download) greitis: taip pat reikėtų pagalvoti apie grafikos sumažinimą mobiliųjų prietaisų naudotojams (galbūt nerodyti slideshow arba dideles puslapio reklamas pakeisti mažesnėmis ir t.t.). Tai padaryti reikėtų tam, kad puslapis greičiau veiktų. Naudojant responsive dizainą tai padaryti nėra sudėtinga. Aplikacijos ir mobilios versijos (Apps and „mobile versions“): praeityje dažnas galvodavo apie atskiros aplikacijos kūrimą internetinei svetainei. Pavyzdžiui, svetainę specialiai iPad’ui, Androidui arba mobilią versiją BlackBerry. Bet dabar, kai mobiliųjų prietaisų tokia galybė, tampa ypač sunku sukurti programėlę ar mobiliąją versiją kiekvienam prietaisui ir operacinei sistemai. Sprendimas – responsive dizainas. Toks lankstus ir prisitaikantis, kad gali būti naudojamas ir puikiai atrodys kiekviename mobiliajame įrenginyje.

Kodėl verta rinktis responsive dizainą?

Vis daugiau ir daugiau žmonių naršydami internete naudoja mobiliuosius įrenginius. Per dieną Lietuvoje nuperkama daugybė išmaniųjų telefonų ir planšetinių kompiuterių. Jeigu turite savo interneto svetainę, įdomumo dėlei patikrinkite, kiek žmonių jūsų svetainę aplanko naudodami mobiliuosius įrenginius – skaičiai gali jus nustebinti. Eikite į Google Analytics, pasirinkite all web site data→auditorija→mobiliesiems. Taip pat galite stebėti, kokį tiksliai mobilųjį įrenginį naudoja svetainės lankytojas. ZuZuweb.lt specializuojasi kurdami responsive dizainą, kreipkitės į mus ir mes patarsime visais svetainės kūrimo klausimais.