Reaktivni web dizajn: tajna izrade web aplikacija koje djeluju nevjerojatno

U posljednjih godinu dana primijetio sam dvije suptilne tehnike koje koriste neki programeri koji koriste web-aplikaciju od osjećaja sporosti i laganosti do vrlo reaktivnog i poliranog.

Vjerujem da su ove tehnike dovoljno važne da im treba naziv: Reaktivni web dizajn.

Ukratko, reaktivni web dizajn skup je tehnika koje se mogu koristiti za izradu web lokacija koje se uvijek osjećaju brzo i osjetljivo na korisnikov unos, bez obzira na brzinu ili kašnjenje mreže.

Kao web programeri i autori okvira vjerujem da je pronalaženje načina da se ovi obrasci postave zadani u svemu što izgradimo glavni prioritet za poboljšanje UX-a i percipirane performanse na webu.

Tehnika 1: Trenutno opterećenje skeletnim ekranima

Kad se dobro koristi, ova se tehnika gotovo nikada ne primjećuje, ali ima ogroman utjecaj na percipirane performanse web mjesta.

Zanimljivo je da se tehnika koristi gotovo svim izvornim aplikacijama i čini ih vrlo reaktivnim čak i na užasnim mrežama, ali gotovo se nikad ne koristi na webu!

Prilika ovako leži!

Ukratko, kosturni zasloni osiguravaju da kad god korisnik dodirne bilo koji gumb ili vezu, stranica odmah reagira prelaskom korisnika na tu novu stranicu, a zatim učitavanjem sadržaja na tu stranicu kada sadržaj postane dostupan.

Facebook pomoću kosturnog ekrana za poboljšanje uočenih performansi prilikom prvog otvaranja

Skeletni zasloni ključna su tehnika performansi jer čine da se aplikacije osjećaju mnogo brže, što drastično smanjuje broj trenutaka u kojima se korisnik pita:

Što se događa? Da li se uopće učitava? Jesam li dobro tonuo?

Flipkart.com je rijedak primjer web stranice koja koristi ovaj pristup. Pregledavanje kategorija ili dodirivanje proizvoda stoga djeluje munjevito, čak i kada se za učitavanje stvarnih rezultata traži nekoliko sekundi:

Snimka zaslona flipkart.com pokrenuta s početnog zaslona u samostalnom načinu Androida

Kada se ova tehnika najbolje koristi, sadržaj koji je već dostupan, poput sličica ili naslova članaka, može se ponovno upotrijebiti za još bolju percepcijsku izvedbu, čineći da se opterećenja doista trenutačno osjećaju.

app.jalantikus.com upotrebljava uzorak skeleta skeleta i upotrebljava naslove i sličice preko prijelaza

Ispitivanje mjesta sa skeletnim ekranima

Testiranje koliko dobro web stranice koriste ovu tehniku ​​je jednostavno: jednostavno upotrijebite emulaciju Chrome mreže kako bi mreža bila što sporija, a zatim kliknite web lokaciju. Ako to radi dobro, stranica će se i dalje osjećati ćudljivo i reagirati na vaš unos.

Najsporija brzina podržana u emulaciji Chrome mreže

Tehnika 2: "Stabilna opterećenja" pomoću unaprijed definiranih veličina elemenata

Znate onaj osjećaj gdje se web stranica preskače dok ga pokušavate koristiti? Jednostavno pokušavate pročitati članak, a tekst se stalno kreće? To je ono što nazivamo "nestabilnim teretom" i trebamo ga paliti vatrom .

Sadržaj slate.com skače vrlo agresivno dok stranica učitava. Što je mreža sporija, to duže traje.

Nestabilna opterećenja otežavaju međusobnu komunikaciju i osjećaju se ... dobro ... Nestabilno!

Pregledavanje nestabilne stranice uvijek me podsjeća na to kako mislim da bi se osjećao hodati naokolo tijekom zemljotresa

Nestabilno opterećenje uzrokuju slike i oglasi ugrađeni u stranicu, ali ne uključuju nikakve podatke o veličini. Preglednik prema zadanim postavkama zna veličinu istih tek nakon što su se učitali, pa čim se slika učita, THUNK !, cijela stranica klizi prema dolje .

Da biste to spriječili, sve oznake na stranici moraju proaktivno uključivati ​​dimenzije slike koju će sadržavati.

U mnogim slučajevima slike koje se koriste na određenim stranicama uvijek su iste veličine, pa se njihova veličina može jednostavno uključiti u HTML predložak, ali u nekim slučajevima je veličina slika dinamična i stoga njihova veličina treba biti izračunata kad je slika prenesena, a zatim predložena. u HTML kada se stvori.


Isto vrijedi i za oglase, često krivce za nestabilno opterećenje. Gdje god je to moguće, stvorite div koji će sadržavati oglas i postavite ga prema predlošku kako biste ga dimenzionirali sa svojim najboljim nagađanjima koliko će ovaj oglas biti velik.

Imajte na umu da je nestabilno opterećenje najgore na sporim mrežama jer ste se tek smjestili u čitanje sadržaja kad odjednom to poskoči, i nikad ne možete biti sigurni da ste sigurni.

Stavljajući sve zajedno

Izradio sam malu demo stranicu na reactive.surge.sh kako bih pokazao razliku između konvencionalnog i reaktivnog web dizajna.

Uobičajeno učitavanje članaka

Imajte na umu kako se to sporo osjeća i kako frustrirajuće skače sadržaj. Zanimljivo je da su ovi redoslijedi neugodniji na mobilnim uređajima prilikom dodirivanja zaslona i ne vidim da reagira.

Učitavanje članka s reaktivnim web dizajnom

Reaktivnim dizajnom opterećenje se osjeća trenutačno, a web mjesto ostaje reaktivno kada više puta dodirnete ikonu pozadine i naslov članka

Završavati

Što je mreža sporija, to je korisničko iskustvo lošije kada se prijelazi stranica blokiraju na mreži i stranice se preskaču tijekom dužeg razdoblja.

Pomoću Reaktivnog web dizajna možemo učiniti da se naše iskustvo osjeća lažno i lako ("responzivni dizajn" kao što je ime već bilo, d'oh!), Čak i na sporim i bolnim mrežama.

Volio bih čuti o podacima zajednice o učinku percipirane performanse na KPI-jeve, poput angažmana i prihoda!

Uz to, potičem autore okvira i biblioteke da razmisle kako da postave kosturne zaslone i stabilna opterećenja kao zadane, poznate i kao jama uspjeha.

Ako razmišljate o ovome, molim vas, tweetujte me @owencm, a ako ste uživali u ovom molim vas dajte give!

p.s. budite sigurni da ćete provjeriti demo web lokaciju reactive.surge.sh na mobilnom uređaju da bude pun sjaj!