DNS Belgium: dé registry website voor .be, .vlaanderen en .brussels

DNS Belgium is verantwoordelijk voor de organisatie en het beheer van alle .be-, .vlaanderen- en .brussels-domeinnamen. Wij hielpen hen om hun nieuwe website naar een hoger niveau te tillen.

In het kort:

  • Waarom kiest DNS.be Wieni als leverancier?

  • Via workshops leerden we de noden en fijngevoeligheden van de klant kennen

  • Security & privacy stonden zeer hoog op de prioriteitenlijst

  • Flexibiliteit was cruciaal, zowel in het gebruik van het CMS als voor de eigen ontwikkelde webapps

  • Anysurfer label was een must: permanente focus op accessibility in zowel design als development

dns - homepage

Selectieprocedure: waarom Wieni?

Eerst en vooral: waarom kiest dnsbelgium.be, toch de “moederwebsite” van het Belgische internet, uitgerekend Wieni als leverancier? Een selectieprocedure loopt bij Wieni niet aan de hand van ellenlange pitchprocedures, briefings, backlogs, requirements- en scopedocs en contracten. Bij ons begint alles met enkele goede gesprekken om na te gaan of we allebei op dezelfde golflengte zitten. Maw: of er een duidelijk match zit in hoe de klant wil samenwerken en onze eigen werkwijze. Dat is in een duurzame relatie natuurlijk veel belangrijker dan een concreet eindproduct.

Of hoe de klant het zelf verwoordt, met monde van Philip Du Bois, general manager DNS Belgium:

“De keuze voor Wieni was snel gemaakt. We zaten van bij het begin op dezelfde golflengte: wij wilden een toegankelijke website en Wieni bleek hiervoor gecertifieerd. We wilden een gebruiksvriendelijk CMS met veel meer mogelijkheden, Wieni werkte met een moduleset die aanpasbaar was naar onze wensen. Ook beide technische afdelingen zaten op dezelfde golflengte. De agile aanpak van Wieni sloot helemaal aan bij onze manier van werken.”

En dat bleek zich ook te vertalen in de praktische werkwijze tijdens het project:

“We werkten samen in een agile projectmanagement waarbij we allebei konden bijdragen en dit met voldoende flexibiliteit en vertrouwen in elkaars kunnen. Voor ons was security het allerbelangrijkst en Wieni is daar volledig in meegegaan. Het fijne van buren te zijn is dat live communicatie heel efficiënt is om vragen of problemen snel op te lossen.”

Kickoff meeting

Nadat er enkele kleine overlegmomenten zijn geweest met de klant, over plan van aanpak, timing, budget, taakverdeling, etc… komen de grotere projectteams samen van Wieni en DNS Belgium om het project te kickstarten in een kickoff meeting: “It always starts with a bang.” 

Hoe pakten we de kickoff meeting aan?

Deel 1 - Workshop

De eerste helft van de meeting besteden we aan een korte workshop waar iedereen alles op tafel kan leggen wat mogelijks relevant is voor het project. We hebben het dan niet over exacte features of milestones, maar dit moment dient eerder om alle neuzen in dezelfde richting te krijgen, een droombeeld te schetsen en hoe we daar kunnen geraken. 

We werken in een grote ruimte, zonder schermen, enkel met whiteboards en post-its en een ronde tafel. Zo zit er niemand aan het hoofd.

Dit waren de grote vragen die voor dit project relevant waren:

  1. Waarom maken we een nieuwe site en wat zijn de succesindicatoren? Wat zouden de eerste tekens kunnen zijn van een succesvolle vernieuwing? Zowel Voor jou als persoon, met bepaalde verantwoordelijkheden binnen dnsbelgium.be, maar ook voor de organisatie in het algemeen

  2. Voor wie maken we deze site? Lijst zoveel mogelijk personen op waarvoor de website van dnsbelgium.be een meerwaarde kan betekenen.

  3. Wat komen deze personen volgens jou doen op de site? Lijst per persoon zoveel mogelijk taken op dat zouden moeten kunnen volbracht worden.

  4. Wat niet? Wat kan er beter, of wat loopt er mis op de huidige website? Welke fouten mogen we zeker niet maken? Kijk zowel naar de eindgebruiker als de website- & contentbeheerders.

Deel 2 - Nulmeting: Kijk naar wat je hebt 

DNS Belgium - Presentatie van de nulmeting

Presentatie van de nulmeting

Je kan dromen en plannen maken, maar kijken naar de huidige situatie is cruciaal. Regelmatig zeggen klanten ons: “Wat we nu hebben is niet relevant, we kennen de pijnpunten, en we willen vooruit.” Toch hameren we erop om een grondige analyse te doen van de huidige kanalen. Meer dan eens komen hier bijzondere inzichten en opportuniteiten naar boven die niemand voelde aankomen. 

We bestuderen alle data die voorhanden is om een goed zicht krijgen op de huidige situatie:

  • Hoe zit de instroom van bezoekers, wat is hun surf- & klikgedrag, engagement… ? (Google Analytics)
  • Welke zoekopdrachten voeren ze en uit en waar zit nog potentieel voor verbetering? (Search Console)
  • Hoe zitten heat- en clickmaps in elkaar van de belangrijkste pagina’s? (Hotjar)
  • Zijn er ooit exit-polls of on-site surveys geweest die polsten naar gebruikersfeedback?
  • Zijn er gebruikersbevragingen of usertests gebeurd in het verleden?
  • …  

Deel 3 - Concurrenten: Jaloers of niet?

DNS Belgium - Voorbereiding competitor analysis voor registry’s wereldwijd

Voorbereiding competitor analysis voor registry’s wereldwijd

Als laatste onderdeel van de kickoff meeting, vragen we de klant om zoveel mogelijk voorbeelden mee te nemen van projecten waar ze al dan niet jaloers op zijn. Dat kan binnen of buiten hun sector zijn. We vragen wel om de voorbeelden zo goed mogelijk toe te lichten over welke aspecten ze juist interessant vinden, of waarom ze daarop afknappen. Dit doen we niet om klakkeloos zaken te kopiëren, maar om aan te voelen voor welke punten de klant gevoelig is en wat ze belangrijk vinden.

Voor DNS Belgium was het alvast interessant om de websites van de registry’s in het buitenland grondig te analyseren (zie foto).

Security boven alles

Eén van de waarden van DNS Belgium is ‘veiligheid’. Deze waarde kwam tijdens de voorbereiding al aan bod, maar werd nog verder doorgedreven tijdens development. Veiligheid, kwaliteit en betrouwbaarheid zijn de hoekstenen van de technische missie van DNS Belgium. Daar bouwden wij graag op verder. Maar hoe deden we dat juist? 

Uiteraard wordt SSL gebruikt zodat al het verkeer tussen browser en servers versleuteld is. Ook de assets (afbeeldingen, pdf bestanden, ...) worden versleuteld opgeslagen op Amazon S3. De database wordt gehost bij Amazon RDS en is daar eveneens versleuteld.

Om cross-site scripting (XSS) tegen te gaan wordt er gebruik gemaakt van de Content-Security-Policy (CSP) header. Deze header laat browsers weten vanaf welke locaties afbeeldingen, css, javascript en dergelijke geladen mogen worden. Javascript rechtstreeks op de pagina (inline javascript) is niet toegestaan en wordt dus geblokkeerd. Hierdoor is de attack vector een pak kleiner en dus moeilijker om een dergelijke aanval succesvol uit te voeren.

Zoals de meeste websites beschikt www.dnsbelgium.be over meerdere omgevingen, waaronder een testomgeving waarop de meest recente code staat.

Die omgevingen moeten zo goed mogelijk overeenkomen met de productieomgeving zodat eventuele bugs sneller opgemerkt kunnen worden. Af en toe wordt de productie-database gekopieerd naar de overige omgevingen. Maar dit betekent ook dat alle gebruikers (met wachtwoord - uiteraard gehashed) en instellingen mee gekopieerd worden.

Geen ideale situatie want volgens de interne Operations security bij DNS Belgium krijgt niet iedereen toegang tot de productieomgeving en worden er aparte wachtwoorden gebruikt per omgeving. Dus bij het overzetten van de productie-database naar een testomgeving hebben plots een aantal medewerkers geen account meer of een ander wachtwoord dan ervoor.

Dit probleem hebben we opgelost door een tweede database te plaatsen waarin enkel gebruikers en instellingen worden opgeslagen. Een technische uitleg kan je door ons vinden op het Drupal forum. Nu worden enkel artikels opgeslagen in de 'hoofd'-database en gebruikers en instellingen in de 'config'-database.

Door enkel de 'hoofd'-database over te zetten kunnen we de content gelijk houden met productie en toch voldoen aan de Operations security van DNS Belgium. 

Maximale flexibiliteit

Co-development tussen Wieni en DNS Belgium 

De samenwerking tussen Wieni en DNS Belgium is anders dan voor andere klanten. Dit omdat DNS Belgium ook eigen technologische ontwikkelingen doet binnen hun eigen development team. Concreet maakten we voor hun eigen ontwikkelde webapps, de zogenaamde ‘DNS blocks’. Een DNS block bestaat uit een link naar een javascript bestand, een identifier en een aantal config parameters die ze per pagina kunnen instellen.

Een voorbeeld van een block:

{
	"link": "https://www.foo.bar/my-premium-code.js",
	"identifier": "foobar",
	"config": {
	    "foo": "bar"
	}
}

Dit zou op de pagina gegenereerd worden als:

<head>
    ...
    <script src="https://www.foo.bar/my-premium-code.js"></script>
</head>

<body>
    <div id="foobar" data-foo="bar"></div>
</body>

De javascript code van DNS Belgium gebruikt het Angular framework dat ondersteuning heeft voor routing. Echter moet het CMS weten wanneer hun blocks routing gebruikt zodat wanneer er een DNS Block staat op /foo en er gesurft wordt naar /foo/bar het CMS geen "Pagina niet gevonden" geeft maar in de achtergrond gewoon /foo toont waarna de Angular code van DNS Belgium de rest afhandeld.

DNS Blocks moeten herbruikbaar zijn (je wilt niet op élke pagina de links instellen of parameters wijzigen) dus zijn ze gedefinieerd in een blocks.json file dat bijgehouden wordt op de servers van DNS Belgium. Als je op een pagina een DNS Block wilt toevoegen dan kan je uit een dropdown kiezen welk DNS Block je wilt toevoegen en worden de standaard config parameters (zoals in de blocks.json gedefinieerd) geplaatst.

Als de ontwikkelaars bij DNS Belgium een update doen aan hun code dan wordt er een ping gedaan naar het Drupal CMS. Die downloadt dan de nieuwste versie van de blocks.json file en kijkt welke blokken aangepast zijn. Indien de standaard config parameters wijzigen worden deze ook gewijzigd op de bestaande blokken. Ten slotte worden alle pagina's met gewijzigde blokken uit de cache gehaald.

Flexibele content blocks in het CMS

Voor DNS Belgium hebben we onze standaard content blocks zoals tekst, afbeelding, quote… uitgebreid met DNS blocks (zoals hierboven beschreven), newsletter block en secties. Een pagina wordt als een blokkendoos opgebouwd met deze content blocks, die constant van volgorde veranderd kunnen worden.

Hierdoor kan elke DNS block eender waar op de website toegevoegd worden. Zo is het overzicht van alle registrars (https://www.dnsbelgium.be/nl/je-domeinnaam-registreren/vind-een-registrar) uit 2 content blocks opgebuwd: tekst en één enkele DNS block. Er zou echter ook tekst na het overzicht kunnen komen of een sectie met nieuwsitems, en dit met slechts enkele klikken in het CMS.

Een sectie is een grid van 1, 2 of 3 items naast elkaar. Een sectie kan gevuld worden met verschillende soorten cards:

  • Nieuws

  • Boosted nieuws

  • Pagina

  • Lijst van links

  • Call to action

Zo kan DNS Belgium pagina’s samenstellen die heel dynamisch zijn. Zo ziet de huidige homepage er bijvoorbeeld helemaal anders uit dan in de originele designs. En dit kan gewoon via CMS beheerd worden.

DNS Belgium homepage design vs. productie

Links: origineel design van de homepage, rechts: de huidige homepage

Accessibility First design en development

Eén van de doelstellingen van DNS Belgium is het gebruik van het internet promoten door het toegankelijker te maken voor onder andere mensen met een beperking. Zo wilden ze ook met hun eigen website het goede voorbeeld geven door het AnySurfer-label te halen. Als een erkende AnySurfer-bouwer waren we uiteraard enthousiast om hieraan mee te werken.

Eén van de doelstellingen van DNS Belgium is het gebruik van het internet promoten door het toegankelijker te maken voor onder andere mensen met een beperking.

DNS Belgium missie statement

Accessibility is grote contrasten

DNS Belgium - De brand-kleur van DNS Belgium moest lichtjes aangepast worden voor online gebruik

De brand-kleur van DNS Belgium moest lichtjes aangepast worden voor online gebruik

Tijdens de design fase moesten we vooral rekening houden met kleurcontrasten en lettergroottes. Zo zijn we te weten gekomen dat de lichtblauwe DNS-kleur zelfs voor knoppen niet bruikbaar was door te laag contrast. Deze hebben we lichtjes moeten aanpassen naar een meer toegankelijke versie.

Ook andere kleuren hebben een lichte aanpassing gekregen afhankelijk van de grootte van de tekst waarvoor ze gebruikt werden. Rule of thumb: hoe groter de tekst, hoe lichter de kleur mag zijn.

Ook tijdens ontwikkeling werd er uiterst veel belang gehecht aan accessibility. Want dit gaat over veel meer dan alleen de juiste kleuren kiezen.

Accessibility is valid HTML

Alle markup moet valid zijn zodat browsers, screen readers enz. de inhoud juist kunnen interpreteren. We hebben de website meerdere keren door de validation tool van W3C laten controleren om fouten op te sporen, zo hebben we een paar verkeerd afgesloten <a>’s gevonden. Dergelijke kleine fouten zijn snel gebeurd maar ook snel opgelost.

Link: https://validator.w3.org/ 

Accessibility is kunnen tabben

Eén van de gemakkelijkste testen die je kunt uitvoeren om accessibility te checken is doorheen de website even te tabben (met de Tab-toets doorlopen) en zien of je heel de website zonder een muis kunt gebruiken. Door dit regelmatig tijdens het development proces te doen, konden we zien of:

  • de tabvolgorde logisch is, volgt het de visuele weergave?

  • alle elementen een focus-state hebben

  • alle klikbare elementen ook met de toetsenbord te activeren zijn

  • je nergens vast komt te zitten (focus dat geforceerd wordt)

Accessibility is performance

Hoe snel jouw website inlaadt is misschien niet het eerste waar je aan denkt als je aan toegankelijkheid denkt. Maar het is ook belangrijk dat mensen met een slechte internetverbinding of die vanop een oude computer surfen ook een aangename surfervaring hebben. Om de laadtijd van dnsbelgium.be te testen en te verbeteren gebruikten we tools zoals Lighthouse (https://developers.google.com/web/tools/lighthouse/). Deze tool somt de grootste bottlenecks op en geeft ook mogelijke oplossingen. Zo hebben we de laadtijd kunnen verbeteren door afbeeldingen pas in te laden als ze in de viewport zijn (als ze zichtbaar zijn voor de gebruiker).

Accessibility is content

Anysurfer

Wieni is een Anysurfer-erkende bouwer

Wij als designers en developers kunnen zoveel aandacht besteden aan toegankelijkheid als wij willen, maar als de mensen die content aanmaken voor de website niet mee zijn in die gedachtegang, wordt het alsnog een moeilijke opdracht. In dit project hadden we het geluk dat DNS Belgium zelf erg betrokken was in het toegankelijkheidsverhaal. Ze hebben ons op onze fouten gewezen waar nodig en pro-actief meegewerkt aan accessible content, zoals afbeelding met de juiste omschrijvingen, het gebruik van de juiste kop-structuur, een heldere navigatie enz.

In nauwe samenwerking met DNS Belgium hebben we het AnySurfer-label behaald.

Online jaarverslag 2018

Binnen de huidige website is er ook ruimte om iets meer op maat te maken. Zo maakten we bijvoorbeeld het DNS jaarverslag 2018. Binnenkort online!

Benieuwd naar het resultaat?

Bezoek dnsbelgium.be