Wat is responsive webdesign?
Bij een responsive website past de website zich automatisch aan aan het apparaat waarmee de bezoeker de website bekijkt. Hierdoor is de website goed lees- en zichtbaar op elk schermformaat zonder in- of uit te zoomen. Dit kan zijn een kleine smartphone, tablet, of grote smart TV. Dankzij responsive webdesign biedt u altijd de optimale gebruiksvriendelijkheid.
Responsive webdesign wordt ook wel eens afgekort naar RWD.
Hoe belangrijk is responsive?
Mobielvriendelijke websites zijn essentieel. Het exacte percentage verschilt per markt maar mobielverkeer is goed voor circa 20-40% van al het verkeer. Als uw website niet mobiel geschikt is is de kans groot dat u dit verkeer misloopt.
(De groei van mobiel verkeer is bij deze website goed te zien.)
Google gaat in de toekomst voorkeur geven aan mobiele websites voor indexatie (mobile first index) wat een indicatie is dat dit in de toekomst nóg belangrijker gaat worden.
Wat maakt een responsive website beter dan een mobiele website?
Er zijn verschillende manieren om een website geschikt te maken voor mobiele apparaten. Een alternatief op RWD is een mobiele website. Dit zijn vaak websites op een aparte url (bijvoorbeeld http://m.example.com). Dit heeft een aantal nadelen t.o.v. van responsive:
- Dit werkt alleen op mobiele apparaten (niet grotere schermen als tablets).
- Er is een aparte URL nodig wat minder gebruiksvriendelijk is en indexatieproblemen kan geven in Google bij incorrect gebruik.
- Tijdrovend om meerdere website varianten te ontwikkelen.
Waar op letten bij responsive webdesign?
Bij responsive (mobiele) websites zijn er een aantal punten die u extra aandacht moet geven die voor een desktop website minder van toepassing zijn.
Website snelheid - Mobiele websites moeten snel zijn. Uit een studie van Google blijkt dat 53% van bezoekers waarschijnlijk de website verlaten als het laden langer dan 3 seconden duurt.
Irritaties worden groter - Wat op een grote website gezien wordt als irritant wordt op mobiel bijna gehaat blijkt uit een studie van Nielsen. Pas dus extra op met zaken als popups, advertenties en videos die automatisch afspelen.
Ingewikkelde navigatie - Een veelgemaakte fout is het maken van te ingewikkelde navigatie. Door de beperkte ruimte kan niet alles van de desktop website getoond worden in de header. Schrappen is vaak nodig.
Kleine links en knoppen - Kleine schermen en grote vingers kan een enorme bron van frustratie zijn. Zeker als de links op een website nét te klein zijn om comfortabel aan te klikken. Zorg er dan op mobiele websites ook voor dat knoppen en links extra aanklikruimte hebben.
Voorbeelden van mooie responsive webdesigns
Soms wordt er gedacht dan mobiele websites allemaal op elkaar lijken -- dit hoeft absoluut niet het geval te zijn. Dit is een kleine selectie van responsive websites die wij ontwikkeld hebben. Kijk goed naar de verschillende breekpunten: welke elementen vallen er af? Wat verplaatst er? Wat gebeurd er met het menu?
ESNW
Voor ESNW hebben wij een volledig responsive website ontwikkeld. De website is opgebouwd uit 5 verschillende breakpoints variërend van heel klein (240px breed) tot heel groot (1920px breed).
Van 't Hek
De mobielvriendelijke website van Van 't Hek is opgebouwd uit een grid framework van 12 kolommen. Dit biedt veel mogelijkheden om elementen te verplaatsen en positioneren afhankelijk van het schermformaat.
Tauro
De website van Tauro is conversiegericht. Voor mobiele apparaten moet er dan een keuze worden gemaakt welke elementen geschrapt moeten worden en welke blijven.
Vercoma
De homepagina van Vercoma opent met een prachtig subtiel bedrijfsfilm in de achtergrond. Op mobiele apparaten gebruikt dit te veel bandbreedte en wordt er enkel een grote afbeelding ingeladen.
Wilt u een website laten maken die direct responsive is? Webvalue staat voor u klaar. Kom eens langs voor een kop koffie.
