Web Test Devices
Scott Boyle BY-NC-SA

Responsive design

Inmiddels surfen we er behoorlijk op los met zijn allen: in de trein, op de fiets, in de file of onderuit gezakt op de bank in de woonkamer. We bekijken websites anno nu dan ook niet meer alleen op traditionele desktopbrowsers of laptops. En we gebruiken ook nog verschillende devices; denk aan smartphones, tablets en zelfs de aloude tv. Kortom, er is inmiddels een wildgroei aan devices, schermresoluties en browsers ontstaan.

Andere aanpak nodig voor het bouwen van websites

De aanpak zoals we die voorheen kenden, waarbij een aparte mobiele site en subdomein (m.jouwdomeinnaam.nl) ontwikkelt worden, volstaat niet meer. Het ontwerp dat je bedenkt en vervolgens gaat bouwen, moet flexibel zijn op tablets, smartphones en straks ook nog eens kunnen werken op toekomstige innovatieve uitvindingen. Responsive design is momenteel een veel gehoorde term die hier uitkomst kan bieden. Met responsive design wordt bedoeld dat je één website bouwt en de gebruikersinterface laat aansluiten op de context. Inmiddels heb ik zelf een paar keer gewerkt volgens de Responsive Design principes aan de ontwikkeling van websites.

Workshop Responsive design

Om meer grip te krijgen op de ‘materie’ van het mobiele web heb ik tijdens de Mobilism Conference Amsterdam (9 t/m 12 mei j.l) een workshop gevolgd over Responsive design. Onder leiding van Lyza Gardner & Jason Grigsby (Cloud four) werden een hoop praktische tips gedemonstreerd om beter met Responsive Design aan de slag te kunnen. De workshop was vooral bruikbaar als je als developer of ontwerper al bezig bent met Responsive Design. Een aantal zaken waar je bij deze manier van ontwerpen aan moet denken op een rij:

  • Basis tools: hoe richt je je project optimaal in met behulp van boilerplates?
  • Zorg dat je plaatjes optimaliseert voor verschillende schermresoluties en polyfills, zodat ook oude browsers werken met responsive design technieken.
  • Mobile first: ontwikkel eerst een mobiel ontwerp dan pas de rest.
  • Responsive design in webapp development: denk aan Local storage, Simple json storage en app cache.

Conclusie

Na het volgen van de workshop van 9 mei kan ik concluderen dat er verscheidene visies zijn op wat nu precies Responsive Design is en hoe het zou moeten werken. Tijdens de workshop raakte bijvoorbeeld aan de praat met een ontwerper van Skalar. We waren het er beiden over eens dat de meeste adepten van Responsive Design, de nadruk te veel blijven leggen op technische browser-termen en de beperkingen van die browsers. Terwijl het veel beter zou zijn om de beperkingen uit de weg te gaan en te zoeken naar mogelijkheden. Naar mijn mening staat Responsive Design nog te ver af van de ontwerper. Er zijn nog geen goede handvaten bedacht en ook een toolkit of een planmatige werkwijze mist nog.

Naar mijn idee moet Responsive Design gepositioneerd worden als een design principe. De technische- en ontwerpuitdagingen die komen kijken bij het ontwikkelen voor diverse devices moeten gedeeld worden, bijvoorbeeld zoals dit nu al gebeurt bij Interactie Ontwerp. Developers, designers en tekstschrijvers moeten met elkaar kunnen communiceren in hetzelfde jargon. En juist dat zie ik nu nog niet. Vooralsnog lijkt het dus nog te veel te gaan over technieken en standaarden. Wel geloof ik in de toekomst van deze ontwerpmethode: de ontwerpers en ontwikkelaars van deze contextueel afhankelijke android app laten bijvoorbeeld mooi zien waar het heen kan gaan met Responsive Design.