Web Analytics Made Easy -
StatCounter

3 Manieren om Je Website een Mobile Responsive Design te Geven

Steeds meer mensen kopen online met smartphone of tablet. Je website responsive maken is dan ook belangrijker dan ooit geworden. In dit artikel leer je:

  • Wat een responsive design precies is
  • Waarom het zo belangrijk is
  • Hoe je een responsive design kan ontwikkelen

Wat is een responsive design?

Vaak wordt gedacht dat een responsive design alleen maar het aanpassen van de schermresolutie is. Een responsive design is echter veel meer dan dat.

Aanpassen aan het scherm van de gebruiker

Responsive-design-voorbeeldEén van de kenmerken van een responsive design is dat de website zich aanpast aan het scherm van de gebruiker. Afhankelijk van het apparaat (desktop, smartphone, of tablet) waarmee de website wordt bezocht krijgt men een pagina te zien welke geoptimaliseerd is voor dit apparaat.

Via de browser wordt herkent via welk apparaat de website wordt bezocht en wordt de schermresolutie van de webpagina hier voor aangepast.

Indien een webpagina via de desktop bezocht wordt dan bestaat een pagina bijvoorbeeld uit 3 kolommen. Als dezelfde pagina wordt bezocht met een smartphone dan bestaat deze pagina uit 1 kolom en via de tablet bestaat deze pagina uit 2 kolommen.

Font grootte

Indien de website via een smartphone of tablet bezocht wordt dan zal bijvoorbeeld ook de grootte van het font aangepast moeten worden, zodat de tekst ook op deze apparaten goed leesbaar is. Het is de bedoeling dat de tekst goed gelezen kan worden zonder dat het nodig is om in of uit te zoemen.

Bediening

duimbediening van smartphoneOp de desktop gebruikt men een muis voor het aanklikken van buttons en andere elementen van de website.

Op de smartphone en tablet gebruikt men de vingers (met name de duim) voor het bedienen van de website. Hiervoor zullen de klikbare elementen van de website aangepast moeten worden voor mobiele bezoekers zodat deze de website met de vingers kunnen bedienen.

Omdat de vingers een stuk dikker zijn dan een mouse pointer is het noodzakelijk dat er rondom bedieningselementen voldoen ruimte wordt gehouden. Dit om te voorkomen dat men mis tapt met de vingers.

Ook hierbij is het belangrijk dat de bezoekers de website kunnen bedienen zonder dat het nodig is om in of uit te zoemen.

Laadtijd

smartphone-on-ovVeel mensen gebruiken hun telefoon om te internetten als ze onderweg zijn, als ze in de trein zitten bijvoorbeeld. Hierdoor is hun internetverbinding vaak trager als vanuit huis.

Wil je een website welke echt volledig geoptimaliseerd is voor mobiele apparaten dan zal er dus ook rekening gehouden moeten worden met de laadtijden op telefoons. De techniek welke je hiervoor kunt gebruiken wordt AMP genoemd. Helemaal onderaan dit artikel zullen we ingaan op AMP.

Waarom is een responsive design belangrijk?

Het hebben van een responsive design is om verschillende redenen belangrijk. Deze redenen zullen we hier 1 voor 1 opnoemen en toelichten.

Je klanten serieus nemen

Als je je klanten serieus neemt dan moet je een responsive design hebben, zo simpel is het eigenlijk.

Eind 2016 haalde mobiele apparaten voor het eerst de desktop in als meest gebruikte apparaat om mee te internetten. En dat is een trend die zich alleen maar verder voort zal zetten. mobile-traffic

Hoe groot deel van jouw website bezoekers je site bezoeken met een mobiel apparaat zal afhangen van de markt waar je je op richt. In de zakelijke markt is het grootste deel van de website bezoekers nog afkomstig van desktop computers terwijl dat in consumenten markten vaak de smartphones en tablets zijn.

Om te achterhalen hoe groot deel van jouw website bezoekers een mobiel apparaat gebruiken kan je in je Google Analytics account kijken onder Mobiel.

Je conversie verhogen

take-careAls je je klanten serieus neemt dan nemen ze jouw ook serieus. Door er voor te zorgen dat je website ook voor mobiele gebruikers prettig in het gebruik is zal je de conversie verhogen. Smartphone en tablet gebruikers zullen namelijk snel afhakken als je website niet prettig te lezen of bedienen is.

Als je online producten verkoopt dan is een mobile friendly website dan ook een absolute must. Een investering die je snel terug zult verdienen.

Uit een recent onderzoek is gebleken dat 80% van de consumenten regelmatig de smartphone gebruikt om online te winkelen.

Heb je een fysieke winkel? Bedenk dan dat 70% van de consumenten hun mobiele telefoon raadpleegt tijdens het winkelen. Het is uiteraard van belang dat men ook via de telefoon de producten goed kan bekijken en informatie over de dienstverlening goed kan lezen.

Je ranking in Google verbeteren

mobilegeddonNog niet genoeg argumenten gelezen om over te gaan naar een responsive design? Wat dacht je van dit argument: mobile-friendliness is een ranking signaal voor Google. Sinds 21 april 2015 beloont Google (Mobilegeddon) responsive websites met een betere ranking.

Onlangs viel uit een tweet van Google medewerker Gary Illyes op te maken dat mobile de belangrijkste SEO trend voor 2017 wordt.

Feitelijk komt het er op neer dat sites welke niet geschikt zijn voor mobiele apparaten bestraft worden.

Dit is allemaal onderdeel van Google’s streven om haar zoekmachine gebruikers de best mogelijke gebruikerservaring te geven. Als iemand iets op zoekt met zijn telefoon dan wil Google deze gebruiker het liefst doorsturen naar een website welke goed te lezen en te gebruiken is.

Groeiend Social Media gebruik

Het gebruik van Social Media groeit en ook het aantal mensen welke via een mobiel apparaat op Social Media zit groeit. Het grootste deel van Social Media consumptie gebeurt vanaf mobiele apparaten.

social-media-mobiel

Op Social Media delen mensen links. Als je actief bent op Social Media of marketing campagnes op Social Media wilt gaan houden dan is het belangrijk dat je site responsive is. Het grootste deel van je bezoekers zullen dan met een mobiel apparaat je website bezoeken.

Ondersteunen van de Multi-Device User

multi0userEr zijn mensen welke je site via verschillende apparaten zullen bezoeken.

Ze vinden je website terwijl ze op het werk achter de desktop zitten. Mailen je website URL naar zich zelf waarna ze je website via de telefoon bezoeken terwijl ze in de trein zitten. En avonds willen ze wellicht een bestelling gaan plaatsen via de tablet.

Dit is maar een voorbeeld natuurlijk, waar het om gaat is dat dezelfde persoon via verschillende apparaten je website kan bezoeken. Om deze gebruikers goed te kunnen bedienen moeten zij ongeacht het apparaat over dezelfde functionaliteit en informatie kunnen beschikken.

Maar 1 site om bij te houden

Wat achterhaalde manieren om mobiele gebruikers te bedienen is door middel van Dynamic Serving of Separate URLs.

dynamic-serving-in-actionBij Dynamic Serving gebruik je dezelfde URLs voor zowel mobiel als desktop met het verschil dat je een verschillende HTML versie genereert op basis van de browser van de bezoeker.

Bij Seperate URLs staat content voor mobiele gebruikers op aparte URLs waarnaar mobiele gebruikers worden geredirect. Op deze URL staat dan ook een aparte HTML versie van de pagina.

Als je site nog één van deze methoden gebruikt dan heb je meer onderhoud aan je website. Het voordeel van een responsive design is dat je slechts 1 versie van je website bij hoeft te houden.

Bij een responsive design is een pagina met de desktop layout en de mobiele layout onder dezelfde URL bereikbaar en zal ook de HTML code hetzelfde zijn. De aanpassingen vinden plaats in de stylesheet (CSS opmaak) van de website.

Klaar voor de toekomst

Met een responsive website ben je klaar voor de toekomst. Indien er nieuwe apparaten (bijvoorbeeld de smartwatch) met nieuwe schermgroottes komen dan hoef je alleen maar je stylesheets daarop aan (te laten) passen.

Hoe je een responsive design maakt

Als je niet zeker weet of je website niet al ‘mobile friendly’ is dan kan je dit controleren met deze Mobielvriendelijk test van Google.

Is je site niet mobielvriendelijk? Lees dan verder want er is dan werk aan de winkel.

Let wel: een site kan technisch gezien responsive zijn terwijl deze niet gebruikersvriendelijk is voor mobiele apparaten. Het doel is een responsive design welke ook daadwerkelijk gebruikersvriendelijk is.

Google Search Console

Ook via Google Search Console krijg je feedback over de gebruikersvriendelijkheid van je site. Dit vindt je onder Search Traffic → Mobile Usability.

Als je de website responsive gaat maken dan doe je er goed aan om regelmatig Search Console te checken om pagina’s boven water te halen waarop nog issues gevonden zijn. Search Console geeft feedback op de volgende punten:

  • Viewport is niet of niet juist geconfigureerd (dit is nodig om de pagina te schalen voor de browser op een specifiek apparaat).
  • Vaste breedte van de viewport (problemen welke zich voor doen bij webpagina’s met een vaste breedte)
  • Afmetingen content kloppen niet met de viewport (als de content niet op het apparaat van de gebruiker past dan moet deze heen en weer scrollen om de tekst te kunnen lezen)
  • Het gebruik van flash (moderne en mobiele browsers ondersteunen geen flash meer)
  • Het gebruik van een te klein font grootte
  • Het te dicht op elkaar zitten van aanraak elementen
  • Interstitial usage (bijvoorbeeld full-screen pop-ups welke het lastig maken de pagina te bedienen)

viewportHet eerste wat je je kunt afvragen is of het wel nodig is om een responsive design te gaan maken (of te laten maken).

Als je een CMS zoals WordPress, Joomla of Drupal gebruikt dan kan je namelijk al heel veel responsive Thema’s gratis downloaden of kopen. Je zal dan op zoek moeten gaan naar een responsive thema welke voldoet aan je eisen en wensen.

Voor WordPress zijn er echt honderden responsive Thema’s te downloaden. Goede kans dat er wel een Thema te vinden is wat aansluit bij je wensen dus.

Het nadeel van een nieuw Thema is wel dat je bezoekers zullen moeten wennen aan een nieuwe lay-out. Zeker als je veel terugkerende bezoekers hebt dan kan dit iets zijn waar je rekening mee moet houden.

Verschillende situaties

Je kunt vanuit verschillende situaties naar een responsive design gaan:

  • Er is nog geen website
  • Er is al een website

Als er al een website is dan zijn er meerdere scenario’s mogelijk:

  • De website ombouwen
  • Een responsive website naast de desktop versie
  • Een geheel nieuwe website

Op al deze scenario’s zullen we hieronder verder ingaan.

Nog geen website

responsive-design-standaardDe situatie waarin je nog geen website hebt is de meest eenvoudige.

Iedere zich zelf respecterende webdesigner zal een nieuwe website standaard responsive maken, waarschijnlijk zelfs als je er niet eens om hebt gevraagd. Anno 2017 is responsive de standaard. Als je een webdesigner zal vragen om een website welke niet responsive is dan zal deze je waarschijnlijk voor gek verklaren.

En als je zelf een website gaat maken, in bijvoorbeeld WordPress, dan kies je simpelweg een Thema welke responsive is.

Er is al een website

In de meeste gevallen zal je een niet responsive website hebben welke responsive moet worden.

Je kan dat op verschillende manieren aanpakken:

  • Je kan de bestaande website (laten) ombouwen
  • Je (laat) een responsive website bouwen naast de huidige website
  • Je kan een nieuwe responsive website (laten) bouwen welke de oude website vervangt (op dezelfde domeinnaam)

De verschillende manieren zal ik hier onder toelichten.

De website ombouwen

De aanpak welke je zal kiezen zal mede bepaald worden door de kosten. Als je website uit veel pagina’s bestaat en veel bezoekers heeft dan kan de bestaande website ombouwen naar een responsive design vanuit kosten oogpunt de meest voordelige oplossing zijn. Of in ieder geval de oplossing welke het minste tijd kost. Je bent dan geen tijd kwijt aan het omzetten van al de content naar een nieuw systeem.

Dit ombouwen doe je door een aparte CSS (Stylesheet) te maken voor de kleine schermen van mobiele telefoons.

Breakpoints

breakpointsDoor ‘breakpoints’ in te bouwen kan aangegeven worden op welke plaatsen elementen van de website moeten komen te staan (waar elementen bij de desktop versie naast elkaar staan moeten deze bij mobiele telefoons in een bepaalde volgorde onder elkaar komen te staan).

Het is van dit artikel niet de bedoeling dat dit een technische handleiding wordt. Wil je weten hoe je breakpoints kan inbouwen en hoe je zelf een responsive design maakt dan kan ik je aanraden om deze pagina’s te lezen. Op deze pagina’s welke door Google voor ontwikkelaars zijn geschreven leer je de basisbeginselen voor responsive webdesign.

Het voordeel van ombouwen

Het voordeel van ombouwen is dat je dit stapje voor stapje kan doen. Je kan er voor kiezen om telkens een bepaald element van de site responsive te maken tot dat de gehele site uiteindelijk responsive is.

Ombouwen een goede oplossing?

mobile-firstDe website ombouwen is naar mijn idee echter niet de beste oplossing. Wil je echt klaar zijn voor de toekomst dan moet je ook gaan denken vanuit ‘mobile first’. Dit omdat in de toekomst vrijwel al je bezoekers een mobiel apparaat gebruiken om op je website te komen.

De huidige website zal ontwikkeld zijn vanuit een desktop benadering terwijl mobiele apparaten om een totaal andere benadering vragen. Zo heb je bij telefoons niet te maken met desktop begrippen zoals onder en boven de vouw. En ook de content zal aangepast moeten worden voor het lezen op kleine schermen.

Dit vraagt om een andere prioritering van de content waarmee een responsive design niet alleen een technische uitdaging vormt maar ook zeker een marketing uitdaging waar je als content marketeer aardig wat slapeloze nachten aan over kan houden.

Een responsive website naast de desktop versie

website-to-mobileEen andere mogelijkheid is om een mobiele versie van de website te ontwikkelen naast de desktop versie van de website. De pagina’s zullen dan op aparte URLs bereikbaar zijn en mobiele gebruikers zullen dan op basis van herkenning in de browser geredirect worden naar de mobiele versie van de website.

Je kan dan rustig de mobiele website gaan uitbouwen tot een volwaardige website. Zodra dit gerealiseerd is kan je alles om gaan gooien tot een volwaardige responsive website waarbij alle pagina’s onder dezelfde URLs bereikbaar zijn.

Als je voor deze aanpak kiest dan heeft dat overigens ook de nodige voeten in aarde. Zo zal je twee versies van de website moeten beheren, de desktop en de mobiele versie.

Ook krijg je te maken met SEO kwesties omdat dezelfde content onder twee verschillende URLs bereikbaar zal zijn. Hier zijn natuurlijk wel oplossingen voor, maar deze zullen wel geïmplementeerd moeten worden.

Een nieuwe website welke de oude vervangt

Idealiter vervang je de oude website voor een nieuwe responsive website. Een responsive website welke niet alleen vanuit technisch oogpunt responsive te noemen is maar welke echt volledig is gericht op een goede gebruikerservaring voor mobiele gebruikers.

Content op telefoons

Dit betekend vaak ook dat er gekeken zal moeten worden naar de content. Informatie welke nu nog naast elkaar staat zal op telefoons onder elkaar komen te staan. Welke informatie wil je de gebruiker als eerste laten zien?

Functionaliteit op telefoons

Ook zal goed gekeken moeten worden naar navigatie mogelijkheden en de bediening van functionaliteit op mobiele apparaten.

Met onderstaande afbeeldingen zal ik duidelijk maken wat ik bedoel. Hieronder zie je een afbeelding van een webshop welke laptops verkoopt.

afbeelding 1 - laptopshop

Zoals je in de afbeelding kan zien wordt er goed gebruik gemaakt van de ruimte welke een desktop monitor biedt. Er is een groot zoekveld, er is volop ruimte voor een menu waarmee je kunt navigeren, er is ruimte voor een begeleidende tekst, aan de rechterkant kan je direct filters toepassen en je ziet meerdere laptops naast elkaar.

In onderstaande afbeelding zie je hoe dezelfde pagina eruit ziet op een mobiele telefoon:

afbeelding 2 - laptopshop mobile

(dit is trouwens de URL van de pagina uit dit voorbeeld: https://www.laptopshop.nl/category/174350/apple-macbook-air.html)

Op de mobiele telefoon is veel minder ruimte en desondanks is alles goed leesbaar. Het menu is verhuist naar de rechter bovenkant van de pagina. Door de 3 horizontale streepjes aan te raken klapt het navigatiemenu uit. Deze 3 horizontale streepjes zijn aardig standaard en de meeste consumenten weten wel dat ze hier de navigatie kunnen vinden.

De begeleidende tekst zie je op de mobiele versie nauwelijks meer. Je ziet alleen een korte regel “Apple MacBook Air is gehuld in een ste… Lees meer”. Door op lees meer aan te raken krijgt men de volledige tekst te zien.

Voor het filter wordt bij de desktop versie royaal gebruik gemaakt van de ruimte in de rechterkolom van de website. Bij de mobiele versie heeft het filter plaats gemaakt voor een kleine afbeelding met de tekst Filter. Wil je het filter gebruiken dan klapt deze tevoorschijn zodra je ‘Filter’ aanraakt.

Intuïtief

patheZo maar een voorbeeld van een webshop om aan te geven waar het bij responsive design omgaat: het moet intuïtief aanvoelen.

De mobiele versie van de website moet zo eenvoudig te bedienen zijn dat men er niet over na hoeft te denken en dat alle elementen op logische plaatsen te vinden zijn.

En wil je echt een het responsive design echt naar een hoger niveau tillen dan ontwerp je het ook nog zo dat alles (of bijna alles) met de duim te bedienen is!

Gebruik maken van telefoon functionaliteiten

Je kunt hierbij ook gebruik gaan maken van functionaliteiten van mobiele telefoons. Denk daarbij aan het serveren van content op basis van de GPS locatie van de website bezoeker. Als restaurant gids, bijvoorbeeld, kan je de restaurants laten zien in de directe omgeving van de gebruiker, waarbij je aangeeft op welke afstand de restaurants zich bevinden.

Een ander stukje mobiele functionaliteit welke eenvoudig in te bouwen is, is een aanklikbaar telefoonnummer. Zodat men je direct kan bellen vanuit je contactgegevens zonder het nummer over te moeten tikken.

Bij de contactgegevens kan tevens een link worden opgenomen zodat men direct naar je winkel of bedrijf kan navigeren met Google Maps.

AMP

ampZoals al eerder aangehaald is de internetverbinding op mobiele telefoons vaak wat trager. Door gebruik te maken van AMP zorg je ervoor dat je webpagina’s met de snelheid van het licht op telefoons geladen worden.

AMP staat voor Accelerated Mobile Pages. AMP is een methode om webpagina’s te bouwen welke snel laden op mobiele apparaten. De webpagina bestaat dan uit statische content welke niet vanaf je server geladen wordt maar vanuit Google. Google heeft daarvoor ge-cache-de webpagina’s van je website online staan.

Voor de gebruiker betekend AMP dat de website echt razendsnel op zijn scherm staat. Wil je ervaren hoe snel AMP is? Zoek dan met je telefoon op ‘AMP’. Je vindt dan de website van het AMP project (https://www.ampproject.org/). Als je hier op klikt dan zal je zien dat deze instant op je scherm staat.

Als je met je telefoon zoekt in Google dan worden de websites welke gebruik maken van AMP vertoond met een soort bliksemsymbooltje.

Het AMP teken

Wil je meer weten over AMP, en wat het voor jouw website kan betekenen, dan kan ik je zeker aanraden om onderstaande video eens te bekijken:

AMP als ranking signaal

Op dit moment van schrijven (jan. 2017) is AMP nog geen ranking signaal voor Google. De verwachting is echter wel dat dit het in 2017 wel zal worden. Het ligt in de lijn van Google om sites welke een goede gebruikerservaring geven een streepje voor te geven. Zo hebben sites welke gebruik maken van HTPPS een streepje voor, sites welke responsive zijn en sites welke snel laden (op de desktop).

1 Reactie op "3 Manieren om Je Website een Mobile Responsive Design te Geven"

  1. Gerard says:

    Een belangrijk gegeven ontbreekt op de eerste pagina van deze webstek. Namelijk in hoeverre informatie verouderd is. Pas bij toeval kwam ik dat te weten doordat ik ergens de tekst: “Op dit moment van schrijven (jan. 2017)” tegenkwam waaruit bleek, dat (de informatie op) deze webstek sterk verouderd is en ik waarschijnlijk ook wel geen reactie op deze reactie zal krijgen. Maar een goed voorbeeld van hoe het NIET moet en ook dat kan heel leerzaam zijn. 😉

Geef een reactie:

Verplichte velden zijn gemarkeerd met *