Nieuwe website ByYourSite

Dominique van Oostveen | 31 juli 2018

De nieuwe website van ByYourSite! Hij staat nu een week online en er zijn al veel leuke reacties binnengekomen. Deze versie bevat nieuwe animaties, verbeterde code technieken en meer…

Vorige website

De vorige website van ByYourSite was inmiddels al weer een jaar of vier oud, wat betekent dat deze toch echt weer eens vernieuwd moest worden. Behalve in het uiterlijk, was de ouderdom ook te merken aan de destijds gebruikte technieken. Een dergelijke website gaat gemiddeld zo’n 4 tot 5 jaar mee. Technieken veranderen met de dag, wat zich uit in onder andere verbeterde snelheid, mooiere animaties en verbeterde beveiliging.

Plan van aanpak

Zoals bij elke website zijn we eerst begonnen met het neerzetten van een mooi design. Door middel van het programma Photoshop heeft Alies een ontwerp gemaakt die door zowel gebruikers als leveranciers is goedgekeurd. Vervolgens is de technische realisatie in gang gezet. In overleg met front-end developer Marcel is ervoor gekozen om voor een WordPress basis te gaan, maar om wel gebruik te maken van een eigen template. Dit template is opgezet met Bootstrap 4 (de nieuwste versie van Bootstrap) en de preprocessor Sass (Syntactically Awesome Style Sheets). Hierdoor behouden we veel controle over de HTML-uitvoer en is de stylesheet makkelijk beheersbaar.

Soepele animaties en transities

Door ervoor te kiezen om een eigen template te maken, hebben we voor ons zelf meer vrijheid gecreëerd wat betreft animaties en transities binnen de website. Dit is goed te zien op bijvoorbeeld de homepage waar bepaalde tekstblokken het beeld in vliegen tijdens het scrollen. Deze effectjes zijn gemaakt met behulp van AOS (Animate on scroll library), waardoor de website wacht met het afspelen van animaties totdat de gebruiker eroverheen scrollt.

Tevens is er voor het inladen van bijvoorbeeld de pagina’s blogs en cases gebruikgemaakt van het zogenaamde ‘lazy loading’. Dit betekent dat niet alle afbeeldingen direct worden ingeladen, maar asynchroon van elkaar. Dit heeft een positieve invloed op het laden van een website.

MapFormer

Daarnaast hebben we op de contactpagina gebruikgemaakt van een render vanuit MapFormer. MapFormer is een van de producten die ontwikkeld is door Idle Hands. Hiermee kunnen onder andere renders worden gemaakt van steden over de hele wereld. Het is een plug-in voor het programma Unity.

Tot slot

Ons team heeft veel tijd en moeite gestoken in de website en dat is ook zeker terug te zien in het eindresultaat!


Wilt u ook een gehele nieuwe website met het gebruik van de nieuwste technieken? Neem dan contact met ons op via 050 5885450

even overleggen?

050 588 54 50 info@byyoursite.nl
Westerhaven 13-1 || 9718 AW Groningen

info@byyoursite.nl | 050 588 54 50