Reaktív webdesign: A csodálatosnak érző webes alkalmazások létrehozásának titka

Az elmúlt évben két finom technikát tapasztaltam meg néhány fejlesztő által, amelyek a webes alkalmazást a lassú és Janky-féle érzéstől a nagyon reaktív és csiszolt állapotig veszik át.

Úgy gondolom, hogy ezek a technikák elég fontosak ahhoz, hogy nevekre szükségük legyen: Reaktív webdesign.

Összefoglalva: a reaktív webdesign olyan technikák összessége, amelyek felhasználhatók olyan webhelyek létrehozására, amelyek mindig gyorsak és érzékenyek a felhasználói beadásokra, függetlenül a hálózati sebességtől vagy késleltetéstől.

Webfejlesztőkként és keretkészítőként úgy vélem, hogy az UX és az interneten észlelt teljesítmény javítása szempontjából kiemelkedő prioritás a módja annak, hogy ezeket a mintákat alapértelmezettként tegyük alapjául minden, amit építünk.

1. technika: Azonnali terhelések csontváz képernyőkkel

Megfelelő alkalmazás esetén ezt a technikát szinte soha nem veszik észre, ám hatalmas hatással van a webhely észlelt teljesítményére.

Érdekes, hogy ezt a technikát szinte minden natív alkalmazás használja, és nagyon reaktív érzetet teremt még szörnyű hálózatokon is, de szinte soha nem használják az interneten!

Ilyen lehetőség rejlik!

Röviden: a vázas képernyők biztosítják, hogy minden alkalommal, amikor a felhasználó megérinti a gombot vagy linket, az oldal azonnal reagál: áttér a felhasználóra az új oldalra, majd az adott oldalra betölti a tartalmat, amint a tartalom elérhetővé válik.

A Facebook egy csontváz képernyő használatával javítja az észlelt teljesítményt az első megnyitáskor

A vázas képernyők a legfontosabb észlelt teljesítmény-technikák, mivel az alkalmazások sokkal gyorsabban érzik magukat, drasztikusan csökkentve azon pillanatok számát, amikor a felhasználónak kíváncsi van:

Mi folyik itt? Még a rakodás is? Jól megérintettem?

A Flipkart.com ritka példa egy olyan webhelyre, amely ezt a megközelítést használja. A kategóriák közötti böngészés vagy a termékek megérintése ezért villámgyorsan érzi magát, még akkor is, ha a tényleges eredmények betöltése néhány másodpercig tart:

A kezdőképernyőn önálló módban indította el a flipkart.com képernyőképe, Androidon

Amikor ezt a technikát alkalmazzák a legjobban, a már elérhető tartalmakat, például a miniatűröket vagy a cikkcímeket újra felhasználhatjuk, hogy tovább javítsuk az észlelt teljesítményt, hogy a rakományok valóban azonnali érezhetővé váljanak.

Az app.jalantikus.com a Csontváz képernyők mintát használja, és a címeket és a miniatűröket újrafelhasználja az átmenetek során

Telepek tesztelése csontváz képernyőkkel

Könnyen tesztelni tudja, hogy a webhelyek jól használják ezt a technikát: egyszerűen használja a Chrome hálózati emulációt a hálózat lehető lelassításához, majd kattintson egy webhely körül. Ha jól csinálja, akkor a webhely továbbra is szellemesnek és reagálónak fogja adni az Ön adatait.

A Chrome-hálózat emulációja által támogatott leglassabb sebesség

2. technika: „Stabil terhelések” az elemek előre meghatározott méretén keresztül

Tudod azt az érzést, amikor egy webhely ugrál körül, miközben próbálsz használni? Csak egy cikket próbál elolvasni, és a szöveg folyamatosan mozog? Ezt nevezzük „instabil terhelésnek”, és azt tűzzel kell égetni .

A slate.com tartalma nagyon agresszív módon ugrál az oldal betöltésekor. Minél lassabban működik a hálózat, annál tovább ugrik.

Az instabil terhelések megnehezítik a webhelyek kölcsönhatását, és úgy érzik, hogy… nos… instabilok!

Az instabil webhely böngészése mindig arra emlékeztet, hogy milyen érzésem lenne sétálni egy földrengés során

Az instabil terhelést az oldalba ágyazott képek és hirdetések okozzák, de nem tartalmaznak méretezési információt. Alapértelmezés szerint a böngésző csak akkor tudja megnézni ezek méretét, miután betöltötték őket, tehát amint egy kép betöltődik, THUNK !, az egész oldal lecsúszik .

Ennek megakadályozása érdekében az összes címkének proaktívan tartalmaznia kell a kép méretét.

Sok esetben az egyes oldalakon használt képek mindig azonos méretűek, így méretüket egyszerűen bele lehet foglalni a HTML sablonba, de bizonyos esetekben a képek mérete dinamikus, és ezért méretüket a kép feltöltésekor és a sablonként kell kiszámítani. beillesztésekor a HTML-be.


Ugyanez vonatkozik a hirdetésekre, amelyek gyakran bűnösnek bizonyultak instabil terheléseknél. Ahol lehetséges, hozzon létre egy div-ot, amely tartalmaz egy hirdetést, és a sablonjában állítsa be méretére, a lehető legjobb meggondolással, hogy mekkora lesz ez a hirdetés.

Ne feledje, hogy a bizonytalan terhelés a legrosszabb a lassú hálózatokon, mivel éppen akkor olvastam a tartalmat, amikor hirtelen felugrott, és soha nem lehet teljesen biztos abban, hogy biztonságban van.

Összerakva mindent

Felépítettem egy kis demonstrációs webhelyet a reactive.surge.sh címen, hogy megmutassam a különbséget a hagyományos és a reaktív webdesign között.

Hagyományos cikk berakodása

Vegye figyelembe, hogy milyen lassan érzi magát, és milyen bosszantó a tartalom ugrása. Érdekes módon ezt a nagyságrendi bosszantónak találom a mobil eszközöket, amikor megérinti a képernyőt, és nem látja, hogy a képernyő reagál.

Reaktív webdizájnnal ellátott cikk betöltése

Reaktív kialakítás esetén a rakomány azonnalinak érzi magát, és az oldal reaktív marad, ha többször megérinti a Vissza ikont és a cikk címét

Csomagolás

Minél lassabb a hálózat, annál rosszabbá válik a felhasználói élmény, amikor az oldalátmenetek blokkolják a hálózatot, és az oldalak hosszabb ideig ugrálnak.

A Reaktív Web Design használatával élményünket pillanatok alatt reagálóvá és reagálóvá tehetjük (a „Responsive Design”, ahogy ezt már nevezték, d’oh!) Még a lassú és fájdalmas hálózatokban is.

Szeretnék hallani a közösség adatait az észlelt teljesítménynek a KPI-kre gyakorolt ​​hatásáról, például az elkötelezettségről és a bevételről!

Ezenkívül arra buzdítanám a keretrendszer és a könyvtárak íróit, hogy fontolják meg, hogyan lehet csontváz képernyőket és stabil betölteni alapértelmezettként, más néven a siker gödörét.

Ha bármilyen gondolatod van erről, kérlek, tweetelj nekem @owencm, és ha tetszett, kérlek, adj neki egy ♥ -t!

Ui feltétlenül nézd meg a mobil eszközön a reactive.surge.sh demonstrációs webhelyet, hogy teljes dicsőség legyen!