Website voor mobiel: responsive of adaptive?

© PXimport

Het is belangrijk om je website zo te ontwerpen dat hij er altijd goed uitziet, ook voor je vindbaarheid. Google geeft tegenwoordig sites die zijn gebouwd op een flexibel ontwerp (en er dus op elk apparaat goed uitzien) voorrang boven niet geoptimaliseerde sites. Er zijn twee manieren om je website flexibel in te richten.

Fixed en fluid

Even wat achtergrond. Ooit was het niet nodig om sites flexibel te maken. Er waren maar een paar monitorformaten, dus je had vooraf een goed idee hoe het er bij iedereen uit zou zien. Met de komst van steeds meer verschillende computers en grafische kaarten ontstond het idee om sites flexibel te maken. Schaalt de browser, dan schaalt de website mee. Je ziet dus altijd hetzelfde, hoe klein het scherm ook is. Dit heet sindsdien ‘liquid’ of ‘fluid’ design. Het oude model heet dan ‘static’ of ‘fixed’.

Dat was al heel mooi, maar schalen betekent ook echt schalen, óók als het scherm heel klein wordt. Op een smartphone wordt het daardoor al snel onleesbaar. Daar moest dus een andere oplossing voor komen.

Responsive

Het antwoord kwam in de vorm van ‘responsive’ webontwerp. De ontwerper maakt eigenlijk drie verschillende ontwerpen. Eentje voor desktop, een voor tablet en ook een voor smartphone. In de software geeft hij aan wat de ‘breekpunten’ zijn. Wordt een site verkleind en bereikt hij een breekpunt, dan wordt de daarbij passende site getoond. Daarbij floepen allerlei onderdelen naar een andere plek, meestal de menubalk en de header, maar ook andere onderdelen. Zo zie je op tablet en smartphone ook altijd een leesbare site.

Responsive heeft als nadeel dat je geen invloed hebt wanneer een bepaalde versie wordt getoond. Wie op de desktop zijn browser kleiner maakt, schiet op een bepaald moment ook in de telefoonstand. Dat kan onhandig zijn, bijvoorbeeld als je een ontwerp hebt dat sterk afhankelijk is van wat het apparaat kan. Dus op wélk apparaat het wordt getoond is belangrijker dan het formaat. Een desktop is een ander soort computer met andere mogelijkheden dan een smartphone (denk aan touch of geen touch, het kunnen downloaden etc.).

Adaptive

In zulke gevallen kan het handig zijn om voor ‘adaptive’ design te kiezen. Dit werkt net als responsive met breekpunten, maar daartussen wordt niet geschaald. Maar het heeft wel als voordeel dat je gewoon drie versies van je website maakt. De software ziet welk apparaat er binnenkomt en toont de juiste versie. Zoals responsive een series ‘fluid’ sites is, is adaptive een serie ‘static’ sites. Nadelen? Jazeker. Komt er een nieuw apparaat op de markt met een nieuw schermformaat (hallo iPhone X(S)), dan moet je daarvoor een nieuw ontwerp maken.

Gebruik dus alleen adaptive als je controle wilt over welk apparaat welke site te zien krijgt. Het advies is dus om gewoon zoveel mogelijk gebruik te maken van responsive design. En gelukkig is dat helemaal niet moeilijk. De meeste templates in bijvoorbeeld WordPress of Joomla hebben dat standaard ingebouwd zitten. Mis je de technische kennis om een responsive site te maken? Dan is het verstandig om een webdesigner in te schakelen.

Dit artikel is tot stand gekomen met onze Partner-redactie. Deze levert redactionele diensten aan commerciële partners van Reshift. Artikelen die door afdeling geschreven zijn, herkent u aan het lichtblauwe Partner-label. De Partner- redactie opereert gescheiden van de reguliere Reshift-redacties, zodat de redactionele onafhankelijkheid van deze laatste groep gegarandeerd blijft. De redactie is dan ook niet verantwoordelijk voor de inhoud van dit artikel.