Jouw Website Mobiel Toegankelijk Wilko van der …...Jouw Website Mobiel Toegankelijk – Wilko van...

26
Jouw Website Mobiel Toegankelijk – Wilko van der Ploeg – WordXPression – http://wordxpression.com 1

Transcript of Jouw Website Mobiel Toegankelijk Wilko van der …...Jouw Website Mobiel Toegankelijk – Wilko van...

Page 1: Jouw Website Mobiel Toegankelijk Wilko van der …...Jouw Website Mobiel Toegankelijk – Wilko van der Ploeg – WordXPression – 4 Nu de praktijk in .....22 Een goede indruk….....22

Jouw Website Mobiel Toegankelijk – Wilko van der Ploeg – WordXPression – http://wordxpression.com 1

Page 2: Jouw Website Mobiel Toegankelijk Wilko van der …...Jouw Website Mobiel Toegankelijk – Wilko van der Ploeg – WordXPression – 4 Nu de praktijk in .....22 Een goede indruk….....22

Jouw Website Mobiel Toegankelijk – Wilko van der Ploeg – WordXPression – http://wordxpression.com 2

Jouw website mobiel toegankelijk

Succes met jouw website op de mobiele telefoon

Wilko van der Ploeg

WordXPression

Page 3: Jouw Website Mobiel Toegankelijk Wilko van der …...Jouw Website Mobiel Toegankelijk – Wilko van der Ploeg – WordXPression – 4 Nu de praktijk in .....22 Een goede indruk….....22

Jouw Website Mobiel Toegankelijk – Wilko van der Ploeg – WordXPression – http://wordxpression.com 3

Inhoudsopgave

Waarom in vredesnaam mobiel? ........................................................................................................... 5

Geldt dit voor iedereen? .................................................................................................................... 5

Het doel van dit boek ......................................................................................................................... 6

De mobiele website – Drie opties .......................................................................................................... 7

Inleiding .............................................................................................................................................. 7

De traditionele website – de pijnpunten ............................................................................................ 7

De mobiele website ............................................................................................................................ 8

De App ................................................................................................................................................ 8

De native app ................................................................................................................................. 9

De hybride app ............................................................................................................................... 9

De webapp ................................................................................................................................... 10

De responsive website ..................................................................................................................... 10

Mobile first design ............................................................................................................................ 11

De responsive website ......................................................................................................................... 12

Wat wil ‘responsive’ nu eigenlijk zeggen? ........................................................................................ 12

Jouw responsive website .................................................................................................................. 12

Een responsive website is meer, dan het installeren van een responsive thema ......................... 13

Goed leesbare font-grootte.............................................................................................................. 13

Goed klikbare font-grootte............................................................................................................... 14

Definitie van de fonts in ‘rem’ eenheden ......................................................................................... 14

Harmonische koppen op mobiel ...................................................................................................... 15

Duidelijke CTA’s ................................................................................................................................ 15

Aangepaste sliders ........................................................................................................................... 15

Downloadpagina opt-in procedure .................................................................................................. 16

De header: Houdt het rustig! ........................................................................................................... 16

Call me! ............................................................................................................................................ 17

Samenvatting ................................................................................................................................... 17

Mobiele navigatie ................................................................................................................................. 18

Inleiding ............................................................................................................................................ 18

Het hamburger menu ....................................................................................................................... 18

De navigatie vereenvoudigen ........................................................................................................... 19

Selectief linken ................................................................................................................................. 20

Homepage navigatie......................................................................................................................... 20

Page 4: Jouw Website Mobiel Toegankelijk Wilko van der …...Jouw Website Mobiel Toegankelijk – Wilko van der Ploeg – WordXPression – 4 Nu de praktijk in .....22 Een goede indruk….....22

Jouw Website Mobiel Toegankelijk – Wilko van der Ploeg – WordXPression – http://wordxpression.com 4

Nu de praktijk in ................................................................................................................................... 22

Een goede indruk… ........................................................................................................................... 22

Finetuning ........................................................................................................................................ 22

Een nieuw thema is geen nieuwe website ....................................................................................... 22

Enkele handige / belangrijke plug-ins................................................................................................... 23

Inleiding ............................................................................................................................................ 23

ShiftNav ............................................................................................................................................ 23

Responsive menu ............................................................................................................................. 23

Widget Logic ..................................................................................................................................... 23

Duda mobile website builder ........................................................................................................... 23

WP Touch ......................................................................................................................................... 24

De responsinator .............................................................................................................................. 24

Hoe kan ik je van dienst zijn? ............................................................................................................... 25

Wie ben ik? ....................................................................................................................................... 25

WordPress XPress............................................................................................................................. 25

WordPress PowerStart ..................................................................................................................... 25

Support Strippenkaart ...................................................................................................................... 25

Feedback .......................................................................................................................................... 26

Page 5: Jouw Website Mobiel Toegankelijk Wilko van der …...Jouw Website Mobiel Toegankelijk – Wilko van der Ploeg – WordXPression – 4 Nu de praktijk in .....22 Een goede indruk….....22

Jouw Website Mobiel Toegankelijk – Wilko van der Ploeg – WordXPression – http://wordxpression.com 5

Waarom in vredesnaam mobiel?

Wanneer ik met mijn klanten spreek over een mobiele website, gebeurt het nog regelmatig dat ik de

horen krijg, dat de klant vindt, dat hij geen mobiele website nodig heeft, zijn klanten zullen hem

alleen op de gewone computer zoeken.

Wanneer ik doorvraag blijkt vaak, dat de ondernemer zelf weinig gebruik maakt van het Internet via

mobiele apparaten. En het is maar al te menselijk om jouw klanten dezelfde eigenschappen toe te

kennen, die jij zelf hebt.

In werkelijkheid is het gebruik van het Internet via mobiele devices nog steeds groeiende. Uit

onderzoek is gebleken dat in 2013 60% van alle smartphone gebruikers regelmatig toegang zoekt tot

het internet via de telefoon. Daarnaast is 30% van alle verkeer aan websites in de Verenigde staten

afkomstig van mobiele apparaten.

Wanneer je site niet of moeilijk toegankelijk is via het Internet, loop je dus potentieel 30% verkeer

naar je website mis.

Hier moet wel een kleine nuancering op worden aangebracht: Hoewel 30% van het verkeer naar een

website via mobiele devices komt, ligt het percentage voor de conversie (de actuele verkoop via een

website) veel lager: Slechts 3% van alle sales wordt afgesloten via een website. Tenminste, bij

websites waar ook de daadwerkelijke verkoop via de website plaatsvindt. Maar hoe zit dat bij jouw

site? Meet jij via je site wie er op welke manier bij jou als ‘offline’ klant terecht komt?

Al met al is het voor je naamsbekendheid (branding) belangrijk om op een goede manier ‘zichtbaar’

te zijn op het Internet, ook via mobiele apparaten.

Geldt dit voor iedereen?

‘Maar dat geldt niet voor mijn doelgroep’. Hoe vaak hoor ik dit niet. In werkelijkheid is het echter zo,

dat inmiddels het mobiele gebruik van het Internet dwars door alle demografische doelgroepen heen

loopt. Sterker nog, er heeft een enorme verschuiving plaatsgevonden: Was een aantal jaar geleden

het gebruik van ‘tablets’ nog iets wat typisch was voor de ‘happy few’ en de early adopters,

tegenwoordig is een tablet vaak ook een ‘arme mensen PC’ en zie je het gebruik van tablets dwars

door alle inkomens- en opleidingsniveau’s heen.

Er is dus geen enkele reden om aan te nemen, dat jouw doelgroep jouw website niet mobiel zou

willen bezoeken.

Page 6: Jouw Website Mobiel Toegankelijk Wilko van der …...Jouw Website Mobiel Toegankelijk – Wilko van der Ploeg – WordXPression – 4 Nu de praktijk in .....22 Een goede indruk….....22

Jouw Website Mobiel Toegankelijk – Wilko van der Ploeg – WordXPression – http://wordxpression.com 6

Voor een aantal bedrijfstakken is het echter zo, dat ze een grotere kans hebben op mobiel bezoek.

Dit geldt met name voor ´locale ondernemers´. Het zoeken naar bepaalde dienstverlening

(onderhoud en reparatie, horeca) per mobiele telefoon neemt sterk toe. Bij een lekkage bijvoorbeeld

zal de gemiddelde Nederlander eerder zijn telefoon pakken om een loodgieter te zoeken, dan een PC

op te starten om daarna te gaan zoeken. En het gebeurt ook steeds vaker dat tijdens een ‘dagje uit’

de mobiele telefoon wordt gebruikt om het juiste restaurant te zoeken om een gezellige dag af te

sluiten.

Opmerkelijk is, dat juist binnen deze bedrijfstakken de website zeer ondergewaardeerd wordt en de

sites veelal compleet niet presenteren op een mobiel apparaat.

Het doel van dit boek

Dit boek is niet bedoeld voor webdesigners, het is bedoeld voor ondernemers. Bij de bouw van een

nieuwe website wordt de mobiele toegankelijkheid van de website vaak onderbelicht. Enerzijds

omdat dit gebied voor veel webdesigners ook onontgonnen gebied is. Bovendien zal de meer

creatieve webdesigner zich ernstig beperkt voelen door de beperkte mogelijkheden op een mobiele

telefoon. Of zoals een webdesigner mij eens toevertrouwde ‘Een mobiele website bied je als

webdesigner geen mogelijkheden om indruk te maken.’

Als ondernemer ben jij echter minder geïnteresseerd in het indruk maken op je bezoekers: Wat je

vooral wilt, is dat de bezoeker klant wordt. En dat bereik je niet in de eerste plaats met

indrukwekkende vormgeving, maar met goed toegankelijke informatie.

Het is dus jouw taak om je webdesigner goed duidelijk te maken, wat je wilt met je website. Je zult je

ervan bewust moeten zijn, dat dit soms weerstand bij je webdesigner op kan roepen en dan is het

aan jou om te beslissen, of je door wilt zetten, toe wilt geven, of op zoek gaat naar een webdesigner

die wel positief staat tegenover mobiel design.

Page 7: Jouw Website Mobiel Toegankelijk Wilko van der …...Jouw Website Mobiel Toegankelijk – Wilko van der Ploeg – WordXPression – 4 Nu de praktijk in .....22 Een goede indruk….....22

Jouw Website Mobiel Toegankelijk – Wilko van der Ploeg – WordXPression – http://wordxpression.com 7

De mobiele website – Drie opties

Inleiding

Er zijn drie verschillende manieren om er voor te zorgen, dat jouw onderneming via de mobiel ook

mobiel vertegenwoordigd wordt. Er is geen ‘beste’ manier om dit te doen, iedere manier heeft zijn

eigen voor- en nadelen.

In dit hoofdstuk zullen we alle drie de opties uitgebreid bespreken. In de overige hoofdstukken zullen

we verder in gaan op de methode die voor ik denk ruim 80% van de ondernemers de best passende

optie is. Maar eerst gaan we in op de redenen, waarom de ‘traditionele’ website ongeschikt is voor

mobiel gebruik.

De traditionele website – de pijnpunten

Indien je website voor 2010 is ontworpen, was ‘mobiel gebruik’ van de website nog niet echt een hot

item. En in het ‘pre mobiele’ tijdperk was er een aantal zaken, waar je zonder meer van uit kon gaan.

Een van die zaken was de minimale breedte van een website: Je moest wel een heel oude computer

hebben, wilde je niet minimaal een schermresolutie van 1024 pixels breed aan kunnen. Veel websites

in die tijd zijn daarom ook vanuit die vooronderstelling ontworpen en daar is –kijkend daar de kennis

van die tijd- ook helemaal niets mis mee.

De vroege mobiele telefoons met internet verbinding hadden echter maar 320 pixels tot hun

beschikking om het beeld te bekijken. Dat is minder dan 1/3 van de gebruikelijke breedte. Omdat de

meeste websites er niet uit zouden zien in een dergelijk formaat, werd besloten de website tot de

volledige grootte te ‘verkleinen’ in het scherm en je de mogelijkheid te geven in te zomen op een

deel van de site. Je schuift als het ware met een venster over de website heen.

Dit is natuurlijk behelpen. Een verkleinde site is onleesbaar en wanneer je hem vergroot is de inhoud

van de website weinig overzichtelijk.

Maar er waren meer nadelen. De tijd dat mensen met een telefoon-inbel verbinding toegang zochten

tot het Internet was bijna voorbij en webbouwers konden uit gaan van snelle verbindingen. Helaas

waren de mobiele dataverbindingen niet zo snel… sterker nog, ze waren trager dan de traditionele

telefoonverbindingen, en moest er bovendien betaald worden voor de data. Het laden van een

website via een mobiel kon dus lang duren en behoorlijk kostbaar worden.

Kortom, er was ‘iets nieuws’ nodig om ervoor te zorgen, dat websites goed zichtbaar zouden worden

op de mobiel.

Page 8: Jouw Website Mobiel Toegankelijk Wilko van der …...Jouw Website Mobiel Toegankelijk – Wilko van der Ploeg – WordXPression – 4 Nu de praktijk in .....22 Een goede indruk….....22

Jouw Website Mobiel Toegankelijk – Wilko van der Ploeg – WordXPression – http://wordxpression.com 8

De mobiele website

De eerste oplossing was natuurlijk een aparte website voor mobiele toegang te ontwikkelen.

Internetbrowsers geven aan de webserver door, met welke browser en met welk operating system

een website wordt bezocht. Op basis van deze informatie is het natuurlijk vrij eenvoudig te

ontdekken of er wel of geen sprake is van mobiel gebruik: Wordt iOS (het operatingsystem van de

iPhone, iPad en iPod) doorgegeven, of geeft de browser ‘Android’ door, is het vrij zeker dat het gaat

om een mobiele bezoeker (hoewel dat vandaag de dag met Android smart-TV’s niet meer op gaat),

wordt een ander operating system doorgegeven, is de kans groot, dat het om een laptop of een

desktop gaat.

Op basis van deze informatie werd het vrij eenvoudig om door middel van een enkele regel

JavaScript of andere code bij het bezoek door een mobiele telefoon de bezoeker direct door te leiden

naar de mobiele site, in alle andere gevallen werd de gewone website getoond.

Hoewel deze oplossing vrij krachtig is, kleven hier ook een groot aantal nadelen aan. Het

belangrijkste nadeel is wel, dat een compleet aparte site ook apart onderhouden moet worden.

Bovendien is het een oplossing die naarmate de tablets in opkomst kwamen ook steeds minder

passend was: Zowel de mobiele als de ‘grote’ traditionele website functioneerden maar beperkt op

dit apparaat, wat qua schermgrootte precies tussen de twee formaten in kwam te zitten: De mobiele

site was te ‘klein’ en de traditionele site te groot.

De App

Een andere manier om mobiel aanwezig te zijn is natuurlijk een app te hebben. En een tijd lang was

het ontwikkelen van apps voor jouw aanwezigheid op het Internet booming business: Iedereen tot

de plaatselijke kruidenier aan toe wilde een eigen app.

Op dit moment komt de markt hier sterk van terug. Niet omdat er iets mis is met apps op zich, maar

omdat gebleken is, dat een ‘app’ het allemaal niet vanzelf doet.

Aan het begin van het smartphone tijdperk was er een gigantisch gebrek aan apps, vooral de

goedkope en de gratis. Veel mensen die zo’n prachtig nieuwe smartphone hadden wilden natuurlijk

graag aan familie en bekenden laten zien, waarom ze in plaats van zo’n compact mobieltje ineens

zo’n groot ding tegen hun oor wilden houden en de apps waren natuurlijk het perfecte excuus. Dus

werden mobiele apps en masse gedownload. Of het nu ging om het weerbericht of het

boodschappenlijstje voor de plaatselijke slager, het maakte niet uit… als het maar een app was.

Page 9: Jouw Website Mobiel Toegankelijk Wilko van der …...Jouw Website Mobiel Toegankelijk – Wilko van der Ploeg – WordXPression – 4 Nu de praktijk in .....22 Een goede indruk….....22

Jouw Website Mobiel Toegankelijk – Wilko van der Ploeg – WordXPression – http://wordxpression.com 9

Inmiddels weten we, dat de opslagcapaciteit van onze smartphone eindig is en hebben we alleen die

apps nog maar geïnstalleerd, die we werkelijk gebruiken. Het boodschappenlijstje van de plaatselijke

slager hebben we er inmiddels al lang weer af gehaald.

Het ontwikkelen van een app is al lang geen middel meer – wat de vele app ontwikkelaars je ook wijs

proberen te maken- om per definitie meer omzet te krijgen. Jouw app moet iets nieuws en anders

bieden, iets wat andere apps niet bieden aan de klant. Het is geen vervanging voor je website, maar

een aanvulling hierop.

Omdat er heel wat onduidelijkheid bestaat over hoe ‘makkelijk’ en ‘duur’ het is om een app te

ontwikkelen, wil ik hieronder even op een aantal zaken ingaan, die je beslist moet weten wanneer je

er één wilt laten ontwikkelen. Zie de informatie als goed startpunt voor de rest van je onderzoek.

De native app

Een native app is een app die specifiek ontwikkeld is voor het besturingssysteem waar het op draait.

Dus het is speciaal gemaakt voor de iPhone-familie (iOS), voor je Blackberry, je Android of je

Windows telefoon. De app is in staat gebruik te maken van alle hardware specifieke functies van het

apparaat en zal –mits goed geprogrammeerd- minimaal in het geheugengebruik en optimaal in de

snelheid zijn. Het maken van een native app wordt gedaan door een specialist voor dat specifieke

hardware- en besturingsplatform. Wil je voor diverse platforms dezelfde app hebben, dan zal je die

per platform moeten laten ontwikkelen.

De hybride app

De hybride app is een app die gemaakt is in een omgeving die min of meer los staat van het mobiele

platform zelf. De programmeertaal is niet operating systeem specifiek. Bij het ‘vertalen’ van de door

de mens geschreven code naar machinecode toe, wordt er echter ook een tussenlaag aangebracht,

die als het ware als vertaallaag dient tussen de code en het toestel.

Omdat ook deze ‘vertaallaag’ geïnstalleerd moet worden, zal een hybride app meer opslag- en

geheugenruimte nodig hebben en zal iets trager zijn dan de native app: Iedere instructie moet

namelijk eerst vertaald worden van een ‘algemene’ niet hardware specifieke instructie, naar een

native instructie.

Is het programma echter eenmaal geschreven is het voor de maker niet moeilijk om dit in een enkele

vertaalslag (het ‘compileren’) direct geschikt te maken voor een bepaald mobiel platform: Met

eenzelfde moeite wordt de applicatie geschikt gemaakt voor iOS, Android, Windows en –voor zolang

ze nog in de race zijn- de blackberry.

Page 10: Jouw Website Mobiel Toegankelijk Wilko van der …...Jouw Website Mobiel Toegankelijk – Wilko van der Ploeg – WordXPression – 4 Nu de praktijk in .....22 Een goede indruk….....22

Jouw Website Mobiel Toegankelijk – Wilko van der Ploeg – WordXPression – http://wordxpression.com 10

De webapp

De webapp is eigenlijk geen echte app meer, maar een webapplicatie die speciaal ontwikkeld is voor

gebruik om de mobiel. Bij de native app en de hybride app wordt er daadwerkelijk iets om je telefoon

geïnstalleerd en meestal zal de app ook zonder internet toegang in min of meer beperkte mate

kunnen functioneren. Bij de webapp wordt eigenlijk de toegang tot een website als icoon op jouw

telefoon geïnstalleerd en wordt de browser in een modus zonder navigatie- en statusbalk getoond,

waardoor het visueel exact lijkt op een app. Omdat het een internet toepassing is, is er minder

toegang tot de locale hardware mogelijk en –zoals gezegd- is er zonder internet ook geen app.

Hybride apps en native apps worden over het algemeen uitsluitend via een ‘store’ geïnstalleerd, de

webapp meestal vanuit een klik op een link op een website.

De responsive website

Door de opkomst van de mobiele telefoon als middel om het Internet te bezoeken stonden we voor

een nieuwe uitdaging: De traditionele opmaak talen voor websites, HTML en CSS schoten op alle

gebieden te kort.

Daarnaast was ook al pijnlijk duidelijk dat HTML en CSS ook op andere gebieden ernstige

tekortkomingen vertoonden, dus een nieuwe standaard was noodzakelijk. Dit is uiteindelijk CSS3 en

HTML5 geworden. Toch heeft het nog relatief lang geduurd, voordat deze standaard ook

daadwerkelijk in alle browsers werd ondersteund. Dat was ook niet zo vreemd, omdat HTML5 en

CSS3 probeerden alle tekortkomingen van HTML sinds het ontstaan er van op te lossen.

Voor onze mobiele website was de belangrijkste toevoeging echter het mogelijk maken van

zogenaamde ‘media queries’ in CSS. CSS, wat eigenlijk de motor is achter de visualisatie van de

opmaaktaal HTML, maakte het voortaan mogelijk om te bepalen wat de schermbreedte van je device

is en hier aan gerelateerd de opmaak aan te passen.

Dit zette de weg open voor een compleet nieuwe manier van het ontwerpen van websites, het

‘responsive design’. ‘Responsive’ wil zeggen, dat de website reageert op het scherm waarop het

bekeken wordt, door het ontwerp aan te passen.

Hoewel responsive design op dit moment de meest gebruikte methode voor het realiseren van

mobiel geschikte websites is, kleven hier nog ook een aantal nadelen aan. Het grootste nadeel is dat

een responsive site wel de opmaak van de website geschikt maakt voor het device waar het op

bekeken wordt, maar niet op een economische manier omgaat met de hulpbronnen die deze pagina

opbouwen. Een afbeelding in je webpagina van 600 x 800 pixels zal op een mobiele telefoon wel als

een kleine afbeelding getoond worden, maar wordt wel in het volle formaat geladen.

Page 11: Jouw Website Mobiel Toegankelijk Wilko van der …...Jouw Website Mobiel Toegankelijk – Wilko van der Ploeg – WordXPression – 4 Nu de praktijk in .....22 Een goede indruk….....22

Jouw Website Mobiel Toegankelijk – Wilko van der Ploeg – WordXPression – http://wordxpression.com 11

Mobile first design

Het meest succesvolle resultaat bij het ontwerpen van een responsive website mag je verwachten

wanneer je uitgaat van het ‘mobile first’ principe: Je zorgt er eerst voor dat je mobiel goed

presenteerbaar bent en daarna ga je ‘uitbreiden’ voor de grotere beeldformaten.

Om dit succesvol te doen, is het zaak dat je kiest voor een webbouwer met ervaring in deze. Kies je

voor een kant-en-klaar responsive thema, dan zal je zelf rekening moeten houden met een aantal

zaken. Ik zie het maar al te vaak: De ondernemer heeft een prima mobiel thema aangeschaft, maar

door onvoldoende begrip van hoe responsive design werkt, heeft hij de header volgestopt met

‘versieringen’, die er leuk uit zien op de live site, maar in de mobiele versie het hele beeld verpesten.

Page 12: Jouw Website Mobiel Toegankelijk Wilko van der …...Jouw Website Mobiel Toegankelijk – Wilko van der Ploeg – WordXPression – 4 Nu de praktijk in .....22 Een goede indruk….....22

Jouw Website Mobiel Toegankelijk – Wilko van der Ploeg – WordXPression – http://wordxpression.com 12

De responsive website

Wat wil ‘responsive’ nu eigenlijk zeggen?

Eén van de diensten die ik aanbied is een ‘support strippenkaart’, dit is niet alleen ideaal voor mijn

reguliere klanten, maar ook voor die WordPress gebruikers die bijna alles zelf doen, maar af en toe

toch dat kleine stukje hulp nodig hebben.

In het kader van zo’n support-strippenkaart komt het wel eens voor, dat ik word gebeld door een

verontruste klant. De klant heeft zojuist zelf een mooi nieuw responsive thema aangeschaft en belt

mij, dat er iets fout gaat met het thema. Op de PC en Laptop is het allemaal mooi te zien, maar zodra

hij het bekijkt op een tablet of een mobiele telefoon verschuift ineens de rechter sidebar naar

beneden. Wat heeft hij fout gedaan?

Niets dus! Dit is precies het gedrag wat ik van een responsive thema verwacht! Responsive wil (ook)

zeggen, dat bij onvoldoende ruimte op het scherm voor de hoofd-content, ‘minder relevante’

onderdelen als een sidebar zich verbergen of worden verplaatst. En dat is precies wat we zien, dus

het thema gedraagt zich zoals verwacht.

Eén belangrijk ding, wat je je moet realiseren bij mobiele websites is dat het onmogelijk is jouw

desktop en mobiele site er identiek uit te laten zien en ook op beide sites een goede

gebruikerservaring (user experience, UX) te hebben. Een mobiele site heeft immers beperkingen. Dit

is echter beslist geen nadeel: Je bent immers ook op je mobiel gewend aan een andere vorm van

navigeren, dan je gewend bent achter je PC.

Jouw responsive website

Het eerste wat natuurlijk goed is om te weten is of jouw huidige website daadwerkelijk responsive is.

Veel ondernemers hebben ooit voor een bepaald thema gekozen zonder erbij stil te staan of dit

thema ‘het wel doet’ op de telefoon. Nu heb je één geluk: Van de commercieel beschikbare thema’s

voor WordPress zijn er maar weinig te koop vandaag de dag die niet responsive zijn. Responsiveness

is de norm voor een goede website geworden. Als je dus een aangekocht WordPress thema gebruikt

is de kans groot, dat je ongemerkt toch mobiel al goed zichtbaar bent. Maar hoe zit het als je op dit

moment geen WordPress website hebt, je thema al wat ouder is of op maat voor jou is gemaakt. Is

jouw website dan ook mobiel geschikt?

De beste manier om dit te testen is naar de Responsinator website(

http://wordxpression.com/responsinator ) te gaan en daar de url naar jouw website in te geven. De

Responsinator laat zien hoe jouw website er in verschillende mobiele apparaten uit komt te zien. Dit

Page 13: Jouw Website Mobiel Toegankelijk Wilko van der …...Jouw Website Mobiel Toegankelijk – Wilko van der Ploeg – WordXPression – 4 Nu de praktijk in .....22 Een goede indruk….....22

Jouw Website Mobiel Toegankelijk – Wilko van der Ploeg – WordXPression – http://wordxpression.com 13

is overigens geen 100% betrouwbare weergave: Ook op je mobiel kun je verschillende browsers

installeren en niet iedere browser laat iedere website hetzelfde zien, maar het is wel een goede

indicatie met betrekking tot jouw mobiele zichtbaarheid.

Valt dit beeld je (erg) tegen, dan is de kans groot, dat jouw website niet responsive is. Kun je een

niet-responsive website responsive maken? Niet echt. Zoals ik in een eerder hoofdstuk heb

opgemerkt, is de beste aanpak voor het ontwikkelen van een responsive thema de ‘mobile first’

aanpak. En als je website niet responsive is, is de ‘mobile first’ aanpak per definitie onmogelijk.

Hoewel het wel mogelijk is met wat lapmiddeltjes je site mobiel acceptabel te maken (zie ook mijn

artikel hierover in mijn blog: http://wordxpression.com/noodverband-voor-mobiele-zichtbaarheid/ )

zal het nooit echt een ‘responsive site’ worden. Wanneer je de hulp van een (betaalde) derde partij

in zou moeten schakelen is het vrijwel altijd goedkoper om te beginnen aan een compleet nieuw

thema.

Een responsive website is meer, dan het installeren van een responsive thema

Stel. Je hebt net een spliksplinternieuwe auto gekocht. Hij is bovendien heel milieuvriendelijk, hij rijdt

namelijk op ‘brandstof x’, met 0% uitstoot. Het enige nadeel is, brandstof x wordt nog niet in

Nederland verkocht. Is jouw auto, zonder brandstof, niet in staat zichzelf of jou te verplaatsen, ook

een vervoersmiddel?

Hierover kunnen de meningen verschillen maar parallel hieraan kun jij je afvragen, of jouw

‘responsive’ thema wel responsive is, wanneer je bij het invullen van je website niet weet met welke

andere factoren je rekening moet houden. Persoonlijk zou ik hier volmondig nee op willen zeggen.

Jouw thema is ‘responsive geschikt’ of ‘responsive voorbereid’, maar absoluut niet responsive. Eén

van de ‘grote boosdoeners’ is vaak –zoals eerder aangegeven- de header en alles wat hierin wordt

gepropt, maar er zijn meer factoren die de responsiveness van je website kunnen verpesten. Het

mooie is echter, je hebt het allemaal zelf in de hand en na het lezen van dit e-boek weet je ook

precies waar je rekening mee moet houden!

Maar laten we nu eens stap voor stap kijken naar de kenmerken, waar je responsive website aan

moet voldoen.

Goed leesbare font-grootte

Veel websites hebben een te klein lettertype om prettig leesbaar te zijn op het beeldscherm. Waar

mensen weinig bij stil staan, is dat we op een computerscherm anders lezen dan op papier. We

hebben meer moeite om ons te concentreren op de tekst en een groter lettertype en meer witruimte

dan we gewend zijn op papier komt de leesbaarheid sterk ten goede.

Page 14: Jouw Website Mobiel Toegankelijk Wilko van der …...Jouw Website Mobiel Toegankelijk – Wilko van der Ploeg – WordXPression – 4 Nu de praktijk in .....22 Een goede indruk….....22

Jouw Website Mobiel Toegankelijk – Wilko van der Ploeg – WordXPression – http://wordxpression.com 14

Veel websites zijn in het verleden ontworpen met het idee, dat alle tekst in één keer getoond zou

moeten worden: Scrollen is uit den boze! En om dat mogelijk te maken werd –onder meer- het font

verkleind tot een formaat wat nog net leesbaar was.

Het idee dat scrollen uit den boze is, hebben we inmiddels naar het rijk der fabeltjes verwezen.

Sowieso ontkomen we niet aan scrollen, wanneer we kijken naar een mobiele website of een website

op een tablet, maar eerlijk gezegd, scrollen we liever in een website met een wat leesbaarder

lettertype dan dat we worstelen met een lettertype wat we maar net kunnen lezen. En geloof me:

Zo’n tekst wordt op een mobiele telefoon nog minder leesbaar.

Goed klikbare font-grootte

Een andere reden om –vooral op mobiel en tablet- een groter font te kiezen is de ‘klikbaarheid’. Je

muis is een precisie-instrument, waarmee je bijna op de pixel nauwkeurig kunt bepalen, waar je wilt

klikken. Je vinger is dat niet. Het is een plomp, dik ding wat tientallen pixels gelijktijdig aan zal

klikken. Het probleem met een Touch screen is echter, dat je vaker gebruik zult maken van dit

plompe aanwijsinstrument dan dat je jouw nauwkeurige muis gebruikt.

Het aanraakvlak om ‘goed te kunnen klikken’ moet dus redelijk groot zijn. En door te kiezen voor een

groter lettertype en voldoende regelafstand, realiseer je dat ook.

Definitie van de fonts in ‘rem’ eenheden

Wanneer je geen standaard responsive thema aanschaft, maar jij je website door een webbouwer op

maat laat maken, is het belangrijk dat je weet te definiëren aan welke eisen jouw website moet

voldoen. Veel webbouwers hebben de neiging font-groottes in ‘pixels’ of erger nog in ‘punten’ of

‘pica’s’ te willen definiëren.

‘Punten’ en ‘Pica’s’ zijn maten afkomstig uit de drukwereld. Het is een absolute lettergrootte. Dit is in

druk natuurlijk allemaal goed mogelijk. De afmetingen van een gedrukt tijdschrift bijvoorbeeld zijn

immers altijd hetzelfde. Maar in de wereld van webdesign bestaan geen absolute maten: Een pixel

op een 19” met een bepaalde resolutie is kleiner dan een pixel in eenzelfde resolutie op een 15”

scherm. En dan hebben we het nog niet eens over de verschillende mogelijkheden van resoluties.

Wanneer je van mijn generatie bent, herinner je vast nog wel de ‘pixels’ van de Commodore 64: Het

waren bijna legoblokjes die je aan kon raken.

De afkorting ‘rem’ staat voor ‘Root em’ en is een relatieve maat. Door middel van ‘rem’ geef je de

grootte aan ten opzichte van het standaard lettertype gedefinieerd voor die browser. Voor een

Page 15: Jouw Website Mobiel Toegankelijk Wilko van der …...Jouw Website Mobiel Toegankelijk – Wilko van der Ploeg – WordXPression – 4 Nu de praktijk in .....22 Een goede indruk….....22

Jouw Website Mobiel Toegankelijk – Wilko van der Ploeg – WordXPression – http://wordxpression.com 15

desktop browser is dat meestal 10px en een grootte van 1.6 rem wil dus zeggen : 1.6 maal 10 pixels,

dus 16 pixels.

Wanneer je een bepaalde harmonie in lettergrootte hebt gevonden, de perfecte ‘match’ tussen

kopteksten, broodtekst en andere teksten en je vindt dat het uiteindelijk toch iets groter of kleiner

moet, kun je in één actie alle lettertypes vergroten of verkleinen, zonder dit per grootte apart aan te

hoeven passen door het ‘browser lettertype’, de ‘root’ te veranderen.

Harmonische koppen op mobiel

Soms kan het zo zijn, dat de kopteksten die er op je desktop prima uit zien, om je mobiel gewoon te

groot uitvallen. Beslaat een kopregel drie of meer fysieke regels op je telefoon en komt dit ook

regelmatig voor, dan is het lettertype voor de kopteksten zeker te groot. Heeft je thema de

mogelijkheden om zaken specifiek voor bepaalde mobiele formaten in te stellen, dan moet je dit

zeker doen, anders moet je dit op (laten) lossen in de CSS van je thema.

Duidelijke CTA’s

Een CTA, Call to Action, is een directe oproep tot actie. ‘Download nu’, ‘Lees verder’, ‘Ontdek het zelf’

zijn duidelijke voorbeelden. Hoewel het altijd goed is om een CTA duidelijk te benadrukken, is dit op

een mobiel toestel nog veel belangrijker. Wat minstens even belangrijk is, is dat deze CTA groot

genoeg is. Apple adviseert –en niemand geeft een ander advies- om er voor te zorgen, dat een vlak

wat bedoeld is om met de vinger aangeraakt te worden minimaal 44x44 pixels groot is.

Aangepaste sliders

Wanneer je een slider in je website opneemt, zorg er voor, dat het een responsive slider is. Maar

zelfs wanneer het een responsive slider is, is het goed rekening te houden met een aantal zaken.

Allereerst moet je realiseren, dat bij een mobiele site sneller wordt ‘doorgescrold’ dan bij een

gewone website. In zijn algemeenheid maakt een slider die sneller dan na 5 seconden een nieuwe

slide laat zien een onrustige indruk. Op een mobiel is iemand na 5 seconden al lang ‘doorgescrold’

naar een positie lager op de pagina. Dus voor mobiele sites gelden de volgende aanbevelingen:

Bevat jouw slider een ‘Call to Action’ button, verberg de slide liever en laat een gewone tekst

met CTA zien. Een button die op normaal formaat acceptabel is, is op geminimaliseerd

formaat vrijwel onleesbaar en ‘onaanraakbaar’.

Is de slider vooral bedoeld om een sfeerimpressie te geven, zorg er voor, dat de slider in

ieder geval bij de eerste sliders snel wisselt, om duidelijk te maken dat het een slider is. Twee

seconden voor de wisseling is acceptabel, zolang er geen tekst op staat (2 seconden is te kort

om te lezen)

Page 16: Jouw Website Mobiel Toegankelijk Wilko van der …...Jouw Website Mobiel Toegankelijk – Wilko van der Ploeg – WordXPression – 4 Nu de praktijk in .....22 Een goede indruk….....22

Jouw Website Mobiel Toegankelijk – Wilko van der Ploeg – WordXPression – http://wordxpression.com 16

Laad kleinere afbeeldingen! Als je slider dit niet toestaat, gebruik een plug-in als ‘widget

logic’ om de verschillende sliders conditioneel te laden (je maakt dan dus 2 sliders, één voor

mobiel, één voor de rest)

Downloadpagina opt-in procedure

Wanneer je ‘Verleid je Klant’ (http://wordxpression.com) heb gelezen, weet je natuurlijk hoe

belangrijk een ‘cadeau’ is voor het bouwen van je mailinglijst. Nu is er een aantal manieren om deze

download ‘door te geven’ aan degene die zich zojuist heeft ingeschreven voor je mailinglijst. De

meeste autoresponders maken het mogelijk om na het klikken van de bevestigingslink direct

doorgeleid te worden naar de downloadpagina. Heel gebruikersvriendelijke natuurlijk, maar op het

moment, dat ik mij heb ingeschreven via mijn mobiel, is het niet altijd zo, dat ik dit gratis geschenk

ook op de mobiel wil ontvangen. Al helemaal niet, als het een videobestand betreft.

Zorg er dus altijd voor, dat in de email waarin de inschrijving wordt bevestigd een link staat naar de

downloadpagina of direct naar de download zelf. Op deze manier kan je nieuwe abonnee zelf

bepalen op welk apparaat hij jouw e-boek of videotraining wel of niet wil downloaden.

De header: Houdt het rustig!

Een belangrijke bron van (un)responsive ergernis is vaak de header van de pagina. Van oudsher wil

men hier namelijk graag allerlei zaken in kwijt, zoals bijvoorbeeld een opt-in formulier of

contactgegevens. Het meest gewaardeerd wordt nog wel een opt-in formulier waarbij de rand van

het boek net buiten de header steekt.

Het effect van een dergelijke opt-in is echter minimaal. Uit eigen ervaring : Ik heb ruim een jaar lang

op drie plaatsen een opt-in formulier gehad: Een complete beschrijving van het e-boek plus opt-in

formulier op de homepage, een formulier in de sidebar en een opt-in in de header. En bij iedere opt-

in registreerde ik, waar de inschrijving vandaan kwam. Van de ruim 1500 inschrijvingen die ik dat jaar

gehad heb, hebben er zeggen en schrijven vier mensen zich aangemeld in het opt-in formulier in de

header.

Bovenstaande om het nut van zo’n opt-in in de header te relativeren. Maar natuurlijk kun je de

header ook gebruiken voor andere fraaie afbeeldingen. Per slot van rekening wordt het anders zo’n

leeg vlak.

Denk er echter wel aan, dat het effect van een dergelijke ‘opvulling’ van de header vaak leidt tot een

‘in elkaar schuiven’ van de verschillende onderdelen van de header in een mobiele situatie of –even

Page 17: Jouw Website Mobiel Toegankelijk Wilko van der …...Jouw Website Mobiel Toegankelijk – Wilko van der Ploeg – WordXPression – 4 Nu de praktijk in .....22 Een goede indruk….....22

Jouw Website Mobiel Toegankelijk – Wilko van der Ploeg – WordXPression – http://wordxpression.com 17

onwenselijk- het onder elkaar plaatsen van de zaken, waardoor de header in principe hoger wordt

dan gepland en de direct belangrijke content verder naar beneden wordt geschoven.

De beste situatie: Zorg ervoor dat deze ‘overbodige’ elementen in ieder geval op de mobiele website

verborgen worden.

Call me!

Het leuke van een mobiele telefoon is dat deze niet alleen beperkingen, maar ook nieuwe

mogelijkheden heeft. Want wat er ook allemaal mogelijk is met jouw telefoon: De belangrijkste

functie blijft toch het kunnen bellen. Door boven aan jouw homepage –of misschien zelfs boven aan

iedere pagina- een aparte ‘strook’ op te nemen, die alleen zichtbaar is op mobiele apparaten biedt je

de unieke mogelijkheid om wel een heel directe ‘Call to action’ uit te voeren: Een telefoontje met

een enkele muisklik!

Hoe zo’n ‘Direct Call to Action’ er HTML technisch uitziet? Kinderlijk eenvoudig :

<a href=”call:112”>Bel voor noodgevallen 112</a>

Deze ‘Call me’ knop kun je behalve boven aan de pagina natuurlijk ook op een aantal andere plaatsen

in de site opnemen, zoals direct in de buurt van een product gerelateerde call to action… tenminste,

indien je wilt dat er over het product wordt gebeld. Dus iets als :

Samenvatting

Bij een responsive website komt meer kijken dan een responsive thema alleen. Het is belangrijk, dat

je ook begrijpt wat de beperkingen, maar ook wat de nieuwe mogelijkheden van een mobiele

website zijn.

OF BEL DIRECT

BESTEL NU

Page 18: Jouw Website Mobiel Toegankelijk Wilko van der …...Jouw Website Mobiel Toegankelijk – Wilko van der Ploeg – WordXPression – 4 Nu de praktijk in .....22 Een goede indruk….....22

Jouw Website Mobiel Toegankelijk – Wilko van der Ploeg – WordXPression – http://wordxpression.com 18

Mobiele navigatie

Inleiding

Mobiele navigatie is een hoofdstuk apart en het lijkt mij dan ook goed om hier een apart hoofdstuk

aan te besteden.

Een mobiele telefoon is in zijn algemeenheid compleet ongeschikt voor de gebruikelijke ‘horizontale-

balk-met-uitvouw’ menu’s. Zelf vond ik het nogal spijtig te ontdekken, dat de meeste responsive

thema’s hier ook helemaal geen rekening mee houden: Ook op je mobiele site krijg je een

traditioneel horinzontale-balk-met-uitvouwmenu voorgeschoteld (de meer gangbare term is een

‘nav-balk’ of ‘nav-bar’ en die zullen we verder in dit e-boek gebruiken).

Wanneer jouw complete menu bestaat uit die ene balk, dan valt het allemaal nog wel mee met je

mobiele navigatie. Is het echter zo, dat je ook nog ‘submenu’s’ van het eerste, en misschien zelfs

submenu’s van een tweede niveau hebt, dan heb je om een tweetal redenen een serieus

navigatieprobleem aan te pakken.

Het hamburger menu

Om misverstanden te voorkomen: Ik wil het niet met

je hebben over een broodje smakeloos vlees,

cholesterol-bevorderende saus met lauwe extra

dunne friet en een veel te zoete frisdrank, maar over

het icoontje wat je steeds vaker op websites terug ziet

komen met drie horizontale streepjes. Pas wanneer je

dit opent, wordt er daadwerkelijk een menu getoond.

Persoonlijk vind ik een dergelijk ‘verstoppertje spelen

met je belangrijkste navigatie’ not done op een

gewone website, echter op een mobiele website is het

meer dan acceptabel. Waarom? Omdat door het

kleinere schermformaat van de mobiel dit icoon direct

in het oog springt (de bezoeker hoeft er niet naar te

zoeken) en omdat dit een algemeen geaccepteerde

manier is om in apps aan te geven, dat hier meer

menu-opties te vinden zijn. De gemiddelde mobiele gebruiker verwacht hier dus een menu te vinden,

de gemiddelde website bezoeker niet.

Page 19: Jouw Website Mobiel Toegankelijk Wilko van der …...Jouw Website Mobiel Toegankelijk – Wilko van der Ploeg – WordXPression – 4 Nu de praktijk in .....22 Een goede indruk….....22

Jouw Website Mobiel Toegankelijk – Wilko van der Ploeg – WordXPression – http://wordxpression.com 19

Allemaal natuurlijk heel interessant, maar hoe komen we aan zo’n hamburger menu?

Sommige responsive thema’s hebben een optie met een naam als ‘show hamburger menu’ of iets

dergelijks onder de mobiele opties. Nu je weet, dat die optie zo heet, kun je deze wellicht vinden in

de setup van jouw mobiele thema. Andere thema’s doen dit al vanzelf.

Is beide niet het geval, dan kun je nog steeds een ‘hamburger menu’ krijgen door hiervoor een plug-

in te installeren. Zelf adviseer ik hiervoor de ShiftNav plug-in (artikel hierover:

http://wordxpression.com/mobiele-menus-wordpress/) maar er zijn meer goede plug-ins hiervoor

verkrijgbaar.

De navigatie vereenvoudigen

Wanneer je in totaal meer dan 15 menu opties hebt, is het goed om serieus te denken over het

vereenvoudigen van je menu navigatie voor de mobiele telefoon. Kijk bijvoorbeeld eens naar de

volgende structuur (inspringen wil zeggen een volgend menu niveau) :

Home

Producten

Ons eerste product

o Voordelen

o Kenmerken

o Prijslijst

Ons tweede product

o Voordelen

o Kenmerken

o Prijslijst

Ons derde product

o …

Ons vierde product

o …

Contact

Blog

Page 20: Jouw Website Mobiel Toegankelijk Wilko van der …...Jouw Website Mobiel Toegankelijk – Wilko van der Ploeg – WordXPression – 4 Nu de praktijk in .....22 Een goede indruk….....22

Jouw Website Mobiel Toegankelijk – Wilko van der Ploeg – WordXPression – http://wordxpression.com 20

Je begrijpt het al: Dit menu kan een heel lange lijst gaan worden op je mobiele telefoon.

Veel handiger is het om voor je mobiel een apart menu te definiëren met minder opties dan bij het

‘desktop’ menu. In je menu zouden bijvoorbeeld alleen de opties van het eerste of het eerste en

tweede niveau voorkomen, alle opties met een ‘open bullet’ hierboven zouden dus niet in het menu

staan.

Indien we er voor zouden kiezen alleen het eerste niveau te tonen, dan zou alleen voor het mobiele

menu de link ‘Producten’ niet linken naar de pagina over producten waar ook de desktop site heen

linkt, maar naar een pagina alleen bedoeld voor de mobiele bezoekers met daarop niets anders dan

de links naar de diverse producten. Nu is er wel een extra klik nodig om op de juiste pagina te komen,

maar het navigeren is een stuk overzichtelijker geworden.

Ben je er voor in om nog een stap creatiever te gaan? Zoek dan passende icons voor een ‘mobiele

stijl’ en plaats deze in je tussenpagina’s.

Een tweede optimalisatie is onder aan iedere pagina een link naar een vervolgpagina op te nemen.

Hierbij houd je de rangschikking van het menu aan… je doet dus als het ware alsof je website een

folder is, die pagina voor pagina moet worden doorgebladerd. Iedere link (liefst uitgevoerd als een

knop!) geef je een naam als ‘Lees verder: Ons derde product’.

Selectief linken

Je wilt niet al je pagina’s toegankelijk hebben voor de mobiele bezoeker. Hierbij gaat het er meer om

dat hij ze niet hoeft te zien en niet, dat hij ze niet mag zien. Je kunt hierbij bijvoorbeeld denken aan

pagina’s met ingewikkelde formulieren, veel tekst etc. Deze pagina’s kun je in principe gewoon uit

het menu weglaten voor je mobiele menu.

Homepage navigatie

Door het groeiend gebruik van de mobiele telefoon voor Internet bezoek is ook de rol van de

homepage in de laatste jaren drastisch gewijzigd. Voor de ‘traditionele website’ is het vooral van

belang, dat je de aandacht van de bezoeker zo snel mogelijk weet te pakken… en de beste methode

voor de ondernemers-site is de ‘pain and pleasure’ methode te gebruiken: Je beschrijft eerst de

problemen die de bezoeker ondervindt, vervolgens de situatie die voor hem ideaal zou zijn en als

laatste stap vertel je hoe jouw dienst of product hem naar deze ideale situatie helpt.

Op een traditionele site werkt dit prima, omdat het grootste deel van de structuur van het verhaal

direct goed zichtbaar is. Op een mobiele site is de kracht van deze methode minder. Ik wil niet

Page 21: Jouw Website Mobiel Toegankelijk Wilko van der …...Jouw Website Mobiel Toegankelijk – Wilko van der Ploeg – WordXPression – 4 Nu de praktijk in .....22 Een goede indruk….....22

Jouw Website Mobiel Toegankelijk – Wilko van der Ploeg – WordXPression – http://wordxpression.com 21

zeggen, dat het niet werkt, maar je zult meer moeite moeten doen om de aandacht van de bezoeker

vanaf het eerste moment vast te pakken.

Het alternatief heb je ongetwijfeld ook al meer dan eens gezien: Een homepage die visueel duidelijk

is ‘opgedeeld’ in secties door iedere sectie een eigen kleur te geven. En iedere sectie beschrijft een

bepaalde situatie in slechts enkele zinnen… met de mogelijkheid door te klikken.

Vast onderdeel van een dergelijke pagina is ook een drietal ‘feature boxes’… drie blokken naast

elkaar met een kop, een plaatje, een toelichting en een mogelijkheid door te klikken. Achter deze

feature boxes zitten de belangrijkste pagina’s die jij de bezoeker wilt laten lezen.

Het voordeel van het opzetten van je homepage volgens een dergelijk ontwerp, is dat je de aandacht

van de mobiele bezoeker makkelijker weet te grijpen, zonder dat het direct nadelen heeft voor de

bezoeker aan je ‘desktop’ site. Nadeel van een dergelijke paginaopzet is dat de SEO waarde van een

dergelijke pagina minimaal is.

Page 22: Jouw Website Mobiel Toegankelijk Wilko van der …...Jouw Website Mobiel Toegankelijk – Wilko van der Ploeg – WordXPression – 4 Nu de praktijk in .....22 Een goede indruk….....22

Jouw Website Mobiel Toegankelijk – Wilko van der Ploeg – WordXPression – http://wordxpression.com 22

Nu de praktijk in

Een goede indruk…

Als het goed is heb je inmiddels een goede indruk gekregen bij de problemen die komen kijken bij het

‘mobiel krijgen’ van je website, maar ook van de oplossingen die er geboden worden. Wanneer jouw

website niet geschikt is voor mobiel gebruik, is het niet de vraag of je een mobiel geschikte website

wilt, maar vooral wanneer je tijd en budget hebt om hier aan te werken: Een niet responsive website

mist gemiddeld 30% van het mogelijke Internet verkeer. Ben je een lokale ondernemer, dan is de

gemiste omzet door het niet mobiel zijn met je website nog veel groter.

In mijn eerder genoemde blogartikel geef ik je een aantal ‘noodverbanden’ die je voorlopig aan kunt

leggen, maar het blijft een noodoplossing.

Finetuning

Heb je al een responsive website, dan is de eerder genoemde responsinator een prima hulpmiddel

om te kijken, of jij de responsive mogelijkheden van jouw website wel goed gebruikt en hier – aan de

hand van de diverse tips en trucs in dit e-boek- de nodige verandering in aan te brengen. Een

‘responsive’ website is geen ‘status’, maar is en blijft met een CMS altijd een proces: Bij alle content

en iedere widget die je toevoegt, dien je je af te vragen, hoe deze zich mobiel gedraagt.

Een nieuw thema is geen nieuwe website

Heb je al een WordPress website heb ik in ieder geval één troost voor je, als de site niet responsive

blijkt te zijn: Je hebt geen nieuwe website nodig, alleen een nieuw thema. Dat is immers het grote

voordeel van een content-management-systeem als WordPress: Content en weergave zijn

gescheiden onderdelen en je content kun je gewoon blijven gebruiken. Wel is het goed om –conform

hetgeen gesteld is in de paragraaf ‘finetuning’ de content helemaal te doorlopen op de geschiktheid

voor mobiele weergave.

De kosten in tijd en energie om een nieuw thema te vinden zijn beperkt, zelfs wanneer je kiest voor

een thema op maat in jouw eigen huisstijl. Wanneer jij voor ogen hebt wat je wilt, kan alles binnen

een dag ‘up and running’ zijn. Wil je weten hoe dat mogelijk is, mag je zeker het volgende hoofdstuk

niet overslaan.

Page 23: Jouw Website Mobiel Toegankelijk Wilko van der …...Jouw Website Mobiel Toegankelijk – Wilko van der Ploeg – WordXPression – 4 Nu de praktijk in .....22 Een goede indruk….....22

Jouw Website Mobiel Toegankelijk – Wilko van der Ploeg – WordXPression – http://wordxpression.com 23

Enkele handige / belangrijke plug-ins

Inleiding

Wanneer je je website mobiel geschikt wilt hebben is er een aantal plug-ins wat je hierbij kan helpen.

Hieronder worden ze besproken.

ShiftNav

Zoals reeds eerder aangegeven, is dit mijn persoonlijke favoriet voor responsive thema’s zie zelf geen

ondersteuning hebben voor ‘hamburger menu’s’. De plug-in is makkelijk te installeren en eenvoudig

in het gebruik.

Responsive menu

Een plug-in die ik tijdens het schrijven van dit e-boek ontdekte. Op dit moment heb ik er slechts

globaal naar kunnen kijken, maar hij ziet er veelbelovend uit en biedt wellicht een oplossing voor

enkele tekortkomingen van ShiftNav. Blijf mijn blog volgen, want hij wordt zeker binnenkort

besproken. Meer info : https://wordpress.org/plugins/responsive-menu/

Widget Logic

Om te bepalen welke widgets je wel of niet zichtbaar wilt hebben kan Widget Logic handig zijn.

Persoonlijk ben ik meer gecharmeerd van de ‘Custom Sidebars’ plug-in, maar Widget Logic kan één

ding wat Custom Sidebars niet kan: Bepalen of de site bezocht wordt via een mobiel device. Met

behulp van de conditionele tag ‘wp_is_mobile()’ kun je in Widget Logic bepaalde widgets wel of juist

niet tonen, indien de site bezocht wordt via een mobiel device.

Belangrijke waarschuwing: voor wp_is_mobile() is een tablet ook een mobiel device. De functie is dus

niet- of minder geschikt om te bepalen of er wel of geen ‘Call me’ button getoond moet worden.

Duda mobile website builder

Een plug-in die ik ook binnenkort zeker zal bespreken in mijn blog op http://wordxpression.com .

Deze plug-in is vooral bedoeld voor webmasters met een niet-mobiel geschikte website. Met behulp

van deze plug-in zou het mogelijk zijn in enkele stappen een mobiele website te maken en de

vormgeving en functionaliteit hiervan specifiek voor de mobiele telefoon uit te breiden. Zelf heb ik de

nodige twijfels bij deze plug-in, maar als ze hun bewering waar kunnen maken, is het zeker de moeite

waard dit nader te onderzoeken.

Bij de waardering valt het op, dat er 61 mensen de plug-in met 5 sterren (zeer goed) en 21 hem met

1 ster (slecht) waarderen. Wat ook vrij typisch is, is dat de plug-in ruim 100.000x gedownload zou

Page 24: Jouw Website Mobiel Toegankelijk Wilko van der …...Jouw Website Mobiel Toegankelijk – Wilko van der Ploeg – WordXPression – 4 Nu de praktijk in .....22 Een goede indruk….....22

Jouw Website Mobiel Toegankelijk – Wilko van der Ploeg – WordXPression – http://wordxpression.com 24

zijn, maar de maker zelf claimt dat 5 miljoen mensen deze plug-in gebruiken. Dat wil dus zeggen, dat

1 op de 12 WordPress websites deze plug-in zou gebruiken. Een bewering die ik hier openlijk direct

in twijfel durf te trekken.

Dit neemt natuurlijk niet weg, dat het een interessant product is en zeker de moeite van het

onderzoeken waard. Houd je dus op de hoogte en lees binnenkort de recensie met betrekking tot

deze plug-in.

Meer informatie over de plug-in : https://wordpress.org/plugins/mobile-website-builder-for-

wordpress-by-dudamobile/

WP Touch

WP Touch doet een deel van wat Duda Mobile beweert te doen. Via deze plug-in is het mogelijk om –

in een zeer fantasieloze vormgeving- de inhoud van je mobiele site te tonen aan je bezoekers. Met de

‘Pro’ versie krijg je nog enkele mobiele thema’s die je site iets minder fantasieloos maken, maar het

blijft behelpen. Tot de algemene doorbraak van responsive websites deed WP Touch het redelijk

goed –bij gebrek aan beter- maar in mijn persoonlijke optiek is WP Touch een achterhaald product.

Waar WP Touch vooral tekort schiet is op het gebied van tablets. WP Touch is sterk mobiel gericht en

de weergave can WP Touch doet het goed op een mobiel, maar op een tablet is deze te beperkt.

Indien je desktop site niet responsive is, blijf je dus een probleem houden met de bezoekers via een

tablet.

Indien je een niet-mobiel geschikte site hebt en het eerder besproken ‘noodverband’ voor jouw site

niet werkt, is WP Touch een optie. De stap naar een responsive site is echter zeer aan te bevelen.

De responsinator

Geen plug-in, maar wel een belangrijke tool is de –ook al eerder besproken- responsinator. Bekijk

hoe jouw website er uit ziet op de mobiel. http://wordxpression.com/responsinator

Page 25: Jouw Website Mobiel Toegankelijk Wilko van der …...Jouw Website Mobiel Toegankelijk – Wilko van der Ploeg – WordXPression – 4 Nu de praktijk in .....22 Een goede indruk….....22

Jouw Website Mobiel Toegankelijk – Wilko van der Ploeg – WordXPression – http://wordxpression.com 25

Hoe kan ik je van dienst zijn?

Wie ben ik?

Met WordXPression ondersteun ik ondernemers in het gebruik van WordPress. Dat doe ik op een

aantal manieren. De meest gebruikelijke manier is het bouwen van websites, maar ik lever meer

diensten om jou als ondernemer optimaal met WordPress te leren werken.

Dat doe ik op een aantal manieren. De meest gangbare manier is natuurlijk het bouwen van een

website, maar voor mij –en hopelijk ook voor jou- is een website het beginpunt en niet het eindpunt

van een goede online marketing.

In mijn wekelijkse blogposts op WordXPression.com geef ik daarom relevante informatie over het

gebruik van WordPress door ondernemers. Want jij als ondernemer hebt totaal andere behoeften

dan iemand die blogt over zijn hobby of zijn laatste vakantie. Ik probeer zoveel mogelijk de techniek

te vermijden in mijn blogposts, maar wil juist stil staan, bij de juiste methoden en strategieën om

meer omzet uit je website te kunnen behalen.

WordPress XPress

In juni 2012 ben ik begonnen met een geheel nieuw product en in korte tijd is dit heel populair

geworden. In een werkdag tijd bouwen jij en ik samen jouw WordPress website op maat en leer je in

het voorbijgaan ook nog ‘even’ werken met WordPress en wordt jouw doelgroep nog eens kritisch

bekeken, kortom… de beste manier om snel en effectief met WordPress aan de slag te kunnen gaan.

O ja, had ik al gezegd, dat je website per definitie responsive is? Voor meer informatie :

http://wordxpression.com/producten/wordpress-xpress-website/

WordPress PowerStart

Ken je WordPress al van haver tot gort, maar heb je alleen een thema nodig wat voor jouw

onderneming op maat is gemaakt? Dan is WordPress PowerStart wellicht de ideale manier om aan

WordPress te beginnen: Voor een voordelige prijs WordPress maatwerk inclusief een jaar hosting!

Meer informatie:

http://wordxpression.com/producten/wordpress-powerstart/

Support Strippenkaart

Heb je behoefte aan wat extra ondersteuning? Dan is de supportstrippenkaart iets voor jou. Het

maakt niet uit, of je nu een beginnende WordPress gebruiker bent die een wat lastigere plug-in liever

laat installeren, dan dat hij het zelf doet, of dat je een PowerUser bent, die exact weet hoe

WordPress werkt, maar die kleine CSS aanpassingen liever door een vakman laat doen: De Support

Page 26: Jouw Website Mobiel Toegankelijk Wilko van der …...Jouw Website Mobiel Toegankelijk – Wilko van der Ploeg – WordXPression – 4 Nu de praktijk in .....22 Een goede indruk….....22

Jouw Website Mobiel Toegankelijk – Wilko van der Ploeg – WordXPression – http://wordxpression.com 26

Strippenkaart is precies wat je nodig hebt. Voor meer informatie:

http://wordxpression.com/producten/de-support-strippenkaart/

Feedback

Ik heb dit boekje geschreven in de veronderstelling, dat jij er mogelijk iets aan zou kunnen hebben. Ik

vind het dan ook prettig te horen, of dit ook het geval is geweest. Daarom stel ik het op prijs wanneer

je onderstaande link wilt volgen en jouw feedback over dit boekje wilt geven. Reacties worden niet

publiek gemaakt.

http://wordxpression.com/feedback-e-boek/