Responsive design stappenplan

De digitale wereld wordt steeds mobieler. Desktops verliezen marktaandeel ten opzichte van smartphones en tablets. Om in te spelen op deze mobiele trend zijn er drie mogelijke strategieën. Je investeert in native apps (iOS, Android etc.), gaat voor een mobiele website (m.site.nl) of kiest voor een responsive design. Welke strategie je kiest is van een groot aantal factoren afhankelijk.

Het belangrijkste voordeel van een responsive design is dat het er goed uit ziet op zowel een desktop, smartphone als tablet. Als je kiest voor een responsive design kan het onderstaande stappenplan je helpen om je strategie goed uit de verf te laten komen.

1. Is dit de beste strategie?
Geeft de keuze voor een responsive design je een strategisch voordeel? Is de timing goed? Check je website statistieken. Wordt deze al veel vanaf een mobiel apparaat bezocht? Of is het gebruiksaandeel nog lager dan 10%? Dan is het wellicht beter om te wachten.

2. Geef mobiel prioriteit
Als je eenmaal gekozen hebt voor een responsive design is het zaak om mobiel voorrang te geven. Een mobiel scherm is veel kleiner waardoor je keuzes moet maken wat je wel en niet gaat tonen aan bezoekers. Door mobiel prioriteit te geven word je automatisch gedwongen om keuzes te maken wat belangrijk is.

3. Rangschik belangrijke content
Zet alle content blokken die je beschikbaar hebt in volgorde van prioriteit. Dit helpt je opnieuw om noodzakelijke keuzes te maken op kleinere schermen. Ontwerpen voor mobiel is de kunst van het weglaten.

4. Kies je ‘breakpoints’
Binnen een responsive design toon je een ander design voor verschillende schermresolutie groepen. Schermbreedte is hiervoor leidend. Een desktop is breder dan een tablet. Een tablet is breder dan een smartphone. Het punt waarop je kiest voor een ander design wordt ook wel ‘breakpoint’ genoemd. Je kunt je keuzes het beste baseren op de meest populaire apparaten zoals een iPhone, Samsung Galaxy en iPad.

5. Kies je design elementen
Ieder design zal verschillende ‘bouwstenen’ bevatten. Deze design elementen of ‘design patterns’ zijn belangrijk in de gebruikerservaring. Hou ze zo simpel mogelijk en maak het de gebruiker vooral niet te moeilijk.

6. Maak wireframes
Wireframes zijn draadmodellen van je uiteindelijke design. Werk ieder toekomstig scherm uit in een draadmodel. Doe dit voor iedere resolutie groep (breakpoint) die je wilt ondersteunen. Dit is een arbeidsintensief klusje, maar je zult merken dat je gaandeweg meer logica in je ontwerp brengt. Nadat alle wireframes zijn uitgewerkt, maak je pas een definitief design.

7. Kies je gereedschap
Er zijn verschillende frameworks en CMS-en die responsive design ondersteunen. Zorg dat alles goed op elkaar aansluit. Vergeet niet dat ook tekst, afbeeldingen en video goed moeten schalen in je responsive design. Hiervoor zijn verschillende responsive tools beschikbaar.

8. Programmeer
Nadat alle voorgaande stappen doorlopen zijn, starten we pas met de daadwerkelijke ontwikkeling van de website. Dit zijn dure uren, dus kunnen we beter zorgen dat alles 100% vooraf duidelijk is.

9. Test!
Scherm resoluties zijn een jungle. Meer apparaten betekent meer resoluties. Test op zoveel mogelijk apparaten. Roep daarbij de hulp in van werknemers, familie, vrienden en kennissen (of schakel een professionele partij in). Een slecht getest responsive design geeft meer kopzorgen dan voordelen.

10. Lanceren
Je bent nu klaar om je responsive design te lanceren en bent voorbereid op de mobiele toekomst. Je zult zien dat het percentage mobiele bezoekers op je website snel oploopt en dat ze langer blijven dan voorheen. Vroeger klikten deze bezoekers liever zo snel mogelijk weg, maar nu krijgen ze de service die ze verdienen.

Wil je meer meten over responsive design? Raadpleeg dan de onderstaande presentatie. Het geeft je alle handvaten die je nodig hebt.