Deze frontend innovaties zorgen voor een optimale gebruikerservaring

datum 27 februari 2023

auteurJelmer de Maat

Van nieuwe uitvinding naar minimale verwachting van gebruikers

Netvlies bevindt zich als online partner continu op het snijvlak van gevestigde standaarden en de nieuwste technische innovaties. Technologie ontwikkelt zich continu en gebruikers verwachten steeds meer van hun digitale apparaten. Als ik bijvoorbeeld terugkijk naar de presentatie van de eerste iPhone in 2007, kan ik me nog maar het gevoel van verwondering dat ik destijds had voorstellen. In de context van vandaag val je bijna van je stoel als je bedenkt wat er destijds allemaal nog niet bestond. Een touchscreen dat meerdere aanrakingen ondersteunt was toen nog een uitvinding. We moeten de gigantische impact van de iPhone (en vergelijkbare apparaten) op het bouwen van websites uiteraard niet onderschatten.

Opeens was de wereld van websites niet meer minimaal 1024 pixels breed en had niet iedereen die je website bezocht meer een ‘snelle’ ADSL verbinding. Er was enorm veel werk aan de winkel. Bedrijven boden eerst een mobiele versie van hun website aan die veel kleiner was, maar vaak ook veel minder informatie gaf. Uiteindelijk is daarom het gedachtegoed van responsive design de norm geworden: één website die alle gebruikers op elk apparaat bedient. Innovatie op basis van gebruikerservaringen speelt vandaag de dag nog steeds een grote rol in het werk van developers. In dit blog licht ik een aantal impactvolle innovaties toe, waar we komende tijd veel meer van gaan zien.

Netvlies medewerkers kijken op een scherm naar de nieuwste frontend innovaties.

De innovaties van nu

Nu het web geen speeltuin meer is, maar een serieuze en onmisbare dienstverlening, verwachten gebruikers professionaliteit. Zo verwachten gebruikers een consistente vormgeving die duidelijkheid en eenheid uitstraalt. Ook verwachten zij een soepele gebruikerservaring, zelfs over verschillende platformen heen. Gebruikers willen dat alles lekker soepel en snel werkt. Ook als ze vanuit WhatsApp naar jouw website, naar iDeal en weer terug naar jouw website gaan. Developers, die zelf ook gebruikers zijn, willen dit heel graag. Daarom wordt altijd gewerkt aan betere manieren om in deze behoeftes te voorzien. Als (frontend) developer merk ik dit iedere dag aan alle innovaties die uitkomen in browsers. En dat zijn er nogal wat!

Consistent visueel gedrag toekennen

Één van de dingen die in de nabije toekomst makkelijker wordt, is consistent visueel gedrag toekennen aan componenten. Op dit moment is responsive design visueel gekoppeld aan de grootte van een browser. Styling kun je veranderen via CSS: cascading stylesheets, de taal waarin je het volledige uiterlijk van een pagina opbouwt. Dit doe je op basis van hoe breed een scherm is met zogenaamde media queries, iets wat in iedere website (sinds de iPhone) super belangrijk is.

Veel designs zijn echter zo gemaakt dat elementen herbruikbaar zijn op meerdere plekken: een component gebaseerd design. Een component dat een link is naar een blogartikel kan heel smal of heel breed zijn, afhankelijk van hoeveel er naast elkaar staan. Op de ene pagina is dat anders dan op de andere pagina en is dit niet afhankelijk van je schermgrootte, maar van de grootte van de context. De context is hier de container: het bovenliggende component waar het in geplaatst is.

Container queries

Om styling makkelijker aan te kunnen passen aan de context in plaats van je scherm, zijn recent container queries bedacht. Met de gevestigde media queries kun je een component regels geven op basis van een scherm. Met container queries kun je een component regels geven op basis van zijn container. Hierdoor kun je met minder code betere, simpele logica aanbrengen die de styling van de website consistenter maakt. Dit zorgt ervoor dat je met minder code betere, simpele logica kunt aanbrengen, die de styling van de website consistent maakt. Zo wordt het makkelijker om een professioneel ogende styling neer te zetten. Dit gaat heel goed samen met een andere nieuwe ontwikkeling, namelijk die van web components.

Web components

Web components stellen developers in staat om het functionele gedrag van een component eenmalig te definiëren en daarna oneindig te hergebruiken. Dit kon altijd al, alleen niet op een mooie, officiële, gestandaardiseerde manier. Je had vaak omwegen met veel code nodig. Wat een negatieve impact heeft op de laadtijd van je website en een website langzamer maakt voor gebruikers. Ook de SEO score die je van Google krijgt wordt er door beïnvloed. Daarom was het een grote wens onder developers om dit te standaardiseren en dat begint te lukken!

Cascade layers

Sowieso zitten er op het gebied van vormgeving hele handige verbeteringen aan te komen. Je kunt aan de nieuwste toevoegingen zien dat CSS als taal steeds volwassener wordt. Een voorbeeld is een feature genaamd cascade layers, die developers in staat stelt om veel betere controle te krijgen over de verschillende prioriteiten binnen 1 stylesheet. Je kunt nu zelf een zogenaamde cascade layer in je code aanbrengen, waarmee je de prioriteit van dat specifieke stuk code hoger of lager maakt. Hierdoor is het veel makkelijker om al je code die met styling te maken heeft te organiseren en dat resulteert in meer controle, meer uniformiteit en minder visuele bugs.

Variable fonts

Daarnaast wordt het mogelijk om creatiever te zijn met lettertypes, specifiek in de verschillende visuele eigenschappen daarvan. Met variable fonts krijg je oneindige opties binnen één lettertype. Voorheen maakte een designer een vaste set aan bijvoorbeeld diktes. Online aangeduid met gewichten als 100, 400, 500, of 600. Hetzelfde geldt voor schuintes, breedtes en andere stijlopties. Dat kunnen 2 variaties zijn, maar ook 20. Met variable fonts wordt dit aantal oneindig. Het font is op zo’n manier gebouwd dat het niet langer bestaat uit vaste waarden, maar uit wiskundige functies die een letter naar wens anders kunnen weergeven. Dit heeft ook een positieve uitwerking op de laadtijd van je website als je met verschillende variaties werkt: je hoeft niet langer voor elke variatie een nieuw font bestand te laden.

Als developers binnen Netvlies juichen we deze vernieuwingen enorm toe. Gebruikers staan centraal in ons werk. We kunnen op deze manier beter voldoen aan de wensen van de gebruikers, waardoor we uiteindelijk onze klanten meer waarde leveren. Zo stellen de vernieuwingen ons in staat om websites sneller en beter onderhoudbaar te maken, zonder af te doen aan andere kwaliteiten. Ook kunnen we in minder tijd een veel complexer of vernieuwender design neerzetten, dat gebruikers nog meer aanspreekt.

De innovaties van overmorgen

Ook op het gebied van interactie en motion design gebeurt veel. Zo wordt druk nagedacht over hoe een website beter kan aansluiten op de verwachtingen van gebruikers rondom apps: wat zijn nu de pijnpunten waarom gebruikers eerder een app erbij pakken dan een website?

View Transitions

Één van die punten is dat apps in staat zijn om op een mooie manier tussen verschillende schermen te wisselen, terwijl sommige elementen (zoals een menubalk) in beeld blijven staan. Als je online op een link klikt, ververst de hele pagina zich in één flits. Dat moet ook, omdat je naar een andere url gaat. Dat willen we behouden, maar visueel kan dit beter. Daarom wordt een feature ontwikkeld die hetzelfde gedrag als bij apps toestaat, maar dan op websites! Via View Transitions zou het mogelijk moeten worden om als developer aan te geven dat de menubalk in beeld blijft staan en de rest van de pagina ververst mag worden. De gebruikerservaring wordt hier veel beter door. Wat hopelijk meer gebruikers prikkelt om een website in plaats van app te gebruiken.

Scroll linked animations

Features als View Transitions kun je in principe nu al bouwen, maar dit heeft een aantal nadelen. Op dit moment komen dergelijke features met veel extra complexiteit voor developers. Pak je het niet op de juiste manier aan, dan kan dit de laadtijd negatief beïnvloeden. Wat weer kan leiden tot een negatieve pagina beoordeling van Google en mogelijk een lagere positie in de zoekresultaten.

Dit kun je voorkomen door technieken te gebruiken die in de browser beschikbaar zijn in plaats van die technieken zelf toe te voegen. Een laatste voorbeeld hiervan is een verwachte feature die scroll linked animations heet. Met deze feature kun je animerende elementen op een pagina direct koppelen aan de positie van de scrollbalk. Ook dit kan je nu al zelf bouwen, maar zorgt voor heel veel extra code. Met scroll linked animations wordt het mogelijk om in slechts enkele woorden een animatie te bouwen die een voortgang heeft die precies gelijk is aan de progressie van je scrollbalk. Voor developers wordt het hiermee veel makkelijker om toffe animaties toe te voegen. Dit is veel meer verantwoord op gebied van gebruiksgemak en laadtijd.

Het is nog niet zeker wanneer View Transitions en scroll linked animations gereed zullen zijn, omdat nog wordt gewerkt aan de precieze regels. Mijn verwachting (en hoop!) is dat ze binnen ongeveer 1 jaar te gebruiken zullen zijn.

Vakgebied is en blijft continu in beweging

Mijn vakgebied is superleuk, omdat het continu in beweging is. Technologische innovaties, zoals de opkomst van nieuwe apparaten en de daarmee gepaard gaande veranderingen in de manier waarop mensen websites gebruiken, hebben in het verleden geleid tot nieuwe normen als responsive design. Ook vandaag de dag zorgt dit voor steeds hogere verwachtingen van gebruikers. De behoefte aan professionaliteit, consistentie en een soepele gebruikerservaring blijft groeien. Constant wordt gewerkt aan nieuwe, betere manieren om hieraan te voldoen. Recente ontwikkelingen, zoals container queries en View Transition, zullen zorgen dat websites steeds beter aansluiten bij de wensen van gebruikers.

Als developer is het mijn ultieme doel om de gebruiker een zo goed mogelijke ervaring te bieden en een zo goed mogelijk product op te leveren. Wat uiteraard weer zorgt voor een tevreden klant! Netvlies blijft graag op de hoogte van recente ontwikkelingen, zodat we de beste technieken gebruiken om de beste producten op te leveren die aan de veranderende behoeften van gebruikers (en dus die van onze klanten) blijven voldoen.