Goed op desktop en smartphone: responsive

Je ziet nog regelmatig websites tegen die niet goed te lezen en te bedienen zijn op smartphone. Die websites zijn vaak niet-responsive en dat heeft negatieve gevolgen voor bezoekers aantallen en verblijfsduur. In deze blog lees je wat er aan de hand is en wat je er aan kunt doen.

Verschillende schermen

Een website is opgebouwd uit 1 of meerdere webpagina’s.  Een webpagina bekijk je op je desktop, laptop, tablet, Ipad, smartphone of Iphone.  Al die apparaten hebben verschillende beeldscherm formaten.  Op een laptop is een scherm veel breder dan hoog en op een smartphone wordt meest gekeken op een scherm dat hoog en smal is.  Daarnaast heeft een laptop veel meer beeldpuntjes dan een smartphone.

Niet-responsive

Als je een webpagina maakt voor een desktop en die wordt bekeken op op een smartphone dan zie je de alleen de linker boven hoek van de webpagina. De rest valt buiten het scherm. Natuurlijk kun je dan schuiven om andere delen van de pagina  te zien.  Maar dat is niet gebruikersvriendelijk. Veel bezoekers verlaten daarom de website.  Als je webpagina groot is en je ziet een beperkt deel  dan is de kans groot dat een belangrijk deel van de boodschap wordt gemist. Ook zie je regelmatig webpaginas die wel helemaal te zien zijn maar dan wel heel erg klein. Eigenlijk kan je het niet te lezen.

meer dan 60% van de webpagina’s wordt mobiel bekeken: een niet-responsive website raakt veel bezoekers kwijt.

Google streeft er naar om voor de bezoekers de meest optimale zoek resultaten te presenteren. Een niet-responsive website wordt daarom veel lager in de lijst van zoekresultaten gezet.

Basis-responsive

Bij het bouwen kun je zorgen dat de layout van een pagina flexibel is. Een tekstblok wordt dan smaller op een smartphone. En als je twee tekstblokken of afbeeldingen naast elkaar hebt dan worden die onder elkaar gezet. Ook kun je zorgen dat de layout per scherm formaat wordt aangepast. Zo wordt het menu vervangen door de ‘hamburger’ (3 horizontale streepjes) en kun je knoppen groter maken. Er zijn veel website basis-reponsive.

Echt-responsive

Je zit tegenwoordig ook steeds meer echt-responsive websites. De lay-out wordt dan aangepast voor 3 of meer schermformaten (desktop, tablet, smartphone). Maar het gaat verder: je laat meer zien op desktop dan op smartphone, minder en kleiners afbeeldingen, marges en witruimtes zijn kleiner, de belangrijkste inhoud zit vooraan, knoppen en links zijn beter aan te klikken. Het blijven vaak compromissen omdat schermen van smartphones erg klein zijn.

De test van Google

Met de volgende link ga je naar een test website van google Mobiel vriendelijk Geef je website in en als het scherm groen wordt dan is het goed.

Deel deze blog