26 nov ADAPTIVE VS RESPONSIVE WEBSITE, WAT IS HET VERSCHIL? (MUST VOOR SEO!)9 min read
ADAPTIVE VS RESPONSIVE WEBSITE,
WAT IS HET VERSCHIL? (MUST VOOR SEO!)
Meer dan 40% van de websitebezoeken in Nederland gebeurt via mobiele apparaten. Een goede mobiele website is dus een MUST voor je online vindbaarheid en je zoekmachineoptimalisatie (SEO)! Maar moet je een adaptive website of een responsive website nemen? En wat is het verschil tussen deze designs?
FIXED VS FLUID WEBDESIGN (STATIC VS LIQUID)
Het verschil tussen responsive en adaptive webdesign zit in het verschil tussen fixed en fluid webdesign:
+ Een fixed of static design is een statisch design. Deze vorm van design is vast en schaalt hierdoor niet mee naar een ander schermformaat. Bijvoorbeeld bij het bekijken van een website via je smartphone. Bij een fixed design staat het formaat vast, waardoor het flexibele aanpassingsvermogen ontbreekt.
+Een fluid design (ook wel ‘liquid design‘ genoemd) maakt gebruik van percentages om de weergave van een website op een scherm te bepalen. De inhoud is flexibel, waardoor het mogelijk is om vloeiend horizontaal en verticaal te schalen. Deze schaal is bij fluid webdesign afhankelijk van het scherm waar de website op bezocht wordt.
RESPONSIVE WEBDESIGN
De basis van een responsive design is het fluid-principe. Een webpagina schaalt volledig vloeiend naar het schermformaat en werkt met percentages om dit te bewerkstelligen. Een voorbeeld van een berekening die wordt gemaakt door een responsive design is: “de breedte van de afbeelding is … procent van de schermbreedte”. Maar als je een klein scherm hebt en het ontwerp schaalt zonder verdere aanpassingen mee, is de inhoud van de webpagina op een gegeven moment niet meer te lezen.
Om te voorkomen dat een responsive design oneindig blijft verkleinen, waardoor de inhoud van een webpagina onleesbaar wordt, werken webdevelopers van een responsive design met breekpunten in het ontwerp. Komt een scherm onder of boven een breekpunt, dan vinden er bepaalde veranderingen in het ontwerp van de webpagina plaats. Voorbeelden hiervan zijn een verandering in rangschikking van website-elementen (kaders, sidebars, banners en blocks), de weergave van een inklapbaar hoofdmenu (mobiel) in plaats van een volledig hoofdmenu (desktop), of weergave van één product per regel (mobiel) in plaats van 3/6/9 producten op een regel (desktop). Door de van tevoren bepaalde breekpunten en veranderingen in een webdesign, is een webpagina op een smartphone even goed leesbaar en gebruiksvriendelijk als op een desktop.
Wil je zien hoe een responsive webdesign schaalt? Verklein dit browservenster door een hoek van het venster diagonaal naar het middelpunt van je scherm te slepen. Het webdesign van MadeMarketing is volledig responsive en je zult zien dat deze meeschaalt met de verkleining van het scherm!
ADAPTIVE WEBDESIGN
Een adaptive webdesign verschilt op twee belangrijke punten van een responsive webdesign.
- Het eerste verschil is de ‘adaptive layout’. Een adaptive webpagina schaalt in stappen mee met verschillende schermgroottes. Dit betekent dat:
+ Een responsive websitewerkt met breekpunten om veranderingen door te voeren én schaalt ook nog eens de webpagina tussen de breekpunten.
+ Een adaptive lay-outwerkt met diezelfde breekpunten, maar schaalt niet mee tussen breekpunten. Hierdoor houdt een adaptive webpagina dezelfde lay-out bij schermgroottes tussen breekpunten. - Het tweede verschil is dat webdevelopers in een adaptive webdesign rekening houden met het apparaat waarop een webpagina wordt getoond. Dit betekent dat een adaptive webdesign eerst vaststelt op welk apparaat de webpagina vertoond moet worden en dan de beste schaalversie van de webpagina kiest om te vertonen. Dit is een essentieel verschil, aangezien dit ook op het gebied van bestandgroottes mogelijkheden met zich meebrengt. Webdevelopers kunnen bijvoorbeeld instellen dat foto’s en video’s op een webpagina een lagere resolutie krijgen als de webpagina wordt vertoond op een mobiel apparaat. Hierdoor heb je minder bandbreedte nodig en laadt een webpagina sneller. Dit komt ten goede aan het gebruiksgemak!
Wil je het verschil ervaren tussen een responsive of een adaptive webdesign? Ga naar Liquidapsive.com en kies in het menu rechtsboven voor responsive of adaptive. Verklein vervolgens het browservenster en zie het verschil van meeschalen.
Zoals ik in de inleiding van dit blog vertelde vindt momenteel meer dan 40% van de website-bezoeken in Nederland plaats via mobiele apparaten. Dit aandeel blijft de komende jaren exponentieel stijgen. De verwachting is dat in 2017 meer dan 70%(!) van de website-bezoeken plaatsvindt via mobiele apparaten. Dit komt onder andere door de door het snelgroeiende aantal consumenten met een smartphone en/of tablet en de hogere dekking van mobiel internet, zoals 3G/4G en WIFI. Een goedwerkende mobiele website is dus een MUST voor je online vindbaarheid en je zoekmachineoptimalisatie (SEO)!
Daarnaast vinden zoekmachines, in navolging van de mobiele trend, het steeds belangrijker dat een website mobiel-vriendelijk is. Google gaat bijvoorbeeld zoekresultaten op mobiele apparaten rangschikken naar mobiel-vriendelijkheid. Ook gaat Google in algemene zoekresultaten mobiel-vriendelijke websites een mobile-friendly label geven. Hierdoor wordt de online vindbaarheid van mobiele websites enorm verhoogd en wordt de zoekmachineoptimalisatie van mobiele websites sterk verbeterd!
Heb je vragen over mobiele websites, over responsive of adaptive webdesigns of over online vindbaarheid en zoekmachineoptimalisatie (SEO)? Wij helpen je graag! Neem vrijblijvend contact met ons op.
Handige tools van Google gebruiken, die goed zijn voor je SEO? Lees de blog over de link shortener Goo.gl en de blog over het mobile-friendly label van Google!