Niet een carte blanche maar juist beperkingen prikkelen de inventiviteit van de ontwerper. Voor een goed resultaat heb je een klant met een slimme vraag en uitdagende randvoorwaarden nodig. Zo kwam Maastricht University onlangs bij ons met een lastige kwestie.
Aanpassingen zonder code
Ze vroegen om een re-design van hun website: die zou voortaan ook goed te bekijken moeten zijn op tablets en smartphones. Dat op zich is al een aardige opgave, maar de echte uitdaging zat hem in het feit dat we dit moesten implementeren zonder aan de structuur en (html-)code te komen. We hebben die knoop ontward door slim gebruik te maken van de fundamenten van webdesign.
Responsive Web Design
Responsive design, oftewel het feit dat een website een optimale gebruikerservaring heeft op een breed scala aan apparaten, van desktop computers tot smartphones, is in de afgelopen drie jaren de standaard geworden in webdesign . Veel organisaties die een website hebben die dateert van voor 2010 hebben nog geen responsive website. Eén oplossing is de site opnieuw te laten ontwerpen en bouwen zodat die weer bij de tijd is en voor de bezoeker een optimale ervaring biedt. Dat is trouwens ook voor je vindbaarheid van belang: Google waardeert een responsive site hoger. Maar een compleet nieuwe responsive website bouwen kan voor een organisatie vanwege uiteenlopende redenen (nog) niet mogelijk zijn. Dit was ook het geval voor de UM. Daarom daagden ze ons uit om een nieuw responsive design te maken dat geïmplementeerd kon worden met de bestaande (html-)code en onderliggende systemen.
Zen Garden
De sleutel voor dit project om de website van de UM te moderniseren vonden we in een 10 jaar oude website, CSS Zen Garden. Die is opgericht om webdesigners te laten experimenteren met verschillende ontwerpen voor één en dezelfde pagina. Ja, dat kan! Eén van de fundamenten van een website is dat de inhoud (html) altijd gescheiden is van de opmaak (css) en het gedrag (js, ‘javascript’). Op de Zen Garden-website zie je allemaal verschillende ontwerpen van dezelfde webpagina. Het enige verschil is de stylesheet (css). De site toont de kracht van css en van het principe van de scheiding van inhoud en vorm als basis voor iedere website. Dat de inhoud, vorm en techniek van een website gescheiden zijn betekent overigens niet dat je ze zomaar afzonderlijk kunt behandelen. De vorm is geen saus die je over de inhoud en techniek schenkt, maar de drie vormen samen een innig verweven geheel. Op de CSS Zen Garden website zie je dat vormgeving de boodschap verandert, al blijft de tekst hetzelfde. De techniek moet dit op een intelligente manier faciliteren.
Design in the browser
Op basis van de bestaande inhoud en code vanuit het Content Management Systeem hebben we à la “zen garden” de stylesheet aangepast om voor UM dat nieuwe responsive design te realiseren. Omdat moderne websites zich dynamisch aanpassen aan het apparaat waar ze op bekeken worden en tools als Photoshop en InDesign statisch zijn, ontwerpen we dat direct in de browser. Dat betekent dat we niet de hele website ontwerpen in grafisch programma, maar dat we na de eerste schetsen al code schrijven en direct in de browser kijken hoe het eruit ziet. Zo kun je direct zien hoe de nieuwe vormgeving zich gedraagt op verschillende pagina’s van de website, hoe de relatie met de inhoud is, hoe de interactie verloopt en hoe de website eruit ziet op de verschillende schermgroottes van de verschillende mobiele apparaten.
One solution fits all
Is deze “zen garden” aanpak niet dé oplossing voor het redesign van elke website? Je kunt verder met de inhoud en de systemen die je al hebt en je kunt de website toch aanpassen aan de nieuwste stand der techniek en nieuwste trends op het gebied van vormgeving. Dat lijkt aantrekkelijk, maar webdesign is méér dan een stylesheet. Met een nieuwe communicatiestrategie, nieuwe informatie-architectuur of Content Management Systeem is alleen een nieuwe stylesheet niet voldoende. Daarnaast is het een complexe operatie. Je moet je diep in de code en inhoud van de site (die iemand anders gebouwd heeft) verdiepen en vaak out-of-the-box oplossingen bedenken. Ook moet je her-ontwerp zó zijn dat het te realiseren is met de bestaande structuur. Dus het is niet in elk geval goedkoper en makkelijker dan helemaal opnieuw beginnen.