Webdesigners hebben er vandaag de dag een uitdaging bij. De tijd dat je je alleen druk hoefde te maken over de schermresoluties 800×600 en 1024×768 pixels is definitief voorbij. Anno 2011 worden websites op een groot en groeiend aantal devices bekeken; van smartphones tot tablets en van 27-inch monitor tot groot-formaat tv. Thuis, onderweg en op het werk. En dan hebben we het nog slechts over beeldformaten en locatie. Ook voor de bediening is er een range aan mogelijkheden: muis, trackpad/ball, keyboard, vingers, afstandsbediening. En wat dacht je van de platformen? Chrome, Safari, Mozilla, iOS, Android…
Hoe ontwikkel je een intelligente website die zich aanpast aan de gebruiker, zijn device en zijn platform? Het antwoord ligt in ‘responsive webdesign’, wat zoveel wil zeggen als een website die zich als een vloeiend geheel aanpast aan de beschikbare schermresolutie. Dat betekent in de praktijk dat je voor alle onderdelen op een site – denk aan plaatjes, koppen, tekstkolommen, buttons en links – dient te definiëren hoe ze zich dienen te gedragen onder verschillende omstandigheden. Deze definitie is een zoektocht naar naast versus onder elkaar, groot versus klein en het waar nodig het verbergen van functies onder een pull-down-menu. En, als je dat eenmaal op landscape-formaat hebt uitgewerkt… hoe ziet het er dan uit in portrait-formaat?
Ieder bedrijf dat zijn klanten serieus neemt – wie doet dat nu niet? – én voor zijn omzet afhankelijk is van zijn website doet er goed aan om na te denken over de flexibiliteit hiervan.
Het eerste niveau om responsive webdesign toe te passen is schermgrootte. Op ieder formaat wil je het beste en meest overzichtelijke resultaat behalen. Daarbij gaan we er niet alleen vanuit dat alle onderdelen kleiner of groter worden, maar ook dat de website zowel op het grootste scherm áls op een smartphone prettig oogt en gemakkelijk te gebruiken is.
Daarmee komen we meteen bij het tweede niveau van responsive webdesign: platformonafhankelijkheid. Een website optimaliseren voor een groot aantal browsers is een technisch verhaal waarmee we je niet zullen vermoeien. Zaak is dat de webdeveloper kennis heeft van de hedendaagse standaarden en de ontwikkelingen nauwlettend volgt.
Het derde niveau van responsive webdesign, ook wel liquid webdesign genoemd, gaat over content. Want de kans is groot dat een mobiele bezoeker behoefte heeft aan hele andere content dan een ‘fixed’ gebruiker. De mobiele gebruiker wil waarschijnlijk gericht en snel naar een beperkte hoeveelheid informatie zoeken. Zijn connectie is immers langzamer, hij zit met – dikke – vingers op een klein schermpje te tikken en zijn omgeving zorgt voor veel afleiding. Dan is het handig als de website deze content in een mobiele variant alvast filtert. Dat wil zeggen: toon de meest noodzakelijke items, plaats acties onder grote knoppen, gebruik (nog) kortere teksten en beperk de hoeveelheid afbeeldingen.
De vraagt dringt zich op of je website ombouwen naar responsive de moeite waard is. Investeer je niet teveel in slechts enkele mobiele bezoekers? Is dít het moment of wacht je nog een paar jaar? En als je er dan wel voor kiest, waar ga je beginnen? Wat is je web-doelstelling en waarvoor gebruikt de bezoeker eigenlijk je website? Ben je in sommige gevallen niet beter af met een App en een ‘standaard’ website? Allemaal vragen waar geen vastomlijnd antwoord voor is. Een goede responsive website vereist onderzoek naar én kennis van je gebruikers. Zet liquid in op het moment dat het nuttig is en niet ‘omdat het kan’.
Denk dus goed na vooraf, maak wireframes en bouw je content gemoduleerd op. De keuze van het (reeds aanwezige óf te implementeren) Content Management Systeem (CMS) is daarbij cruciaal. Kan deze het allemaal aan? En is het geheel futureproof? Wil je specifieke websites opzetten voor de verschillende soorten interfaces of wordt het één enkele website die ‘meebeweegt’ met het device waarop het wordt getoond? Wat altijd in het achterhoofd moet spelen, is dat iedere bezoeker zoveel mogelijk dezelfde beleving moet hebben bij jouw merk.
Geïnteresseerd in responsive webdesign? Neem contact met ons op.