Reageerivad veebisaidid on veebisaidid, mis kohanduvad kõigi ekraanisuuruste ja eraldusvõimega ning seda mitte ainult töölaual, vaid ka mobiilseadmes, tahvelarvutis ja mõnikord isegi teleris.

Riigimehe sõnul , mobiililiiklus moodustas 2017. aastal 52,64% kogu ülemaailmsest liiklusest, mis tähendab, et veebisait mitte hästi mobiilseadmete jaoks optimeeritud kaotades umbes poole oma liiklusest . 2018. aasta lõpuks peaks mobiilseadmete kogu liikluse osakaal olema eeldatav kasvab 79% -ni , mis on erakordne kasv.

Ettevõtted, millel pole mobiilset veebisaiti, jäävad murettekitava kiirusega maha, sest 8 külastajast kümnest lõpetab seotuse veebisaidiga, mis ei ilmu nende seadmes hästi. Kasutajatel on liiga lihtne vajutada nuppu Tagasi ja proovida hoopis konkureerivat ettevõtet ning Google reastab otsingus isegi madalamad veebisaidid .

Võite teha Google'i mobiilisõbralikkuse testi siin .

Kas see tähendab, et mobiil on tähtsam kui lauaarvuti? Ei 83% mobiilikasutajatest ütleb et neil peaks olema võimalus soovi korral kogemusi töölaual jätkata.

Vaadake seda eBay mobiilseadmetele optimeeritud versiooni ja seda, mis see välja näeks peletama mobiilile optimeeritud. Kas kaaluksite isegi optimeerimata versiooni?

Veebisaitide kujundamiseks, mis saaksid konkureerida tänases Internetis, veebidisainerid peab olla eksperdid aadressil tundlik veebidisain (RWD). Kust nad peaksid alustama?

Mobiilne lähenemine reageerivale veebidisainile

Mobiilne veebidisain tähendab kõigepealt mobiilse veebisaidi kujundamist ja töölaua versioonini töötamist. Selle lähenemise hästi toimimiseks on mitu põhjust.

1. Mobiiliveebisaitidel on rohkem kasutatavusega seotud probleeme (see on enamasti tingitud ekraanikinnisvara puudumisest), seega on otstarbekas ja tõhusam keskenduda peamiselt mobiilikujundusele.
2. See on lihtsam suurendama mobiiliversioon kui see on vähendama töölauaversioon (jällegi mobiilsete veebisaitide ruumipuuduse tõttu).
3. Mobiilne veebidisain aitab visuaalselt ja funktsionaalselt vajalikku ümber hinnata.

Veebisaidi kujundamine mobiilseadmetele reageeriva saidina sunnib disainereid esitama mitmeid olulisi küsimusi, kuna ekraanil olevat kinnisvara on vähem töötada. Siin on küsimused, mida tuleb esitada:

• Kas see funktsioon / funktsioon on tõesti vajalik?
• Kuidas saaksime kõigepealt kujundada mobiilseadmetele midagi minimalistlikku, mis hiljem lauaarvutite jaoks hästi suureneks?
• Kas see visuaalne efekt on väärt aega, mis kulub mobiiltelefoni laadimiseks?
• Mis on peamine eesmärk ja millised visuaalsed elemendid aitavad kasutajatel seda saavutada?

Vaatame hetkega mõningaid reageerivaid veebikujunduse näiteid. Räägime praegu sellest, millised seadmed, ekraani suurused ja veebibrauserid on tänapäeval asjakohased.

Millised ekraani eraldusvõimed on tundliku veebidisaini jaoks asjakohased?

Siin on kõige tavalisemad ekraani eraldusvõimed mobiilseadmete, tahvelarvutite ja lauaarvutite kasutajatele kogu maailmas. Nagu näete, on resolutsioonide valik väga lai, seega ei domineeri turuosa praegu ei mobiil, tahvelarvuti ega lauaarvuti - see ütleb meile, et disainerid peaksid reageeriva veebidisaini üle mõeldes neid kõiki arvestama.

• 360x640 (väike mobiil): 22,64%
• 1366x768 (keskmine sülearvuti): 11,98%
• 1920x1080 (suur töölaud): 7,35%
• 375x667 (keskmine mobiil): 5%
• 1440x900 (keskmine töölaud): 3,17%
• 720x1280 (suur mobiil): 2,74%

Nii nagu seadmete jaotuse puhul, peaksime andmed segmenteerima asukoha järgi, et need vastaksid meie sihtrühma kasutajate demograafilistele andmetele (või eeldatavatele kasutajate demograafilistele andmetele). Samuti tasub rahuldada populaarsust koguvaid resolutsioone, sest kuigi mõned ekraanisuurused pole praegu nii levinud, võivad need olla tulevikus. See aitab reageerivad disainerid käsitöö futurokindel UX, mis töötab ka siis, kui turuosa muutub.

Näiteks 360x640 eraldusvõime (mis vastab enamasti Androidi kasutavatele Samsungi seadmetele) on viimase aastaga tõusnud 5,43%. Disainerid saavad enne veebisaidi kujundamise alustamist kasutada selliseid väärtuslikke teadmisi, et otsustada peamiste reageerivate murdepunktide üle.

Millised veebibrauserid on täna populaarsed?

Tundlik veebidisain seisneb sujuva kasutuskogemuse pakkumises mis tahes seadmes ja kuna erinevad veebibrauserid renderdavad veebilehti erineval viisil, tuleb veebisaite testida, et tagada nende ühilduvus paljude mobiilsete ja lauaarvutitega veebibrauseritega.

Kuigi veebisaidi skaala muutmine õigete reageerivate murdepunktideni on peamiselt veebiarendaja ülesanne, otsustab veebidisainer täpselt, kuidas kohanduv veebileht optimaalse kasutuskogemuse loomiseks erinevate ekraanisuurustega kohandub.

Siin on ülemaailmne jaotus veebibrauseri turuosa mobiilseadmetele ja lauaarvutitele.

• Kroom: 55,04%
• Safari: 14,86%
• UC brauser: 8,69%
• Firefox: 5,72%
• Ooper: 4,03%
• Internet Explorer: 3,35%

Automaatselt kohanduv disain ei tähenda ainult selle, et kõik sobiks - see on ka seadme riistvara ja veebibrauseri võimalustega kohanemine sama hästi kui seadme eraldusvõime. Selle üks näide võib olla see, et kuigi Google Chrome toetab CSS-i vara overscroll-behavior: (mis määrab, mis juhtub, kui kasutaja kerib liiga tugevalt vaateava serva poole), see on ei toeta ükski teine ​​veebibrauser .

Reageeriva disaini parimad tavad

Kõrvaldage hõõrdumine

Nagu varem mainitud, aitab mobiilne lähenemine reageerivale veebidisainile disaineritel hinnata, mis on kasutaja jaoks põhieesmärgi saavutamiseks tegelikult vajalik.

Tahvelarvuti versiooni (ja hiljem töölaua versiooni) ülesehitades võime seejärel hakata mõtlema teiseste eesmärkide ja mikrointeraktsioonid , kasutajavood ja CTA-d (üleskutsed tegevusele), mis muudavad need kasutaja eesmärgid saavutatavaks. Veelgi olulisem on see, et meie keskenduge kõigepealt kasutaja peamistele eesmärkidele ja kõrvaldada tarbetu hõõrdumine see ei aita ei esmaseid ega teiseseid eesmärke.

Esmaseks eesmärgiks võib olla toote ostmine, teisejärguline eesmärk on uudiskirjaga liitumine (mis võib hiljem kaasa tuua ostu).

Siin on suurepärane näide hõõrdumise kõrvaldamisest: kuna mobiilse kasutajaliideseid on tavaliselt raskem navigeerida, oleks kõige parem minna üle ühele lehele mobiilne pood kauplustes ja lubavad mitmeastmelise maksmise ainult lauaarvuti e-poe kauplustes.

Kujundus pöidlad

Tundlik veebidisain on selles mõttes keeruline, et kasutajad suhtlevad töölaua veebisaidiga klõpsude kaudu, kuid mobiiliversioon puudutuste ja pühkimiste kaudu. Füüsilisi erinevusi on ka. Lauaarvuti kasutajatel on arvuti tavaliselt pinnal, samas kui mobiilikasutajad hoiavad oma seadmeid käes. Need erinevused muudavad oluliselt viisi mobiilse kasutajaliidese disainerid kujundage kraani sihtmärgid ja muud olulised kasutajaliidese elemendid, millega kasutajad suhtlevad.

Vaatame mõningaid näiteid:

• Inimesed eeldavad tavaliselt, et peamine töölaua navigeerimine oleks tipus; aga mobiilis peaks see olema allosas. Pöidlad ei jõua mugavalt tippu.
• Muud interaktiivsed elemendid peaksid olema hõlpsasti kättesaadavad. See tähendab, et neid hoitakse ekraani keskel, kuna pöidlad on seadme ekraanide külgede ja nurkadeni raskem jõuda.
• Et neid saaks hõlpsalt puudutada, peaksid oluliste linkide ja CTA-de kõrgus olema vähemalt 44 pikslit (väiksemad puudutatavad sihtmärgid on kasutatavuse seisukohalt halvad).

Soovitatav lugemine: Mobiilse kasutatavuse põhijuht .

Kasutage ära mobiilseadmete pärismaist riistvara

Mobiilne riistvara (nagu seadme kaamera või GPS-teenused) ei ole spetsiaalselt reserveeritud kohalikele rakendustele ja nagu varem mainitud, ei ole tundlik veebidisain ainult selle, et kõik sobiks. See puudutab ka seadme võimalustega kohanemist. Mobiilse veebidisaini puhul, kuna mobiilseadmetel on hõlpsasti kasutatavad kaamerad, on mõned mikrointeraktsioonid - näiteks andmete sisestamine - väiksematel ekraanidel tegelikult lihtsamad, kui veebisaidid kasutavad ära olemasolevat kohalikku riistvara.

Vaatame mõningaid näiteid:

• Krediit- / täienduskaardi skannimine (kuna vormid on mobiilis sageli keerulised)
• Fotode jagamine sotsiaalmeedias, kuna meedia on juba teie seadmes
• Kaheastmeline autentimine (kuna olete juba oma mobiilseadmes)
• Varude / analüüsi kiire kontroll (kuna mobiilirakendused lihtsustavad teavet)
• Esitades a veebiotsing häälega (kuna käed-vabad on lihtsam kui kirjutada)

Tehke paigutused vaikimisi sujuvaks / adaptiivseteks

Mitte iga kasutaja töölaua brauserit ei maksimeerita. See tähendab, et kuigi disainerid peavad arvestama seadmete reageerivate murdepunktidega, mida kasutajad täna kasutavad, peavad nad arvestama ka sellega, mis nende murdepunktide vahel toimub.

Reageerivaid murdepunkte tuleks kasutada paigutuse ja sisu uude seadmesse ümberkujundamiseks, kuid kõigi vahepealsete suuruste arvestamiseks (igaks juhuks) tuleb paigutusi teha teisiti vedelik (see tähendab, et brauseri suuruse muutumisel nad loomulikult kohanevad / venivad).

Pidage vedelike / kohanduvate paigutuste kujundamisel silmas neid näpunäiteid:

• Protsendiühikud võimaldavad elementidel olla vedelad.
• Minimaalse ja maksimaalse laiuse määramine võimaldab stsenaariumi 'aga ära mine sellest väiksemaks / suuremaks'.
• SVG-pildivorminguid saab kvaliteeti kaotamata üles-alla suurendada ja need pole eraldusvõimest sõltuvad (erinevalt JPG-dest ja PNG-dest, mis pole).

Ärge unustage maastiku orientatsiooni

Me rääkisime varem konkreetsetest reageerivatest murdepunktidest, kuid peame arvestama ka sellega, et neid mobiilseid vaateavasid saab kuvada ka maastikuasendis. Sujuva paigutuse rakendamine muudab sisu tehniliselt kohanemisvõimeliseks, kaotades selle suure osa portree vaateaken võib olla kasutatavuse ja juurdepääsetavuse takistus.

Navigeerimine on tavaliselt turvaline (mõnikord on see parem, sest kasutajad navigeerivad tavaliselt maastikuasendis kaks pöidlad), kuid kerimine muutub oluliselt raskemaks, mis on vähem kui optimaalne, kuna kasutaja peab maastikul rohkem kerima.

Disainerid võiksid kaaluda ka maastiku murdepunktide kujundamist; Näiteks saab mobiilseadmes vertikaalselt virnastatud paanitud elemente kuvada vasakule ja paremale navigeerimisnupuga liugurina, mis tähendab, et kasutaja ei pea kerima.

Pidage meeles, et ka tüpograafia võib olla reageeriv

Kuigi UX disainerid tavaliselt kasutavad veebisaitide kujundamiseks piksliühikuid, tegelikus veebis ei pruugi üks punkt tingimata enam pikslit võrduda, kuna erinevatel seadmetel on erinev eraldusvõime. Näiteks on iPhone X-l 458 PPI (pikslit tolli kohta), nii et kui pikslite suurus muutub väiksemaks, suudame saavutada teravama graafika samas füüsilises ruumis (Apple nimetab seda võrkkesta tehnoloogiat ja Android seda HDPI).

See tähendab, et näiteks 16-piksine fondisuurus näeks mõnes seadmes sõltuvalt selle eraldusvõimest suurem või väiksem. Veebiarendajad tavaliselt kasutage fondi suuruste määratlemiseks em ühikuid , mis on reageeriva üksuse tüüp, kus 1em on võrdne 1 punktiga.

Kujundustööriistade kujundamine meeldib Zeplin , Sympli , Ime ja Visioon aitab disaineritel teha arendajatega koostööd küsimustes, mis on ühise vastutuse all. Kui disainerid teostavad disaini ja arendajad teostavad koodi, on tervikuna toote kujundamise töövoog meeskonnatöö, mis nõuab kindlat suhtlemist.

Reageerivad disaini toimivuse optimeerimise näpunäited ja parimad tavad

Tundlik veebidisain ei tähenda mitte ainult selle välimust, vaid ka käitumist ja tunnet. Veebisaitide kohandamine nii, et need saaksid ettenähtud seadmesse kiiremini laadida, on sama oluline.

Laisk laadige mitteolulisi pilte ja videoid

Pildid ja videod moodustavad suure osa veebisaidi kogu allalaaditavast mahust, kuid te ei pea neid kõiki korraga laadima. On kaks stsenaariumi, kus meediumide renderdamist saab edasi lükata: lehe allosa sisu saab laadida, kui kasutaja kerib allapoole, ja renderdamist blokeeriv meedium tuleks alla laadida alles siis, kui küljendus ja sisu on alla laaditud. Seda tava nimetatakse laisaks laadimiseks, kus raskete, mitteoluliste elementide laadimine viibib lehe jõudluse parandamiseks edasi.

Tingimuslik laadimine

Mõned veebisaidi elemendid pole mõeldud mobiilikasutajatele või vähemalt ei ole need täiendava kognitiivse koormuse väärt. Soovime, et meie mobiiliveebisaidid oleksid lihtsad, seega on mõistlik teatud stsenaariumides elemente peita. Sellest hoolimata peame veenduma, et me ei raiska brauseri ressursse ja ribalaiust, laadides need elemendid ka siis, kui need on peidetud; seega on parim tava lisada need elemendid ainult teatud tingimustel.

Taas saab arendaja selle koodiga saavutada; disainerid saavad siiski lehe jõudlust parandada, teatades tingimustest, millal ja kus teatud elemendid peaksid eksisteerima ja millal mitte.

Reageerivad pildid

Nagu varem mainitud, kuvatakse mõnes seadmes rohkem piksleid tolli kohta, mis võib pilte uduseks muuta, kui neid ei ekspordita õige eraldusvõimega. Sõltuvalt seadme eraldusvõimest vajavad mõned pildid kahekordse (@ 2x), kolmekordse (@ 3x) ja isegi neljakordse (@ 4x) suurust. Veebibrauserid toetavad nüüd elementi, mis valib seadmest sõltuvalt õige pildi eraldusvõime.

Automaatselt reageerivate veebisaitide meisterdajad saavad pilte kohandada õigele seadmele, eksportides kõik tänapäeva seadmetes kasutatavad eraldusvõimed (kui te pole selles kindel, küsige oma arendajalt - suhtlus on reageeriva veebidisaini puhul võtmetähtsusega).

Järeldus

Traadiga raamimine võib aidata kortse kujundamise alguses varjata ja see toimib hästi reageeriva veebidisaini esmalt mobiiltelefoni lähenemisel. Võib-olla on reageeriv murdepunkt, mis vajab lisatähelepanu, või võib-olla on mõiste, mis lihtsalt ei ole mobiilse reageerimise seisukohast tõhus. Parem on leida muhke teelt varem kui hiljem (st enne visuaalse esteetika lisamist).

Kaasaegsed disainivahendid nagu Adobe XD , Ime ja Visioon võimaldage meeskondadel testida prototüüpe reaalsetes seadmetes, arutleda tagasiside üle kontekstis ja teha meeskonnana koostööd, kuni paigutus töötab kõikides stsenaariumides.

Kasutades lihtsat UX-i töövoogu, kus reageeriv disain on sisemise testimise ja tagasiside abil tagatud, tagab kasutajakogemus tõrgeteta kõigil platvormidel ja ekraani eraldusvõimetel enne esmakordset tutvustamist tegelikule kasutajale.

• • •

Lisalugemine ApeeScape'i disainiblogist:

• e-kaubanduse kasutajaliides - ülevaade parimatest tavadest (koos infograafikaga)
• Inimkeskse disaini tähtsus tootedisainis
• Parimad UX-i disainerite portfellid - inspireerivad juhtumianalüüsid ja näited
• Mobiilsete liideste heuristilised põhimõtted
• Ennetav disain: kuidas luua maagilisi kasutajakogemusi

Põhitõdesid mõistes

Mis on reageeriva disaini murdepunktid?

Murdepunktid on võtmemomendid, kui disain kohandatakse uue ekraani suurusega; näiteks võiks murdepunkti määratleda 320 pikslit, mis on enamiku mobiilseadmete vaateavade horisontaalne suurus.

Mis on reageeriv veebidisain?

Tundlik veebikujundus hõlmab veebisaitide kujundamise protsessi, mis sobivad nii vormi kui ka funktsiooni järgi kõigi seadmete, platvormide ja ekraanisuurustega.

Mida tähendab mobiilisõbralikkus?

Mobiilisõbralike veebisaitide kujundamine tähendab veebisaitide kohandamist mobiilseadmetega. Google määratleb mobiilisõbralikkuse selle järgi, kas kraani sihtmärgid vastavad vähemalt 44x44 pikslit käsitlevatele miinimumnõuetele või mitte, kas fondid on piisavalt suured lugemiseks ja kas muu hulgas lõikab sisu ära vaateaken.