Is jouw website in of voor 2011 gemaakt? Dan is de kans groot dat deze minder geschikt is om vanaf een smartphone of tablet te raadplegen. Met responsive design kan dat wel. In dit artikel leg ik uit waarom responsive design belangrijk is en wat de mogelijkheden zijn voor jouw website.

Responsive design

Grote verschillen in de beeldschermen van een computer, laptop, tablet of mobiele telefoonHet succes van tablets en smartphones de laatste jaren betekent dat ontwerp en techniek van websites helemaal moeten worden aangepast. Omdat websites vooral ontworpen waren voor grote beeldschermen, zijn ze moeilijker leesbaar op de veel kleinere schermen van mobiele apparaten. Daarvoor is responsive webdesign in het leven geroepen, een term die in 2010 is bedacht door Ethan Marcotte. In plaats van een ontwerp in vaste afmetingen ondervond Marcotte dat het veel praktischer was om een flexibel ontwerp te maken dat zich aanpast aan het beeldscherm waarop de website wordt opgeroepen.

Struikelblokken

Als een website niet responsive is uitgevoerd, kunnen tablet- of smartphonegebruikers een aantal struikelblokken tegenkomen:

  • De tekst is onleesbaar of linkjes zijn niet goed aan te klikken: de website wordt verkleind om deze op het kleine beeldscherm te laten passen. Soms kun je wel inzoomen op een website (als de uitvergrootfunctie niet is uitgezet), maar dan moet je de pagina voortdurend heen en weer schuiven om alles te kunnen lezen. Overzicht houden is dan lastig
  • Mouse-overeffecten doen het niet: op een touchscreen is er geen verschil tussen een link aanklikken of eroverheen gaan om te kijken wat er gebeurt. Informatie die via een mouse-over wordt aangeboden, gaat op een touchscreen verloren
  • De website laadt heel langzaam omdat het beeldmateriaal te zwaar is of omdat de onderliggende technieken een snelle internetverbinding vragen
  • Transparantie werkt niet altijd op een mobiel apparaat. Een transparante achtergrond tussen een foto en een tekst kan wegvallen waardoor de tekst niet meer leesbaar is
  • Bewegende onderdelen, gebouwd in Flash, werken niet. Onderdelen van de website zijn daardoor niet zichtbaar en laten in dat geval een icoontje zien dat aangeeft dat er een programma ontbreekt om de inhoud te kunnen tonen. Als de hele website in Flash is uitgevoerd, is er zelfs helemaal niets te zien

Oplossingen

Het beste is om een oude website helemaal te vernieuwen en responsive uit te voeren zodat deze weer een paar jaar mee kan. Als jouw website een belangrijk onderdeel van je bedrijfsvoering is, verdien je deze investering snel terug.
Wil je een grondige oplossing nog even uitstellen? Dan zoeken we naar tijdellijke oplossingen voor de grootste knelpunten. Daarmee kan de bezoeker inzoomen op de verkleinde pagina's en zijn teksten leesbaar, wordt informatie achter mouse-overeffecten op een andere manier zichtbaar, wordt zwaar beeldmateriaal of zware scripts voor mobiele apparaten weggelaten, worden Flash-onderdelen zo veel mogelijk vervangen door stilstaande afbeeldingen, en wordt transparantie vervangen door een achtergrondkleur.

Doe de responsive check

Wil je weten hoe jouw website het doet op de verschillende mobiele apparaten? Vraag bij ons een responsive check aan. Wij bekijken de website op de meest gebruikte mobiele apparaten zoals een iPad, een Android Tablet en op smartphones met besturingssystemen iOs, Android en Windows. Wij brengen de struikelblokken van jouw website in kaart en schetsen de mogelijke oplossingen met een inschatting van de kosten. In de statistieken bekijken we hoeveel bezoekers met een mobiel apparaat jouw website bekijken. Zo'n responsive check kost bij ons (tot eind 2014) 125,00 euro exclusief btw. Beslis je na onze analyse om de website door ons te laten aanpassen of opnieuw te laten bouwen in een responsive design, dan is de responsive check met terugwerkende kracht gratis.

Moon Tummers, 10 oktober 2014
Eindredactie: Barbara van Male

Lees ook een update over dit onderwerp in mijn artikel: