Nieuwe website ByYourSite
Dominique | 31 juli 2018
Dominique | 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…
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.
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.
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.
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.
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
