De eerste stappen van responsive design

Starten met responsive design is lastig. Je wilt je site beschikbaar maken voor smartphones en tablets, dat is duidelijk. Nu is de vraag waar gaan we starten en waar moeten we de focus op leggen. Vooralsnog is de belangrijkste stap bekijken of er echt behoefte is aan een responsive design van je website. Is dit in kaart gebracht en is de organisatie overtuigd van de overstap, dan kun je gaan nadenken over de volgende elementen.

Resolutie

Om zorg te dragen dat je niet overspoeld wordt met resoluties waar je rekening mee moet houden, is het van belang om een aantal resoluties te nemen waarop je de focus kunt plaatsen.

[green_box]Bijvoorbeeld:

Desktop: 1280 x 1024 pixels

Tablet: 1024 x 768 pixels (landscape modus)

Smartphone: 320 x 480 (laagste resolutie iPhone)

Hoogte van een beeldscherm is hierbij niet zo relevant. Uit onderzoek blijkt dat een gebruiker echt wel scrollt als er interessante informatie te vinden is. Tevens is scrollen een natuurlijk goed geworden op touch-devices.

[/green_box]

Plaatsing content

Om eenvoudig te starten kan de volgende vuistregel helpen bij het opstellen van een passend design voor de verschillende devices:

[green_box]Bijvoorbeeld:

Desktop: verdeel de inhoud van je site over drie kolommen

Tablet: verdeel de inhoud van je site over twee kolommen

Smartphone: gebruik een kolom om de inhoud van je site te presenteren

[/green_box]

Houd er rekening mee dat bepaalde informatie mogelijk niet zo interessant is voor mobiele gebruikers. Deze informatie zal veelal als eerste afvallen en niet getoond worden op mobiele devices.

Let op: standaard responsive design levert geen lager dataverkeer op voor je site. De pagina zal eveneveel data verbruiken bij het inladen. Standaard responsive design bemoeit zich voornamelijk met de presentatie van de site; waar vinden we welke informatie. Wil je de omvang van je pagina’s terug-brengen, dan zul je moeten focussen op Responsive design + RESS