Uute veebilehtede tegemisel on kõigil huulil üks kummaline võõrkeelne sõna responsive. Mida see tähendab ja kas ka vana veebi saab ka selliseks, nagu uus moesõna nõuab?
Kõige lihtsam teada saada, kas sinu koduleht on reponsive ehk seadme ekraanisuurusele kohanduv, on võtta lahti arvuti, avada brauser oma kodulehe aadressil ja siis hakata brauseriakna suurusega mängima. Tiri hiirega akent aina kitsamaks ja vaata, kuidas koduleht käitub. Kui õige pea ilmub brauseriakna alla vasakule-paremale skrollimise riba, on asi selge – pole responsive.
Kui aga kodulehe plokid paigutuvad vastavalt akna suurusele ümber, pildid kohanduvad väiksemaks, menüü hüppab mobiiliekraanile (ja sõrmevajutusele) sobivaks, siis võib kergendatult hingata – koduleht on moodne ja telefonile kohanduv, näitab end ilusa ja kasutajasõbralikuna igasuguse suurusega ekraanidel.
Responsive – millele reageeriv?
Responsive web tähendab Eesti keeles seadme omadustele reageerivat veebi. Tavaliselt võib sel puhul öelda, et veebilehe kujundus on paindlik: kui vaadatakse lauaarvutist, paigutatakse plokid ja tekstid ära nii, et laialt ekraanilt on mugav lugeda. Teine lugu on mobiiliga – sealt vaadatakse veebi reeglina püstipidi ekraanilt ehk laiust on vähe, küll aga saab pikkupidi rohkem vaadata. Seega tuleks mobiili jaoks veeb ümber kujundada.
Mõned aastad tagasi tähendaski see, et tavalisele veebile telliti lisaks mobiilne veeb, mis kujundas kodulehe püstise ekraani järgi ilusaks. Nüüd on ajad muutunud ja üks veeb peab olema nähtav kõigi seadmetega – olgu ekraaniks panoraamne tööjaama-arvuti kuvar, natuke lahjema ekraanipaneeliga sülearvuti või lausa kitsas veel väiksema pikslite arvuga mobiil. Uus aeg nõuab uusi lahendusi ning selliseid veebikujundusi nimetataksegi kohanduvateks, ekraanisuurusele reageerivateks ehkresponsive´iks.
Sisu on nagu vesi
Õige veebilehe sisu on nagu vesi, mis võtab anuma kuju. Anumaks on telefon, tahvel, süle- või lauaarvuti. Miks mitte ka suur nutiteleriekraan. Kõige paremini iseloomustab seda kontseptsiooni Stéphanie Walteri illustratsioon:
Kui kallad vee klaasi, siis see võtab klaasi kuju. Kui kallad vee teekannu, siis see võtab kannu kuju. Samamoodi on veebisisu ja seda näitavate seadmetega. Lihtne.
Kuidas seda teha?
Sellist isekohanduvat kujundust on kohati keerulisem teha ja samas ka lihtsam. Kui vanasti oli veebitegemise üks põhitegevusi slicing ehk valmis kujundatud veebigraafikast tükkide välja lõikamine, et need sisuhalduse plokkidesse ära paigutada, siis nüüd on kujundus muutunud vähese graafikaga lihtsaks ja lakooniliseks, kus on oluline sisu paigutamine kasutaja jaoks võimalikult paremini navigeeritavaks ja nähtavaks. Vähem üles-alla ja paremale-vasakule kerimist ning rohkem nähtavat, vajalikku teksti – nii lihtne see esialgu tundubki.
Veebidisaineri jaoks tähendab see, et kujunduselemente ja plokke ei kirjeldata enam absoluutsete suurustega ehk pikslite hulgaga, vaid pigem protsentides: tekstiveerg peab võtma ekraanist nii palju protsente ning külgmised veerud nii palju. Kui läheb liiga kitsaks, siis rakendatakse uus kujundusmall: näiteks tõstetakse vasakul või paremal sisu kõrval olevad plokid ühte veergu kas enne või pärast sisuosa. Nii ei pea enam vasakule-paremale kerima ja jääb vaid üles-alla liikumine, mis teeb kasutaja jaoks ülevaate veebist väga palju selgemaks.
Samamoodi muutuvad kohanduvas veebis ka pildisuurused. Vanasti arvestas veebitegija kolme-nelja erineva pildisuurusega, mida näidati kas artikli kitsukeses plokis veebi avalehel, siis keskmise suurusega artiklis ning lõpuks üle-ekraani suurusega kas mõnes väljahüppavas pildikastis või eraldi leheküljel. Nüüd suurenevad ja vähenevad pildid sujuvalt sõltuvalt ekraanisuurusest. Ka fotod on kohanduvad ja täidavad kogu ettenähtud ruumi vastavalt ekraani suurusele.
Vana veeb kohanduvaks – kuidas?
Kui koduleht on tehtud juba aastaid tagasi, siis kuidas saaks selle mobiilile kohanduvaks?
Sisuhaldussüsteemis Drupal on selleks olemas spetsiaalsed teemad. Üks võimalus on jätta oma vana veeb alles, kuid tellida (või teha) sellele uus teema, mis on responsive. Drupali kodulehel otsides leiab 340 sellist teemat, millest saab edasi arendada oma veebikujunduse.
Sisuhaldussüsteem Wordpress pakub 1300 teemat, mis vastavad otsingu märksõnale responsive. Valikut on veelgi rohkem. Vajalikud on ka mõned lisamoodulid, mis aitavad veebi ekraanisuurusele kohanduvaks teha.
Sisuhaldussüsteem Joomla pakub samuti versioonide 2.5 ja 3 jaoks sadu responsive kujundusi.
Kõigi vanemate veebidega on olemas ka üks lihtne lahendus: kui paigaldada moodul, mis tunneb ära kitsa ekraani (mobiili), saab suunata vaataja eraldi mobiiliveebi. See on küll vanamoodne lahendus, kuid aitab kõrvale hiilida oma senise veebi kujunduse täielikust ümbertegemisest. Tuleb teha vaid veel üks kujundus mobiilse veebi jaoks.
Responsive – on seda üldse vaja?
Võib ju arvata, et tühja neist mobiiliga vaatajatest, minu veeb on eelkõige arvutitest vaatamiseks ja selle jaoks käib ka senine kujundus, mis ei kohandu ja ei tõsta plokke ümber kitsa ekraani jaoks. Tegelikult on olukord maailmas hoopis teistsugune. Suured riigid Aasias on mobiliseeritud ja seal on sadu miljoneid inimesi, kes kasutavadki Internetti vaid oma mobiilist. Maailmamastaabis võib mobiiliga veebi kasutajate osa ulatuda juba 40 protsendini.
Olgu, see ei puutu palju Eesti kasutajatesse, kuid milline on siinne mobiilist vaatajate protsent? Suurematel Eesti veebisaitidel on see umbes kolmandiku juures. Ligi 25 000 igapäevase unikaalse külastajaga ülipopulaarne Eesti veebileht Looduskalender.ee saab 80% külastustest nii-öelda arvutitest (lauaarvutid ja sülerid), seega on mobiilsete seadmete kasutamise protsent 20. Ka see on keskmise veebilehe jaoks juba piisavalt suur ja oluline hulk külastajaid, kellega arvestada. Seega ära unusta oma mobiilikülastajaid, tee neile kohandatud (responsive) veeb.
Illustratsioon: Stephanie Walter
Algne artikkel avaldati Geenius.ee lehel meie blogis.
