Mobiiliveebisaidi kujundus on midagi, mis võib teile juba tuttav olla. Veebidisaini trend, mida tuntakse ka kui responsiivset veebisaidikujundust, ei ole uus kontseptsioon.

Mobiilse veebidisaini algusaeg ulatub 1996. aastasse, mil veebilehe disaini pioneer Glenn Davis töötas välja ja populariseeris vedelpaigutuse tehnikat, mis oli paindlik ja kohandatav erinevatele ekraanisuurustele.

Veebisaidi kujundajad on seda tehnikat aastate jooksul edasi arendanud.

2004 aastal pakkus veebiarendaja Cameron Adams välja tehnika, mida nimetatakse eraldusvõimest sõltuvaks paigutuseks, kasutades JavaScripti. See hõlmas kasutajate ekraani suuruse tuvastamist, et kuvada sobiv veebisaidi paigutus.

Teine veebidisainer Zoe Gillenwater avaldas 2010. aastal raamatu Paindlik veebidisain, milles ta pakkus välja elastse paigutuse, mis tagab veebilehtede paigutuse ühtse välimuse mitmes ekraanisuuruses. Samal aastal pakkus veebiarendaja Ethan Marcotte välja paindliku veebisaidi kujundamise uue lähenemisviisi, mida ta nimetas reageerivaks veebisaidikujunduseks.

Mobiilse veebikujundus: olevik ja tulevik

Mobiiliveebisaidi kujundamisel kasutatakse reageerivat veebidisaini lähenemisviisi. See hõlmab koodide kirjutamist, mis annavad optimaalse vaatamiskogemuse kasutajatele, kes külastavad veebisaite oma mobiilseadmetega.

Kui Apple, Samsung, Nokia ja Blackberry võtsid 2000. aastate lõpus kasutusele mobiilsed nutitelefonid, hakkasid veebisaitide arendajad looma veebisaite väiksema ekraani jaoks. Nad kasutasid vedelat paigutust, eraldusvõimest sõltuvat paigutust, elastset disaini, vedelaid võre, paindlikke pilte ja muid teadaolevaid tehnikaid. See juhatas sisse mobiilse veebidisaini ajastu, mis on tänapäeval muutunud veebiarendajate seas peavooluks ja jätkab seda ka eelseisvatel aastatel.

Google mõistis mobiiliveebisaitide kujunduse kasvavat tähtsust. 2015 aastal tutvustas otsingumootori hiiglane algoritmi värskendust nimega Mobilegeddon, mis asetas mobiilisõbralikud veebisaidid mobiiliotsingu tulemustes kõrgemale.

Google’i andmetel on mobiilisõbraliku veebilehe omadused järgmised:

Loetav tekst, mis ei nõua suumimist ega koputamist
Sobiva vahega puudutamise sihtmärgid
Vältige esitamatu sisu (nt horisontaalse kerimise) kuvamist

Veebisaitide arendajad peavad looma veebisaidi, mis pakub sujuvat kasutajakogemust (UX) mitmel seadmel ja ekraanil. CSS-stiili, sujuva ruudustiku ja eraldusvõimest sõltuva paigutuse kasutamine aitab seda eesmärki saavutada, luues veebisaite, mis kuvatakse hästi erinevates seadmetes.

Miks on mobiilse veebikujundus oluline?

Mobiilisõbraliku veebisaidi loomine pakub erinevaid eeliseid, nagu parem liiklus, suurenenud konversioonid ja professionaalne kuvand.

Kuna tänapäeval külastab enamik inimesi veebilehte mobiilsete seadmetega, peab veebilehe kujundus vastama nii praeguste kui ka tuleviku seadmete nõuetele.

2021 aastal moodustasid mobiilseadmed 92,6 protsenti veebilehtede vaatamistest kogu maailmas. See tähendab, et enamik inimesi vaatab tõenäoliselt ainult veebisaidi mobiiliversiooni. Tõenäoliselt jätkub see suundumus ka tulevikus, mistõttu on veebiarendajate jaoks oluline tehnika valdamine.

Mobiilse veebidisaini trendid, millele mõelda

Mobiilseadmed arenevad pidevalt, nõudes veebidisaineritelt kohanemist ja kohandamist. Oluline on mobiiliveebi disaini trendidega sammu pidada, et tagada kasutajatele sujuv kogemus.

Siin vaatleme peamisi mobiilse veebidisaini suundumusi, millele eelseisvatel aastatel mõelda.

1 Mobiilne disain kokkupandavate ekraanide jaoks

Kokkupandavad mobiiltelefonid muutuvad üha populaarsemaks. Viimased statistikad näitavad, et 2021. aasta teises kvartalis müüdi umbes 819 000 kokkupandavat telefoni. Kokkupandavate telefonide müük kasvab 2022. aastal eeldatavasti 112 protsenti, jõudes 15,9 miljonini.

Kui Royal FlexiPai oli esimene kokkupandav telefon, siis üleilmsete tarbijate huvi äratas Samsung Galaxy Fold.

Kokkupandavad telefonid on kokkuklapitava ekraaniga. Funktsioonid võimaldavad telefonil toimida nii nutitelefoni kui lauana. See konkreetne kujundus on pakkunud võimalusi veebisaidi kuvamiseks uuenduslikeks viisideks. Kuid see on loonud ka uusi väljakutseid veebiarendajatele.

Eriti probleemne on veebisaidi kujundamine horisontaalselt kokkuklapitavate telefonide jaoks. Telefoni lahti voltimine suurendab telefoni ekraaniruumi. Veebidisainerid peavad koodid kirjutama nii, et telefoni kokku- ja lahtivoltimine ei segaks veebilehe kuvamist.

Tüpograafia on kokkupandavate telefonide puhul veebidisainerite jaoks veel üks väljakutse. Sõltuvalt ekraani suurusest kuvatakse pealkirjad, tekst ja veerud erinevalt. Veebisaidi õige kuvamise uudsete meetodite kaasamiseks on vaja minna kaugemale tundlikust veebisaidi kujundamise tehnikatest.

Veebisaitide arendajad peavad kirjutama koodid, mis võimaldavad kuva sujuvalt muuta, kui kasutajad ekraani kokku voltivad ja lahti voltivad.

Veebilehtede arendajad peaksid kaaluma minimalistlikku lähenemist veebisaitide kujundamisel, mis kuvatakse kokkupandavatel ekraanidel kõige paremini. Nad peavad kohandama JavaScripti ja CSS-i, et lahendada volditava disainiga seotud väljakutseid.

2 Veebikujundus klapitavate telefonide jaoks

Klapitavad telefonid, nagu Galaxy Z Flip, voldivad vertikaalselt kokku erinevalt horisontaalselt kokkupandavatest telefonidest. Reageeriva veebisaidi kujundamine klapitavate telefonide jaoks on lihtsam.

Peate määrama voltimisala, kus ekraan jaguneb kaheks piirkonnaks. Pööratavate ekraanide keskmine voltimisjoon on umbes 1000 pikslit lai. Oluline on tagada, et lehe ülaosas ja lehe all olev sisu oleks tasakaalus.

Ärge püüdke panna liiga palju teavet voltimisjoonest kõrgemale. Lugejatel peaks olema võimalik hõlpsasti lugeda teavet üle klapitava telefoni poolitusjoone.

3 Liitreaalsus

Liitreaalsus on hetkel vaid mobiiltelefonide kontseptsioon. Kuid sellel on potentsiaali eelseisvatel aastatel tõusta.

Apple on oma uusimates mudelites – iPhone 12 Pro, iPad Pro ja iPad Pro Max rakendanud LiDAR (valguse tuvastamise ja ulatuse) anduri. Funktsioon võimaldab kasutajatel mõõta objekte, suunates neile anduri, mis tulistab valgusvihu, et kaardistada ala ja selles olevad objektid. See on üks AR-i toorestest rakendustest mobiiltelefonides.

Veebisaidi kujundajad saavad täiendatud teabe kuvamiseks kasutada mobiiltelefoni AR-funktsioone. Näiteks saab veebisait kasutada LiDAR-andurit, et mõõta objekti pindala ja teisendada see automaatselt soovitud mõõdikuteks. Veebisaidi rakendused saavad kasutada ka AR-funktsioone kaasahaaravama ja kaasahaaravama kasutajakogemuse loomiseks.

Kuidas kohaneda veebidisaini arenevate mobiilitrendidega

Kuigi mobiiltelefonid arenevad, jäävad positiivse USA loomise põhialused samaks. Kasutajad ootavad sujuvat kasutuskogemust mitmes seadmes. Veebidisainerid peavad kujundama veebisaidi mobiiliekraani funktsioonide ja mõõtmete põhjal.

1 kasutaja kaasamine

Veebisaidi kujundamisel on oluline kasutajate kaasamine. Oluline on keskenduda disainile, mis mõjutab kasutajaid vajalikke toiminguid tegema.

Keskenduge sellise sihtlehe loomisele, mis pakub organiseeritud viisil kogu asjakohast teavet. Lisaks peaks veebisaidi kujundus sisaldama visuaale ja elemente, mis tõmbavad kasutajate tähelepanu.

2 Paindlik paigutus

Paindlik paigutus on tundliku mobiilse veebikujunduse võti. Paigutus peaks automaatselt kohanduma vastavalt ekraani suurusele. See peaks suutma sisu suurepäraselt kuvada nii traditsioonilistes nutitelefonides kui ka uusimates kokkupandavates ja kokkuklapitavates telefonides.

Peate veenduma, et veebisaiti kuvatakse õigesti nii tahvelarvutites kui ka nutitelefonides.

Tähelepanu tuleks pöörata mobiiliveebisaitide sirvimiskogemuse maksimeerimisele piiratud ruumis. Kasutajatel peaks olema võimalik sisu hõlpsalt lugeda ilma midagi ette võtmata. Pilte tuleks skaleerida mobiilibrauseri ekraani laiuse protsendiväärtuse alusel.

Mobiiliveebisaidi kujundus peab olema kohandatav. Soovitatav on luua veebisaidist mitu versiooni erinevate brauseri laiuste jaoks. Saate luua 500 piksli, 500–800 piksli ja üle 800 piksli paigutuse. Mitme paigutuse loomist on üldiselt lihtsam kavandada ja testida võrreldes vedeliku skaleerimise meetodiga.

3 Liigutusega navigeerimine

Enamik inimesi eelistab veebisaidiga suhelda sõrmede abil. Mobiiliveebisaidi kujundus peaks võimaldama kasutajatel lehte sisse- ja väljasuumimiseks kokku tõmmata. Selle asemel, et väikeste nuppude abil galeriis piltidel navigeerida, peaksite lubama kasutajatel kerida vasakule ja paremale libistades.

Väikeste ekraanide jaoks veebisaidi kujundamisel on oluline kaalutlus kasutajate sõrmede laius. Apple soovitab, et puutetundliku kasutajaliidese element peaks olema suurem kui 44 pikslit. Seevastu Google soovitab puudutatava kasutajaliidese elemendi jaoks 34 pikslit. Kuid veenduge, et teie mobiilse veebikujunduse puutetundlik sihtmärk oleks vähemalt 24 pikslit.

4 Testige disaini

Veebidisainerid peaksid testima veebisaidi kujundust erinevates ekraanisuurustes ja brauserites. Peaksite veebisaiti testima kõigis saadaolevates veebisaidi brauserites. Teate kuvamine, mis kutsub kasutajaid üles kasutama kindlat brauserit, on laisk suhtumine mobiilse veebikujundusse. See võõrandab paljusid kasutajaid, kes eelistavad veebisaiti mitte sirvida, selle asemel, et installida mõni muu brauser teie veebisaidi vaatamiseks.

Samuti peaksite kaaluma veebisaidi kujunduse testimist mitmes ekraanisuuruses. See on parim lähenemisviis, mis tagab, et teie veebisait kuvatakse kõige paremini, olenemata teie veebisaidi sirvimiseks kasutatud telefonist.

Kui te ei saa endale lubada erinevate mobiilseadmete ostmist, on veel üks vähem täpne viis kasutada Google’i suuruse muutmise tööriista. See rakendus võimaldab teil vaadata oma veebisaiti erinevates mobiilseadmetes.

5 Rakendage CSS-i meediumipäring

CSS Media Query on teatud tüüpi veebisaidi kujunduskood, mis võimaldab sellel ekraanil põhinevat automaatselt skaleerida. Kood võimaldab teil CSS-i rakendada ainult siis, kui konkreetne tingimus on täidetud. Näiteks saate meediapäringute abil luua reegli konkreetse stiili rakendamiseks, kui ekraani suurus on 320 px või vähem. Veebisaidi paigutus kohandatakse automaatselt, kui määratud tingimus on täidetud.

CSS-i meediapäringu kasutamine võimaldab teil rakendada stiili, kui seade ja brauseri keskkond vastavad tingimustele. Need võimaldavad teil luua erinevaid paigutusi erinevate seadmete ekraanisuuruste ja brauserite jaoks. Lihtne meediumipäring kuvatakse järgmiselt.

@media media-type and (media-feature-rule) {
  /*specific CSS conditions*/
}

Ülaltoodud koodis määrab meediumitüüp brauserile meediumikoodi tüübi. Meediumifunktsiooni reegel määrab, et kood sisaldab tingimusi, mis peavad olema koodi täitmiseks täidetud. Seejärel saate veebisaidile juurdepääsuks kasutatava mobiiliekraani ja brauseri põhjal määrata konkreetsete paigutuste kuvamise CSS-i tingimused.

Järeldus

Mobiilseadme liidese ja paigutuste arenedes peavad veebidisainerid välja töötama ka uudseid viise veebisaidi kuvamiseks. Uute telefonikujunduste esilekerkimine nõuab sujuva kasutajakogemuse loomiseks kasutajaliidese uuesti keskendumist.

UX on mobiilse veebidisaini puhul kõige olulisem. Veebidisainerid peaksid looma tundliku veebisaidi kujunduse, võttes samal ajal arvesse kasutajate nõudmisi, kes sirvivad saite erinevaid mobiilseadmeid kasutades.

Veebiarendajad peavad mobiilse veebidisaini trendidega sammu pidama. Nad peavad püüdlema positiivse mobiilse kasutajakogemuse poole, kuna see parandab SEO asetust, toob rohkem liiklust ja suurendab konversioonimäärasid.

: instantshift.com