Een bestaande website in een nieuw design
Bert Clybouw op 08-07-2016
Een website heeft af en toe nood aan een nieuw jasje. Design trends veranderen constant en een website design ziet af van aanpassingen on the road.
Wij zijn ervan overtuigd dat dit helemaal niet zo ingrijpend hoeft te zijn. De werklast hiervan kan heel goed meevallen als je het van de start slim aanpakt. Het is dus afhankelijk van hoe de website of webapplicatie gebouwd is.
Hoe wij een vernieuwing aanpakken en hoe we dit reeds voorzien bij opstart van een project doen we hier uit de doeken.
De sleutel om een re-design vlot te laten verlopen is MVC (Model-View-Controller). Dat is een technische term die beschrijft hoe een programmeur tijdens het programmeren de code moet opdelen in verschillende lagen. De 'view' in MVC staat voor het design, het deel dat de bezoeker van de website kan zien. In deze programmeertechniek moet alles van het design op die laag komen en mag geen letter andere code zich op die laag bevinden. Hierdoor is het mogelijk om bij het vernieuwen van het design die ene laag gewoon in de vuilbak te droppen en te vervangen door een nieuwe laag (= nieuw design). De functionaliteit van de website wordt hierbij helemaal niet aangetast en dus moet er ook geen extra programmeer werk gebeuren om te zorgen dat alles blijft werken.
Laten we deze techniek eens bekijken aan de hand van een concreet voorbeeld. Begin 2016 beslisten we om Earnieland in een nieuw jasje te steken. Stap 1 is beslissen hoe dit nieuw design er zal uitzien. Het ontwerpen van dit design deden we in samenwerking met de designers van DigitalMind. Er werden verschillende ontwerpen uitgetekend en geïllustreerd in afbeeldingen. Hier is het belangrijk veel verschillende meningen te raadplegen en ook zeer veel combinaties uit te proberen. In deze fase is het simpel om dingen uit te proberen. Aangezien het allemaal afbeeldingen of tekeningen zijn moet er geen rekening gehouden worden met andere elementen bij het verschuiven van de puzzelstukjes.
Aan de hand van die ontwerpen in afbeeldingen kozen we welke elementen in het nieuwe design moesten komen. Na dit te hebben beslist wordt het design uitgewerkt in HTML/CSS code. Dit is de View-laag waar we over spraken maar nog niet in verbinding met de andere lagen.
Nadat dit design alleenstaand er goed uitziet met dummy data wordt deze verbonden met de andere lagen. Zo wordt het design verbonden met de functionaliteit en data van de webapplicatie. Nu nog alles goed testen en klaar is kees. Ready for takeoff.