Responsive design: aan de slag met 4 tips

Wat doen we met de wildgroei van meer dan 400 verschillende groottes van alle smartphones, tablets en beeldschermen? De focus ligt nu op hoe ontwerpen kleiner en compacter gemaakt worden. Tegelijk is er een trend dat beeldschermen thuis en op het werk juist steeds groter worden. Hoe benut je per scherm de beschikbare ruimte?

Verschillende resoluties

Traditioneel gebruikten ontwerpers vooral brede beeldschermen. In november 2011 bleek echter dat bijna 20% van alle schermen boven de 1366 pixels zit. Bovendien is de verwachting dat in het huidige groeitempo 55 procent van de televisies in 2013 internet heeft. Met deze TV’s is het mogelijk om op dezelfde manier te browsen als op een desktop, alleen dan een stukje groter. Hoe kan je het beste omgaan met deze verschillende resoluties?

Maak gebruik van responsive design

Het boek ‘Responsive Web Design’, geschreven door Ethan Marcotte, legt uit hoe je met een flexibel ontwerp om kan gaan met verschillende formaten. Kort gezegd gebruikt responsive design een flexible (fluid) grid, waar elementen op verschillende plaatsen neergezet kunnen worden. Hierin is de vorm van de content flexibel. Het apparaat van de gebruiker wordt herkend door middel van media queries waardoor de juiste informatie op de juiste manier getoond wordt.

In de praktijk kan responsive design eruit kunnen komen te zien als bij Audiovroom. Door het zelf te proberen zie je direct hoe het werkt.

Er zijn hier vier standaards ontworpen en aan alle formaten die ertussen zitten past het grid zich automatisch aan, zodat de website er altijd goed uit ziet. Een resultaat van een breed ontwerp is de meer magazine-achtige look and feel, zoals bij ontwerpbureau Teehanlax. Ook is het gebruik van grote platen op de achtergrond een mooie opvulling voor breedbeeld.

De grootste voordelen van responsive design

• Er wordt maar één website ontwikkeld, zonder een aparte mobiele versie. Dit zorgt ook voor een overkoepelend concept.
• Voor de contentmanager neemt de onderhoudbaarheid van de website toe omdat er een enkel bronbestand gebruikt wordt. Zowel contentwijzigingen en -aanvullingen als technische aanpassingen worden gedaan in één versie.
• Door de schaalbaarheid is het relatief eenvoudig om ook voor nieuwe resoluties te optimaliseren.

Hoe pak je responsive design aan?

1. Begin bij de kern met epicentrisch ontwerp

Zeker wanneer het jasje van het ontwerp steeds flexibeler wordt, is het interessant te kijken naar wat Jason Fried zegt over epicentrisch design. Het gaat erom dat je begint met de kern, het epicentrisch centrum van het ontwerp. Dat betekent dat de navigatie/tabs, footer, kleur, logo, etc. op het einde komen. Na de kern voeg je elementen toe die het dichtst bij de kern liggen tot het ontwerp compleet is.

Een mooi voorbeeld is www.9292.nl. De app heeft maar één functie. Als je op de website komt is deze zelfde functie prominent aanwezig maar zijn er extra elementen toegevoegd, zoals een afbeelding en navigatie. Zo wordt de ruimte optimaal gebruikt.

 

2. Doe een grondige customer journey analyse

Niet alle content is altijd relevant op elk apparaat. Daarom moet er besloten worden wat er wel en niet op welk scherm te zien is en hoe. Hierbij zijn de context en de gebruikersbehoeftes belangrijk. Leef je in aan de hand van personas en maak customer journeys. Vervolgens bepaal je per medium wat de requirements zijn, voordat je gaat ontwerpen.

3. Ontwerp de verschillende schermen tegelijkertijd

Is het inderdaad het handigste om eerst met mobiel te beginnen, wat Luke Wroblewski in zijn boek Mobile First promoot? Het is goed om met de kern van het ontwerp te beginnen, je af te vragen wat echt belangrijk is per pagina. Het is echter niet het belangrijkste om per se met mobiel te beginnen.

Ontwerp de drie of vier verschillende formaten tegelijkertijd naast elkaar. Ook als een scherm al een ontwerp heeft. Zo kunnen de verschillende formaten elkaar inspireren tijdens het ontwerpproces en komt er met wat gepuzzel uiteindelijk een overkoepelend consistent concept uit. Interactiekeuzes met muis en de touchnavigatie’s beïnvloeden elkaar zo ook in het ontwerpproces.

4. Ontwikkel samen met verschillende disciplines – Scrum

Nog belangrijker dan bij een statische website: ontwikkel je website zo Scrum (zie ook artikelen) als mogelijk in een multidisplinair team met de interactieontwerper, de visueel ontwerper, de copywriter en de bouwer. Aangezien de content zo flexibel is, kan het heel makkelijk misgaan als het volgens de traditionele watervalmethode over het muurtje gaat.

Tot slot

Deze tijd vraagt om een steeds meer integrale ontwerpaanpak. Werk niet stapsgewijs per scherm per discipline, maar werk met alle disciplines samen. En, leg de verschillende schermen naast elkaar tijdens het ontwerpen voor het algehele flexibele concept. Uiteindelijk zal hier de duurzaamste oplossing uit ontstaan.