De tijden dat je om een internetpagina te bekijken achter je computer moest gaan zitten, zijn definitief voorbij. De opmars van smartphones en tablets is niet te stuiten en de kwaliteit van het mobiele internet houdt (bijna) gelijke tred met deze ontwikkeling. Deze nieuwe omgang met het internet vraagt om een nieuwe aanpak op het gebied van vormgeving en techniek. Donderdag 13 september om 12:00u geeft Fundament All Media daar een webinar over. Onder leiding van Mireille Stomp en Sjors Sevenhuijsen vertellen wij u alles over het huidig en toekomstig gebruik van mobiele websites, dus meld u snel aan!
Momenteel wordt in veel gevallen de mobiele bezoeker van een website al dan niet automatisch doorgeleid naar een mobiele versie ervan. Vaak is dit een soberder vormgegeven variant op de ‘gewone’ site, meestal met een aparte URL als m.website.com of website.com/mobile. Hoewel dit nu nog de meest gangbare optie is, lijkt het erop dat responsive webdesign (RWD) de nieuwe standaard aan het worden is.
Het principe achter RWD is dat je een website hebt die zich aanpast aan het scherm waarop deze bekeken wordt. Wanneer je dezelfde site bekijkt met een tablet, smartphone of XL beeldscherm, wordt de layout zó aangepast dat deze optimaal bruikbaar en zichtbaar is. Hierdoor hoef je geen aparte mobiele site te onderhouden en is user-agent detectie (nagaan welk type apparaat je bezoeker gebruikt) in veel gevallen overbodig. Een flexibele layout zorgt er bovendien voor dat je een website hebt die niet op elk schermformaat apart aangepast hoeft afgesteld te worden. Dit is zeker wenselijk gezien de grote variatie in smartphone- en tabletschermen.
Er valt een boel te zeggen over hoe een responsive website eruit ziet, maar het beste is nog altijd om het met je eigen ogen te bekijken. Uiteraard kun je nu je laptop, tablet en smartphone bijeen pakken, maar het aanpassen van je browserwindow werkt een stuk makkelijker. Ook kun je een webtool als http://mattkersley.com/responsive/ gebruiken om in één oogopslag een website op verschillende formaten te bekijken. Goede voorbeelden van RWD zijn The Boston Globe (http://www.bostonglobe.com/), Smashing Magazine (http://www.smashingmagazine.com/) en natuurlijk onze eigen webinarsites www.webtember.nl en www.bringyourowncoffee.nl.
De Bring Your Own Coffee-website op verschilende schermformaten.
Zoals te zien valt, bestaat er niet één ideale manier om je website toegankelijk te maken voor een breed arsenaal aan apparaten. Dit laat meteen zien dat RWD niet een one-size-fits-all oplossing is. Het ontbreken van een enkele, gouden standaard brengt nieuwe uitdagingen met zich mee. Voor ontwerpers betekent de RWD-aanpak dat ze los zullen moeten laten van de ‘pixel perfect’-controle die ze hebben op een statische site. Tegelijkertijd moet er rekening gehouden worden met navigatie, content, typografie en hoe deze zich op verschillende beeldschermen verhouden. Het voornaamste issue dat RWD met zich meebrengt is dan ook wel dat het een stuk arbeidsintensiever is, zowel in het ontwerp als in de bouw.
De voordelen wegen echter tegen de nadelen op. Hoewel de ontwikkeling van een responsive website meer kosten met zich meebrengt, verdient zich dit op termijn terug omdat een enkele website minder onderhoud vergt dan een aparte mobiele site naast de ‘gewone’ site. Bovendien blijft de vormgeving consistent tussen verschillende apparaten, wat de herkenbaarheid ten goede komt. Zoals met elke technische vernieuwing, biedt de overgang naar RWD een uitstekend moment om de bestaande werkwijzen tegen het licht te houden en waar nodig flink af te stoffen. Het toenemende bezoek vanaf mobiele apparaten vereist een nieuwe manier om met de content om te gaan. Zo zijn smartphones minder geschikt voor lange lappen tekst, maar ook een te wijdvertakte menustructuur kan in een compacte vorm opeens verrassend duidelijk aan het licht komen.
De workflow rondom het maken van responsive websites wijkt sterk af van het vertrouwde, stapsgewijze model van het maken van schermvoorstellen en deze vervolgens in code uitwerken. Webdesigner en -bouwer zijn sterker op elkaar aangewezen. Omdat het aantal schermformaten waarop de site verschijnt theoretisch oneindig is, valt niet op voorhand op elke situatie te ontwerpen. De ideale workflow voor RWD is dan ook iteratief: ontwerpen, bouwen, testen, aanpassen, testen, opnieuw aanpassen, etcetera. Zoals gezegd vergt deze aanpak meer werk, maar leidt het tot een beter en effectiever product. Ook dwingt de bredere variatie in bezoekers ertoe om meer over de gebruikers en hun context na te denken. Bezoekt men mijn website met een smartphone vanuit de trein of voor de open haard met de iPad op schoot?
Voorbeelden van responsive wireframes.
Bron: http://www.thismanslife.co.uk/projects/lab/responsivewireframes/
Hoewel RWD nog redelijk in de kinderschoenen staat, is het nu al duidelijk dat het veelbelovend is. We hebben niet te maken met een tijdelijke trend, maar met een structurele verandering in de digitale infrastructuur. Hoewel de wereld van webdesign en -technologie bijzonder snel verandert, mogen we er van uit gaan dat we de komende jaren deze richting uit zullen blijven gaan.
Wilt u nog meer weten? Donderdag 13 september om 12:00u geven Art Director Mireille Stomp en Account Manager Sjors Sevenhuijsen het webinar “De mobiele website is een blijvertje”, dus meld u aan!
Verwerken / ophalen ...
