Responsive websites zijn perfect leesbaar op tablets en smartphones. Dat komt doordat een website met een responsive design zichzelf automatisch aanpast aan de schermgrootte van de bezoeker.
Heeft je website nog geen responsive design? Dan wordt dat tijd. In dit artikel geef ik je een paar dringende redenen. En ik vertel wat ik zelf de afgelopen weken heb geleerd over het responsive maken van een webdesign. Want dat heb ik zojuist met deze website laten doen 
Ik geef je mijn 3 beste tips.
Wil je weten of je website responsive is? Dat check je in 3 seconden als je nu achter een computer zit. Bekijk dit filmpje maar (1 minuut):
Met een responsive design kom je hoger in Google
Sinds november 2014 beloont Google alle mobiel-vriendelijke websites met de vermelding ‘Voor mobiel’. Klanten die Googlen op hun tablet of smartphone en jouw website zien staan bij de zoekresultaten, weten daardoor dat jouw website geschikt is voor mobiel. Wat de kans vergroot dat ze doorklikken naar je site.
Mobiel-vriendelijke websites krijgen van Google de vermelding ‘Voor mobiel’.
En dat is nog maar de eerste stap. Binnenkort wordt Google strenger door ook zijn algoritme aan te passen. Responsive websites komen daardoor straks hoger in Google bij zoekopdrachten op smartphones en tablets.
Responsive website, mobiele website of app?
Een alternatief voor een responsive website is een mobiele website. Dat is een aparte website die alleen getoond wordt aan je mobiele bezoekers. Je kent het wel: stel dat je www. domeinnaam.nl intypt op je iPad, dan springt de site automatisch over naar de mobiele website m.domeinnaam.nl omdat hij ziet dat je een iPad-gebruiker bent.
Een mobiele website moet je apart laten bouwen, en hij heeft een aparte URL. Een voordeel daarvan is dat je de inhoud precies kunt afstemmen op wat mobiele websitebezoekers komen doen op je website. Voorbeeld: een sushi-restaurant dat zijn mobiele website helemaal inricht voor snel online bestellen. En op de reguliere website de aanvullende content neerzet, zoals foto’s van het restaurant en blogartikelen.
Dat je een mobiele website apart moet laten bouwen, heeft nadelen. Het is duur, en het kan schadelijk zijn voor je ranking in de zoekmachines. Want Google vindt 2 websites met voor een deel dezelfde content. Deze duplicate content kan ervoor zorgen dat een aantal van je pagina’s dalen in Google, als je de instellingen van je website niet goed hebt staan.
Een ander alternatief voor een responsive website is een mobiele app. Een app laten maken kan nog duurder uitvallen, want je moet dezelfde app 2 keer laten bouwen: voor Android en voor Apple iOS.
Een responsive website is dus meestal de goedkoopste en makkelijkste manier om je website mobiel-vriendelijk te maken.
Mobiel websitebezoek groeit sterk
Nederland is een van de koplopers in de wereld qua gebruik van mobiele apparaten. Uit cijfers over 2014 van Google en Marketingfacts blijkt: 51% van de Nederlanders heeft een tablet en 72% heeft een smartphone.
Alle experts verwachten dat mobiel bezoek aan websites blijft stijgen. Ik heb in Google Analytics even gecheckt wat de afgelopen jaren de cijfers waren voor deze website: in 2012 las 10% van de bezoekers dit blog op een smartphone of tablet, in 2013 was dat 19% en in 2014 steeg het verder naar 25%. Dat is dus in 2 jaar meer dan een verdubbeling.
Zo check je dit voor je eigen website in Google Analytics: stel het datumbereik in (bijvoorbeeld 1 januari t/m 31 december 2014) en klik dan op Doelgroep > Mobiel > Overzicht.
3 tips die ik leerde toen ik deze website responsive liet maken
Genoeg redenen om je website met spoed mobiel-vriendelijk te maken. Dat heb ik daarom zojuist ook met deze site laten doen. Begin januari 2015 is mijn nieuwe responsive webdesign live gegaan. Door mijn ervaringen daarbij heb ik 3 belangrijke dingen geleerd die ik je als tips wil meegeven.
Tip 1 – Begin met een responsive basiswebsite en laat die aanpassen
Kies geen webbouwer die je responsive website helemaal op maat voor je gaat bouwen. Pas op dat je geen site krijgt die een zelfgebouwd content management systeem (CMS) van je webbouwer gebruikt. Onderhoud wordt dan heel duur en je zit waarschijnlijk voor altijd aan die webbouwer vast als je dingen wilt laten veranderen aan je website.
Eis dat je webbouwer een veelgebruikt open source content management systeem als basis neemt. Ben je een dienstverlener, verkoop je digitale producten of een beperkt aantal fysieke producten? Kies dan WordPress als CMS. Dat is gratis, zoekmachinevriendelijk en je kunt kiezen uit een enorm aantal responsive themes (designs). Veel daarvan zijn ook gratis of kosten maar een paar tientjes.
Laat vervolgens deze WordPress-website aanpassen aan je eigen wensen. Wat ik zelf als basis heb gekozen is het betaalde Genesis-theme voor WordPress. Ik heb daarna een aantal websites bekeken die ook gebouwd zijn op basis van dit theme en toen een briefing voor een WordPress-webbouwer geschreven. Met daarin screenshots van websites die er ongeveer uitzagen zoals ik wilde, plus een lijst aanvullende wensen die ik had qua usability en functionaliteit.
Tip 2 – Kies geen hamburger maar een menu-knop
De menubalk van je website wordt op een klein scherm een rommeltje. Bijvoorbeeld op een smartphone-scherm. Want de menu-items staan dan niet meer allemaal naast elkaar, maar komen voor een deel onder elkaar te staan.
En als je 2 menubalken hebt, dan wordt het nog rommeliger. Veel websites hebben naast een hoofdmenubalk ook een secundaire menubalk. Die tweede menubalk is namelijk de perfecte plek om al je service-gerelateerde linkjes in te zetten. Zoals Contact, Sitemap, Zoeken en Over ons. Maar op een smartphone staan al die menu-items dan schots en scheef.
Zoals je ziet is dat ook zo in mijn nieuwe responsive design (binnenkort laat ik dat aanpassen):
Mijn hoofdmenu en secundaire menu nemen nu te veel ruimte in.
Een veelgekozen oplossing is de zogenoemde hamburger. Op een lagere resolutie verdwijnen dan de menubalken, en verschijnt een pictogram met 3 horizontale streepjes onder elkaar.
Je ziet bijvoorbeeld een hamburger als je de website van Canon op je smartphone bekijkt:
Menu wordt getoond als ‘hamburger’ op de responsive website van Canon.
Veel mensen weten niet dat het hamburger-pictogram het menu bevat. Dat blijkt uit onderzoek. Daardoor loop je het risico dat je klanten belangrijke pagina’s niet kunnen vinden, zoals je productpagina’s.
Een Menu-knop is gebruikersvriendelijker. Dat blijkt uit A/B-tests. Vraag je bouwer dus om een responsive website of WordPress-theme dat op kleine schermen het menu vervangt door zo’n knop, of kies een responsive theme dat deze functie heeft.
Je ziet bijvoorbeeld een Menu-knop als je de website van T-mobile op je smartphone bekijkt:
Menu-knop: gebruikersvriendelijker.
Tip 3 – Zorg dat de lettergrootte schaalt
Responsive designs hebben vaak grote letters. Want dat leest lekker op een klein scherm. Maar zorg wel dat de lettergrootte ‘schaalt’. Dus hoe kleiner het scherm waarop je de site bekijkt, hoe kleiner de letters.
De lettergrootte moet op smartphones wat kleiner zijn dan op tablets. Op een computermonitor zijn de letters het grootst, op een tablet iets kleiner en op een smartphone nog iets kleiner. Anders past er wel érg weinig tekst op het scherm van je telefoon. Let hier even op bij het uitkiezen of laten bouwen van een responsive website design.
Voordat je aan een responsive design begint
Veel ondernemers zijn teleurgesteld als hun nieuwe website wordt opgeleverd. Hij is niet wat je wilde, of hij levert geen klanten op! Dat komt meestal door een of meer van deze oorzaken:
- Je hebt een te algemene, vage briefing aan de webbouwer gegeven
- Je hebt een WordPress-theme gekozen op basis van je persoonlijke smaak
- Klanten begrijpen je website niet doordat hij niet gebruikersvriendelijk is
- In de website zijn geen verkooptechnieken verwerkt
- In de website zijn geen psychologische triggers verwerkt
Begin het liefst pas aan een vernieuwde website als je weet:
- Welke teksten er op je homepage moeten komen, en waar
- Of je navigatiestructuur uit 1 of 2 menubalken moet gaan bestaan
- Welke pagina’s in je menubalken moeten komen te staan, en in welke volgorde
- Hoe je de pagina’s over je producten of diensten gaat schrijven
- Wat de layout moet worden van je topbalk en je footer
- Hoe je klanten gaat verleiden
Werk dit eerst uit in schetsen en teksten. Pas daarna is het tijd om een WordPress-theme of een webbouwer te gaan zoeken.
Webbouwers zullen je waarschijnlijk ook aanbieden om schetsen te maken. Maar het probleem is dat de meeste webbouwers gefocust zijn op design en niet op verkoop. Het zijn estheten, die vooral een MOOIE site voor je willen maken. Alleen: met zo’n site krijg je meestal weinig klanten. Ik heb het zó vaak zien gebeuren.
Vind je het lastig om te bedenken hoe je nieuwe responsive design eruit moet gaan zien? Of kost het je veel tijd om de teksten te schrijven? Dan kan ik je 3 maanden persoonlijk begeleiden, als je dat wilt. Want in mijn trainingsprogramma Online verkoopsucces help ik je persoonlijk om je website onweerstaanbaar te maken. En je kunt me 3 maanden alles vragen wat je wilt.
Beluister dit artikel:
Responsive design voor je website – 3 tips:
Het artikel Responsive design voor je website: 3 tips is oorspronkelijk verschenen op Schrijven voor internet.