Mobile First belangrijker dan ooit

3 april 2015

De cijfers liegen er niet om, meer dan 70% van de Nederlandse bevolking is in het bezit van een smartphone en ruim 50% van het internetverkeer gaat via mobiele apparaten. Websites die volledig functioneel zijn op tablets en mobiele apparaten zijn daarom relevanter dan ooit en dat terwijl het internet gebruik van mobiele apparaten alleen maar groter wordt.

De relevantie van mobiel surfen wordt nog duidelijker als we kijken naar het uitvoeren van online transacties. In een recent artikel in Computable wordt een onderzoek van betalingsdienstverlener Adyen aangehaald waar gemeld wordt dat 25% van alle wereldwijde online betalingen uitgevoerd wordt vanaf een mobiel apparaat.

Wanneer uw website niet mobiel-vriendelijk is, kan dit invloed hebben op uw website verkeer met name via de Google zoekresultaten. Google kijkt bijvoorbeeld naar de volgende punten om te bepalen of uw website mobiel-vriendelijk is:

  • Pagina?s passen zich automatisch aan en er hoeft zo weinig mogelijk gescrold te worden.
  • De tekst is leesbaar zonder in en uitzoomen
  • Er dient genoeg ruimte tussen de links te zijn, zodat op de juiste link geklikt kan worden

Is uw TYPO3 website mobiel-vriendelijk?

Voer dan nu vast de Google ?mobile-friendly? test uit. Deze test analyseert de pagina?s van uw website. De pagina laat na analyse zien of uw website mobiel-vriendelijk is: Mobile-friendly test Google.

Als uw huidige website op TYPO3 draait of u bent van plan een nieuwe website op te (laten) zetten met TYPO3, dan zijn hier wat tips om uw website zo aan te passen, zodat deze echt "mobiel-vriendelijk" is.

Hoe maak ik mijn TYPO3 website mobiel-vriendelijk?

Of u nou TYPO3 CMS of TYPO3 Neos gebruikt, de basis principes zijn hetzelfde waar het gaat om een goede mobiele representatie van een website .Denk er om dat het hier niet gaat om het beheer gedeelte (backend) van TYPO3, maar om wat bezoekers zien als ze de website (frontend) bezoeken. Hier zijn enkele richtlijnen die van belang zijn in het mobiele tijdperk.

Een nieuwe TYPO3 website opzetten

Een nieuwe website laat zich het beste opzetten gebaseerd op Foundation of op Bootstrap. Er zijn een aantal populaire extensies op de TYPO3 Extension Repository terug te vinden gebaseerd op deze frameworks, waarmee een nieuwe TYPO3 website op te zetten is. Het gebruik van een van de genoemde frameworks is aan te raden, met name omdat hier alle mobiele en reponsive kenmerken voor de frontend al volledig ingebouwd zijn.

Tips voor reeds bestaande websites

Voor reeds bestaande websites zijn er een reeks aan aanbevelingen:

1. Voor beginners

Wanneer een website is opgezet gebruikmakend van een van de frameworks, Foundation of Bootstrap, voorzien van een aangepast thema en een responsive lay-out, dan is de website helemaal gereed voor mobiel. Kijk op de <link https: developers.google.com speed pagespeed insights>Google PageSpeed Insights om te zien hoe uw website presteert. 

2. Voor gevorderde website integrators

Onder een gevorderde integrator verstaan we een TYPO3 certified integrator.

Wanneer een website gebruik maakt van een niet-standaard web template, eigen gedefinieerde TypoScript dan valt er binnen TYPO3 nog het een en ander aan te passen, vooropgesteld dat je weet wat je doet. 

HTML5 out-of-the-box

Het beste fundament voor een 'mobiel-vriendelijke' website krijgt u door vanaf de basis gebruik te maken van HTML5 en de daarbij behorende elementen.

U kan eenvoudig controleren of uw website in de HTML5 modus draait door in de bron van de website te kijken. De pagina start dan met de volgende declaratie:

<!DOCTYPE html>

Als u nog frames gebruikt voor uw website of nog HTML4 gebruikt, overweeg dan om over te gaan naar HTML5. Hou er echter rekening mee dat er wel wat tijd gaat zitten in testen, afhankelijk van de website structuur en HTML code.

We raden natuurlijk aan de laatste versie van TYPO3 CMS te gebruiken. Als dat het geval is dan is de HTML declaratie eenvoudig toe te voegen middels deze TypoScript setup:

config.doctype = html5

Out-of-the-box draait TYPO3 CMS met standaard content elementen vanuit CSS Styled Content (een van de basis extensies die met TYPO3 CMS meegeleverd worden). Samen met de hierboven genoemde optie zullen alle oorspronkelijke HTML5 elementen en tags gebruikt worden.

Zorg er voor dat u geen lelijke hacks gebruikt om bijvoorbeeld MS Internet Explorer specifiek gedrag op te vangen. Dat kan namelijk weer de lay-out in andere browsers breken. Het komt ook vaak voor dat JavaScript code van JQuery plugins de output zo veranderd dat deze problematisch wordt met het gebruik van 'click' en hover' events die door diverse mobiele apparaten anders ge?nterpreteerd worden. 

Responsive / mobiel-vriendelijk

Met de grote vari?teit aan apparaten en vooral mobiele apparaten om op het internet te surfen is het voor de hand liggend geworden een nieuwe website responsive op te zetten. Daar hoeft u niet lang over na te denken. Responsive houdt in dat de inhoud van de website zich aanpast aan het apparaat en/of de breedte van het scherm waarmee u surft. Dit is vrijwel allemaal gebaseerd op CSS3 en JavaScript. Controleer de templates goed voordat ze ge?ntegreerd worden in TYPO3 om je er van te verzekeren dat ze 'mobile-ready' zijn. 

Zoals al eerder gemeld is het aan te raden om de website op een van de frameworks te baseren. Deze leveren HTML code die responsive zijn en helemaal gereed voor mobiele apparaten. Er zijn online zeer veel templates te vinden, klaar om in een TYPO3 installatie gebruikt te worden.

Mocht u nou nog geen responsive website hebben en er toch zeker van wilt zijn dat de website past op een tablet of een smartphone, neem dan de volgende metatag op in je website code:

<meta name="viewport" content="width=device-width, initial-scale=1">

Dit zorgt er voor dat ongeacht het mobiele apparaat de volledige breedte van websites altijd geschaald wordt naar de apparaatbreedte.  Kijk voor meer opties in de documentatie over de <link https: developers.google.com speed docs insights configureviewport>viewport meta tag.

In TYPO3 CMS, kunt u deze optie toevoegen middels de volgende TypoScript setup:

page.meta.viewport = width=device-width, initial-scale=1

Vermijd het gebruik van plug-ins

De grootste vijand van mobiele apparaten zijn websites die commerci?le plug-ins vereisen, zoals Adobe Flash en Microsoft Silverlight, voor het tonen van content of het navigeren van de website. Gebruik waar mogelijk deze technologie?n alleen als alternatief om op terug te vallen voor oudere browsers, maar zorg ervoor dat ze wel gebouwd zijn op HTML5 elementen zoals  HTML5 video, HTML5 audio en elementen zoals canvas. De volgende Wikipedia artikelen geven inzicht aangaande deze technologie?n:

Thema ge?nstalleerd? Gebruik je frontend extensies?

Als u uw website hebt opgezet met een gepredefinie?rd pakket zoals de TYPO3 CMS extensie "bootstrap_package" dan is uw basis output gereed voor mobiele apparaten.

Als u extensies hebt ge?nstalleerd controleer dan of deze ook HTML5 valide output genereren.

U kan vrij beschikbare extensies vinden op de TYPO3 Extension Repository (TER) - als u zoekt op "HTML5" of "responsive" dan krijgt u een selectie van extensies die geschikt zijn voor mobile output.

Caching activeren

Het is belangrijk je website compleet te cachen om je website zo snel mogelijk te laten zijn. Dit werkt uiteraard alleen op pagina's zonder gebruikersinteractie.

Voeg deze regel TypoScript toe om er voor te zorgen dat alle  HTTP Cache Headers altijd naar de browser gestuurd worden:

cache.sendCacheHeaders = 1

Een separate mobiele versie van de website

Wanneer u een bestaande complexe website heeft, dan kan het een oplossing zijn om tijdelijk een separate website voor mobiele apparaten te laten draaien naast de reeds bestaande, zolang er nog geen tijd is de volledige website om te gooien. Als het om een complexe website gaat dan kan het aanpassen daarvan zeker wat tijd kosten, zeker omdat bij zo'n operatie dan ook nog wel wat andere zaken op de schop genomen zullen worden. 

Er zijn een aantal extensies die voor dit doeleinde kunnen laten verwijzen naar specifieke templates, paginatypes etc. gebaseerd op browser en/of mobiel apparaat.

Vanuit die locatie kan dan een andere, alleen voor mobiel geschikte, template gebruikt worden voor de mobiele apparaten.

Test je website

Als u boven genoemde punten ge?mplementeerd hebt test dan ook de output. Er zijn verschillende manier waarop u dat kunt doen:

  • Als u een mobiel apparaat bij de hand heeft surf dan door de hele website. Kijk goed of u alle navigatie-elementen, drop-downs etc. kunt bereiken. 
  • Met Google Chrome kunt u gebruik maken van ?mobile device emulation? onder Chrome Developer Tools. Deze werkset kunt u vinden bij "View" > "Developer" > "Developer Tools". Er is ook uitstekende documentatie over deze emulator.
  • Als de website voorzien is van een responsive lay-out dan kunt u ook uw browser venster slepen naar de breedte van uw mobiel en experimenteren met hoe de site reageert als de breedte van het venster varieert. Overigens is het zo dat sommige responsive designs gebaseerd zijn op welke browser u gebruikt. Helemaal waterdicht is dat dus niet.
  • We raden aan om uw website te checken met Google's PageSpeed Insights tool. PSI geeft een mooie weergave voor mobiele apparaten en vele tips over hoe uw website of pagina te verbeteren qua snelheid. De UX score in PSI - onderaan de pagina is een goede indicator over hoe goed de website het doet op mobiele apparaten.
  • Mobiel Vriendelijk Test! - Google heeft een nieuwe tool gelanceerd die ondersteuning biedt voor het testen of een website mobiel-vriendelijk is: g.co/mobilefriendly 

Google promoot actief het gebruik van mobiel-vriendelijke websites. Eind november 2014 heeft Google bekend gemaakt de zoekresultaten te gaan optimaliseren voor mobiele gebruikers. Er wordt een ?mobiel-vriendelijke? label toevoegen als ranking-factor. In de mobiele zoekresultaten zal in de resultaten het label 'Voor mobiel' getoond worden als aan de voorwaarden, zoals eerder genoemd in dit artikel, voldaan is.

Als websites voldoen aan de Google criteria voor een mobiel-vriendelijke site, dan zullen websites hoger in de zoekresultaten naar voren komen. 

Ook wordt de zoekervaring van de mobiele gebruikers verbeterd. Zij kunnen de keuze maken om een website over te slaan wanneer deze niet mobiel-vriendelijk is. Hieronder vindt u een voorbeeld van een zoekresultaat via Google. Bij de zoekresultaten ziet u ?Voor mobiel? staan. Dit bekent dat in dit geval de MaxServ klant, keukenmaxx.nl, gebruik maakt van een mobiel-vriendelijke website. 

Hulp nodig?

Uiteraard is MaxServ expert waar het gaat om het bouwen van mobiel-vriendelijke websites. Aarzel niet om ons te benaderen met vragen over dit onderwerp.

Ook de TYPO3 community biedt een aantal bronnen waar je te rade kunt gaan voor advies. 

Gebruik Facebook of via Twitter (gebruik de hashtag #typo3) als u voor hulp vraagt. 

Er is een specifieke Go Mobile pagina (waar dit artikel op gebaseerd is) een nieuwsgroep, een forum en een mailinglijst specifiek voor dit onderwerp:

Gerelateerde berichten

Onze meesterwerken

Optimalisatie van de Woonexpress webshop met Hyvä Checkout
Commerce & Content in een zeer uitgebreid online landschap