Reactive Web Design: het geheim van het bouwen van web-apps die geweldig aanvoelen

In het afgelopen jaar heb ik twee subtiele technieken gezien die door sommige ontwikkelaars worden gebruikt en die een webapp van langzaam en janky tot zeer reactief en gepolijst maken.

Ik geloof dat deze technieken belangrijk genoeg zijn dat ze een naam nodig hebben: Reactive Web Design.

Samenvattend is reactief webontwerp een set technieken die kunnen worden gebruikt om sites te bouwen die altijd snel en responsief op gebruikersinvoer aanvoelen, ongeacht de netwerksnelheid of latentie.

Als webontwikkelaars en framework-auteurs geloof ik dat het vinden van manieren om deze patronen standaard te maken in alles wat we bouwen, een topprioriteit is voor het verbeteren van UX en waargenomen prestaties op het web.

Techniek 1: Onmiddellijke ladingen met skeletschermen

Bij goed gebruik wordt deze techniek bijna nooit opgemerkt, maar heeft een enorme impact op de waargenomen prestaties van een site.

Interessant is dat de techniek door bijna alle native apps wordt gebruikt en dat ze zeer reactief aanvoelen, zelfs op vreselijke netwerken, maar het wordt bijna nooit op internet gebruikt!

Kans op deze manier ligt!

Kort gezegd zorgen skeletschermen ervoor dat telkens wanneer de gebruiker op een knop of link tikt, de pagina onmiddellijk reageert door de gebruiker naar die nieuwe pagina over te zetten en vervolgens inhoud naar die pagina te laden wanneer de inhoud beschikbaar komt.

Facebook gebruikt een skelet om de waargenomen prestaties te verbeteren wanneer u het voor het eerst opent

Skeletschermen zijn een belangrijke waargenomen prestatietechniek omdat ze ervoor zorgen dat applicaties veel sneller aanvoelen, waardoor het aantal momenten waarop de gebruiker zich afvraagt ​​dramatisch wordt verminderd:

Wat is er aan de hand? Wordt het zelfs geladen? Heb ik het goed getikt?

Flipkart.com is een zeldzaam voorbeeld van een website die gebruik maakt van deze aanpak. Bladeren door categorieën of tikken op producten voelt daarom razendsnel, zelfs als het laden van de daadwerkelijke resultaten enkele seconden duurt:

Een schermopname van flipkart.com gelanceerd vanaf het startscherm in de zelfstandige modus op Android

Wanneer deze techniek het beste wordt gebruikt, kan inhoud die al beschikbaar is, zoals miniaturen of artikeltitels, opnieuw worden gebruikt om de waargenomen prestaties nog verder te verbeteren, waardoor ladingen echt direct aanvoelen.

app.jalantikus.com maakt gebruik van het Skeleton Screens-patroon en hergebruikt titels en thumbnails in overgangen

Testsites met skeletschermen

Testen hoe goed sites deze techniek gebruiken is eenvoudig: gebruik eenvoudig Chrome-netwerkemulatie om het netwerk zo traag mogelijk te maken en klik vervolgens rond een site. Als het dit goed doet, zal de site nog steeds pittig aanvoelen en reageren op uw input.

De laagste snelheid die wordt ondersteund in Chrome-netwerkemulatie

Techniek 2: "Stabiele belastingen" via vooraf gedefinieerde afmetingen op elementen

Ken je dat gevoel waar een website rondspringt terwijl je hem probeert te gebruiken? U probeert gewoon een artikel te lezen en de tekst blijft maar bewegen? Dat is wat we een "onstabiele lading" noemen, en we moeten het met vuur verbranden .

slate.com-inhoud springt zeer agressief rond terwijl de pagina wordt geladen. Hoe langzamer het netwerk is, hoe langer het springt.

Onstabiele ladingen maken websites moeilijk om mee te werken en geven ze het gevoel ... nou ja ... onstabiel!

Het surfen op een onstabiele site herinnert me er altijd aan hoe ik het me zou voorstellen om rond te lopen tijdens een aardbeving

Onstabiele ladingen worden veroorzaakt door afbeeldingen en advertenties die zijn ingesloten in een pagina, maar geen informatie over de grootte. Standaard weet de browser de grootte van deze pas nadat ze zijn geladen, dus zodra een afbeelding wordt geladen, schuift de hele pagina naar beneden .

Om dit te voorkomen, moeten alle -tags op een pagina proactief de afmetingen van de afbeelding bevatten.

In veel gevallen hebben afbeeldingen die op bepaalde pagina's worden gebruikt altijd dezelfde grootte en kan hun grootte dus eenvoudig in de HTML-sjabloon worden opgenomen, maar in sommige gevallen is de grootte van afbeeldingen dynamisch en moet hun grootte worden berekend wanneer de afbeelding wordt geüpload en vervolgens als sjabloon wordt weergegeven in de HTML wanneer deze is gemaakt.


Hetzelfde geldt voor advertenties, vaak een dader als het gaat om onstabiele ladingen. Maak waar mogelijk een div die een advertentie zal bevatten en stel deze in uw sjabloon in op basis van uw beste inschatting hoe groot deze advertentie zal zijn.

Merk op dat onstabiele belastingen het slechtst zijn op trage netwerken, omdat je net bent begonnen met het lezen van inhoud wanneer deze plotseling springt, en je nooit zeker kunt zijn dat je veilig bent.

Alles bij elkaar gezet

Ik heb een kleine demosite gebouwd op reactive.surge.sh om het verschil tussen conventioneel en reactief webontwerp te demonstreren.

Conventioneel laden van artikelen

Merk op hoe traag het voelt en hoe frustrerend content springen is. Interessant genoeg vind ik deze orden van grootte meer vervelend op mobiele apparaten wanneer ik op het scherm tik en het niet zie reageren.

Een artikel laden met reactief webontwerp

Met een reactief ontwerp voelt de belasting onmiddellijk aan en blijft de site reactief wanneer u meerdere keren op het pictogram terug en de titel van het artikel tikt

Afsluiten

Hoe langzamer het netwerk is, hoe slechter de gebruikerservaring wordt wanneer paginaovergangen op het netwerk worden geblokkeerd en pagina's langere tijd rondspringen.

Met Reactive Web Design kunnen we onze ervaring pittig en responsief maken ("Responsive Design" zoals een naam al werd gebruikt, doh!), Zelfs op trage en pijnlijke netwerken.

Ik hoor graag over gegevens van de community over het effect van waargenomen prestaties op KPI's zoals betrokkenheid en omzet!

Daarnaast zou ik framework- en bibliotheekauteurs aanmoedigen om te overwegen hoe skeletschermen en stabiele ladingen de standaard worden, ook wel de put van succes genoemd.

Als je hierover denkt, tweet me dan alsjeblieft @owencm, en als je dit leuk vond geef het dan een ♥!

Postscriptum bekijk zeker de demo-site reactief.surge.sh op een mobiel apparaat voor de volledige glorie!