Kogu maailmas kasutatakse miljoneid seadmeid, alates tahvelarvutitest kuni telefonide ja lõpetades suurte lauaarvutitega. Seadme kasutajad soovivad, et nendes seadmetes saaksid samu veebisaite sujuvalt vaadata. Tundlik veebisaidi kujundus on lähenemisviis, mida kasutatakse selleks, et tagada veebisaitide vaatamine kõigi ekraanisuurustega, olenemata seadmest.
Mis on tundlik veebisaidi kujundus?
Tundlik veebidisain on meetod, mis võimaldab veebisaidi sisul ja üldisel kujundusel liikuda ja muutuda vastavalt seadmele, mida selle vaatamiseks kasutate. Teisisõnu, reageeriv veebisait reageerib seadmele ja muudab veebisaidi vastavalt sellele.
Näiteks kui muudate selle akna suurust praegu, liigub ja nihkub Lifewire'i veebisait vastavalt uue akna suurusele. Kui tõstate veebisaidi üles oma mobiilseadmesse, märkate, et meie sisu muudetakse teie seadmele sobivaks veeruks.
Lühike ajalugu
Ehkki muid termineid, nagu sujuv ja paindlik, visati juba 2004. aastal, lõi reageeriva veebidisaini esmakordselt 2010. aastal Ethan Marcotte. Ta uskus, et veebisaidid peaksid olema kavandatud "asjade mõõnale ja voolule", võrreldes staatiliseks jäämisega.
Pärast tema avaldatud artiklit pealkirjaga "Tundlik veebidisain", võttis see termin õhku ja hakkas veebiarendajaid inspireerima kogu maailmas.
Kuidas reageeriv veebisait töötab?
Reageerivad veebisaidid on loodud konkreetsete suuruste kohandamiseks ja nende suuruse muutmiseks, mida nimetatakse ka murdepunktideks. Need murdepunktid on brauseri laiused, millel on konkreetne CSS-i meediumipäring see muudab brauseri paigutust, kui see on konkreetses vahemikus.
Enamikul veebisaitidel on nii mobiilseadmete kui ka tahvelarvutite jaoks kaks standardset murdepunkti.
Lihtsamalt öeldes, kui muudate brauseri laiust, muutes selle suuruse muutmist või mobiilseadmes vaatamist, vastab tagaküljel olev kood ja muudab paigutust automaatselt.
Miks reageeriv disain on oluline?
Oma paindlikkuse tõttu on tundlik veebidisain nüüd mis tahes veebisaidi puhul kuldstandard. Aga miks see nii oluline on?
- Kohapealne kogemus: Tundlik veebidisain tagab, et veebisaidid pakuvad sujuvat ja kvaliteetset kohapealset kasutuskogemust igale Interneti-kasutajale, olenemata kasutatavast seadmest.
- Sisu fookus: Mobiilikasutajate jaoks tagab tundlik kujundus, et nad näevad kõigepealt ainult kõige olulisemat sisu ja teavet, selle asemel, et suuruse piirangute tõttu oleks vaid väike jupp.
- Google'i kinnitatud: Tundlik kujundus muudab Google'i jaoks lehele indekseerimisomaduste omistamise lihtsamaks, selle asemel, et oleks vaja indekseerida eraldi seadmete jaoks mitu eraldi lehte. See parandab muidugi teie otsingumootori asetust, sest Google naeratab veebisaitidele, mis on kõigepealt mobiilsed.
- Tootlikkuse säästja: Varem pidid arendajad looma täiesti erinevad veebisaidid laua- ja mobiilseadmete jaoks. Nüüd võimaldab tundlik veebidisain ühe veebisaidi sisu värskendada paljude vastu, säästes kriitiliselt palju aega.
- Paremad konversioonimäärad: Ettevõtete jaoks, kes üritavad oma vaatajaskonnani jõuda veebis, on tõestatud, et tundlik veebidisain suurendab konversioonimäärasid, aidates neil oma äri laiendada.
- Suurendatud lehekiirus: Veebisaidi laadimise kiirus mõjutab otseselt kasutajakogemust ja otsingumootori asetust. Tundlik veebidisain tagab lehtede laadimise kõigis seadmetes võrdselt kiiresti, mõjutades positiivselt reitingu ja kogemust.
Reageeriv disain reaalses maailmas
Kuidas reageeriv disain mõjutab Interneti-kasutajaid reaalses maailmas? Mõelgem meile kõigile tuttavale teole: veebipood.
Kasutaja võib alustada oma tööotsingut töölaual lõunapausi ajal. Pärast toote leidmist, mille kaalumist nad kaaluvad, lisavad nad selle oma ostukorvi ja asuvad uuesti tööle.
Enamik kasutajaid eelistab enne ostu sooritamist arvustusi lugeda. Niisiis, kasutaja külastab veebisaiti uuesti, seekord kodus tahvelarvutiga, et lugeda toote arvustusi. Seejärel peavad nad oma õhtu jätkamiseks uuesti veebisaidilt loobuma.
Enne kui nad sel õhtul valguse kustutavad, võtavad nad mobiilseadme kätte ja külastavad uuesti veebisaiti. Seekord on nad valmis oma viimase ostu sooritama.
Tundlik veebidisain tagab, et kasutaja saab otsida tooteid töölaualt, lugeda arvustusi tahvelarvutist ja teha mobiilside kaudu sujuvalt viimase ostu.
Muud reaalmaailma stsenaariumid
Veebipood on ainult üks stsenaarium, kus tundlik disain on veebikogemuse jaoks ülioluline. Muud reaalmaailma stsenaariumid hõlmavad järgmist:
- Reiside planeerimine
- Otsite uut kodu, mida osta
- Perepuhkuse ideede uurimine
- Retseptide otsimine
- Uudistele või sotsiaalmeediale järele jõudmine
Kõik need stsenaariumid hõlmavad aja jooksul tõenäoliselt laias valikus seadmeid. See rõhutab reageeriva veebisaidi kujundamise tähtsust.