Seadmetundliku disaini eelised

Kõige olulisem  seadmetundliku disaini väärtus peitub optimaalses kodulehe laotuse laiuses nii suuremate laua- ja sülearvutite ekraanidel kui ka vähemate mõõtmetega  nutiseadmetes, nagu näiteks mobiiltelefonides ja tahvelarvutites. Põnev on, et seadmetundlik disain muudab laotuse laiust ka juhul kui pöörata tahvelarvuti horisontaal- asendist vertikaalseks ehk tunneb sõna otseses mõttes ära millise seadme ja ekraani kaudu lehekülge vaadatakse.

Seadmetundliku veebidisaini, mida mõnel pool nimetatakse ka tõlkimata kujul "responsive web design", loomine on küll lehekülje tegemise etapis mõnevõrra keerukam, kuid kasutuse käigus on sellel vanemate lahenduste ees üsna mitmeid olulisi eeliseid, mis kaaluvad töömahukama disainimise tänapäeval juba kuhjaga üles:

1. Pakub meeldivamat vaatamiselamust erinevatel ekraanidel
2. Ühte kodulehte on lihtsam hallata kui mitut erinevat mobiiliveebi
3. Kasutajad veedavad lehel kauem aega ja tellivad meelsamini
4. Parem nähtavus otsingumootorites, sest on üks konkreetne lehekülg
5. Võimalus olla konkurentidest edumeelsem ja teha parem koduleht

Responsive web design võimalused on olemas olnud juba mitmeid aastaid. Nüüd on tõusnud mobiilsete seadmete, olgu siis nutitelefonide või tahvelarvutite osakaal sedavõrd suureks, et paindliku laotusega lehtede eelis tuleb selgemini välja. Vaatleme nüüd pisut lähemalt, miks "responsive" ehk eesti keeles seadmetundlik disain parem on.

"Responsive" tähendab seadmetundlikku

Seadmetundlik veebidisain on üle ehitatud põhimõttel, et lehe vaatamiseks kasutatavatest seadmetest ja ekraanisuurustest lähtuvalt näidatakse külastajatele just selliste mõõtmete ja laotusjoonisega lehte, mis pakub kõige optimaalsemat vaatamiselamust. Kui varasemad disainilahendused, näiteks "voolav disain" (ingl. fluid web design) ja adaptiivne disain (ingl. adaptive web design) olid samuti suunatud lehe laiuse muutmisele vastavalt ekraanidele, siis olid need märksa väiksema paindlikkusega kui tänapäevane seadmetundlik disain (ingl. responsive design). Tänu veebitehnoloogia arengule on nüüd lehe mõõtmete muutmine võimalik suuremas ulatuses.

Kõige olulisem võimalus peitub lehekülje laotusblokkide paindlikus ümberpaigutamises, kitsamatel ekraanidel joonduvad muidu külgveerus olevad menüüd ja tekstid kas põhiveeru alla või üles moodustades ühe pika veeru, mida saab mugavalt vertikaalsuunas kerides lugeda. Samavõrd kaalukas on ka üksikute lehekülje elementide, näiteks suuremas formaadis piltide laotuse jaoks sobivasse laiusesse vähendamise võimalus, et lehte ei peaks täielikuks vaatamiseks horisontaalsuunas nihutama.

Mugavat lehte loetakse põhjalikumalt

Sellist lehte, mis ulatub paremast ekraaniservast välja, tuleb teksti täielikuks lugemiseks kas horisontaalsuunas kerida või pidevalt suurendada vähendada (sisse-välja zoomida). Sellisel moel ei ole mõistagi võimalik sisukamaid tekste pikemalt lugeda, sest zuumimine on üsna ebamugav. Kui kõrvutada enam-vähem sama mahukusega kodulehti, siis on selge, et selline, mis kohandub ekraanile ja mahutub täies laiuses korraga laiusesse on oluliselt mugavamalt loetav kui arhailisemat lahendust pakkuv kodulehekülg. Kui külastajatel on võimalus valida samal tegevusalal tegutseva kahe firma vahel, kellel ühel on paindlikult ekraanile kohanduv kujundus ja teisel mitte, siis loetakse kindlasti põhjalikumalt seda, mis on mugavamas formaadis. 

Põhjalikumalt lugedes saadakse teada rohkem detaile ja selle baasil tekib usaldus, mille ajel saadetakse rohkem päringuid ja tellimusi. Mobiilsete seadmete osakaalu kasvuga on kitsamate ekraanidega külastajate arv sedavõrd suurenenud, et neid ei saa enam ignoreerida.

Mobiiliveeb põhilehest eraldi - millised on puudused

Kuni tehnoloogia areng ei võimaldanud veel väga täpset seadmete ja ekraanide laiuste tuvastamist, siis oli üheks võimaluseks luua mobiiliveeb põhilisest kodulehest eraldiseisvana ja optimeerida see ainult mobiiltelefonide jaoks. Edumeelsemad ja tehnoloogiliselt arenenumad firmad, millel oli ka veebiarenduse jaoks võimalik rohkem kulutada, lõid mobiiliveebe just selle eesmärgiga, et pakkuda paremat vaatamiselamust laiemale ringile vaatajatele. Selline lahendus toimis päris hästi senikaua kuni mobiilsed seadmed olid suhteliselt ühesuguste väikeste ekraanidega ning neid sai käsitleda ühe selge kategooriana. Aastaid tagasi jäid enamike nutitelefonide ekraanide laiused vahemikku 320-480 pikselit. Aja jooksul hakkasid aga tootjad pakkuma järjest suuremaid ekraane ja siis ilmusid omakorda veel ka tahvelarvutid, mis olid tüüpiliste mobiilide ekraanidega võrreldes täiesti teine kategooria. Peale esimest populaarsuslainet tulid välja põhilehest eraldi tehtud mobiiliveebide puudused:

• Laotused olid optimeeritud liiga kitsale ekraanivahemikule
• Eraldi lehe toimetamine pani kodulehe toimetajatele topeltkoormuse
• Erinev lehe sisu oli tihti aegunum ja tekitas külastajates segadust
• Otsingumootorite jaoks oli kodulehel mitu aadressi, sisu killustunud
• Minimeeritud sisu oli konteksti tekitamiseks liiga vähe

Tänapäeval võib öelda, et eraldi mobiiliveeb oli üheks ajalooliseks vaheetapiks, mis juhatas sisse arengu seadmetundlike disainide ajastusse. Probleem erinevate ekraanide näol oli täiesti reaalselt olemas, kuid eraldi mobiiliveebide lahendused ei olnud lihtsalt piisavalt heaks lahenduseks.

Tervik on suurem kui killustunud osade summa

Peamiseks probleemiks põhilehest eraldiseisvate mobiiliveebide puhul oli just haldamiseks kuluv ajakulu ja vajadus kodulehele ülespandavat materjali eraldi formaatida (näiteks teha pildid väiksemaks). Kuna nutiseadmete, olgu siis mobiiltelefonide või tahvelarvutite osakaal oli kuni viimase ajani küllaltki madal, siis peeti mobiiliveebi põhilehest vähemtähtsaks ja seda toimetati siis kui kodulehest aega üle jäi. Taoline madala külastatavusega, eraldi nutiveebi harvem toimetamine tõi tihti kaasa olukorra, mil mobiiliveeb oli aegunuma infoga, sisaldas vähem lehti ja napimat illustreerivat materjali.

Üldlevinud oli eeldus, et mobiilsed kasutajad ei soovi lugeda sisu samas mahus kui tavakasutajad, kuid see oli rajatud üsna valedele alustele. Jah, tehnilised piirangud nagu võrguühenduse kiirus või kasutusolukorrad piirasid kindlasti lugemise aega ja ühe külastuse käigus sirvitavate lehekülgede mahtu. Teisalt ei olnud kehvema sisuga mobiiliveebides ka võimalik midagi põhjalikumalt lugeda, kasutuskogemus oli poolik ning seepärast jäi ka huvi kesisemaks. Tänasel päeval oleme tehnilistest piirangutest juba sedavõrd välja kasvanud, et seadme ja kasutusviisi põhjal ei peaks kasutajatele peale suruma piiratumat sisu.  

Mitu kodulehte, mitu url aadressi

Mobiiliveebide kehvema külastatavuse üheks põhjuseks oli kindlasti ka see, et põhilehest eraldiseisvad aadressid olid vähem optimeeritud ja neid ei leitud alati lihtsalt üles. Otsingumootorid suudavad küll üsna hästi tuvastada, millise lehega tegemist on, kuid enamasti on eraldiseisev mobiiliveeb vähem otsingumootorite jaoks optimeeritud, minimaalne sisu pakub indekseerimiseks vähem materjali ning teisejärgulisena käsitlemise tõttu viidatakse ka mobiiliveebidele vähem, seega kujuneb ka linkimisest tulenev prominentsusmõõde madalamaks.

Killustatud veebilahendused võisid olla mingil ajahetkel üheks võimaluseks mobiilsetele kasutajatele parema kasutuskogemuse pakkumisel, kuid tänasel päeval on olemas selgelt paremad lahendused, mis võimaldavad hallata kodulehekülge ühe tervikuna, pakkuda mobiilsetele kasutajatele samavõrd kvaliteetset sisu ja fokuseerida optimeerimiseks tehtavaid jõupingutusi ühele konkreetsele veebilehele.

Fluid ja adjustable - vanemad lahendused
Enne seadmetundliku disaini võidukäiku oli üsna samal eesmärgil kasutusel voolav disain (ingl. fluid design) kui ka kohanduv disain (adjustable design). Mõlemate eesmärk oli üsna sarnane - pakkuda erineva laiusega ekraanidel optimaalsemat ja mugavamalt vaadatavat pilti. Mõlema, nii paindliku disaini kui ka ekraanidele kohanduva disaini võime reaalselt kodulehtede laiust muuta oli siiski üsna piiratud - laiust sai muuta ainult üsna väikeses vahemikus. Voolav ja kohanduv disain ei suutnud pakkuda piisavalt ammendavat lahendust kõige laiematele, näiteks täisresolutsiooniga (full HD) ekraanidele kui ka väikseimatele nutiseadmete ekraanidele, olgu need siis mobiiltelefonid või ka tahvelarvutid. 

Skaleeruv veebilehekülg, skaleeritav (vektor)graafika?
Mitmete artiklite autorid on "responsive disaini" vasteks pakkunud "skaleeruvat disaini". Tõsi küll, skaleeruvus või skaleeritavus (ingl. scalable ja scalability) on keelelises mõttes kahanemise ja suurenemisega seotud ja seepärast võiks ju ekraanide laiusega ühte sammu käiva kujunduse nimetamiseks sobida küll. Seda siiski vaid esmapilgul, sest paraku on selle puhul tõsine oht segiminekuks eksisteerivate, juba väga konkreetse tähendusega terminitega.

Skaleeruvust kasutatakse veebinduse kontekstis juba skriptide ja andmebaasikomponentide ülesehituse kirjeldamisel, samuti ärianalüütilise terminina äriplaani laiendatavuse osas, mis on eriti aktuaalne tänapäevaste tehnoloogiliste start-up ettevõtete puhul (vaata lähemalt Wikipedia artiklit). Skaleeritavus on asjakohane ka vektorgraafikast rääkides, kuid seadmetundlik disain ei seisne ainult fikseeritud laiuse-kõrguse suhtega kujutiste suurendamises-vähendamises, sisuline põhirõhk on siiski veergude paindlikul ümberjoondumisel. Püüd sama terminit disaini jaoks (taas)kasutada toob kaasa täiesti tarbetult palju segadust nii veebiloojate endi kui ka klientide jaoks.

Skaleeruv veebilehekülg on esmases mõistes ikkagi selline lahendus, mis kannatab ilma probleemideta välja nii kümne külastaja, saja kui ka tuhande külastaja samaaegse lehe vaatamise ühes ajaühikus (näiteks mõõdetuna sekundi kohta). Skaleeruvatest andmemahtudest ja koormustaluvusest on kohane rääkida andmebaasisüsteemide ja pilveteenuste, eelkõige veebilehekülje pilveserverisse majutamise kontekstis.

Odavaid valmislahendusi pakkuvad firmad mõistagi koormustaluvuse osas enda lehti ei testi, siis puudub neil ka aimdus skaleeruvate andmebaasilahenduste loomise võimaluste kohta. Paradoksaalsel moel ongi responsive design'i vasteks skaleeruvat disaini pakkunud just sellised humanitaarse suunitlusega "turundushaid", kes veebisüsteemide tehnilist ülesehitust väga põhjalikult ei tunne ja kelle firmad sisuhaldussüsteemide reaalset, sisulist arendust ei paku.

Teisi nimetusi seadmetundliku disaini jaoks
Üks Eesti disainibüroo on pakkunud responsive web design'i eestikeelseks vasteks põnevalt omanäolise ja vägagi ugri-mugrilikult kõlava sõna - hõlmesveeb. Sümpaatne sõna, assotsiatsioon hõlmamise, hõlmaga on ka sisuliselt asjakohane. Keeles ei ole õigeid ja valesid sõnu, keeleloome protsess on üsna demokraatlik ja igalühel on õigus välja mõelda nii täiesti uusi sõnu kui täiendada olemasolevaid tüvesid. Uudissõnade kasutusse jõudmise üheks oluliseks eelduseks on, et neid kasutatakse püsiva järjekindlusega õiges kontekstis ja uusi sõnu on võimalik tähistatava sisuga üheselt seostada. Suureks väljakutseks on, et responsive design on sisuliselt raskelt adutav isegi veebiloojate endi jaoks, seda raskem on seda klientidele selgitada. Konkreetse termini tutvustamisel on võtmetähtsusega teha vahet seadmetundliku disaini (responsive design'i), eraldiseisva mobiiliveebi, voolava ja adapteeruva disaini vahel - kõik need on ju tehnilise lahenduse ja ka tulemuse poolest üsna erinevad asjad.

Seadmetundlik veebileht aitab eristuda

Kuna seadmetundlike kodulehekülgede kujundamine on märksa keerukam kui tavalise, fikseeritud laotuse laiusega veebilehtede tegemine, siis on mobiilitundlikud kodulehed ka veel vähem levinud. Vaatlesime selles artiklis põhjalikumalt, miks mitme mobiiliveebi asemel ühe integreeritud veebilahenduse tegemine aitab kodulehekülge lihtsamini toimetada, muudab selle mugavamaks erinevates seadmetes vaatamiseks (eriti just tahvelarvutite jaoks) ja on ka turunduslikus mõttes märksa elujõulisem lahendus. Otsingumootorid armastavad korralikke veebilehekülgi, mis on sisukad ja selgete aadressidega, siis on võimalik ühe seadmetundliku lahenduse abil saavutada ka paremaid tulemusi otsingutulemuste positsioonides ning võita kodulehele seeläbi ka rohkem külastajaid. 

Kas kujutad ette olukorda, mil sinu konkurendid saavad kõik nutiseadmeid kasutavad kliendid endale? Ehk võtad selle asemel hoopis ohjad enda kätte, teed enda kodulehe korda ning saavutad ise nende ees tõhusa konkurentsieelise?

Vaata lähemalt järgi, millised on kaasaegsete, seadmetundliku disainiga kodulehekülgede hinnad. Kui oled juba eelistega piisavalt tutvust teinud ja huvis vankumatult kindel, siis saad "responsive design" ehk seadmetundliku kodulehe loomise päringuvormi täitma asuda siin sellel lehel.