Responsive web design

Voor mensen die websites maken is de term: ‘responsive web design‘ hopelijk niet nieuw. Voor de mensen die geen websites maken of voor de webbouwers die zich nu achter de oren krabben, volgt hier een korte uitleg. Ik zal me onthouden van technische details, over het how-to deel is natuurlijk via Google ondertussen van alles online te vinden.

Responsive web design is een andere manier van ontwerpen en realiseren voor het web. Het gaat uit van de gedachte (maar ook van de praktijk) dat de middelen waarmee mensen het internet consumeren heel snel aan het veranderen zijn. Zo worden niet alleen de computerschermen steeds groter in formaat en resolutie, wordt er ook steeds meer mobiel gebrowsed en komen er meer verschillende soorten producten op de markt waarmee men het web op kan.

Responsive web design haakt hier op in door middel van een aantal (niet eens zo ingewikkelde) toevoegingen aan de code van de website. Deze toevoegingen laten een site zich aanpassen aan bijvoorbeeld de resolutie van het scherm waarmee een bezoeker kijkt. Of de bezoeker via een PC of een mobiel apparaat kijkt is een andere factor die meegenomen kan worden.

Meeschaalende websites zijn niet nieuw natuurlijk, maar responsive web design gaat verder dan alleen dat. Het maakt het mogelijk om heel specifiek een aangepast ontwerp van dezelfde site te tonen als een gebruiker met een bepaalde resolutie kijkt. Bezoekt een gebruiker de site vanaf zijn iPhone dan kan de structuur, het ontwerp en misschien zelfs de content daarop aangepast worden. Grote foto’s bij nieuwsberichten zijn voor een mobiele bezoeker niet zo handig bijvoorbeeld en kunnen weggelaten worden terwijl bepaalde buttons misschien juist wat groter gemaakt kunnen worden zodat ze gemakkelijker via het touchscreen te gebruiken zijn. Zo kan heel specifiek de gebruikerservaring per resolutie en apparaat worden geoptimaliseerd, zonder dat er verschillende websites gebouwd moeten worden. Het betekend natuurlijk wel dat er (nog) beter over de site en haar verschillende verschijningsvormen moet worden nagedacht en dat deze vormen gebouwd en getest moeten worden.

Deze, bijna organische, vorm van ontwerpen en bouwen voor het internet vind ik erg interessant en ik ben benieuwd hoe lang het duurt voordat deze vorm mainstream wordt. Aan de andere kant gaan de ontwikkelingen op het gebied van webdesign en ontwikkelen ook razend snel, dus misschien dat ik binnenkort alweer over een nieuwe vorm kan schrijven.

Voor de mensen die zich nog wat verder willen verdiepen in de materie kan ik de volgende links aanbevelen:
http://www.alistapart.com/articles/responsive-web-design
Hét artikel van Ethan Marcotte waarmee het allemaal begon.

http://www.abookapart.com/products/responsive-web-design
Het onlangs verschenen boek van dezelfde auteur (overigens een leuke en informatieve boekenreeks).

  1. Leuk bericht Guus. Het gaat hier om een vervolgstap in de evolutie. Bij dit soort zaken vraag je je dan ook af waarom sites nu al niet allemaal zijn ontworpen met de eindgebruiker (en zijn apparaatjes) in gedachten.

      • Guus
      • 9/9/2011 12:36pm

      Hallo Bart,
      Bedankt voor je reactie. Ik denk dat er al steeds meer en beter wordt ontworpen en gebouwd met de gebruiker in gedachten. Je ziet dat er veel meer aandacht wordt besteed aan user experience in plaats van alleen maar het maken van mooie plaatjes.
      De evolutie van apparaten hangt daar toch ook wel weer een beetje los van, volgens mij. Je ziet dat web bouwers snel inspringen op de veranderingen aan die kant, maar het is vaak wel een ‘reactie op’ en niet ‘vooruit lopend op’. Toen een paar jaar geleden de schermen en schermresoluties steeds groter werden, ging men de meeschalende websites (veelal nog in tabellen gebouwd) juist in breedte vastzetten, zodat content en tekst niet veel te breed werden getoond. Nu zie je weer dat door het veelvoud aan afmetingen van schermen en apparaten de sites weer ‘vloeibaar’ worden zodat het op elk soort scherm passend getoond kan worden. Misschien dat er over een paar jaar een aantal standaard vaste schermformaten zijn overgebleven voor pc, tablet en telefoon die dan weer de norm worden…

  1. Nog geen trackbacks.