Responsive & Adaptive. Mobile first.

De aantallen liegen er niet om. Websites worden meer en meer met een mobieltje bezocht. In sommige branches zijn de webbezoeken zelfs meer per mobiel dan met een ‘normale’ desktop of laptop. Wij hebben een aantal klanten met een restaurant. Die websites worden bijna allemaal meer met de mobiel bekeken. En dat is logisch! Men loopt door de stad, heeft trek en oriënteert zich via het web. De mobiele telefoon is dan binnen handbereik, de website zo bezocht. Dit is slechts een klein voorbeeld. Onlangs maakte ik een treinreis en viel mij op dat echt iedereen op zijn mobiel zit. Als ondernemer zou dit toch een belletje moeten doen gaan rinkelen als je website nog niet responsive en/of adaptive is. Ik kan mij goed voorstellen dat je nu al de weg kwijt bent en daarom zal ik proberen in J&J taal uit te leggen wat het inhoudt.

De website van vroeger

Tot voor kort werden websites alleen gebouwd voor computerbeeldschermen (desktops). Des te groter de fabrikanten ze maakte, des te breder de websites door vormgevers en ontwikkelaars werden gemaakt. Er werd alleen maar aan GROTER gedacht. Door de opkomst van de smartphone begonnen mensen op kleinere schermpjes te kijken naar diezelfde websites. Die websites die zo lekker breed werden opgezet. Wat kreeg je: websites die ontzettend klein werden weergegeven in het scherm, je moest zoomen om te kunnen lezen en je moest horizontaal scrollen.

Reageren

Response betekent ‘reageren’. Een responsive website reageert dus ergens op. Maar waar op? Op het toestel waarmee wordt gekeken. Het doel van een responsive website moet zijn dat je maar 1 website hebt die er zowel goed uit ziet op mobiel en desktop en overal daar tussenin. Je hoeft dus niet 2 of 3 websites bij te houden.

Adaptive

Adaptive en Responsive lijken erg op elkaar maar is niet helemaal hetzelfde. Adaptie betekent ‘aangepaste’. Stel je hebt op een desktop website bovenin zo’n prachtige groter header, bijna scherm vullend. Die wil je in een mobiele website eigenlijk niet zien. Of andersom: op een mobiele website staat bovenin een knop: ‘Bel ons!’. Als je klikt op de knop, dan gaat je telefoon dat nummer bellen. Dat wil je vast niet op een desktop versie. Je serveert dus een aangepaste versie.

Mobile first

Juist omdat die mobiele bezoeker zo’n belangrijk aandeel heeft, worden websites nu ‘Mobile first’ ontworpen en ontwikkeld. De website wordt EERST voor de mobiele webbezoeker vormgegeven. Daar moet het juiste inzitten. Krijgt die klant, bezoeker te zien wat ik hem zo graag wil laten zien? Is dat ontwerp eenmaal perfect, dan stapt de ontwerper over naar een iets breder scherm (tablet), spreidt de mobiele inhoud uit over de beschikbar breedte en kan dan mogelijk elementen die mobiel gezien onder elkaar staan, opeens naast elkaar kwijt. En kan de ‘Bel me’ knop verborgen worden. Is die stap perfect dan gaat de designer over op de laatste stap en dat is de desktopversie. Alles lekker breed, misschien nog meer elementen naast elkaar. De jumbo header komt opeens om de hoek kijken en zo is er vanuit de gedachte ‘mobile first’ een ontwerp gemaakt.

Responsive framework

Er zijn een aantal populaire responsive frameworks beschikbaar waarop websites eenvoudiger responsive gebouwd kunnen worden. Deze frameworks gaan veelal ook uit van een mobile first ontwikkeling. Bij Matching Concepts maken we gebruik van het framework Bootstrap. Wil je meer weten over responsive of adaptive websdeign? Neem dan contact met ons op. We vertellen je er graag over!

Mijn naam is Bart Heimenberg, ik ben mede-eigenaar van Matching Concepts en wij doen aan Web & Design.

Alle nieuwsberichten