Een responsive website. Waarom?

Een responsive website is perfect leesbaar op tablets en smartphones. Én op grote schermen. Dat komt doordat een responsive website zich automatisch aanpast aan de schermgrootte van de bezoeker. Is jouw website nog niet responsive? Dan wordt dat tijd. In dit artikel geef ik je een paar dringende redenen.

Wat is een responsive website?

‘Responsive’ betekent dat je website op alle schermen goed werkt, van het grootste beeldscherm tot het kleinste mobieltje. Zowel in liggende als in staande positie. Je hebt één website voor alle apparaten. Die website wordt afhankelijk van de grootte van het scherm telkens anders ingedeeld: een optimale weergave op elk toestel.

Een responsive website betekent ook dat je op een smartphone niet steeds hoeft in- en uit te zoomen. Dat de knopjes niet te klein zijn voor je duim of vinger. En dat de menu-items niet te dicht bij elkaar staan, zodat je er nooit naast klikt. Zo kan iedereen jouw website altijd en overal optimaal bekijken.

De techniek erachter: Media Queries in combinatie met CSS3.

Kenmerken van een responsive website

Lay-out

Een responsive website ziet er op een mobiel én op een groot scherm perfect uit. Maar niet hetzelfde. De vorm kan veranderen op verschillende apparaten. De inhoud blijft echter gelijk. Het scherm van een iPad is nog groot genoeg om een website op ware grootte te laten zien. Daar staan blokken met tekst of afbeeldingen naast elkaar. Op kleinere tablets en smartphones staan die blokken onder elkaar.

Menu

Op een klein scherm is een menu soms anders verwerkt, bijvoorbeeld verstopt achter een knopje met de tekst menu of achter het zogenaamde ‘hamburger’ icoontje.

Afbeeldingen

Foto’s en plaatjes worden getoond in de grootte waarin ze nodig zijn. Op een mobieltje heb je immers geen grote foto’s nodig. De foto’s passen zich automatisch aan. Op grote schermen kunnen bijvoorbeeld meerdere foto’s naast elkaar staan, als het scherm erg smal wordt schuiven ze netjes onder elkaar. Zo kun je de foto’s altijd goed bekijken zonder dat je hoeft in te zoomen. Je kunt er ook voor kiezen om zware afbeeldingen (bijvoorbeeld achtergronden) op een klein scherm niet te tonen. Daardoor laadt je website met mobiel internet toch lekker snel.

Tekst

Op alle schermformaten zijn de tekstletters groot genoeg om prettig te kunnen lezen. Je hoeft niet voortdurend in- en uit te zoomen of van links naar rechts over het scherm te bewegen. Gewoon van boven naar beneden lezen, zoals je dat al gewend bent.

Voorbeelden van responsive websites

Op de website Media Queries vind je een heleboel voorbeelden van websites met Responsive Design. Je zult zien dat een website er op een mobieltje soms heel anders uitziet dan op een groot beeldscherm.

5 redenen waarom je website responsive moet zijn

  1. De manier waarop mensen surfen is de afgelopen jaren sterk veranderd. Steeds meer mensen bekijken websites op hun telefoon of tablet. Nederland is een van de koplopers in de wereld qua gebruik van mobiele apparaten. 25% van de internet gebruikers gebruikt uitsluitend een mobiel apparaat om te internetten. Alle experts verwachten dat mobiel bezoek aan websites blijft stijgen.
  2. Een responsive website heeft een flexibel design. Dus op een nieuw apparaat met weer een iets andere maat toont de website ook goed.
  3. Het menu op een niet responsive website is vaak te klein is en werkt daardoor niet goed. De bezoeker klikt niet verder. Dit kost je (potentiële) klanten.
  4. Met een responsive website kom je hoger in Google. Sinds november 2014 beloont Google alle mobiel-vriendelijke websites met de vermelding ‘Voor mobiel’. Klanten die Googlen op hun tablet of smartphone en jouw website zien staan bij de zoekresultaten, weten daardoor dat jouw website geschikt is voor mobiel. Wat de kans vergroot dat ze doorklikken naar je site. En dat is nog maar de eerste stap. Binnenkort komen responsive websites komen hoger in Google bij zoekopdrachten op smartphones en tablets.
  5. Je bespaart geld want je hoeft geen aparte website voor mobiele apparaten te bouwen.

Deze infographic geeft een visuele uitleg van wat responsive webdesign inhoudt.

Is jouw website responsive?

Wil je weten of je website responsive is?

Surf naar je eigen website en maak het venster van je browser zo smal mogelijk. Past het ontwerp zich aan? Dan is je website responsive. Verdwijnt een deel van het beeld uit het zicht en verschijnt er een scrollbalk? Dan is je website niet responsive.

Is jouw website responsive? Gefeliciteerd. Niet responsive? Neem contact met mij op. Ik maak jouw website graag responsive zodat iedereen ook jouw website overal optimaal kan bekijken.

Deel dit:

Kan ik je helpen bij jouw project?

Mail of bel me voor een vrijblijvend advies en prijsindicatie.