Het is het jaar 2015 en ik verbaas me erover hoeveel websites die nieuw opgeleverd worden, nog steeds niet geschikt zijn voor mobiele weergave. Het kan gewoon niet zijn dat een webbouwer nu nog websites oplevert die niet op zijn minst responsive zijn. Hoewel er webbouwers zijn die zeggen dat hun klanten dat niet willen, mogen deze professionals dat wat mij betreft niet accepteren. Het is aan hen om de klant te overtuigen en aan de klant om responsive webdesign te eisen. Ik vertel je graag waarom.

Gebruik internet op smartphones neemt toe

Het zal geen verrassing zijn dat smartphones (en uiteraard ook tablets) steeds meer gebruikt worden voor internet. Apps vervangen soms de websites, zeker wanneer we het hebben over sociale media, maar het is in feite gewoon internetgebruik. Feit is, we slingeren geen laptops of pc’s meer aan om bijvoorbeeld snel even te googelen. De smartphone is toch veel sneller en makkelijker? Het bewijs: Google rapporteerde in mei dat in 10 landen het aantal zoekopdrachten op mobiel dat van desktop oversteeg. En reken maar dat deze trend zich wereldwijd doorzet.

Sociale media? Op mobiel toch?

Sociale media worden voor een groot deel op smartphone of tablet gebruikt. Of check jij Twitter nog op je pc? En ook Facebook is net zo makkelijk op je smartphone toch? Dus ook links in tweets of berichten op andere sociale media worden dus voor een heel groot deel via smartphones of tablets geopend. En wat als je bij het klikken op zo’n link in sociale media op een website terechtkomt die niet normaal werkt op een smartphone?

Een niet-mobielvriendelijke website is niet acceptabel meer

 

Ik schrok me rot

Op Twitter kwam ik ooit een tweet tegen met de trotse vermelding van een “nieuwe website”. Nieuwsgierig als ik ben, klikte ik op de link en schrok ik me rot van wat ik aantrof. Een design dat niet bij deze tijd past en een website die niet responsive was. Dus besloot ik de tweets met “nieuwe website” erin eens wat te monitoren. Tot mijn grote verbazing bleek daarbij dat er zeker 30% van de nieuwe websites niet responsive was. En nog steeds komen er regelmatig websites voorbij die niet geschikt zijn voor mobiele weergave. En dat is toch echt noodzaak in 2015, want een niet-responsive website is irritant.

Een niet-responsive website is irritant

Wees eerlijk, een website die niet goed meeschaalt op je telefoon, dat is toch irritant? Als de lettertjes zo klein zijn dat je de tekst niet kan lezen zonder de tekst te vergroten. Of als de tekst wel groot genoeg is, maar je deze niet kunt verschuiven om alles te lezen… Ja, dat komt ook voor! Hoe lang blijf jij nu dan nog op zo’n website? En bedenk eens hoe dat een jaar of twee, drie geleden was. Is dat veranderd? Vast wel. Bij mij in ieder geval wel. Ik illustreer het graag met een voorbeeld uit eigen ervaring.

Vakantie-uitjes zoeken op je mobiel

Tijdens onze vakantie in Drenthe zocht ik naar iets leuks om te doen met de kinderen. En wat is er dan makkelijker dan te zoeken met je smartphone tegenwoordig? Dus zocht ik op “uitje Drenthe met kinderen”, of in ieder geval iets van die strekking. En wat kreeg ik aan websites te zien in de resultaten?

Deze:

Website hollandsekids.nl is niet responsive of mobielvriendelijk

 

En deze:

Ook de website van uitmetkinderen.nl is verre van mobielvriendelijk

 

Lekker handig, als je hier op je smartphone een keuze uit moet gaan maken. Niet dus. Website afsluiten en door naar de volgende, die wél werkt op mobiel. Dat doe jij dan toch ook? Waar mensen tot ongeveer 2013 nog de moeite wilden nemen om het beeld te vergroten, is de verwachting nu gewoon dat een website het op ieder scherm goed doet. Dus is mobile first de weg die je moet bewandelen.

Mobile first

Om degenen die je website bezoeken via een smartphone of tablet de beste ervaring te bieden, kies je dus voor mobile first. Dit houdt in dat je bij het ontwerp van je nieuwe website eerst de mobiele weergave ontwerpt. Vanuit dat mobiele ontwerp wordt dan de desktopversie uitgewerkt. Het uitgangspunt is dat het grootste deel van je websitebezoekers via mobiel op je website komt.

Aparte mobiele website of responsive design

Voor mobiele weergave heb je de keuze tussen een aparte mobiele website of een responsive website. Responsive valt dan nog verder te specificeren in “gewoon” responsive en adaptive (daar meer over in de volgende alinea). Hierbij heb ik de voorkeur voor responsive, omdat een apart mobiel ontwerp vaak extra werk met zich meebrengt. En in sommige CMS’en zijn speciale mobiele versies van de website mogelijk, maar ziet dat er vaak anders uit dan de desktopversie. Dit komt de herkenbaarheid van je website op mobiel niet ten goede.

Mobiele versie webshop - niet herkenbaar zonder logo en huisstijl

Bovenstaande screenshot is afkomstig van De Boer Dental, die (op het moment van schrijven) een speciale mobiele versie van hun webshop heeft. Had jij door welk bedrijf er achter deze webshop zit?

Als je dan de desktopversie vergelijkt, zie je al helemaal wat voor wereld van verschil er is tussen de mobiele website en de “gewone” desktopversie:

Website De Boer Dental op desktop

Het betreft feitelijk dezelfde website, maar je ziet enorme verschillen tussen de mobiele versie en de desktopversie. De eerlijkheid gebiedt me te zeggen dat hier om moverende redenen gekozen is voor een standaard mobiele website van het gekozen CMS. Dit is niet helemaal representatief voor alle mobiele websites, maar laat wel heel duidelijk zien wat de verschillen kunnen zijn. Een goede webbouwer zal zeker een meer gelijkende mobiele website maken, maar waarom dan niet responsive of adaptive?

Responsive of adaptive

Responsive webdesign wordt volop omarmd. De website schaalt hierbij mee naar de schermgrootte. Dat betekent vaak ook dat een aantal content-elementen verschuiven. Tekst en beeld passen dan bijvoorbeeld niet meer naast elkaar en komen onder elkaar te staan. Adaptive design gaat een stap verder. Bij adaptive design wordt niet slechts de website meegeschaald, maar past de website of webpagina zich aan de situatie aan. Zo kan er op de mobiele versie van de website op de contactpagina bijvoorbeeld direct een route verschijnen, of een belknop waarmee direct met het bedrijf gebeld kan worden. Dit zijn slechts enkele eenvoudige voorbeelden van adaptive design. Vooral grote(re) bedrijven zullen meer en meer gebruik gaan maken van adaptive design, is mijn verwachting.

Er is geen reden om het niet te doen

Buiten bovengenoemde redenen is er ook beslist geen reden om het niet te doen. Ieder CMS, zeker de open source CMS’en als WordPress, Drupal en Joomla!, hebben allemaal templates die responsive zijn. En de betaalde responsive templates zijn niet per se duurder dan niet-responsive templates. Een webbouwer die prijs als argument gebruikt, gebruikt dus smoesjes.

Ook het argument “onze klanten bekijken onze website alleen op kantoor en dus op desktop” is niet waar. Medewerkers van bedrijven zijn allemaal ook gewone mensen (echt waar!) en die surfen ook gewoon op tablet en mobiel. En als ze dan om wat voor reden dan ook op de website van je bedrijf komen die niet geschikt is voor mobiel, moeten ze wel heel betrokken zijn om niet direct door te gaan naar de website van je concurrent.

Zakelijke relaties bekijken je website ook gewoon op hun smartphone, zoals deze van Refresco

Zou jij nog de moeite nemen om bovenstaande website te vergroten om deze te bekijken?

Ook al kost het meer: het levert ook meer op

Ja, laat die zin maar even goed tot je doordringen. Al zou een responsive of adaptive website meer kosten dan een niet-responsive website, de niet-responsive website gaat je klanten kosten. Want je bezoeker gaat geen moeite meer doen om je tekst te vergroten op de smartphone, wanneer het lettertype zich niet aanpast aan het scherm. Zeker de bezoekers die met hun smartphone op Google zoeken en zo op je website belanden. Je website wordt gewoon afgesloten en ze gaan naar het volgende resultaat in Google wanneer jouw website ze niet de juiste ervaring biedt.

Welke eisen zijn er?

Goed om te weten waar een website aan moet voldoen om mobielvriendelijk te zijn. Dus een paar belangrijke punten op een rijtje:

  • De inhoud is breder dan het scherm; je moet swipen om alle tekst te kunnen lezen
  • De lettergrootte moet zodanig zijn dat deze zonder extra moeite op een telefoon te lezen is; stel dus voor mobiel een goede lettergrootte in
  • Links staan te dicht bij elkaar; links die te dicht bij elkaar staan, zijn op een smartphone niet makkelijk aan te klikken
  • Viewport voor mobiel moet zijn ingesteld; de viewport zorgt ervoor dat browsers (en Google) detecteren dat een website geschikt is voor weergave op meerdere apparaten

Weten of jouw website aan alle eisen voldoet? Je hoeft enkel de URL van je website in te geven op Google’s ‘Mobielvriendelijke test‘. En?

Is jouw website mobielvriendelijk of ben je na bovenstaande nog steeds niet overtuigd? Deel je mening hieronder in de reacties, ik ben benieuwd wat jij te zeggen hebt!