Adaptive website Batavus werkt optimaal op elk scherm

In de aanloop naar de realisatie van de nieuwe website kwam het creatieve team van Snakeware met het idee om een responsive website met adaptive layout op basis van de Snakeware content management software toe te passen. Het marketing team van Batavus reageerde hier positief op en de concepten voor de adaptive layout werden uitgewerkt, getest en gekoppeld aan het reeds in gebruik zijnde content management systeem dat Snakeware in een eerder stadium voor Batavus implementeerde.

Responsive webdesign betekent simpelweg dat de opbouw van een website zich aanpast aan het apparaat waarop het gebruikt wordt. Afhankelijk van het apparaat dat de gebruiker heeft om de website te bekijken, zal de website bepalen voor welke weergave er moet worden gekozen. Dit zorgt ervoor dat een website er op drie hele verschillende manieren uit kan zien, terwijl het onderliggend, dus grafisch en technisch, slechts één en dezelfde website is.

Doordat je bij adaptive meer invloed kunt uitoefenen op de weergave en functionaliteit die per apparaat beschikbaar dient te zijn, houd je een website snel en overzichtelijk op een smarthphone, creëer je een optimale ‘touch’ beleving op de tablet en kun je ruim opgezette weergaves met veel branding vrijgeven voor de desktop variant van de website. Dat is wat het front-end development team samen met de engineers van Snakeware heeft vertaald in een technisch perfecte site die uitstekend werkt op vele verschillende mobiele devices en elke desktop, ongeacht welke browser of welk schermformaat dan ook.

De nieuwe adaptive website die Snakeware van concept tot en met realisatie, op basis van haar Snakeware CMS, voor Batavus gerealiseerd heeft, geeft de voordelen van adaptive design in combinatie met de kracht van de Snakeware content management software heel goed weer.

De nieuwe website van Batavus heeft ten opzichte van de vorige versie als groot voordeel dat de redactie maar één set content hoeft te creëren en te beheren. Dit in plaats van losse kanalen voor desktop, tablet en smartphone. Zowel content wijzigingen en aanvullingen, als technische aanpassingen kunnen worden beheerd in één versie.

Integratie 360 graden afbeeldingen
De website gaat verder dan een heldere navigatie, een fietsenkiezer en de dealers in de buurt. Als bezoeker op de website wordt je optimaal gestuurd naar de informatie die je wenst. Je kan op verschillende manieren bij de juiste fiets uitkomen. Ben je bij de best bijpassende fiets gekomen dan kan je de fiets op detail bekijken door middel van 360 graden foto’s.

Responsive vs Adaptive lay out
Waarom de keuze voor een adaptive lay-out in plaats van een veelvuldig gebruikte responsive lay-out? In theorie zijn responsive lay-outs en adaptive lay-outs hetzelfde. Toch is er een klein onderscheid waar enige toelichting voor vereist is.

Bij een responsive lay-out schaalt de opbouw van de website altijd mee, ongeacht hoe breed een scherm is. Dit valt het beste te testen met een webbrowser (zoals Chrome, Firefox) op een desktop computer. Door de webbrowser breder en smaller te maken zullen de elementen binnen de website in verhouding mee schalen met de breedte. Breedtes van elementen worden bij een responsive lay-out dan ook vaak in percentages gemeten. Op deze manier zal de website altijd in verhouding blijven. Een responsive lay-out is voor relatief simpele websites met een vaste opbouw van elementen een ideale oplossing.

Bij een adaptive lay-out verandert de opbouw en het uiterlijk van een website wel, maar de elementen binnen de opbouw van de website hebben wel een vaste afmeting meegekregen. Dit betekent dat voor elke weergave (desktop, tablet of mobiel) deze afmetingen moeten worden berekend en moeten worden meegegeven. Een adaptive lay-out is een betere keus voor websites die een heleboel verschillende elementen bevatten met ieder hun eigen werking en/of inhoud.