Responsive design uitgelegd

We zorgen met zijn allen voor veranderingen, zo bekijken we webpagina’s op internet ook op andere manieren dan we dat 4-5 jaar geleden deden.

Naast desktops en laptops gebruiken we ook ontzettend vaak een tablet of smartphone om iets op internet te bekijken.

De grootte van de schermen waarop we webpagina’s bekijken zijn hierdoor enorm wisselend en ook de schermresoluties zijn verschillend.

Door al deze veranderingen kan het zomaar zijn dat jouw website niet goed wordt weergegeven op een smartphone of tablet. Dit is niet gebruiksvriendelijk en kan jouw bezoekers een slechte ervaring geven.

Wat is responsive design?

Waarschijnlijk heb je de term responsive design weleens gehoord, maar wat is het nou precies? Is dit weer een nieuwe hype waar je je niet druk om hoeft te maken of heeft een responsive design wel degelijk nut?

Een responsive design past zich volledig aan het apparaat aan waarmee de website bekeken wordt. Een responsive design schaalt automatisch mee zodat je de teksten kunt lezen zonder in te zoomen en de afbeeldingen altijd volledig zichtbaar zijn.

Het klinkt misschien wat ingewikkeld, maar het komt er eigenlijk gewoon op neer dat het niet uitmaakt op welk device (desktop, tablet, etc.) je jouw website bekijkt. Het ziet er overal goed uit en de afbeeldingen en tekst zijn normaal te lezen.

Een responsive design is hedendaags dus zeker belangrijk en het zal in de toekomst alleen maar belangrijker worden.

Het maakt overigens niet uit of je WordPress, Joomla of geen content management systeem (CMS) gebruikt, een responsive design is voor elke website te maken en je hoeft er geen extra plugins voor te gebruiken.

Waarom moet je een responsive design gebruiken?

Wereldwijd maken ongeveer 38% van de websitebezoekers gebruik van een tablet of smartphone. (bron: Statcounter december 2014)

Wanneer je denkt aan de usability van je website is het hedendaags een must om een responsive design te hebben.

Een heel groot voordeel is dat je met een responsive design maar één website hoeft te maken die meteen goed geoptimaliseerd is voor alle devices en browserformaten. Je hoeft dus geen aparte mobiele website te maken.

Daarnaast blijft dankzij een responsive design de content altijd centraal staan. Er hoeft niets worden geschrapt omdat het niet op het scherm van een mobiel apparaat kan. Het maakt niet uit wie, wanneer en met welk apparaat je website bekeken wordt, je website kan altijd je bezoekers de juiste informatie verschaffen.

Tot slot is responsive design ook nog eens goed voor Google en Google beveelt je zelfs aan om een responsive design voor je website te gebruiken. Je hebt voor iedere pagina één unieke URL en geen dubbele content omdat je niet alles apart hoeft te maken voor de mobiele versie van je website.

Hoe weet ik of mijn site een responsive design heeft?

Het kan zijn dat je niet weet of je website een responsive design heeft omdat je nog nooit je website hebt bekeken op een smartphone of tablet.

Maak je hier geen zorgen over, het is op de volgende manieren eenvoudig te achterhalen:

  1. Bekijk je website op een tablet of smartphone;
  2. Maak je browser kleiner en kijk of je website zich aanpast (schaalt);
  3. Test het op een website als iPadpeek.com.

Wil je weten hoe een responsive design eruit ziet? Bekijk gerust Webtalis op een van de bovenstaande manieren.

Hoe kom ik aan een responsive design?

Het hangt er vanaf hoe je website in elkaar steekt hoe je eraan kunt komen. Wanneer je gebruik maakt van WordPress kun je op ThemeForest of WordPress.org een WordPress theme uitzoeken die een responsive design heeft.

Wanneer je een website hebt laten ontwikkelen kun je aan de webdesigner vragen of het mogelijk is of hij/zij het responsive maakt.

Conclusie: Een responsive design is gebruikersvriendelijk

Heb je nog geen responsive design, dan raad ik je zeker aan om dit te nemen wanneer je een keer van design wilt veranderen.

Het is erg goed voor de gebruiksvriendelijkheid van je website om deze geoptimaliseerd te hebben voor alle devices die er op dit moment zijn. Het is tevens ook een voordeel dat je niet een aparte mobiele website hoeft te maken.

Heeft jouw website al een responsive design? Laat het weten in de reacties.

21 reacties Voeg ook een reactie toe

  1. Hoi Maikel,

    Mijn wordpress website ziet er op de grote monitor prachtig uit, maar op mijn smartfoon gebruikt hij maar een smalle strook! Het ziet er niet uit:-(
    De achtergrond heb ik al veranderd van (1920 px brede) stroken in kleine blokjes, dus dat is het niet… hoe los ik dit op? Ik hoop dat je een oplossing hebt voor mijn probleem:-)

    Groetjes Merit

    • De oorzaak zit in de CSS code van je child theme. Als je dit weghaalt werkt het weer op de normale manier:

      .entry-content,
      .widget-area .widget {
      word-wrap: normal;
      -webkit-hyphens: none;
      -moz-hyphens: none;
      hyphens: none;
      }

  2. Beste Maikel,

    Bedankt voor de uitleg.
    Momenteel ben ik druk bezig met het SEO optimaliseren van mijn site. Je kunt er maar beter vroeg mee beginnen. Kwaliteit over kwantiteit is mij verteld.
    Ik ben blij om te lezen dat responsive design ook mee telt. Dit is gelukkig ook verwerkt in mijn ontwerp.

    Succes met Webtalis!

  3. Hey,

    Plots sinds enkele dagen wordt “mijn” site via mijn tablet helemaal anders weergegeven, namelijk een standaard opmaak of iets dergelijk denk ik. Dit is zo bij de homepage en regelmatig ook bij artikelen (die automatisch verschijnen op hompage). Ik vind dit niet echt mooi, weet je hoe dit komt en wat ik er aan kan doen?

    Dank bij voorbaat!

    groetjes

    • Ik heb geen idee hoe het komt dat het opeens anders is omdat ik niet weet wat er allemaal in de tussentijd is aangepast.

      Wat je moet doen is alles terugdraaien wat je hebt gedaan en vervolgens opnieuw uitvoeren en dan controleren wat het probleem veroorzaakt.

      • Ik heb niets aangepast, een maand geleden wel nog thema geupdate maar dat is al. Het is maar per toeval dat ik het ontdekt heb want met firefox geeft het de normale look. Het is enkel met chrome dat er een andere layout is heb ik gemerkt.. of heb je het nog anders gezien?

        groeten

  4. Hey,

    Ik heb op ipadpeek ook eens gekeken en blijkt dat bij mij niet alles in orde is via mobiele telefoon. de sidebalk komt helemaal vanonder terecht (als laatste) na de posts. Hoe kan ik er voor zorgen dat je site aangepast is aan gsm’s, tablets ed.? Ik heb in de jetpack ook al iets (mobile theme) dat je site optimaliseert voor mobile devices maar dit geeft niet echt veel resultaat met nog steeds bovenvermelde problemen. Weet jij een goede manier (plugin of iets anders..) om je site hiervoor te optimaliseren?

    Bedankt!

    • Dat is geen probleem, dit zo hoort bij een responsive design. De content moet altijd het belangrijkste onderdeel van je website zijn.

      Wanneer je hier een sidebar naast wil hebben op een mobiel moeten de letters kleiner gemaakt worden en kunnen mensen het niet goed lezen zonder in te zoomen. Om dit te voorkomen wordt de sidebar onder de content geplaatst.

    • je hoort dan eigenlijk precies hetzelfde te zien als wanneer je de website bekijkt via ipadpeek. Het kan zijn dat je scherm net de juiste grootte heeft waardoor het bij jou niet opvalt.

      Een oplossing hiervoor is je eigen browser iets kleiner te maken, dan hoor je de verspringen te zien.

      Welke WordPress theme je hebt kun je zien bij Weergave -> Thema’s of door in de code te kijken. Je maakt op dit moment gebruik van tpSunrise.

  5. hoi maikel,
    ik heb via ipadpeek.com gekeken en kwam er achter dat mijn teksten soms verspringen. Waar kan dit aan liggen?
    met vriendelijke groet,
    petra

    • Dit komt omdat dit zo in de tekst verwerkt is. Waarschijnlijk omdat je de tekst niet over de gehele breedte van je website wilde hebben.

      Simpel gezegd heb je dus midden in een zin een enter gebruikt waardoor de rest op de volgende regel komt.

      • hoi maikel,
        bedankt voor je snelle antwoord. Hoe kan je in de tekst/html taal zien of je zo’n enter hebt gebruikt?
        Met vriendelijke groet,
        petra

  6. Responsive Design wordt inderdaad steeds belangrijker. In 2012 is het aantal Internetgebruikers via een smartphone met 75% toegenomen en bezoekt nu al 35% een website via een mobiel apparaat. Dit zal in de toekomst alleen maar toenemen, zeker met het social media gebruik. Van alle links die via social media geplaatst worden wordt er bijna 80% geopend via een mobiel apparaat. Het zou dan zonde zijn als je content niet leesbaar is.

  7. Hallo Maikel,
    Ik heb geen smartphone, dus keek ik direct op de link die je opgeeft. Ik zat daar al eens eerder, of op een vergelijkbare website en ja, wat is het resultaat voor mijn website? Alles is in beeld en goed leesbaar, maar smal. Misschien een kwestie van instellen op een smartphone, als dat kan? Ik weet het niet, heb weinig verstand van smartphones. Of is het normaal?
    Groetjes Ben

    • Het klopt dat het smal (geschaald) is. De teksten zijn echter wel direct goed leesbaar zonder in te zoomen en de afbeeldingen zijn ook in een keer prima te zien.

      Zo ziet het er dus uit bij een responsive website.

  8. Bedankt voor de tip van Ipadpeek.com! Ik had er bij de keuze van het thema voor een webshop voor airbac rugzakken al rekening mee gehouden maar hier kun je nu echt zien hoe je website op verschillende devices wordt weergegeven.

Geef een reactie