Responsive webdesign

Responsive webdesign, betekent dat je een website of pagina, geschikt maakt voor verschillende type apparaten, of specifieker, voor verschillende formaten. Of je dus je smartphone of tablet horizontaal (landscape mode genoemd) of verticaal houdt (portrait mode genoemd), de website komt altijd tot zijn recht, ook op desktop computers.

In praktijk zal het enige verschil, de wijze van presentatie zijn. Op een gegeven moment is een scherm te smal om bijvoorbeeld informatie-blokken naast elkaar te tonen, en dus zullen ze onder elkaar verschijnen. Minder relevante informatie kun je laten verdwijnen, of op beknoptere wijze weergeven (het beste voorbeeld is een hoofdnavigatie, op kleinere apparaten te activeren via de zogenaamde responsive hamburger-icoon/menu: ).

Responsive webdesign wordt aangestuurd middels CSS, waarbij je via CSS breekpunten (browser breedtes) aan kunt geven en alternatieve styling mee geeft. Waar voorheen nog een apart subdomein werd ingericht voor de mobiele gebruikers of gebruik werd gemaakt van browser-sniffing om je al dan niet door te sturen naar mobiele webpagina's, is een responsive web design (RWD) de meest doeltreffende oplossing. Laten we de pluspunten van responsive webdesign op een rij zetten:

Voordelen van responsive webdesign

  • Geen nieuwe omgevingen, zoals een subdomein voor mobiele gebruikers benodigd;
  • In het geval van een CMS, kunnen webmasters onderhoud blijven zoals ze altijd deden, hun werkwijze blijft ongewijzigd;
  • HTML en daarmee de website blijft intact, er komt als het ware extra styling / CSS bij;
  • naast desktop/thuis gebruikers, bereik je ook het groeiend aantal smartphone of tablet gebruikers;
  • snellere laadtijd, betere leesbaarheid en usability voor de mobiele doelgroep;
  • legio CSS frameworks als uitganspunt, waaronder de Twitter Bootstrap framework;
  • naast websites, ook van toegevoegde waarde voor web applicaties of webshops;
  • maximaal rendement halen uit je online ofwel mobiele doelgroep;
  • aanbevolen door Google voor een goed vindbare site;
  • bovendien ziet het er up-to-date en gelikt uit.

mobile-responsive-best-solution.png

Nadelen van responsive webdesign

Responsive webdesign heeft zijn kanttekeningen, waardoor aanbevolen wordt om vooraf een goede inschatting te maken van wat er moet gebeuren.

  • Complexiteit: verstandig is bij aanvang stil te staan hoe een website of applicatie zich layout-technisch moet gedragen op verschillende apparaten/schermbreedtes om de complexiteit of meerwerk te reduceren, in sommige gevallen bieden CSS frameworks een uitkomst;
  • Laadtijd: Ongeacht het type apparaat dat je gebruikt (tablet, smartphone), de gehele HTML en alle CSS files worden door je browser gedownload. Verstandig is ook goed stil te staan bij het inladen van bijvoorbeeld beeldmateriaal of JavaScript voor interactiviteit;
  • Ondersteuning: CSS frameworks gebruiken vaak CSS3, dat niet door oudere browsers (denk aan IE9 en ouder) ondersteund wordt. Ontwikkeling van browsers en adaptatie van updates neemt echter toe, waardoor je allerminst achter de feiten aan loopt;

CSS Frameworks als basis

Voor bestaande websites, of puur informatieve websites is een framework niet per definitie van toegevoegde waarde, door de hoeveelheid CSS/data dat door de browser ingeladen moet worden. In andere gevallen, kunnen frameworks gebruikt worden, zoals Foundation, W3schools framework of het meer bekende css framework bootstrap, opgesteld door Twitter.

Responsive cursus of presentatie

Een cursus is geschikt indien er enige kennis is van HTML en CSS, en men meer bekend wil worden met responsive te werk gaan. Naast de cursus of presentatie, valt er uiteraard ook veel zelf te ontdekken.

Doe het zelf responsive