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.

Responsive WordPress

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:

 mediaquery

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.

Wil je meer weten over hoe je een responsive design krijgt? Neem dan gerust contact met ons op!