Hoe ontwerp je responsive?


Tijdens het ontwerpen van een website is het zaak om na te denken over de content. Een groot deel van responsive webdesign draait om het prioriteren van content. Wat is het belangrijkst? En daarna?

Als eerste is het belangrijk om ervan uit te gaan dat je geen content kunt weglaten. Mobiele gebruikers hebben vaak andere behoeften dan desktop gebruikers, maar niet altijd. Om toch tegemoet te komen in de behoefte van alle gebruikers is het zaak om na te denken over hoe je de website gaat inrichten op verschillende formaten.

Uiteraard kun je er voor kiezen om een ontwerp te laten maken dat er op de desktop, laptop en tablet het zelfde uitziet. Op deze manier heb je alleen nog een mobiel ontwerp nodig en ben je wat betreft ontwerpen klaar. Deze oplossing drukt de kosten maar draagt niet bij aan de gebruikerservaring.

Een betere keuze echter, is het prioriteren van content. Naarmate het scherm kleiner wordt verschijnt de belangrijkste content bovenaan waarna de minder belangrijke content volgt. Om deze reden maken webdesigners vaak wireframes. Zo kunnen ze makkelijker bepalen welke content waar komt wanneer de website op verschillende schermgroottes wordt bekeken.

Een hulpmiddel bij het ontwerpen van een responsive website is je grid. Een grid bestaat standaard uit twaalf kolommen met bijbehorende tussenruimten. Standaard is het grid van 12 kolommen inclusief tussenruimten 1170 pixels breed. Uiteraard kun je kolommen toevoegen of weghalen, maar twaalf is de standaard van vele frameworks en waarop de meeste ontwikkelaars een website bouwen.

Met deze kennis kun je jouw tekenveld, voor het ontwerpen van een website, dus opdelen in twaalf gelijke kolommen. Voor je tussenruimte haal je van elke kolom aan beide kanten (links en rechts) vijftien pixels af. Ook hier geldt dat je de tussenruimte zelf kunt bepalen. Het is een standaard maar hoeft dus niet perse vijftien pixels te zijn.

Met het eindresultaat van bovenstaande heb je een prima start om je ontwerp op uit te tekenen. Houd er bij het ontwerpen rekening mee dat mobiele apparaten niet erg breed zijn. Om de content goed weer te geven kom je al gauw op een breedte van twaalf kolommen.

Bron: frankwatching.com


Bob van der Panne - Commericeel Directeur
Meer weten?

Sparren over de mogelijkheden of een kostenindicatie? Mail of bel direct Bob van der Panne.