Websites die gebouwd worden volgens de principe van responsive webdesign passen zich aan naar het gebruikte formaat beeldscherm. Zo schaalt een responsive website bijvoorbeeld automatisch lettertypes naar een optimaal formaat en wordt er gezorgd dat afbeeldingen altijd volledig zichtbaar zijn.
Mobiele apparaten zijn in opkomst. Zo wordt voorspeld dat er in 2013 meer mensen via een mobiel apparaat op het internet zullen surfen dan via een gewone computer. Daarbij wordt er steeds vaker gebruik gemaakt van netbooks (kleine laptops) en zijn tegelijkertijd ook beeldschermen van groot formaat in opkomst. Het resultaat daarvan is dat er simpelweg geen standaard beeldscherm resolutie is waarvoor ontworpen kan worden. Terwijl het een paar jaar geleden nog voldoende was om een website er goed uit te laten zien op 1024×768 pixels en te zorgen dat alles functioneerde op de overige resoluties, is dat nu niet meer van toepassing. Uit de hiervoor beschreven situatie is een nieuwe stroming ontstaan, welke responsive webdesign wordt genoemd.
Simpel gezegd passen responsive websites zich aan naar de beeldscherm resolutie die een bezoeker van de website gebruikt. Wanneer deze bezoeker een groot beeldscherm heeft dan zal er veel ruimte in de breedte zijn op het scherm, waardoor er plek is voor meerdere elementen naast elkaar. Wordt er echter gebruik gemaakt van bijvoorbeeld een iPad tablet, dan zullen de tekst en afbeeldingen op de website hier automatisch op worden aangepast. Zo zal bijvoorbeeld het lettertype groter worden en gaan de afbeeldingen boven of onder de tekst staan (in plaats van er naast op grotere resoluties). Tevens zullen afbeeldingen kleiner worden geschaald zodat deze in zijn geheel in het scherm van de iPad passen. In het geval dat de bezoeker de website bezoekt op een smartphone, dan zal bovenstaande proces er voor zorgen dat de teksten en afbeeldingen op de website juist worden geoptimaliseerd voor dat formaat scherm.
Voordelen
De website wordt automatisch aangepast aan resoluties
Wat een steeds belangrijker punt gaat worden omdat de verscheidenheid in beeldscherm resoluties de komende jaren waarschijnlijk alsmaar zal toenemen. Verder gebeurt het aanpassen van de website zonder dat hiervoor gebruik gemaakt wordt van javascript. Dit zorgt ervoor dat ook de groep gebruikers die javascript uit heeft staan (welke wordt geschat op zo’n 5% van de internet gebruikers) de website in een optimale vormgeving zal kunnen gebruiken.
Een andere interessant punt is dat de detectie zoals gezegd wordt gedaan op basis van de beeldscherm resolutie. Nog regelmatig worden er websites uitgebracht waarbij de detectie voor het tonen van een mobiele site of een responsive site wordt bepaald op basis van apparaat detectie. Nu is het grote probleem van apparaat detectie dat deze lijst met apparaten constant moet worden bijgewerkt. Een apparaat dat immers niet op de markt was op het moment dat de lijst werd gepubliceerd kan immers ook niet nauwkeurig worden gedetecteerd. Dit probleem is niet van toepassing wanneer de detectie wordt gedaan op basis van beeldscherm resoluties.
Wat erg gunstig is ten opzichte van de losstaande mobiele websites die de laatste jaren veel ontwikkeld werden. Dergelijke mobiele websites maken gebruik van fundamenteel andere broncode om de website op het scherm te toveren. Ook wordt er soms zelfs gebruik gemaakt van verschillende artikelen voor op de reguliere website en voor op de mobiele website. Wanneer er gebruik gemaakt wordt van responsive webdesign dan is er slechts één stuk code die de ‘presentatie’ laag vormt naar de gebruiker toe (wat zorgt voor minder onderhoud) en worden dezelfde artikelen gebruikt voor de mobiele website en de reguliere website.
De tekst is altijd goed leesbaar zonder te hoeven zoomen
Gebruikers van smartphones moeten regelmatig dubbelklikken op het scherm om de mobiele browser zo goed en kwaad mogelijk in te laten zoomen op de tekst. Hoewel dit er over het algemeen voor zorgt dat de tekst een leesbaar formaat krijgt, is dit in minstens net zo veel gevallen ook niet zo. Alleen door de telefoon te kantelen of van links naar rechts door de regels te scrollen kan de tekst soms goed leesbaar worden gemaakt. Doordat er binnen responsive webdesign wordt gekeken naar het gebruikte formaat scherm en de tekst daarvoor wordt geoptimaliseerd, zal er altijd sprake zijn van een zo goed mogelijk leesbaar formaat letters.
De norm van twaalf woorden per regel wordt gehandhaafd
Uit onderzoek is gebleken dat bezoekers het liefst zinnen lezen van ongeveer twaalf woorden per regel. Wanneer de regels langer worden dan dit aantal, dan zullen de ogen namelijk een lange afstand ’terug moeten reizen’ naar de linkerkant van de tekst om aan de volgende regel te kunnen beginnen. Dit is vermoeiend voor de ogen. Vooral websites die de breedte van de website vaststellen op 100% van het gebruikte scherm formaat gaan regelmatig over de genoemde grens heen. Het gevolg hiervan is dat er hele platte alinea’s ontstaan, met enorme brede regels. Deze zijn vermoeiend om te lezen en grafisch nog eens niet fijn om te zien ook. Bij een responsive website daarentegen kan er voor gekozen worden om bijvoorbeeld een afbeelding naast de tekst te plaatsen wanneer er lange regels dreigen te ontstaan door het formaat beeldscherm. Dit zal er voor zorgen dat de regels weer korter worden, wat fijner leest en er ook nog eens beter uitziet.
De techniek is te combineren met een CMS
Dit betekent dat de artikelen en afbeeldingen van de website beheerd kunnen worden in een Content Management System. Er hoeft tevens geen speciale software geïnstalleerd te worden om een responsive website te kunnen bekijken of beheren.
Geen aparte website ingeladen voor mobiele apparaten
Hoewel dit in de meeste gevallen een voordeel is, kan het in sommige gevallen ook een nadeel zijn. Denk hierbij bijvoorbeeld aan websites van luchtvaartmaatschappijen. Die willen op hun website gericht op desktop computers een volledige website aanbieden, waarop onder andere informatie over vluchten, de geschiedenis van de maatschappij en de mogelijkheid om tickets te kopen aanwezig zijn. In het geval van een mobiele website zal het overgrote deel van de gebruikers op zoek zijn naar informatie over vluchttijden. In dit voorbeeld kan het dan ook effectiever zijn om gebruik te maken van een gerichte mobiele website, anders dan een responsive website met voor alle apparaten dezelfde informatie.
Soms grotere afbeeldingen ingeladen dan benodigd
Op dit moment is het (vooral voor afbeeldingen gebruikt in artikelen) nog redelijk ingewikkeld om kleine afbeeldingen in te laden op mobiele apparaten. Voor afbeeldingen gebruikt in de vormgeving is dit al beter mogelijk. Dit zorgt ervoor dat de er in veel gevallen grotere afbeeldingen worden ingeladen en door de browser worden verkleind. Deze afbeeldingen moeten zo groot zijn omdat dit formaat benodigd is voor normale beeldschermen en alle apparaten dezelfde teksten en afbeeldingen krijgen geserveerd. Er wordt aan gewerkt om dit in de toekomst wel mogelijk te maken, wat er ook nog eens voor zou zorgen dat een responsive website op mobiele apparaten (die vaak gebonden zijn aan databundels of slechte ontvangst) ook nog eens extra snel gaan inladen.
Verouderde browsers ondersteunen de techniek niet
Hoewel responsive technieken door het grootste deel van de browsers worden ondersteunt, zijn het vooral de oudere versies van Internet Explorer die er niet mee overweg kunnen. Ondersteuning voor deze technieken is ingebouwd in Internet Explorer 9 en moderne versies van Firefox, Chrome, Opera en Safari. Op browsers die responsive websites niet ondersteunen kan er een speciale vormgeving worden ingeladen die er voor zorgt dat websites er daar alsnog goed uitzien (maar niet schalen op basis van het gebruikte formaat scherm).
Kosten en tijd
Wanneer er gekozen wordt voor een responsive website dan hoeft er zoals gezegd in de meeste gevallen geen losse mobiele website gebouwd te worden. Verder is het ontwikkelen van een responsive design niet perse ingewikkelder dan een ‘normale’ website. Wat echter wel het geval is dat responsive webdesign een jonge techniek is, waarvoor veel studie nodig is om deze goed onder controle te krijgen. Dit betekent dat er een goed webdesign bureau voor in de arm genomen moet worden (of een medewerker gedegen voor moet worden opgeleid) wanneer er gekozen wordt voor een responsive website.
Aan een responsive site zijn normaal gesproken geen terugkerende kosten verbonden, anders dan voor een mogelijk onderhoudscontract. Verder hoeft er na oplevering niet meer tijd aan besteed te worden dan aan een ‘normale’ website. Sterker nog, door de dynamische opzet zal deze beter klaar zijn voor de toekomst (met nog meer verschillende schermformaten) dan een website die niet responsive is opgebouwd.
Ons advies
Wat ons betreft is het voor de meeste bedrijven een goede zet om een responsive website te (laten) ontwikkelen. Met de opkomst van de mobiele apparaten en andere afwijkende schermformaten is het belangrijk dat de gebruiker te allen tijde een geoptimaliseerde website op zijn scherm ziet. Responsive webdesign is hiervoor op dit moment in onze ogen de beste aanpak.
