Welke keuzes kun je maken bij een responsive design?

21 april 2016

Er zijn verschillende manieren waarop je een responsive design kunt doorvoeren. We hebben een aantal responsive patterns op een rijtje gezet.

Het uitwerken van een responsive design is een uitdaging. Een opdracht kent bijvoorbeeld tegenstrijdige wensen.

  • Het ontwerp moet beeldvullend beeld bevatten, groots en meeslepend op zowel desktop als smartphone…
  • maar alle informatie en call-to-actions moet ‘boven de vouw’ passen

  • De interface moet duidelijk zijn voor de gebruiker en touch-friendly…
  • maar het design moet wel minimalistisch en subtiel zijn

  • We willen alle content die we aanbieden op desktop ook aanbieden op een smartphone…
  • maar de pagina moet niet te lang worden op een smartphone

Het bovenstaande levert uitdagingen op voor de wijze waarop het responsive design wordt doorgevoerd. Er zijn namelijk veel keuzes te maken in hoe je als scrumteam responsive aanvliegt. Daarnaast heb je als designer te maken met een planning en een budget die ook een grote rol spelen bij het ontwerpproces.

We hebben een aantal mogelijkheden op een rijtje gezet.

Wrap it

Alles schaalt naar 1 kolom onder elkaar op mobile. Eenvoudig en goedkoop om te realiseren. Niet altijd even fijn voor de gebruiker.

Shrink it

Bij de schaling naar mobile gaan pagina-elementen er visueel compacter uitzien. Logisch voor een consistente opbouw van de content. Niet altijd goed voor een mooi en groots design.

Split it

Het scherm opdelen in een dynamische laag (scrollen) en een statische laag (staat altijd in het scherm). Fijn voor de gebruiker omdat je toch een beetje houvast krijgt bij een lange scrollbare pagina. Helaas is dit nog steeds geen oplossing voor een smartphone waarbij alles weer in 1 kolom onder elkaar komt te staan.

Add extras

Het toevoegen van extra interactie-elementen in de schaling naar mobile (content laten uitklappen/ content swipen) . Dit zorgt voor toffe effecten waar de gebruiker van smult. Maar dan moet het wel goed werken (veel testwerk) en deze interface-kermis kan veel tijd kosten (en geld).

Add layers

Het toevoegen van een gelaagdheid om content te ontsluiten. De lagen kun je bijvoorbeeld oproepen door middel van knoppen. Deze aanpak vereist wel een structuur (en discipline) om deze gelaagdheid op een consistente wijze over de gehele site aan te bieden.

En nu?

Het kiezen van een responsive patroon is zeer bepalend voor de User Experience die je wil neerzetten, maar ook voor het project en de developers die het binnen een bepaalde tijd en budget moeten bouwen. Daarom is het belangrijk om hier in een vroeg stadium over na te denken, je keuze goed af te stemmen met het development-team en in de gaten te houden of de gekozen oplossing realistisch is voor het beschikbare budget.