Een website responsive maken

Een responsive website betekent dat de website op alle devices goed en zonder problemen te gebruiken is, het gaat hierbij over: Computer, mobiel en tablet. Een website die niet responsive is, heeft vaak als resultaat een hoog bouncepercentage en een verlies van potentiële klanten. Door het toenemend gebruik van mobiel internet is een responsive design essentieel.

Een website responsive maken kan op 5 manieren: Bestaande website ombouwen: Aanpassen van de huidige website; dit kan een goede keuze zijn wanneer de website zeer groot is. Een compleet nieuwe website bouwen kost namelijk veel tijd en geld. Voordelen van deze manier zijn o.a.

  • Het is relatief snel: om een bestaande website responsive te maken hoef je alleen maar een aparte CSS aan te maken voor kleinere devices.
  • Tast het vertrouwen van je bezoekers niet aan: Wanneer je een nieuwe website bouwt zal er re-design plaatsvinden waardoor terugkerende bezoekers de website misschien niet meer herkennen of er niet meer mee overweg kunnen.

Echter zitten er ook grote nadelen aan deze strategie: Kleinere schermpjes dwingen een onderneming tot heroverweging van de contentstrategie Het is namelijk belangrijk om vast te stellen welke content je terug wilt laten zien op mobiel. Wanneer je alles laat staan ontstaat er een risico dat bezoekers de website snel verlaten omdat zij door de bomen het bos niet meer zien.

Nieuwsgierig?

Wil je weten hoe wij jouw website optimaliseren voor alle apparaten? Ontvang nu gratis advies!

Wat is het verschil tussen Responsive en Adaptive?

Laten we beginnen door kort toe te lichten wat ook alweer het verschil is tussen responsive en adaptive webdesign. Hoewel ze erg dicht bij elkaar liggen, zijn deze twee termen wel degelijk verschillend. Ze worden desalniettemin vaak door elkaar gehaald. Dus without further ado, laten we onze geheugens even opfrissen!

 

Wat is responsive webdesign?

Een responsive webdesign, ofwel: de “responsiveness” van een website of webshop is in kindertaal simpelweg uit te leggen als volgt: dat een website of webshop er mooi uit blijft zien op alle formaten schermen. Dit betekent dat het ontwerp van je webpagina reageert op de formaat van het scherm waarop het weergegeven wordt.

Verhoogde gebruikservaring

Met een responsive design verhoog je de gebruikservaring op alle apparaten omdat je website of webshop er prachtig uitziet op alle mogelijke grootte schermen. Het is een ‘flexibel’ design gebaseerd op een grid layout. De afbeeldingen en overig media zijn dus flexibel en veranderen van formaat afhankelijk van de grootte van het scherm. Het is dus exact dezelfde website die zich qua grootte aanpast afhankelijk van schermgrootte.

 

Wat is adaptive design?

Adaptive design is een iets uitgebreidere manier om je website of webshop juist te laten functioneren over verschillende apparaten. Dit betekent dat je website of webshop zich aanpast op het specifieke apparaat waarop deze getoond wordt. De website “begrijpt” dan wanneer deze bezocht wordt door een mobiele telefoon, tablet, desktop of PC en past zich per apparaat apart aan.

 

Volledig andere versie

Zo heb je dus een volledig andere versie van de website voor mobiele gebruikers, dan gebruikers die je website of webshop bezoeken via een laptop. Dit betekent dus wel dat een adaptive design meer tijd en geld kost dan een responsive design omdat je voor elk soort apparaat een ander design en andere content. Met een adaptive design behaal je wel ultieme conversie. Dus de keuze ligt bij jou!

Mobiele website naast een reguliere website: Een andere mogelijkheid is je huidige website gewoon laten zoals die is en een aparte website met unieke URL-structuur te maken voor mobiel. Op basis van de browser kan worden gezien of een bezoeker de website bezoekt via Desktop of mobile device.

Wanneer dit een mobile device betreft kan de bezoeker automatisch worden doorverwezen naar de mobiele website, zonder dat deze merkt dat het twee verschillende websites zijn. Aan deze manier zijn wel twee grote nadelen verbonden namelijk:

  • Je moet niet één maar twee websites up-to-date houden.
  • Deze manier heeft een negatieve invloed op je SEO, omdat nu alle pagina’s duplicate content zijn. Hier zijn wel oplossingen voor, maar die zullen dus eerst moeten worden geïmplementeerd wat weer extra tijd en geld kost.

Mobilizer: Een mobilizer is een tool die je helpt om je website responsive te maken. Dit zijn plug-ins. Voor WordPress is dat bijvoorbeeld WPtouch. Maar daarnaast zijn er ook tools die voor meerdere CMS te gebruiken zijn zoals bMobilized en Mobify.

Adaptive+Responsive Web Design: Dit is de ideale – maar ook de duurste manier. Deze methode houdt in dat je begint met een schone lei, waarbij een goed werkende mobiele website je uitgangspunt is. Op deze manier kan je het ontwerp, content, navigatie en laadsnelheid perfect aanpassen voor mobiele devices. Daarnaast kan je website ook optimaal worden aangepast voor devices met een trage verbindingen.

Een goede website zou daarnaast ook adaptive moeten zijn voor computers. Dit houdt in dat je content ten alle tijden mee-schaalt naar de grootte van je scherm. Dit wordt gedaan door middel van media query’s. Dit zijn CSS codes die ervoor zorgen dat er een aparte styling is per schermgrootte, dit wordt bepaald aan de hand van de pixelbreedte van een scherm. Zo een CSS code ziet er als volgt uit:

responsiveness wordpress

 Stapje voor Stapje: Dit is een combinatie van het ombouwen van je huidige website en het bouwen van een losse mobiele site. Je begint hierbij de onderdelen te optimaliseren voor mobiel waar je bezoekers de meeste problemen mee ervaren. Op deze manier optimaliseer je beetje bij beetje je website. Je kan dit aanpakken door pagina voor pagina aan te passen, maar ook component voor component. Wanneer je bijvoorbeeld een webwinkel hebt en merkt dat veel bezoekers wel producten in hun winkelmandje stoppen maar vervolgens niet overgaan tot aankoop omdat het winkelmandje simpelweg niet goed werkt voor mobiel, zal je dit als eerste moeten aanpassen.

Om te beslissen welke methode het beste voor jouw onderneming is moeten twee factoren tegen elkaar worden afgewogen. Namelijk: Hoe urgent is het probleem? En welke middelen heb ik beschikbaar?

Urgentie: Wanneer de helft van je bezoekers mobiel is en het bouncepercentage van deze groep erg hoog is, is de urgentie erg groot en moet je dus snel actie ondernemen.

Middelen: Hoeveel tijd en geld is er beschikbaar om het probleem op te lossen? Wanneer er geen budget is voor een hele nieuwe site of er simpelweg geen tijd is om aan een nieuwe site te werken door drukke dagelijkse bezigheden. Zal de keuze al snel op een snelle goedkope manier vallen.

Wanneer een onderneming veel middelen beschikbaar heeft, maar de urgentie niet hoog is de beste keuze een Adaptive + responsive design. Terwijl als de urgentie erg hoog is maar er niet veel middelen beschikbaar zijn is de ‘stapje voor stapje’ methode de beste keuze. De andere drie zitten hier tussenin.