Responsive webdesign

Posted By on Jul 8, 2013


Hoe een responsive of adaptive applicatie er op ieder toestel uit gaat zien, valt vooraf moeilijk te visueel te maken. Daarvoor zijn er simpelweg teveel devices en resoluties. Om zowel voor developers als opdrachtgevers inzichtelijk te maken hoe het design zich op verschillende devices gaat gedragen kun je de zogenaamde breakpoints hanteren. De punten waarop een lay-out switched. Je kunt bijvoorbeeld de verschillende browser resoluties opdelen in 3 categorieën: mobiel, tablet en desktop. Dit resulteert in twee breakpoints.

Content choreografie

Om de eerste groffe lay-outs te maken kan het handig zijn de content op de pagina’s als blokken weer te geven. Schuiven met blokken gaat makkelijker dan gedetailleerde wireframes blijven redesignen. In deze blokken kun je bijvoorbeeld ook een prioriteit aangeven dmv kleur intensiteit. Het schuiven met die blokken wordt ook wel een content choreografie genoemd:

Aan de hand van de lijst contentblokken en hun prioriteit konden we aan de slag met het ontwerp.

Desktop

choreo_1

Tablet

choreo_2

Mobiel

choreo_3

Dit soort layouts vormen een prima basis om te starten met de wireframes: