Google gaat de mobiele zoekresultaten optimaliseren voor responsieve websites. Meer dan 40 procent van het wereldwijde zoekverkeer wordt uitgevoerd op smartphones of tablets. Welk aspect gebruikt Google om het responsief zijn te beoordelen? Is mijn website responsief? Wat maakt een website responsief? Welke strategie helpt om je website responsief te maken? Hoeveel tijd kost het om je website responsief te maken? Koop voor enkele tientjes een responsief thema en laat de websitebouwer dit toepassen.
Google wil de gebruikerservaring voor mobiele platforms verbeteren. Een onderzoek samen met gebruikers van mobiele platforms heeft 25 verbeter punten benoemd. Eén ervan is het verbeteren van de toepasbaarheid voor mobiele platforms. Men vindt het een slechte User eXperience (UX) als een website slecht leesbaar is, niet te navigeren is of gewoon niet werkt op een smartphone of tablet.
Google controleert op vier criteria. Er wordt software gebruikt die niet algemeen toegankelijk is op mobiele apparaten. Tekst is niet leesbaar zonder te zoomen. De inhoud wordt niet geschaald op basis van schermgrootte, zodat horizontaal schuiven of zoomen nodig is. Links zijn niet ver genoeg uit elkaar geplaatst waardoor het klikken op de juiste moeilijk gaat. De Google mobiel vriendelijke zoek strategie wordt stapsgewijze in de komende maanden doorgevoerd. Test zelf je sites via de Mobielvriendelijke test.
Responsieve thema’s
Als je een content management systeem (cms) gebruikt als WordPress of Joomla dan is het zaak om een mobiel vriendelijk (css) thema te gebruiken en het cms met de plugins up-to-date te houden. WordPress heeft een overzicht van responsieve thema’s. Bijvoorbeeld het thema Enfold is responsief en geschikt voor mobiele platforms. Een gebruiker met de administrator rol kan zelf het thema aanpassen als de lees/schrijf/uitvoer permissies van de WordPress website goed staan.
De software componenten van de mobiele website moeten algemeen toegankelijk zijn. Zowel iOS (Apple) als Android tablets of smartphones moeten alle componenten van de website kunnen gebruiken. Adobe Flash is niet geschikt voor mobiele apparaten, omdat het niet ontworpen is om te schalen voor aanraakschermen en vraagt teveel energie.
Tekst is leesbaar te zoomen en de gebruiker kan de inhoud schalen naar schermgrootte. Dat heeft te maken met het stylesheet thema. De meta tag viewport definieert de relatieve instelling van de website breedte aan de hand van de breedte van het platform. Apple’s Safari browser definieerde de viewport om websitebouwers de schaal en de grootte van het scherm te laten manipuleren.
Om mobiel toepasbaar te zijn moet de viewport door de gebruiker te schalen zijn (user-scalable=yes). Met de minimum en maximum schaal kan de ontwikkelaar het zoomen door de gebruiker sturen. W3C beschrijft de platform aanpassing van de css @viewport en @media voor de verschillende platforms.
Html zonder css schaalt. Relatieve css-definities schalen automatisch op basis van de meta viewport. Professioneel responsive bouwen doe je op basis van een bootstrap css3/javascript thema. Zo’n thema past de grootte van website componenten relatief aan. Testen wijzen uit dat niet alle browsers hetzelfde resultaat geven. Test de verschillende scherm formaten op isresponsive.com.
Plaats links naar andere web pagina’s ver genoeg uit elkaar. Als een website bij de start van de home page onvoldoende schaalt, dan kunnen links te dicht bij elkaar staan om met één keer aanraken de gewenste te kiezen. De Google-test keurt zo’n website af voor mobiel gebruik. Websitelinks koppelen aan knoppen verbetert de gebruikers beleving. Een tegel of paneel gekoppeld aan een web pagina link maakt dat gebruikers nog gemakkelijker navigeren.
Upgrade van enkele tientjes
Wereldwijde stakeholders als Google vragen in het algemene gebruikers belang om verbetering van websites voor mobiel zoeken. Voor enkele tientjes kan een website een upgrade krijgen naar een responsief thema. De tijd van doe-het-zelf thema’s is voorbij. De aanpassing door een websitebouwer kost een dag tot enkele weken, maar de kosten wegen niet op tegen de baten. Responsieve websites hebben toekomst, niet responsieve websites niet. Het is ‘to be responsive or not to be’.
Wim Boogaart, senior websitebouwer
Leuk en aardig, maar als je aan de slag gaat, blijkt er van alles niet goed geregeld te zijn in CSS en HTML om op een vlotte manier een website responsief te maken. Het schalen van foto’s bijvoorbeeld is niet goed geregeld, daar zijn kunstgrepen voor nodig en het kost massa’s tijd je daarin te verdiepen.
Of dat het waard is voor die paar bezoekers meer? Je zou ook kunnen denken: mensen die websites zo nodig op een mobieltje willen bekijken – zelf heb ik zo’n ding niet eens – moeten maar genoegen nemen met de beperkingen daarvan. Of zelf zorgen voor de mogelijkheden om alle websites goed te kunnen bekijken in plaats van websitebouwers daarvoor te laten opdraaien.