4 tips voor effectief responsive webdesign


10.02.2014



Het ontwerpen van een effectieve ervaring voor de bijna eindeloze verscheidenheid van schermformaten is een grotere uitdaging dan ooit. Responsive design, mits goed gedaan, geeft je website de mogelijkheid zich aan te passen aan de behoeftes van je mobiele en desktop gebruikers. Maar wat is er nou echt belangrijk bij responsive design en op welke manier neem je het op in de je ontwerpproces? Als je de laatste tijd bezig bent geweest met het voorbereiden van een re-design van je website of het laten bouwen van een nieuwe, dan is de term responsive webdesign vast al tientallen keren aan je voorbij gekomen. Responsive webdesign als ontwerp strategie voor mobiel is heet. En niet zonder reden. image description

Elke ontwerp beslissing is terug te voeren op een doel: het creeren van een goede gebruikerservaring voor al je publiek. Uit een recent onderzoek blijkt dat meer dan de helft van de Nederlanders een tablet bezit en dat inmiddels meer Nederlanders een smartphone bezit (67%) dan een pc/desktop (65%). Geen mobiele strategie is de manier om een grote groep klanten een slechte ervaring te bieden en je naam te grabbel te gooien.

Dankzij het enorme innovatietempo (Samsung lanceerde in 2013 iedere week een nieuw type mobiel) is er een enorme diversiteit aan mobiele telefoons en tablets ontstaan. En dat betekent dat website design vandaag de dag een antwoord moet geven op deze enorme variëteit aan schermgroottes en functionaliteit. En dat is precies waar responsive design van waarde kan zijn.

Responsive design is een effectieve manier om je website aan te passen aan de verschillende schermformaten en beschikbare technische mogelijkheden om zo voor alle gebruikers een optimale ervaring te bieden.

Maar hoe gaat een responsive traject er nu uit zien? En wat zorgt ervoor dat je een responsive design krijgt wat zijn doel bereikt? Om deze vraag te beantwoorden heb ik geprobeerd op een niet te technische manier uit te leggen waar je op moet letten als je een nieuwe website op basis van responsive design overweegt.

Content first

In de praktijk wordt er vaak pas aan de inhoud van de website gedacht als het ontwerp of de ontwikkeling van de website al in volle gang is. Nog meer als met “traditioneel" ontwerpen voor desktop websites is de echte inhoud (content) van enorme waarde voor ontwerpers en ontwikkelaars. Een van de doelen van responsive design is om de content op zo’n optimaal mogelijke manier aan te beiden aan de gebruiker. En hoe kan je content optimaliseren als je geen idee hebt hoe die eruit ziet en welk doel die moet dienen. Met de meeste content beschikbaar kan er een veel betere en effectievere mobiele gebruikerservaring worden ontworpen en gebouwd.

Dat is makkelijker gezegd als gedaan, het zal in de meeste gevallen niet eenvoudig zijn om je content in zo’n vroeg stadium klaar te hebben. Maar het op tijd klaar hebben van je website content betaald zich zeker uit, en zal de kansen sterk vergroten op een responsive design dat er uit ziet, en gaat werken, zoals je wilt.

Ontwerpen in de browser

Responsive webdesign veranderd de manier waarop er aan een website gewerkt wordt. Op basis van de echte content wordt er zo snel mogelijk een prototype gecodeerd en daarnaast een stijlgids ontwikkeld.

Alleen een ontwerp verteld namelijk niet meer het hele verhaal. Een uitgewerkt ontwerp op basis van 960px breedte is niet voldoende, er zal duidelijk gemaakt moeten worden hoe het ontwerp zich gaat gedragen onder veranderde omstandigheden en hoe het er uit komt te zien op alle verschillende schermgroottes.

Dat betekent dat het ontwerpproces voor een responsive website er ook echt anders uit ziet als voor een website met een vaste breedte. Een prachtige ontwerp voor een desktop versie van de website zegt uiteindelijk niets over hoe de lay-out gaat werken op een mobiele telefoon.

Eerst wordt de stijl overlegd aan de klant waarin de lettertypes, kleuren en belangrijke interface elementen zijn vastgelegd. Als de klant zijn goedkeuring heeft gegeven worden op basis van de stijlgids enkele pagina’s ontworpen. Pagina’s die tot doel hebben aan de klant te laten zien waar de stijl toe kan leidden maar die vooral bedoeld zijn om zo snel mogelijk naar de volgende stap te gaan: coderen van een prototype.

Samen met de echte content (hoe echter hoe beter) worden er iteratief aanpassingen aan de code gedaan om het beste resultaat te krijgen. Resultaat wat direct bekeken en getest wordt in de browser, dus niet eerst in PDF presentaties maar direct in het medium waarvoor het bedoeld is. Gevolg van dit proces is dat er ook veel meer samengewerkt moet worden tussen ontwerper en de ontwikkelaar. Een ontwerper kan niet meer een kant en klaar ontwerp over de schutting gooien en verwachten dat de ontwikkelaar daar een responsive website van maakt.

Omdat responsive design zo’n enorme vlucht heeft genomen zijn er inmiddels verschillende standaarden (SASS) of frameworks (Foundation, Twitter bootstrap) ontwikkeld om deze nieuwe manier van werken te ondersteunen. Snel aanpassen, ontwerpen in de browser en de discussie tussen klant, ontwerp en ontwikkelaar staan hierbij centraal.

Verschillen in technische mogelijkheden

Content bestaat niet alleen uit tekst, afbeeldingen en video gaan een steeds groter deel uitmaken van het web. Mobiele telefoons hebben verschillende en andere technische mogelijkheden in vergelijking met desktop computers. Naast dat je in wireframes of prototypes kan laten zien hoe de inhoud van de website eruit komt te zien op verschillende schermgroottes, is het ook verstandig om de beschikbaarheid van de technische mogelijkheden, zoals bijvoorbeeld touch, te bekijken en bij het ontbreken daarvan over een alternatief na te denken.

Methodes zoals mobile-first, progressive enhancement en graceful degradation zijn allemaal strategieën die op dit verschil een passend antwoord proberen te geven. Wij hebben zelf niet een hele duidelijke voorkeur voor een bepaalde methode. Wij denken dat het vooral belangrijk is je bewust te zijn van deze verschillen en daar als het nodig is een plan voor te bedenken. Doel blijft een zo goed mogelijke ervaring bieden aan alle bezoekers.

Een bestaande website responsive maken

Een verzoek wat vaak voorbij komt is om een bestaande website met een vaste breedte om te zetten naar een responsive website. Moet je zoiets eigenlijk wel doen?

Het omzetten van een bestaande website naar een mobiel vriendelijk website is mogelijk maar hangt erg af van het huidige ontwerp en structuur van de website, op welke manier de HTML en CSS van de website zijn opgezet, op welke manier de content gestructureerd en opgeslagen is en welk CMS er eventueel wordt gebruikt. De enige manier om erachter te komen is de bestaande code, content en CMS te bekijken om te zien wat de mogelijkheden zijn.

Omdat het proces om een responsive website te ontwikkelen verschilt van die van een website met een vaste breedte, en de code op een minder flexibele manier is opgezet zal het opnieuw ontwerpen en bouwen van de front-end vrijwel altijd de beste en meest eenvoudige manier zijn om de website op nieuw te bouwen. Dat geldt zeker voor veel oudere websites waar nog helemaal geen rekening is gehouden met mobiel en waar vaak ook de content anders gestructureerd moet worden.

Samenvattend

Er is een meer “content first” aanpak nodig om succesvolle en schaalbare responsive ontwerpen te maken. Ontwerp en test de website zo snel mogelijk in de browser, het zorgt er niet alleen voor dat je ziet hoe het werkt, maar zorgt er ook voor dat alle teamleden er bij betrokken blijven. Vroeger en meer frequentere samenwerking tussen teamleden en de klant moet de regel worden en niet de uitzondering.

PS Kijk voor responsive design inspiratie eens op http://mediaqueri.es