Voor onze klanten bouwen we diverse oplossingen, van websites en webshops tot applicaties die hele interne bedrijfsprocessen veranderen. Een oplossing kan pas het gewenste resultaat opleveren als de beoogde gebruikers er gebruik van kunnen en willen maken. Trends en ontwikkelingen op het gebied van techniek en gebruik spelen hierbij een belangrijke rol. Als front-end web developer zit ik hier middenin. Tijdens projecten merk ik dat klanten vaak niet op de hoogte zijn van de laatste ontwikkelingen en mogelijkheden, waardoor niet altijd de juiste prioriteiten worden gesteld en keuzes worden gemaakt. Dit kan impact hebben op de resultaten van de oplossing. Daarom adviseer ik klanten en collega’s continu over de nieuwe mogelijkheden die ontstaan en hoe we deze het beste in kunnen zetten. In dit blog vertel ik hoe wij business en techniek aan elkaar koppelen en wat in onze optiek een goede front-end is. Wat is front-end development? Voordat ik je meeneem in mijn verhaal wil ik eerst stilstaan bij wat front-end is. Een goede front-end speelt een belangrijke rol bij het realiseren van een goede gebruikerservaring. Vaak wordt simpel gezegd dat front-end het omzetten van design naar werkende webpagina in de browser is. Alles wat je daarbij in je browser ziet als gebruiker is front-end. Wat je niet ziet gebeurt op de server. Dat is back-end. In principe is deze stelling juist, maar de definitie van front-end is tegenwoordig een heel stuk uitgebreider geworden. Misschien kunnen we zelfs stellen dat deze opvatting ouderwets is. Om goed te begrijpen wat een goede front-end is, is het echter eerst nodig om te weten hoe front-end zich in de loop der jaren heeft ontwikkeld.Technische ontwikkelingen door de jaren heen Als front-ender heb ik mijn werk en de kijk op mijn werk in de afgelopen jaren zien veranderen. Toen ik 12 jaar geleden startte was het inderdaad vooral zaak om een Photoshop design om te zetten naar HTML en CSS. Internet Explorer was de populairste browser en websites hadden standaard een beeldresolutie van 800x600. Splash Pages waren hip, net als Flash. Een grote verandering was de komst van 1024x768 schermen en Internet Explorer 7. Deze ontwikkelingen werden vooral ‘opgelost’ door de nieuwe extra ruimte te vullen met herhaalde achtergronden en de compatibility modus standaard aan te zetten. Het leven was simpel en goed, maar daar zou snel verandering in komen. 
Website Netvlies in 2007, niet responsive
Er kwamen nieuwe browsers, zoals Google Chrome. Internet Explorer 6,7,8 en 9 werden veel gebruikte verouderde browsers die geen gebruik maakten van de laatste technologieën. De smartphone kwam, al snel gevolgd door mobiele websites die weer opgevolgd werden door responsive websites. Ondertussen regende het nieuwe devices, waaronder tablets en smartwatches. Deze nieuwe browsers en devices brachten nieuwe mogelijkheden met zich mee. Met HTML5 kregen we de mogelijkheid deze ook te benutten. Door API’s zoals locatie, camera en virtual en augmented reality konden we onze oplossingen verrijken en meerwaarde creëren voor de gebruiker. HTML5 - een nieuwe versie van HTML, een taal waarmee je de website opbouwt - gaf ons ook nieuwe elementen, zoals SVG en video, en mogelijkheden om onze webpagina’s logischer op te zetten, onder andere door middel van de header, section en article elementen. Wat natuurlijk ook weer impact op SEO had. De komst van CSS3 – wat we gebruiken voor de styling van een oplossing – maakte het zoveel makkelijker om designs te realiseren en te animeren zonder Flash. Flash verdween ook langzaam van het toneel in de loop van de jaren, grotendeels doordat het geweerd werd op iOS Devices. Een van de voornaamste redenen voor het weren was dat HTML5 en CSS3 beter toegespitst waren op de moderne mogelijkheden. 
Met NodeJS werd server side JavaScript mogelijk. Hiermee heb je de mogelijkheid om full stack (front- en back-end) JavaScript applicaties te bouwen, waarbij real-time echt real-time is en niet via long polling of short polling. Toch wordt Node vooral gebruikt om het build process van een front-ender te automatiseren. Dit proces is ook nieuw. Kort gezegd worden bestanden waar developers in ontwikkelen omgezet tot bestanden die geoptimaliseerd zijn voor gebruik in de browser. Oftewel de bestanden die websites inladen. Afbeeldingen kunnen automatisch worden geoptimaliseerd. CSS preprocessors talen worden naar CSS omgezet en daarna gecomprimeerd, zodat dit minder groot is wanneer het wordt ingelezen in de browser. Ook JavaScript wordt geoptimaliseerd. Eerder gebeurde dit allemaal handmatig, het kostte dus meer tijd om een webpagina beter te laten performen. Wat belangrijk was, want een verbruikte internetbundel of slechte Wi-fi waren ook een steeds vaker voorkomende fenomenen. De afgelopen 10 jaar was er ook een wildgroei aan JavaScript libraries en frameworks, zoals Angular, Knockout, Ember, Backbone, React en Vue. Single page applications - een website of applicatie die past op een enkele webpagina met het doel een vlotte gebruikerservaring te bieden - zagen daarmee het daglicht. Waarmee ook de term JavaScript developer een stuk populairder werd. 
Focus op performance en user experience De laatste jaren is nog meer focus op het belang van een goede performance - snelheid waarmee webpagina’s worden gedownload en weergegeven in de browser van de bezoeker - en een goede user experience. Google, toch wel de leider in de webwereld, pusht het gebruik van technieken als progressieve webapps. Dat Google veel waarde hecht aan performance, en daarmee gebruiksvriendelijkheid, mag duidelijk zijn. Zeker nadat Google heeft aangekondigd langzame mobiele websites lager in de zoekresultaten te plaatsen. Ook Facebook plaatst websites met een lange laadtijd lager in het nieuwsoverzicht. Om online goed zichtbaar te zijn en blijven, moet je tegenwoordig dus wel ‘iets’ met performance. Veranderingen bij gebruikers Veel ontwikkelingen, waarvan ik nog niet eens alles heb benoemd, op front-end gebied dus. Als we ons verplaatsen in de gebruiker merken we vanzelfsprekend dat ook hier een hoop is veranderd. Tegenwoordig spelen websites en applicaties een grote rol in ons leven. We gebruiken WhatsApp om in contact te blijven met familie en vrienden, kijken films via streamingdiensten als Netflix en Videoland, spelen spelletjes op onze tablet en luisteren muziek via Spotify. Met onze telefoon kunnen we contactloos betalen en navigeren. Ook op kantoor maken we steeds meer gebruik van applicaties. Zo hebben advocatenkantoren binnenkort de mogelijkheid om digitaal te procederen, omdat de overheid de rechtspraak aan het digitaliseren is. Daarom worden momenteel applicaties ontwikkeld die dit faciliteren. Door allerlei snelle diensten op onze mobiel verwachten we tegenwoordig ook van websites, webshops en applicaties dat deze goed en snel presteren. Daarnaast nemen we snelle en goed werkende ontwikkelingen, zoals contactloos betalen, meteen op in ons dagelijks leven. Conclusie: wat is front-end? Ondertussen is front-end een brede en belangrijke discipline geworden waarbij zelfs een aantal sub-disciplines ontstaan. Functies als UX-developer, JavaScript developer en Web animators focussen zich meer op een bepaald deel van het front-end spectrum. Eén ding hebben ze echter allemaal gemeen: de trends en ontwikkelingen op het gebied van techniek en gebruikservaring moeten ze allemaal in de gaten houden. Je zou tegenwoordig dus beter kunnen stellen dat een front-ender een expert is in het kiezen en toepassen van de juiste web technieken en innovaties om zo een sterke, stabiele gebruikerservaring in de browser te creëren die meerwaarde biedt voor eindgebruiker en klant. Maar wat zijn de juiste technieken en innovaties en hoe kies je die? De eindgebruiker staat centraal Op basis van je strategie, doelen en doelgroep bepaal je wat voor oplossing je nodig hebt. Maar in feite draait alles om de eindgebruiker, want die is cruciaal om de gestelde doelen te halen. Voordat je een oplossing gaat bouwen - of laat bouwen - is onderzoek naar de doelgroep nodig. Wie is de doelgroep? Wat verwacht de doelgroep van de eventuele oplossing? Hoe bereikt onze doelgroep ons en welk middel gebruiken ze hierbij? Wat voor type oplossing heeft de doelgroep nodig om de oplossing optimaal te kunnen gebruiken? Zo heeft een ziekenhuis vaak te maken met slechtzienden en laaggeletterden. Voor deze doelgroepen is een voorleesfunctie op de website essentieel om de website te kunnen gebruiken. Een front-ender zorgt voor een goede accessibility door te zorgen dat de voorleesfunctie alles op de website kan ‘lezen’. Zo wordt onder andere de juiste taal ingesteld en krijgen alle afbeeldingen een alternatieve tekst. Voor een webshop is het belangrijk dat deze goed gevonden wordt in de zoekresultaten en dat je zorgt dat de bezoekers, door lange wachttijden, niet afhaken tijdens het bestellen. Het is goed om daarbij steeds weer te kijken of je dit bestelproces makkelijker kunt maken voor de gebruiker. Zo kun je meer sales realiseren. Front-enders kunnen hierbij helpen door te zorgen dat de SEO goed is ingericht, een goede performance score behaald wordt en A/B-testen op te zetten. Bij kleine kinderen is het bijvoorbeeld belangrijk dat meteen duidelijk is hoe een spel werkt en dat het een goede beleving heeft. Anders haken ze af. Een oplossing toegespitst op tablet of mobiel zou hieraan kunnen bijdragen, omdat kinderen hier goed mee overweg kunnen. Een front-ender kan hierbij zorgen voor een goede responsive oplossing waarbij bijvoorbeeld interactie in combinatie met animaties zorgen voor een sterke beleving. 
Pijlers voor een goede front-end Zojuist zijn er wat simpele voorbeelden gegeven waarbij je misschien al een aantal pijlers herkent die zorgen voor een goede front-end. In onze beleving zijn dit, afhankelijk van de type oplossing in meer of mindere mate, de volgende zaken:
- er is een goede consistente user interface - zowel op grafisch als interactie niveau -, afgestemd op de gebruiker, strategie en het middel - device - waarmee de website of applicatie wordt bezocht;
- er is een goede performance (de oplossing werkt snel en gebruikers haken niet af door wachttijden);
- de ervaring wordt gewaarborgd door middel van automatische testen waarbij bijvoorbeeld dagelijks wordt getest of inloggen in een applicatie nog mogelijk is;
- de gemaakte keuzes (qua techniek, uitvoering of invulling) worden continu getoetst en verbeterd waar nodig om resultaten te verbeteren;
- de security en privacy van de gebruiker worden gewaarborgd;
- en de website of applicatie is goed vindbaar (denk hierbij aan het belang van SEO, performance, rich snippets en semantic html).
Als je strategie en doelstellingen zijn bepaald, kun je vaststellen welke pijlers hieraan bijdragen. Vervolgens kun je inhoudelijke technische keuzes gaan maken binnen de pijlers. Meerwaarde voor jouw business Front-end is uiteraard niet de enige discipline die zorgt dat bovenstaande pijlers binnen een project goed verzorgd worden. Het is een team-effort. Om binnen de budget te blijven, kun je zelfs de inbreng van front-end weer helemaal uitkleden tot alleen het omzetten van design naar HTML en CSS. Maar wat is dan de meerwaarde van een goede front-end voor jouw business? Het antwoord op die vraag is eigenlijk vrij simpel: het helpt je de gestelde doelen sneller te behalen. Zo blijkt uit onderzoek dat 53% van mobiele website bezoeken wordt afgebroken als het langer dan 3 seconden duurt om de pagina te laden. Je verliest bezoekers waardoor het behalen van bijvoorbeeld conversiedoelstellingen een stuk lastiger wordt. 
bron: DoubleClick by Google
De pijlers hierboven hebben allemaal meerwaarde, maar de ene pijler zal voor jou vanwege je strategie, doelen en doelgroep zwaarder wegen dan de ander. Het is daarom goed om in een voortraject samen met een front-ender te kijken wat hij op dit vlak voor jou kan betekenen. Wanneer je dus een doelgroep hebt die vooral op mobiel jouw webshop bezoekt, is een investering in een snelle front-end er hoogstwaarschijnlijk eentje die zich snel terugverdiend. Uiteraard zorgen alle pijlers voor een effectieve en efficiënte oplossing waar gebruikers tevreden over zijn. Hierdoor zijn ze sneller geneigd om terug te keren én langer te blijven. Dit maakt de kans op (meer) conversie groter. Daarnaast kan je doelgroep je letterlijk niet goed vinden als je niet werkt aan een goede vindbaarheid. Hoe minder mensen uit je doelgroep je kunnen vinden, hoe lager de kans op conversie. Zoals gezegd zijn oplossingen en applicaties, zoals WhatsApp en Netflix, tegenwoordig niet meer weg te denken uit ons dagelijks leven. Ze hebben een bepaalde verwachtingsstandaard gecreëerd. Een goede front-end zorgt ervoor dat zowel voor de eindgebruiker als de organisatie alles uit de oplossing wordt gehaald. Focus op strategie, doelen en doelgroep is noodzakelijk om tot een goede front-end en daarmee tot een optimale oplossing te komen. Geen blogs missen? Komende tijd zal ik samen met mijn front-end collega’s in een blogreeks dieper ingaan op de verschillende aspecten van een goede front-end en andere technieken die de revue zijn gepasseerd. Wil je geen blog missen? Meld je hieronder in de footer aan voor onze e-mailupdate. Je krijgt een e-mail bij een nieuwe blog over dit onderwerp en kunt andere onderwerpen die je interessant lijken selecteren.