Nutitelefonist on saanud lahutamatu osa meie igapäevaelust. Üemaailmselt on juba ligi 60% kogu veebiliiklusest mobiilseadmetes. Paljude jaoks on telefonist saanud eelistatud viis internetis käimiseks – see on lihtsalt kiirem ja mugavam, kui arvuti käivitamine.
Siin aga peitub üks huvitav paradoks. Kuigi maailm on mobiilne, näitavad andmed Eesti kohta teist pilti. Statistika kohaselt tehakse Eestis ligikaudu 75% veebiliiklusest endiselt lauaarvutite kaudu ja ligikaudu ainult 24% mobiilsete seadmetega.
Kas see tähendab, et Eesti ettevõtja jaoks ei ole mobiilisõbralik disain niivõrd oluline? Absoluutselt mitte. Põhjus on lihtne – Google kasutab juba ammu “mobiil-eelkõige indekseerimist” (mobile-first indexing). See tähendab, et kodulehe järjestus otsingutulemustes sõltub ka veebilehe mobiilsest versioonist, isegi kui suur osa külastajaid kasutab veel arvutit. Halb mobiilikogemus ei peleta eemale ainult neid kliente, kes telefoni kasutavad, vaid muudab lehe nähtamatuks ka Google silmis. Seega pole küsimus enam „kas“, vaid „kuidas“ teha mobiilisõbralik veebileht.
Seega on kõige viimane aeg oma koduleht mobiilisõbralikuks teha. Kuidas see aga käib? Esitame seitse olulist küsimust ja anname soovitused.
1. Kust ma teada saan, kas koduleht on mobiilisõbralik?
Kõige põhjalikuma ja pideva ülevaate oma veebilehe mobiilisõbralikkusest pakub Google Search Console. Tegemist on veebilehe omanikele loodud Google tasuta teenusega, mis annab detailset infot lehe tehnilise seisukorra ja toimivuse kohta otsingutulemustes.
Search Console menüüst leiab eraldi raporti nimega „mobiilikasutatavus“ (mobile usability). Erinevalt ühekordsetest testidest jälgib see tööriist pidevalt tervet veebisaiti. See tähendab, et kui mõnele lehele tekib mobiilivaates viga, annab süsteem sellest automaatselt teada. Levinumad veateated, mida raport esile toob, on näiteks „sisu on ekraanist laiem“, „tekst on liiga väike, et lugeda“ või „klikitavad elemendid on liiga lähestikku“, andes arendajale täpsed juhised vigade parandamiseks.
Võimalus on ka kasutada sarnaseid testlehti:
- https://www.bing.com/webmaster/tools/mobile-friendliness
- https://smallseotools.com/mobile-friendly-test/
2. Kui tellin kodulehe kujunduse, kas peaks tellima eraldi mobiilse ja "tavalise"?
Kindlasti mitte. Tänapäeval ei pea eraldi mainima, et koduleht oleks mobiilisõbralik – kaasaegse veebiarenduse vaieldamatu standard on ka responsive veebidisain (RWD) ehk mobiili- ja tabletivaade. See tähendab, et veebilehe loomisel arvestatakse algusest peale, et sisu, menüüd ja pildid kohanduvad sujuvalt erinevate ekraanisuurustega. Arvutiekraanil mitmes veerus olev sisu paigutub mobiilis loogiliselt üksteise alla, menüü muutub kompaktseks „hamburger“ ikooniks ja pildid skaleeruvad proportsionaalselt.
Tõeliselt mobiilisõbralik koduleht läheb aga kaugemale kui pelgalt välimuse kohandamine. Kõik funktsioonid, alates kontaktivormi täitmisest kuni e-poe ostukorvini, peavad olema mobiilis mugavalt kasutatavad. Näiteks peab ka telefoniga maksmine olema kiire ja intuitiivne, ilma et kasutaja peaks teksti suumima või keeruliste väljadega vaeva nägema.
Google'i mobiilse veebi abimehes on lihtne skeem, mis selgitab, kuidas sama sisu paikneb responsive disainiga lauaarvutist ja mobiilist vaadatuna:
Nagu näha, paigutatakse veerud ja oluline info mobiilikujunduses natuke teistmoodi. Ka menüüd on teistsugused, pildid aga kohanduvad seadme ekraani laiusega.
Responsive kujunduste valikuid on enamlevinud sisuhalduste jaoks valmiskujul olemas päris palju (nii WordPressis kui Drupalis näiteks). Neid valides ei pea eriti muretsema, kas koduleht näeb hea välja ka tahvlilt või mobiilist vaadates. Kui kujundus on korralikult tehtud, siis muudetaksegi paigutust vastavalt ekraanile.
Üks kõige rohkem levinud platvorme, millelt responsive veebilehti tehakse, on Bootstrap. See on ka kurja juur, miks enamus uusi veebilehti kogu maailmas nii ühesugused välja näevad. Aga paraku polegi väga palju mänguruumi, kui koduleht peab ühtviisi loetav olema nii laialt kui kitsalt ekraanilt, ikka kipub kujundus minema kastide paigutamiseks üldtuntud skeemide järgi.
See pole aga tingimata loovuse puudus, vaid teadlik valik parima kasutajakogemuse nimel. Tihti kasutavad veebidisainerid ja arendajad läbiproovitud disainimustreid ning tehnoloogiaid just kasutajamugavuse tagamiseks – inimesed on harjunud teatud lahendustega ja see muudab lehe kasutamise vaevatuks. Seetõttu võibki märgata, et paljud mobiilivaated on sarnase ülesehitusega.
See aga ei tähenda, et kõik lehed peaksid välja nägema identsed. Vastupidi, tänapäevased tööriistad (nagu CSS Flexbox ja Grid) annavad professionaalsetele disaineritele vabaduse luua visuaalselt unikaalseid ja dünaamilisi paigutusi, mis eristuvad massist, olles samal ajal täielikult kasutajasõbralikud ja responsiivsed. Hea mobiilidisain ongi tasakaal tuttavlike mustrite ja eristuva brändiidentiteedi vahel.
3. Mis on mobiilis teistmoodi kui suurel ekraanil?
Mobiilis on ekraanipinda vähem ja hiire asemel kasutatakse puuteekraani sõrmega vajutades või viibates. Seega, kõik vajutatavad nupud ja lingid peavad olema piisavalt suured, et nendele suure sõrmeotsaga pihta saada.
Veebilehe menüüdes tuleb kasutada suuremaid nuppe, lingid ja tekst peavad olema suuremad ja loetavamad, kõrvuti veerud on liiga tülikad lugeda ning need tuleks pigem üldse ära kaotada. Pildid võivad teksti ääres paremale või vasakule joondudes jääda liiga pisikeseks, nende suurus ja paigutus tuleks teha teistmoodi, näiteks kogu tekstiveeru laiuselt.
4. Kuidas on pildid ja mobiilisõbralikkus seotud?
Pildid on veebilehe oluline osa, kuid mobiilisõbralikkuse vaatenurgast on need tihti kõige suurem komistuskivi. Olulised on kaks aspekti – piltide visuaalne paigutus ja nende failimaht, mis mõjutab otseselt lehe laadimiskiirust.
Suured, optimeerimata pildifailid on peamine põhjus, miks veebilehed mobiilis aeglaselt laevad. Kui lauaarvuti kasutaja kannatab ehk paar sekundit ootamist ära, siis mobiilikasutaja, kes on tihti liikvel, lahkub lehelt tõenäoliselt juba 3-5 sekundi möödudes. Aeglane leht tähendab kaotatud klienti ja kehvemat kohta Google'i otsingutulemustes.
Mida teha?
- Vähenda failimahtu. Enne piltide üleslaadimist tuleks nende failimahtu alati vähendada. Selleks on veebis palju tasuta tööriistu (nt TinyPNG) ja ka pilditöötlusprogrammides on vastavad funktsioonid. Eesmärk on leida tasakaal kvaliteedi ja failimahu vahel.
- Kasuta õiget formaati. Fotode jaoks sobib tavaliselt JPG, logode ja graafika jaoks, mis vajavad läbipaistvat tausta, aga PNG. Moodsad veebilehed kasutavad tihti ka WebP-formaati, mis pakub sama kvaliteediga pilti oluliselt väiksema failimahuga.
Visuaalselt peab pilt aga kohanduma ekraani suurusega. Lauaarvutis teksti kõrval olev pilt võib mobiilis muutuda nii väikeseks, et sellel pole enam mõtet. Hea praktika on kuvada pildid mobiilivaates täislaiuses, et need oleksid selged ja hästi vaadeldavad. Samuti tuleb tagada, et pildid ei "veniks" proportsioonist välja ega lõhuks lehe kujundust.
5. Millist sisu peaks mobiilses veebis näitama ja millist mitte?
Kõige parem on mobiilis näidata sama palju sisu, kui laua- ja sülearvutitele mõeldud veebis. Kunagi ei tea, mida kasutaja kodulehelt tegelikult otsib ja kui see mobiili jaoks keelata, siis külastaja muidugi pettub.
Mobiilis jäetakse tavaliselt ära sisu kohal kuvatavad katvad veebireklaamid ja kui on Flashiga kuvatavat sisu, siis ka see osa peaks mobiilivaatest olema kadunud, kuna paljud mobiilid ei oska Flashi sisu näidata.
Kindlasti ei tohiks aga ära peita videoid ja pilte, mida mobiilist tahetakse samamoodi vaadata. Nende esitus tuleb muuta mobiilisõbralikumaks: pildid veerulaiuselt ja võimalikult suurelt, et oleks mugav suurendamata vaadata ning videod võiks mängima hakata üle ekraani, kui telefon külili keerata.
Ära blokeeri mobiilses vaates Javascripti, CSS-i elemente ja meediat: pilte, videosid, graafikaelemente.
Kuigi kogu sisu peab jääma kättesaadavaks, on hea mobiilidisaini võti info prioriteetide seadmine, arvestades mobiilikasutaja konteksti. Telefonikasutaja on tihti liikvel, tema tähelepanu on hajusam ja ta ootab vastuseid kiiremini. Seetõttu ei seisne lahendus sisu eemaldamises, vaid kõige olulisema info esile tõstmises. Näiteks kontaktandmed, lahtiolekuajad või peamine üleskutse tegevusele tuleks paigutada lehel võimalikult nähtavale kohale. Nii saab kasutaja oma eesmärgi kiirelt täidetud, kaotamata samas ligipääsu ülejäänud infole.
6. Kui kiire peaks olema mobiilne veeb?
Vastus on lihtne: väga kiire. Mobiili vaadatakse ekstreemsemates oludes, kui mugavalt kontorilaua taga istudes. Veebileht peab alla laadima sekundiga, pikem aeg mõjub juba ebamugavalt. Eriti veel siis, kui kodulehe paigutus muudab kuju näiteks suurte piltide allalaadimisel: kasutaja on juba midagi vajutanud, aga sõrme alla kuvatakse mingi hoopis muu kodulehe element.
Kui kogu leht laeb mobiilibrauserisse alla sekundiga, siis jõuab kasutaja reageerida ja ära oodata kogu sisu lõpliku paiknemise brauseriaknas.
Kiiruse ja visuaalse stabiilsuse nõue ei ole pelgalt kasutajamugavuseks – see on ka Google'i jaoks üks olulisemaid veebilehe kvaliteedi näitajaid. Google on selle teema tõstnud omaette fookusesse läbi Core Web Vitals mõõdikute. Just see sama probleem, kus lehe sisu laadimise käigus ootamatult paigast nihkub, on mõõdetav näitajaga nimega Cumulative Layout Shift (CLS). Lehe laadimiskiirust hindab Largest Contentful Paint (LCP) ja reageerimiskiirust Interaction to Next Paint (INP).
Iga veebilehe omanik saab oma lehe kiirust ja vastavust nendele nõuetele tasuta kontrollida Google PageSpeed Insights tööriistaga. Hea tulemus nendes mõõdikutes ei tähenda mitte ainult paremat kasutajakogemust, vaid ka kõrgemat kohta Google'i otsingutulemustes, mis toob lehele rohkem külastajaid.
7. Kas kasutada mobiili ja tavaarvuti jaoks eraldi veebiaadresse?
Mõnikord satume me mobiiliga mitte tava-aadressile, mis algab klassikalise www-ga, vaid suunatakse spetsiaalselt mobiilile mõeldud veebiaadressile, näiteks m.facebook.com. Mida oma kodulehega teha, kas kasutada sama praktikat?
Tegelikult ei pea eraldi mobiiliaadresse tegema, kui kasutada responsive ehk kohanduvat veebikujundust, mis tunneb seadme ära ja serveerib vastavat kujundust samal veebiaadressil.
Miks mõned vanemad tehnoloogiahiiglased seda lahendust endiselt kasutavad, tuleneb enamasti nende aastatepikkusest tehnilisest pärandist ja soovist optimeerida jõudlust äärmuseni, mitte sellest, et see oleks parem lahendus. Uute ja väiksemate kodulehtede puhul ei ole see lähenemine mõistlik.
Eraldi mobiiliaadressi loomine on tänapäeva veebiarenduses halb praktika. See on jäänuk ajast, mil responsive disain polnud veel standard. Tegemist on nagu kahe identse maja omamise ja hooldamisega, mis tekitab hulgaliselt probleeme:
- SEO-probleemid: tekib duplikaatsisu, mis võib segadusse ajada otsingumootoreid ja kahjustada lehe nähtavust.
- Topelt töö: iga sisumuudatus tuleb teha kahes kohas, mis on ajakulukas ja suurendab vigade tekkimise ohtu.
- Kehv kasutajakogemus: linkide jagamine erinevate seadmete vahel on kohmakas ja võib kasutaja valesse vaatesse suunata.
Õige ja tänapäevane lahendus on responsive disain, nagu eelnevalt kirjeldatud. See tagab ühe veebiaadressi, ühe sisu ja ühe lehe, mis kohandub automaatselt igale ekraanile. Lahendus on lihtsam hallata, parem SEO jaoks ja pakub sujuvat ning ühtlast kogemust kõikidele kasutajatele.
