Mobile webdesign is absoluut noodzakelijk

Mobilegeddon ligt alweer een tijdje achter ons. Om juist te zijn sinds 21 april 2015. Ter herinnering : In die periode kondigde Google aan dat het websites die geschikt waren voor mobiele apparaten zoals smartphones en tablets positief ging discrimineren. Dat wil zeggen : hoger zetten in de zoekresultaten dan de niet mobiel geschikte websites.

Sindsdien is het erg belangrijk geworden dat je website geschikt is voor mobiele apparaten. Maar eigenlijk moet je dat niet enkel doen voor Google. Maar met percentages die variëren van 15% tot 55%, afhankelijk voornamelijk van het feit of je een btb of btc website hebt, is het gewoon ook een commerciële noodzaak geworden om de ervaring van gebruikers met mobiele apparaten te optimaliseren.

In deze context werd de laatste jaren vooral de term “responsive webdesign” gebruikt. Een term die eigenlijk al dateert van 2010 en uitgevonden werd door Ethan Marcotte in zijn beroemde artikel op alistapart. Ik heb er ook een artikel over geschreven.

Responsive versus adaptive webdesign

In essentie is responsive design een techniek waarbij reactief de presentatie van een website en de componenten van een webpagina veranderen van positie en grootte in functie van het apparaat dat de website bekijkt. Dus met andere woorden, de presentatie van een pagina is anders op een iphone dan op een tablet. Zo wordt er gevarieerd in het aantal kolommen , de fontgrootte en de breedte van foto’s. Ook het gebruik van het zogenaamde “hamburger menu” behoort tot het domein van de responsive design.

Een bestaande website responsive maken is dus een kwestie van een aantal technische maar ook esthetische ingrepen. Wat doe je immers met de 3 kolommen en de grote header foto van 3000 pixels op de home pagina. Maar het is doenbaar én betaalbaar om een bestaande website aan te passen.

Een andere term die in deze context vaak gebruikt wordt is “adaptive webdesign“. In essentie gaat het om dezelfde techniek maar in het geval van adaptive design gaat de ontwikkelaar nog een stapje verder. Er wordt (bijna) een aparte website gemaakt voor elke apparaat. Rekening houdend met de breedte en typische technische kenmerken van het desbetreffende apparaat.

lufthansa 1 Responsive webdesign versus Adaptive webdesign

En in die optiek is AWD of adaptive webdesign meestal duurder dan een traditioneel RWD of responsive webdesign ontwerp. Er moeten immers meer templates en designs gemaakt worden, aangepast aan elk apparaat. Maar hierdoor is AWD vaak ook een stuk sneller. Immers de design is gebaseerd op wat effectief op een scherm getoond wordt en daardoor is het niet nodig alle elementen te downloaden die wel op een desktop design gebruikt worden. de designelementen zijn immers specifiek aan het apparaat.

De grote lijnen van responsive webdesign mogen dan al duidelijk zijn toch zijn er een aantal trends die je de volgende maanden zeker zal zien doorsijpelen.

  • Content first : De inhoud staat centraal en niet de presentatie. Alle andere elementen op de webpagina hebben een ondersteunende rol om de leesbaarheid van de inhoud te vergemakkelijken. Mooi in deze context is het volgende citaat : “Designing in the absence of content is decorating
  • Mobile first : Centraal bij deze trend is dat het visueel ontwerp van de website eerst gemaakt wordt voor mobiele apparaten en dan pas voor desktops of media met grotere schermresoluties.
  • Flat design en material design : de dagen van Flat Design zijn geteld. Meer en meer worden de guidelines van Material Design gevolgd.

Samenvattend kunnen we stellen dat responsive design de de facto standaard is geworden voor websites. In tegenstelling tot wat velen denken, is het ook niet zo moeilijk om een bestaande website om te vormen tot een responsive website.