Wat houdt mij bezig?

Responsive design toen en nu

Door: Willem-Daan Poppe
Responsive webdesign werd geintroduceerd in 2010 door Ethan Marcotte als een methode om een zo optimaal mogelijke gebruikerservaring te creeren voor alle mogelijk apparaten waarmee je het internet op kunt(smartphones, tablets, desktops). Met andere woorden de klanten van "broodje van kootje" moeten net zo goed een bestelling kunnen plaatsen op een smartphone of tablet in portrait modus als op een groot desktop scherm. Om deze behoeften te bereiken moet de layout zodanig ontworpen zijn dat de layout afhankelijk van de schermbreedte kan transformeren in steeds weer een optimale weergave.

Responsive design door de jaren heen

Na de publicatie van het artikel van Ethan Marcotte op A list Apart in 2010 werd de methoden voor het “responsive” maken van een weblayout steeds meer opgepakt door de webcommunity. Een van de eerste grote projecten geheel opgezet in een Responsive weblayout was de in 2011 geintroduceerde Boston Globe nieuwssite. Filament group,de toenmalige werkgever van Marcotte, zette daarmee gelijk een stevige standaard neer. Via filmpjes en door het delen van voorbeelden via Github maakte de Filament group de webwereld warm voor Responsive design. Steeds meer bureaus en hun klanten zagen de noodzaak van een responsive website tegenover het bouwen van een aparte “dedicated” mobiele website.

Brad Frost, een energieke vrolijke Amerikaan uit Pittsburgh, pakte de methode van Marcotte heel wijs op en had al snel een belangrijk stop woord “responsive webdesign”. Inmiddels geld Frost als een van de prominente personen binnen de webcommunity en heeft hij met z’n kritische blik vele inzichten gegeven in de kansen en uitdagingen op het gebied van Responsive webdesign. Hij begon met een visie om de layout van een website “toekomst gericht of future-friendly” te maken. Hij bedacht patronen via het project “This is Responsive” om snel en gemakkelijk inzicht te geven over de werking van verschillende triviale componenten(menus, tekskolommen). Frost heeft met een aantal anderen het “This is responsive” inmiddels door vertaald naar een Opensource product Patternlab. Een manier om wireframes in de webbrowser te maken met behulp van bouwstenen of patronen. Deze werkwijze heeft Frost ondermeer gebruikt tijdens de ontwikkeling van de nieuwe Techcrunch.com(2013) site.

Responsive design workflow

Stephen Hay haalde tijdens Mobilism conferentie in Amsterdam(2012) een belangrijk onderwerp aan over de aanpak van een responsive webdesign project. Met de komst van responsive ontwerpen zijn er vele nieuwe invalshoeken maar ook even zoveel vragen, er is behoefte aan een nieuwe aanpak waarbij we op een andere manier nadenken over het ontwerpen en beschikbaar maken van een website op verschillende apparaten. Stephen Hay introduceerde zijn workflow waarbij hij het ontwerpen in de browser kiest boven het miniteus uitwerken van wireframes. Stephen Hay kiest voor een proactieve manier waarbij een developer/designer de klant vanaf het eerste moment betrekt bij het uitwerken van een ontwerp in de browser. Designers gebruiken in zijn visie het copydocument van de klant als vertrekpunt. De klant geeft input over het copydoc, de ontwerper/developer schetst dit uit in de browser en na enige tijd ontstaat er een contentstructuur. Het copydoc kan nu geconverteerd worden als html pagina’s en in de uitgedachte contentstructuur geplaatst worden. Een eerste versie van een responsive mockup is geboren. De content kan nu getest worden op verschillende apparaten, van smartphone t/m desktop. Er kan nu nagedacht worden over de vormgeving en interactie. Dit proces is op de voet te volgen voor de klant waardoor het gevoel onstaat dat er een op maat gemaakte koets wordt gebouwd.Door het ontwerpen in de webbrowser maak je dingen realistisch en tastbaar. Een klant heeft zo niet langer het gevoel een ontwerp uit een folder te moeten kopen.

Bij het ontwikkelen van deze website heb ik zelf ook geexperimenteerd met Hay’s visie. Ik vind het letterlijk volgen van zijn werkproces te rigide maar het ontwerpen direct in de browser maakt dingen veel realistchers. Ook geeft het ontwerpen vanuit een copydoc een veel beter beeld over het eindresultaat. Je bent flexibeler en kunt veel beter keuzes bijstellen, inhaken op feedback en communiceren met klanten.

Interesse in een project volgens Responsive webdesign methode? Stuur een mail