Reaktiivne veebidisain: hämmastavate veebirakenduste loomise saladus

Viimase aasta jooksul olen täheldanud, et mõned arendajad kasutavad kaht peent tehnikat, mis viivad veebirakenduse aeglasest ja jaburusest kuni väga reageeriva ja lihvitud tehnoloogiani.

Usun, et need tehnikad on piisavalt olulised, et vajaksid nime: Reaktiivne veebidisain.

Kokkuvõtlikult võib öelda, et reaktiivne veebidisain on tehnikate komplekt, mida saab kasutada saitide ehitamiseks, mis tunnevad end alati kiiresti ja reageerivad kasutaja sisendile, sõltumata võrgu kiirusest või latentsusest.

Veebiarendajate ja raamistiku autoritena usun, et UX-i ja veebis tajutava jõudluse parandamisel on esmatähtis leida viise, kuidas muuta need mustrid vaikimisi kõiges, mida ehitame.

1. tehnika: kiirkoormus skeleti ekraanidega

Õige kasutamise korral ei võeta seda tehnikat peaaegu kunagi tähele, kuid sellel on tohutu mõju saidi tajutavale toimivusele.

Huvitav on see, et seda tehnikat kasutavad peaaegu kõik pärisrakendused ja see muudab nad isegi kohutavates võrkudes väga reageerivaks, kuid seda ei kasutata veebis peaaegu kunagi!

Selliselt võimalus peitub!

Lühidalt, skeleti ekraanid tagavad, et iga kord, kui kasutaja puudutab mõnda nuppu või linki, reageerib leht kohe, viies kasutaja sellele uuele lehele ja laadides seejärel sisu sellele lehele, kui sisu muutub kättesaadavaks.

Facebook kasutab skeletiekraani, et parandada esmakordset avamist tajutavat jõudlust

Skeleti ekraanid on peamine tajutav jõudlustehnika, kuna need muudavad rakendused palju kiiremaks, vähendades dramaatiliselt hetkede arvu, kus kasutaja jääb imestama:

Mis toimub? Kas see laadib isegi? Kas ma koputasin seda õigesti?

Flipkart.com on haruldane näide veebisaidist, mis seda lähenemisviisi kasutab. Seetõttu tunneb kategooriate sirvimine või toodetele koputamine välkkiire kiirust, isegi kui tegelike tulemuste laadimine võtab mõne sekundi:

Androidi avaekraanilt eraldiseisvas režiimis käivitatud flipkart.com ekraanipilt

Kui seda tehnikat kõige paremini kasutatakse, saab juba olemasolevat sisu, nagu pisipilte või artiklite pealkirju, uuesti kasutada, et veelgi parandada tajutavat jõudlust, muutes koormused tõeliselt koheseks.

app.jalantikus.com kasutab skeletit Ekraanid ja kasutab pealkirjade ja pisipiltide kasutamist üleminekute ajal

Saitide testimine skeleti ekraanidega

Saite seda tehnikat hästi testida on lihtne: võrgu võimalikult aeglaseks muutmiseks kasutage lihtsalt Chrome'i võrguemulatsiooni ja klõpsake siis saidil ringi. Kui tal läheb see hästi, tunneb sait endiselt lohakat ja reageerib teie sisendile.

Chrome'i võrgu emulatsioonis toetatud aeglasem kiirus

Tehnika 2: „Stabiilne koormus” elementide eelnevalt kindlaksmääratud suuruste kaudu

Kas teate seda tunnet, kus veebisait hüppab ringi, kui proovite seda kasutada? Kas proovite lihtsalt artiklit lugeda ja tekst liigub pidevalt? Seda nimetatakse nn ebastabiilseks koormaks ja me peame selle tulega põletama .

slate.com sisu hüppab lehe laadimisel väga agressiivselt ringi. Mida aeglasem võrk on, seda pikemaks see hüppab.

Ebastabiilne koormus muudab veebisaitide kasutamise raskeks ja paneb neid tundma… noh… ebastabiilne!

Ebastabiilse saidi sirvimine tuletab mulle alati meelde, kuidas ma kujutan ette, kuidas tunneks maavärina ajal ringi kõndida

Ebastabiilse koormuse põhjustavad lehele manustatud pildid ja reklaamid, mis ei sisalda suurusteavet. Vaikimisi teab brauser nende suurust alles siis, kui nad on laaditud, nii et niipea, kui pilt laaditakse, THUNK!, Libiseb kogu leht alla .

Selle vältimiseks peavad kõik lehe sildid ennetavalt sisaldama pildi mõõtmeid, mida need sisaldavad.

Paljudel juhtudel on teatud lehtedel kasutatavad pildid alati ühesuurused ja seetõttu saab nende suuruse lihtsalt HTML-malli lisada, kuid mõnel juhul on piltide suurus dünaamiline ja seega tuleks nende suurus arvutada pildi üleslaadimisel ja seejärel malliliseks HTML-i, kui see on loodud.


Sama kehtib reklaamide kohta, sageli ebastabiilsete koormuste süüdlane. Kui vähegi võimalik, looge jaotis, mis sisaldab reklaami, ja määrake mallide suuruses suurus, mille järgi saate arvata, kui suur see reklaam saab olema.

Pidage meeles, et ebastabiilne koormus on halvimal juhul aeglastes võrkudes, kuna olete just hakanud sisu lugema, kui äkki see hüppab, ja te ei saa kunagi olla kindel, et olete ohutu.

Kõike kokku panema

Olen ehitanud väikese demonstratsioonisaidi aadressil reactive.surge.sh, et näidata erinevust tavapärase ja reaktiivse veebidisaini vahel.

Tavaline toodete laadimine

Pange tähele, kui aeglane see tundub ja kui masendav on sisu hüppamine. Huvitaval kombel on see suurusjärk mobiilsideseadmetes tüütum, kui ta ekraanil koputab ja ei näe, kuidas see reageerib.

Reaktiivse veebidisainiga artikli laadimine

Reaktiivse kujunduse korral tundub koormus kohene ja sait jääb tagasi ikooni ja artikli pealkirja mitu korda koputades reageerivaks

Pakkimine üles

Mida aeglasem võrk on, seda halvemaks muutub kasutajakogemus, kui lehe üleminekud blokeerivad võrgus ja lehed hüppavad pikemaks ajaks ringi.

Reaktiivse veebidisaini abil saame muuta oma kogemused lohakaks ja reageerivaks (“Responsive Design”, nagu nimi juba võeti, d’oh!) Isegi aeglastes ja valusas võrgus.

Mulle meeldiks kuulda kogukonna andmeid tajutava jõudluse mõju kohta KPI-dele, näiteks kaasatus ja tulu!

Lisaks julgustaksin raamistike ja raamatukogude autoreid kaaluma, kuidas muuta skeleti ekraanid ja stabiilsed laadimised vaikeseadeks, mida nimetatakse ka edu tipuks.

Kui teil on selle kohta mõtteid, siis säutsuge palun mulle @owencm ja kui teile see meeldis, siis andke see ♥!

P.S. tutvuge kindlasti mobiilseadme demonstratsioonisaidiga reactive.surge.sh, et see oleks täies hiilguses!