2010 aisiais įvyko lūžis, daugiau internetinių svetainių lankytojų pradėjo jas pasiekti mobiliuosiuose įrenginiuose, nei stacionariuose. Tuomet internetinių svetainių dizaineriai turėjo du pasirinkimus, sukurti keletą to paties dizaino, kelių fiksuotų dydžių ir išdėstymų versijų , arba dirbti prie vieno, lankstaus dizaino, kuris galėtų išsiplėsti, susitraukti ir būti išdėstytas priklausomai nuo naudojamo prietaiso dydžio (prisitaikantis dizainas). Organizacijoms ir svetainių kūrėjams buvo sunku nepastebėti prisitaikančio dizaino naudos. Vietoje to, kad dirbti su absoliučiais vienetais, tokiais, kaip pvz. pikseliai, skirtingose versijose, kūrėjai galėjo skirti dėmesį vienam dizainui, kuris leidžia turiniui, tarsi skysčiui, laisvai judėti ir užpildyti visas ertmes.
Sukūrus puslapį, norime pasiekti didžiausią įmanomą auditoriją, todėl jis turi atrodyti gerai kiekviename įrenginyje. Nesvarbu koks gražus, informatyvus ar modernus bus jūsų internetinis puslapis, jei jis tam tikruose įrenginiuose praras savo funkcionalumą, pavyzdžiui, lankytojas nematys dalies teksto ar paveikslėlio. Taip pat svetainės lankytoją galima prarasti ilgalaikėje perspektyvoje, jei nors ir visi svetainės elementai ir matysis, tačiau bus nepatogiai pasiekiami, kaip pavyzdžiui, jei puslapį slinkti reikės keliomis kryptimis, ne tik vertikaliai, kaip yra įprasta, vien dėl to, kad informacija nėra praktiškai talpinama į ekraną.
Taip pat nereikėtų pamiršti ir planšetinių telefonų, planšečių, žaidimų konsolių, įvairaus dydžio nešiojamų kompiuterių bei stacionarių monitorių naudotojų, kurie taip pat nori matyti estetiškai patrauklų sukurto puslapio išdėstymą. Pavyzdžiui, telefone turinys gali būti atvaizduojamas viename stulpelyje, kai tuo tarpų planšetėje perskirtomas į du. Turi būti optimizuotas ir išspręstas patogaus naudojimo klausimas tiek tarp paprastą, tiek lietiminį ekraną naudojančių žmonių.
Prisitaikantis dizainas turi tris pagrindinius principus:
Fluid Grid System –Elementai užima tiek pat procentų ekrano, nesvarbu kiek jis padidėtų ar sumažėtų (vartotojas žiūri dizainą skirtinguose įrenginiuose).
Fluid Image Use – Ne taip, kaip tekstas, paveikslėliai nėra natūraliai „užpildantys“. Tai reiškia, kad paveikslėliai išlieka to paties dydžio perkeliant iš vieno dizaino į kitą, todėl reikia specialiomis komandomis pasirūpinti, kad paveikslėliai taptų proporcingi visam likusiam išdėstymui (CSS command—: img {max-width: 100%;}).
Media Queries –Tai yra filtrai naudojami aptikti kokie matmenys yra įrenginio kuriuo naudojamasi, tam, kad dizainas būtų pritaikytas atitinkamai
Keli patarimai kuriant prisitaikantį dizainą:
- Pirmiausia turi būti atsižvelgta į mobiliųjų įrenginių naudotojus.
- Dizainas turėtų būti patikrintas ne mažiau nei trijuose įrenginiuose.
- Kuo dizainas labiau minimalistinis, tuo geriau.
- Prioretizuoti ir labiausiai dėmesį traukiantys turėtų būti būtent internetinio puslapio vartotojui aktualiausi elementai.
- Dėmesį patraukia kontrastai teksto ryškume, dydžiuose.
Apibendrinant, prisitaikantis dizainas svetainės kūrime yra neišvengiamai reikalingas ir itin naudingas funkcionalumas.
“Web design is responsive design. Responsive web design is web design, done right.”
— Andy Clarke, creative director, product & website designer