arrow_drop_up arrow_drop_down
responsive design

Responsive Design

Responsive Design, wat is dat?

Er was een tijd dat de meeste computerschermen een 4:3 beeldverhouding hadden. De resolutie nam in de loop der jaren toe maar de verhoudingen bleven gelijk. Denk aan 640x480, 800x600 of 1280x960 pixels. Later zouden er steeds meer breedbeeld schermen op de markt verschijnen met een verhouding van 16:9, die met name voor het bekijken van films geschikt waren. Met de introductie van smartphones werd het steeds lastiger om een website juist weer te geven. Niet alleen het verschil tussen landschap- en portret modus bleek een uitdaging voor webdesigners, er kwamen steeds meer schermen op de markt met afwijkende verhoudingen. Met Responsive Design is het mogelijk om eenmalig een website layout te ontwerpen, op basis van het apparaat zullen de elementen op de juiste wijze ingedeeld worden. Website design applicaties en ook webshop software houden hier doorgaans rekening mee door Responsive Design templates te leveren aan designers.

Iedereen een eigen scherm

Een webdesigner zal op een specifiek scherm werken, met specificaties die wellicht niet overeenkomen met bezoekers op de website. In plaats van op tientallen apparaten met afwijkende schermen te testen, kan met Responsive Design eenmalig een website worden ontworpen die zich automatisch aanpast zodat de weergave op ieder apparaat optimaal is. Daarbij is de ontwerper wel enigszins aan banden gelegd omdat er minder controle is over de indeling en uitvulling. Maar deze beperking voor de ontwerper weegt minder zwaar dan een goede werking op ieder systeem.

Niet alle informatie is altijd zichtbaar

Om het ontwerpen van een gebruikersinterface wat eenvoudiger te maken zal er doorgaans een desktop en een mobiele versie van een website ontworpen en getest worden. Normaal gesproken zal de functionaliteit gelijk zijn, maar dit is niet altijd het geval. Zo worden mobiele schermen doorgaans in portret modus gebruikt terwijl vaste schermen juist in landschap modus staan. Ook zijn mobiele schermen kleinervan oppervlakte en worden ze met een aanraakscherm bediend. Afhankelijk van de toepassing kunnen er per systeem elementen worden weggelaten of juist worden toegevoegd. In praktijk zullen mobiele versies van websites minder functionaliteit bevatten. Mocht er iets ontbreken, dan kan de desktop versie worden opgevraagd, al blokkeren veel sites deze optie.

Responsive Design voor SEO

Google is in 2016 gestart met het indexeren van mobiele websites, om zo de gebruiker de juiste versie van een website of pagina voor te kunnen schotelen in de zoekresultaten. Hier is een Mobile-First aanpak uit voortgekomen die in september 2020 volledig werd. Sindsdien is het algoritme volledige aangepast naar mobiele indexering.

Betekent dit dat gebruikers met een laptop of desktop computer voortaan mobiele sites voorgeschoteld krijgen? Nee, Google houdt rekening met de scherminformatie die ze op kunnen vragen vanuit de browser. Desktop en laptop gebruikers krijgen andere zoekresultaten te zien als smartphone gebruikers. Waar tablets onder vallen blijft een beetje onduidelijk en is deels afhankelijk van het schermdiagonaal en beeldresolutie. Door websites Responsive te ontwerpen zullen ze op ieder systeem geïndexeerd worden en op basis van relevantie in de zoekresultaten verschijnen. Daarmee is Responsive Design een SEO methode die webdesigners niet over het hoofd moeten zien.
Wij houden van koekjes, jij?