Met de opkomst van smartphones en tablets is er qua webdesign nogal wat veranderd. Veel websites zijn namelijk op smartphones en tablets een stuk minder prettig in gebruik. Hoe vaak moet je bijvoorbeeld niet inzoomen op een smartphone om een stuk tekst goed te kunnen lezen. Het komt er allemaal op neer dat de meeste websites simpelweg niet ontworpen en gemaakt zijn voor gebruik op smartphones en tablets, de desktop is nog de standaard.
De oplossing(en)
Aparte website voor ‘mobile devices’
Een oplossing die nu steeds minder gebruikt wordt is simpelweg een aparte website maken voor ‘mobile devices’. Deze aparte website kan je helemaal vormgeven zodat die goed getoond wordt op een smarthpone. Het grote nadeel hiervan is dat je zometeen ook twee aparte websites in beheer krijgt (of misschien wel 3 wanneer je voor de tablets ook een aparte versie maakt). Uiteraard kun je er wel voor zorgen dat de content voor deze aparte website uit een zelfde database komt als van de desktop website.
Responsive webdesign (smart sites)
Een (soms) betere oplossing is dan responsive webdesign, door media queries te gebruiken kun je de lay-out van een pagina dynamisch veranderen afhankelijk van de grootte van het browser venster. Op die manier wordt je website altijd goed weergegeven.
Deze oplossing staat nog in de kinderschoenen en zag je tot voor kort ook alleen maar terug bij websites met een wat eenvoudigere opmaak (bijvoorbeeld weblogs). Het klinkt eenvoudiger dan het is. Soms heb je bijvoorbeeld nu eenmaal veel ruimte nodig om een wat complexere interface te tonen, deze krijg je dan gewoonweg niet op het scherm van een smartphone en je zou je dan kunnen afvragen of men wel behoefte heeft om deze interface überhaupt op een smartphone te gaan gebruiken. Je zou er dan voor kunnen kieze om deze interface gewoon niet te tonen op een smartphone.
Het belangrijkst is in ieder geval dat je er vanaf het eerste punt rekening mee houdt, dit begint dus al in het ontwerp proces. Men adviseert ook wel om te beginnen met de ontwerpen voor de smartphone, dan de tablet en dan pas de desktop.
Enkele voordelen van responsive webdesign zijn
- Één website (dus geen aparte mobiele versie) dus minder onderhoud.
- Het gaat niet alleen om het apparaat waar de bezoeker de website mee bezoekt, ook op desktops heeft responsive voordelen als een bezoeker zijn browser schaalt.
- Het is sexy.
Er komt een tijd dat we het niet meer over responsive webdesign hebben omdat alle websites dan gewoon responsive zijn. Zover is het echter nog lang niet, dit zullen we ook zeker niet in 2012 bereiken. Naast de vele voordelen van responsive webdesign zitten er namelijk ook nogal wat nadelen aan.
Nadelen responsive webdesign
- Laadtijden, een gebruiker met een smartphone zal in veel gevallen de gehele website inladen terwijl er een aantal zaken niet getoond worden (“display:none”)
- Browser compatibility, Internet Explorer 8 en lager kan bijvoorbeeld niet met media queries overweg.
- Afbeeldingen, een smartphone of tablet zal dezelfde afbeeldingen inladen als bij de desktop versie, wat weer voor lange laadtijden zorgt.
- Kosten, de ontwikkeltijd voor responsive websites is gewoon langer. Ontwerpen hiervoor kost meer tijd en coderen hiervoor kost meer tijd. Zeker voor klanten met minder grote budgetten is dit een probleem.
Een interessant artikel over de nadelen van responsive webdesign is hier te vinden.
Interesante links
Less Framework
FluidGrids
Mobile Boilerplate
Responsive webdesign book
The beginner’s guide to responsive webdesign
Obama doet het ook
De 2008 campagne van Obama is ongetwijfeld een van de meest succesvolle campagnes uit de politieke geschiedenis geweest, een heel belangrijk onderdeel hiervan was de inzet van digitale media.
Er is nu een 2012 versie van de website gelanceerd die volledig responsive is.
Recentelijk zijn er weer wat extra mogelijkheden bijgekomen in Google Analytics, het gaat hier om zoekmachineoptimalisatie rapporten. Deze rapporten zijn nu officieel uit de Beta en wat zou er nou mooier zijn dan zoekmachineoptimalisatie rapporten in Google Analytics.
De rapporten zijn te vinden onder het kopje “Verkeersbronnen” > “Zoekmachineoptimalisatie”. Je dient wel eerst even het Webmaster tools account te koppelen aan het bijbehorende Google Analytics account, wanneer je dat gedaan hebt kun je direct gebruik maken van de nieuwe features. Let er wel even op dat je geen gegevens kunt terug vinden van de laatste twee dagen.
Zoekopdrachten
Onder het kopje zoekopdrachten kun je de top 1000 zoekopdrachten terugvinden. Bij elke zoekopdracht kun je de vertoningen, klikken, gemiddelde positie en de CTR (Click Through rate) terug vinden.
De vertoningen, klikken en de CTR zijn op zich vrij duidelijk.
- Vertoningen verteld je gewoon het aantal vertoningen op Google die er in je geselecteerde datum bereik zijn geweest.
- Klikken verteld je het aantal wat mensen op die vertoningen geklikt hebben.
- CTR geeft aan het aantal klikken gedeeld door de vertoningen
- Gemiddelde positie is een wat vreemde eend in de bijt, in eerste instantie zou je verwachten dat het hier gaat om je gemiddelde ranking in Google voor de specifieke zoekopdracht. Onze positie voor de zoekopdracht “Webdesign Utrecht” schommelt meestal tussen plek 2 en 3 in, echter in dit zoekmachineoptimalisatie rapport staat er bij de gemiddelde positie voor deze zoekopdracht 5,5.
Nu blijkt dus dat Google hier niet de rank aangeeft maar zoals Google zelf zegt hierover .
“De gemiddelde positie van uw website-URL’s voor de zoekopdracht of zoekopdrachten. Als de URL van uw site voor één zoekopdracht op positie drie en voor een andere zoekopdracht op positie zeven voorkomt, is de gemiddelde positie dus vijf (3 +7/2).”
Eerlijk gezegd kan ik er nog geen Chocola van maken en als iemand dat wel kan hoor ik het graag.
Ik denk dat ze bedoelen dat je voor een zoekopdracht meerdere vertoningen in Google kunt hebben en dat ze de gemiddelde positie van die vertoningen nemen. Google zelf omschrijft het nogal cryptisch dus zeker weten doe ik het op dit moment niet.
Wat heb je aan die gemiddelde positie?
Wat Google nu precies bedoelt met de gemiddelde positie vind ik eerlijk gezegd ook niet van zo’n groot belang. Ik vind het een enorm gemis dat zie hier niet gewoon de hoogste ranking voor de zoekopdracht weergeven, daar heb je als je je met zoekmachine optimalisatie bezig houdt gewoon veel meer aan.
Geavanceerde filters
Uiteraard kun je hier ook weer wat gevanceerde filters op los laten. De filters geven je de gelegenheid om bijvoorbeeld zoekopdrachten te vinden die toevallige bezoekers naar de website trekken. Je kunt bijvoorbeeld als filters instellen zoekopdrachten waarvan;
- De gemiddelde positie ligt tussen 20 en 4
- Het aantal klikken groter is dan 20 (Uiteraard afhankelijk van het opgegeven tijdbestek).
Wanneer wij dit doen komen de fameuze Ei-Pet en Webdesign Utrecht naar voren. Van de eerste blijft me verbazen dat er zoveel mensen zoeken naar een Ei-Pet, misschien moeten we dat ding toch maar eens gaan verkopen, voorlopig genereert de Ei-Pet alleen een hoop traffic. De tweede is natuurlijk iets waar we hard ons best voor doen en wat aardig blijkt te lukken.
Bestemmingspagina’s
Dit rapport geeft het aantal vertoningen weer van de top bestemmingspagina’s van je website, uiteraard weer vergezeld van het aantal klikken, de gemiddelde positie en de CTR.
Het grote gemis hierbij vind ik weer dat er niet bijstaat wat de bijbehorende zoekopdrachten waren. Deze gegevens kun je wel elders uit Google Analytics halen maar het zou toch een stuk makkelijker zijn om dat direct hier te tonen.
Zo zie je bij ons rapport dat de bestemmingspagina http://www.clearsite.nl/portfolio/het-oosterlicht-college/ de hoogste score heeft maar een zeer lage CTR. We kunnen wel aannemen (assumption is the mother of all fuckups) dat dit komt omdat er redelijk veel mensen zoeken naar Oosterlicht (een grote scholengemeenschap in de regio Utrecht), de vermelding van hun website in ons portfolio komt hier naar voren met een lage CTR omdat de mensen met deze zoekopdracht waarschijnlijk op zoek zijn naar de website van het Oosterlicht College en niet naar de webdesigners die de website voor hun hebben gemaakt (jammer genoeg).
Geografische samenvatting
Dit rapport laat je de vertoningen per land zien, samen met de kliks, en de CTR. Voor onze eigen site is dit eerlijk gezegd niet zo interessant omdat wij ons nog niet op het internationale vlak begeven.
Leuker is misschien om hiet te kijken onder de link ‘Google Property’ dit geeft je inzicht in de vertoningen van je website bij de verschillende zoek omgevingen zoals; images, video, web en mobile. Het linkje naar ‘Google Property’ is overigens goed verborgen en staat boven de tabel naast het ‘land’ linkje.
Wat hebben we nu aan deze zoekmachineoptimalisatie rapporten in Google?
Al met al vind ik het een goede start van Google om dit in Analytics te verwerken, echter is de informatie vrij summier. Ik zie het dan ook meer als een tool om op een snelle manier opvallende zaken te vinden. Wil je er dan meer over weten zul je toch naar andere delen van Google Analytics moeten gaan of andere tools gaan gebruiken.
Een leuke start die van mij zeker een gevolg mag krijgen. Met een paar kleine uitbreidingen kan dit een zeer nuttige extra feature worden.
Dank u Google!
Het internet is overal en het is prachtig. Maar toch… Er is iets wat aan ons web-ontwikkelaars vreet. Een rotte appel in de fruitmand. Het is een doorn in het oog, de nachtmerrie van elke web-ontwikkelaar. We kunnen het niet negeren, we kunnen er niet omheen; Internet Explorer. En ja, wat doe je dan?! Als je ziet dat Internet Explorer nog steeds de meest gebruikte web-browser is en dat de meeste hiervan verouderde versies zijn?! Inderdaad, je schreeuwt de longen uit je lijf, smeekt God, Larry Page, Steve Jobs of wie dan ook op je blote knieën om een wonder.
En een “klein wondertje” is gekomen vanuit de Google hoek. Gelukkig wordt er daar niet stil gezeten en kunnen wij tegenwoordig gebruik maken van Google Chrome Frame. Deze plugin voor Internet Explorer (versie 6 en hoger) geeft websites de optie gebruik te maken van de HTML, CSS en JavaScript engine van Chrome. Met andere woorden; Chrome Frame voegt een aantal mooie funtionaliteiten toe aan Internet Explorer waardoor je wél optimaal gebruik kan maken van de laatste technologieën op website gebied ;-D
Gebruikers
Wil je deze plugin installeren?!
Stap 1: Ga dan naar http://code.google.com/chrome/chromeframe en installeer de plugin
Stap 2: Wees blij dat je een browser hebt die weer leuke dingen kan laten zien!
Ontwikkelaars
Wil je jouw website(s) Chrome Frame ready maken?!
Stap 1: Bereid je website voor om Google Chrome Frame te gebruiken
Plaats de meta-tag <meta http-equiv="X-UA-Compatible" content="chrome=1"> in de <head> van je website of plaats de regel header set X-UA-Compatible "chrome=1"in je .htaccess file (voor meer informatie, zie deze pagina)
Stap 2: Overtuig je bezoekers om Google Chrome Frame te installeren
bijvoorbeeld door deze aan te bieden als ‘belangrijke update‘.
Stap 3: Wees blij dat je weer gebruik kan maken HTML5 en CSS3!
De eerste pagina die elke gebruiker ziet na het inloggen op Facebook is het Nieuwsoverzicht (News Feed). Afhankelijk van het aantal vrienden en fan pagina’s kan dit overzicht behoorlijk snel vollopen. Dit komt de gebruikervriendelijkheid van het snel groeiende sociale netwerk natuurlijk niet ten goede.
Edgerank
Daarom hebben ze bij Facebook twee soorten overzichten bedacht; Meest recent (Most recent) en Belangrijkste nieuws (Top news). De eerste is heel simpel; de meest recente updates staat bovenaan.
De tweede laat het meest belangrijke nieuws voor de desbetreffende gebruiker zien. Dit is een handige functie en tevens de standaard instelling van Facebook. Dit is daarom de meest gebruikte instelling. Maar hoe wordt nu bepaald welke update het meest belangrijk is?! Daar is een mooie wiskundige formule ontwikkeld, beter bekend als Edgerank.
Objecten en Edges
Om de formule te begrijpen, moeten ook de andere termen bekend zijn. Facebook gebruikt de termen Objecten en Edges. Alle posts op Facebook worden beschouwd als Objecten. Dit kunnen zijn status updates, foto’s, video’s, links en vragen. Elke reactie op een Object, zoals een comment, een like of een tag wordt beschouwd als een Edge.
De formule
Σ Edge e = UeWeDe
U = Affiniteitsscore
W = Gewichtsscore voor verschillende Edges
D = Tijdscore
Affinitieit
Deze score wordt bepaald door de mate van interactie tussen de verzender van bericht en de ontvanger ervan. Hierbij wordt gekeken naar bijvoorbeeld dezelfde vrienden, naar comments die geplaatst worden, naar het aantal likes, het bekijken van profielen enzovoorts. Hoe meer interactie, hoe hoger de score.
Dit werkt overigens maar één kant op. Je kan de affiniteitsscore van je eigen Objecten niet verhogen door veel interactie te hebben met de ontvanger. Andersom kan de ontvanger wel de score verhogen door de jouw fanpagina te bezoeken, op like te klikken, comments achter te laten of foto’s te bekijken.
Gewicht
Elk soort Edge heeft een andere weging. Dit is afhankelijk van hoeveel moeite een gebruiker moet doen om een Edge te creëren. Bijvoorbeeld een comment weegt zwaarder dan like.
Tijd
Niemand zit te wachten op oud nieuws. Daarom kent Facebook een hogere score toe aan jongere Edges.
De gedachte
Hoe hoger de gezamenlijke waarde van alle bovenstaande scores, des te belangrijker een Edge zal zijn. En hoe hoger de totale score van alle Edges, hoe hoger de EdgeRank van een Object is. Objecten met een hogere EdgeRank komen hoger in de het overzicht Belangrijkste nieuws. Simpel toch?!
Tips voor een hogere Edgerank
Lok interactie uit
Om slim gebruik te maken van de eerder beschreven algoritme, is het van groot belang om veel interactie (zoals doorklikken, comments en discussie) uit te lokken bij de ontvangers. Op deze manier zullen toekomstige Objecten sneller en hoger in beeld komen bij de ontvangers. Dit doe je door:
- Interessante content die van nature interactie veroorzaakt
- Foto’s, video’s en linkjes zorgen altijd voor interactie. Maar voeg commentaar toe wat de gebruiker nog meer zal aanmoedigen om de foto te openen en eigen opmerkingen/likes achter te laten
- Het stellen van vragen aan de ontvangers
- Het deponeren van scherpe stellingen
- Een manier van schrijven die jouw doelgroep aanspreekt
Regelmatig posten, maar niet te vaak
Er wordt enorm veel content geplaatst op Facebook. Maar zorg er niet voor dat je vrienden of fans gek van je worden. Te veel is nooit goed en in dit geval kan het leiden tot het verliezen van volgers.
Volgens diversen onderzoeken bestaat er een relatie tussen het aantal volgers en het aantal keren dat er gepost wordt. Onderzoek heeft tevens uitgewezen dat bedrijven die om de dag een update publiceren de meeste fans hebben. Mede hierdoor is het niet verstandig om je Twitter account te koppelen aan je Facebook pagina omdat er dan een grote kans bestaat dat er te veel gepost wordt.
Vraag gebruikers om te delen
Wees niet bang om te vragen of iemand een Object willen delen. Als maar een paar gebruikers dit doen, kan het een ongelooflijk groot bereik hebben. Dit moet je overigens niet te vaak doen want je wil ook niet wanhopig overkomen.
Zorg dat ze de pagina bezoeken
Een belangrijk onderdeel van de affiniteitsscore is het bezoek van je pagina. De EdgeRank gaat hierdoor automatisch omhoog. Dit ziet Facebook namelijk als een signaal dat men interesse heeft in jouw verhaal. Dit kun je doen door speciale tabs te ontwikkelen met bijvoorbeeld gave reviews, bijzondere acties, speciaal nieuws, een wedstrijd of cool beeldmateriaal.
Er zijn enorm veel tools en diensten op de markt voor het vergaren en inzien van statistieken als het gaat om websites. Sommige daarvan gratis en sommige betaald. Mijn voorkeur heeft tot nu toe Google Analytics. Je betaalt er niets voor en je krijgt een hele hoop!
Google Analytics mag er misschien op het eerste gezicht wat complex uitzien, maar met een kleine tijdsinvestering kan het een hele waardevolle tool worden. In deze post zal ik enkele waardevolle, maar misschien wat meer verborgen ‘features’ behandelen.
- Navigatie-overzicht, waar vandaan en waarheen?
- Filter je data met reguliere expressies
- Mobiel gebruik van je website
- Het gebruik van de verschillende weergaven
Navigatie-overzicht, waar vandaan en waarheen?
Wanneer je van bepaalde pagina’s wilt weten hoe bezoekers op die pagina terecht zijn gekomen en waar naar toe ze vertrokken zijn, dan is het Navigatie-overzicht hier de perfecte tool voor. Wanneer je bijvoorbeeld op een specifieke pagina hebt geklikt, kun je daarna al deze details gaan bekijken door op “Navigatie-overzicht” te klikken.
Op dit Navigatie-overzicht van een pagina kan je dus in een oogopslag zien wat de instappunten en de uitstappunten van de pagina zijn. Daarmee kun je dus heel eenvoudig bepaalde doelen van je website analyseren. Stel dat je bijvoorbeeld de bezoeker vanaf een bepaalde pagina naar een andere pagina wilt leiden (bijvoorbeeld een pagina met een contact formulier) dan kun je hier op een snelle manier zien of deze route ook vaak wordt bewandeld.
Ook kun je hier inzicht krijgen welk percentage bezoekers een specifieke pagina direct benaderd hebben of via een andere pagina van je website. Met direct wordt hier overigens alles bedoeld wat niet via de eigen website komt, dus ook de ‘referrers’ en zoekmachines worden hier onder gerekend. Ook het percentage wat vervolgens de website verlaat of naar een andere pagina in je website gaat, kun je makkelijk in dit overzicht terug vinden.
Navigatie overzicht
Filter je data met reguliere expressies
In Google Analytics kun je reguliere expressies gebruiken gebruiken om verschillende specifieke sets van URL’s te filteren. Voor de wat geavanceerdere gebruiker kan dit een hele snelle manier zijn om de data op specifieke criteria te filteren.
Als je bijvoorbeeld onze blogberichten aan het analyseren bent en je wilt alleen even alle blogberichten over de Ei-pet bekijken, dan kun je gewoon een rapport van de belangrijkste inhoud opvragen en dan de pagina filteren op ” /actueel/.*?ei-pet”. Je zegt dan eigenlijk tegen Google: laat mij alle URL’s zien die beginnen met /actueel/ en vervolgens de tekst ei-pet in de URL hebben.
In de help sectie van Google Analytics kun je wat meer informatie terug vinden over het gebruik van reguliere expressies, een wat meer uitgebreide uitleg hierover vind je op WikiPedia.
Reguliere expressies in Google Analytics
Mobiel gebruik van je website
Het mobiel gebruik van internet explodeert, het is dan ook zeer belangrijk om te onderzoeken wat het mobiel gebruik van je website is, welke delen bezoeken ze wel en welke delen bezoeken ze niet. Google Analytics heeft een aparte sectie ingericht specifiek voor mobiel gebruik van je website. Gebruik deze tool om te kijken hoe en waar je eventueel je website moet aanpassen zodat die beter toegespitst is voor mobiele bezoekers.
Wanneer je al de nieuwe versie (ik moet er nog even aan wennen) van Google Analytics gebruikt kun je de mobiele sectie vinden onder: Bezoekers → Technologie → Mobiel. Als je nog met de oude versie werkt vind je de mobiele sectie onder: Bezoekers → Google Mobile → Mobiele apparaten.
Het gebruik van de verschillende weergaven
In veel van de rapportages van Google Analytics kun je voor verschillende weergaven van de data kiezen. Het kan af en toe super handig zijn om data in een andere weergave te tonen. Soms zie je dingen daardoor gewoon sneller, maar soms zie je ook geheel nieuwe informatie over je website.
Het wisselen tussen de verschillende weergaven is vrij simpel. Rechtsboven de data weergave vindt je een aantal buttons waarmee je kunt switchen tussen: Tabel, Percentage, Prestaties, Vergelijken en de wat ongelukkige vertaalde Draaitabel.
Buttons voor de verschillende weergaven
Tabel weergave
De Tabel weergave is de standaard weergave van Google Analytics. Deze weergave toont de data in weze zoals een spreadsheet programma als Excel dat ook zou doen.
Deze weergave is handig als je veel informatie naast elkaar wil zien. Als je bijvoorbeeld naar de belangrijkste inhoud gaat zie je in één overzicht de volgende zaken van elke individuele pagina; Paginaweergaves, Unieke paginaweergaves, Gemiddelde tijd op pagina’s, Bouncepercentage, Uitstappercentage en de gemiddelde waarde van een pagina (dit laatste heeft alleen nut als je ook doelen hebt ingesteld).
Tabel weergave in Google Analytics
Percentage weergave
Om in te zien wat sommige waarden in relatie tot elkaar betekenen is het heel handig om deze in de Percentage weergave (ook wel taart diagram of pie chart genoemd) te tonen.
In dit voorbeeld worden bijvoorbeeld de bezoeken via mobiele apparaten getoond. Je kunt nu in één ogenblik zien dat de bezoeken voornamelijk via iPhone en iPad binnenkomen, deze twee samen zorgen voor bijna 80% van de bezoeken. Ik twijfel zelf altijd nog over het feit of je een iPad wel een mobiel apparaat moet noemen. Natuurlijk, je kunt hem makkelijk meenemen maar dit zelfde geldt voor een laptop, het gaat mij er dan ook niet om of je hem mee kan nemen, maar wat is de situatie waar de mensen het apparaat gebruiken. Is dit comfortabel aan de keukentafel of op de bank (iPad), of onderweg bij het benzine station om nog snel even wat gegevens in te zien (iPhone).
Percentage weergave in Google Analytics
Prestaties weergave
De Prestaties weergave is weer een andere mogelijkheid om data weer te geven. Zoals de naam het eigenlijk al zegt is het een hele handige tool om de prestaties van verschillende pagina’s weer te geven. Zo kan je bijvoorbeeld in een oogopslag zien wat de prestaties van de getoonde pagina’s zijn op factoren zoals; bouncepercentage, gemiddelde tijd op de pagina’s, aantal bezoeken en ga zo maar door, maar dan netjes gepresenteerd in de vorm van een staafdiagram.
Prestatie weergave in Google Analytics
Vergelijkings weergave
De Vergelijkings weergave is uitermate geschikt om verschillende soorten data tegen elkaar te vergelijken. Je kan bijvoorbeeld heel snel in kaart brengen hoe het staat met de gemiddelde tijd die een bezoeker op een pagina doorbrengt in vergelijking met het gemiddelde van de site. Je kan dan in een oogopslag zien of dit bijvoorbeeld hoger of lager dan het gemiddelde is.
Standaard vergelijkt deze weergave de data tegen het gemiddelde van de site, maar je kan er ook voor zorgen dat die gaat vergelijken ten opzichte van de geschiedenis van een website. Hiervoor moet je bovenin in Google het vergelijken met een vorige periode aanvinken. In het onderstaande voorbeeld zien we een vergelijk van het mobiele gebruik van de website ten opzichte van een voorgaande periode.
Vergelijkings weergave in Google Analytcis
Draaitabel weergave
Het zal aan mij liggen, maar ik snap niet waarom deze weergave vertaald is van Pivot naar draaitabel, ik zie niet in wat er aan te draaien valt?
Maar in ieder geval biedt de draaitabel ook weer een ander kijk op de verschillende vormen van data. Je kan bijvoorbeeld aangeven “Draaitabel op regio” en dan de bestemmingspagina’s met het aantal bezoeken weergeven. Dit kan handig zijn om te bekijken welke pagina’s het voor welke regio’s goed doen.
Je zal bij ons zien dat we vanuit de regio Utrecht de meeste bezoeken krijgen op alle pagina’s die met onze ‘core’ dienst ‘Webdesign’ te maken hebben, dit komt natuurlijk omdat wij ons kantoor in Nieuwegein hebben en we goed gevonden worden op de term Webdesign Utrecht.
Interessant om te zien is dat we vanuit de andere regio’s veel bezoeken krijgen op onze pagina over de Ei-pet, deze pet hebben wij bedacht voor de opening van ons nieuwe pand en is zeg maar een ‘cult’ hit geworden.
Draaitabel in Google Analytics
Gebruikt u ook Google Analytics?
Bovenstaand is maar een fractie van wat er allemaal met Google Analytics kan, wilt u meer weten over Google Analytcis of wilt u er meer uit halen, neem dan contact op met ons. Wij kunnen u helpen.
Er zijn redelijk wat tools om het gedrag van bezoekers op een website inzichtelijk te maken te denken valt bijvoorbeeld aan Google Analytics. Maar niet alles is hiermee inzichtelijk te maken. Een andere methode om snel inzicht te krijgen in het klik gedrag van bezoekers is het gebruik van click heatmaps.
Wat zijn heatmaps?
Grofweg kun je zeggen dat er drie verschillende heatmaps bestaan:
- Eye tracking heatmaps, gebaseerd op de oogbewegingen van een gebruiker. De kosten die hier bij komen kijken liggen vrij hoog.
- Mouse movement heatmaps, gebaseerd op de bewegingen van de muis, er zijn online diensten (clicktale.com) die deze service aanbieden de kosten hiervan liggen al een stuk lager dan bij Eye tracking maar nog steeds hoger dan bij click heatmaps.
- Click heatmaps, gebaseerd op het klik gedrag van een gebruiker. Het gebruik van click heatmaps zullen wij hieronder wat verder uitlichten.
Wat is het doel?
Simpel weg zou je kunnen zeggen dat het doel is om gebruikers te gaan sturen.
Elke pagina op een website heeft in ieder geval één doel of het nu is om informatie over te brengen, gebruikers te laten registreren of direct een product te verkopen. Met click heatmaps kun je inzichtelijk maken wat je moet doen om een gebruiker zo goed als mogelijk naar dit doel te leiden. Ook kun je er bijvoorbeeld elementen mee terug vinden die in feite de gebruiker afleiden van het eigenlijke hoofddoel van een pagina, dit kan zijn door te veel ‘competitieve elementen’ of andere oorzaken die voor verwarring zorgen. Hierdoor is het ook een goed middel om bij A/B tests in te zetten. Ook kun je met heatmaps inzichtelijk krijgen waar mensen juist helemaal niet op klikken terwijl je dit wel zou willen/verwachten.
De verschillende tools
Er zijn uiteraard meerdere tools die click heatmaps kunnen genereren. Twee er van zal ik hieronder toelichten.
Google
In Google Analytics zit een vergelijkbare tool verborgen onder inhoud > analyse op pagina. Het gaat hier eigenlijk niet om een echte click heatmap maar om een overlay die visueel weergeeft waar de kliks op een pagina hebben plaats gevonden. Google heeft een groot nadeel en dat is (voor zover ik weet) dat ze kliks op verschillende plekken naar een zelfde link optellen en toebedelen aan een van de links. Dus als er op een pagina drie buttons of links staan die naar dezelfde pagina leiden weet je nog steeds niet op welke button/link men nu het meeste of het minste klikt.
Een ander nadeel is dat Google alleen kliks naar links in jouw website laat zien, ze registreert dus geen kliks naar externe sites en ook geen kliks op plekken waar helemaal geen link staat (wat ook interessant kan zijn om te weten). Uiteraard is een groot voordeel van Google dat het in Analytics geïntegreerd is en je er in weze dus niks extra’s voor hoeft te doen en daarmee is het natuurlijk ook gratis.
Voorbeeld van de Google overlay
Crazy Egg
Daarnaast hebben wij nog een andere tool uitgeprobeerd en dit is de service van Crazy Egg. Met Crazy Egg heb je verschillende opties voor weergave van de heatmap. Zo heb je de overlay zoals Google deze ook heeft maar daarnaast nog een echte heatmap en een zogenaamde confetti (dots voor kliks) weergave. Crazy Egg geeft je in tegenstelling tot Google echt de plek van alle kliks. Dus ook kliks op plekken met geen links en bedeelt kliks naar identieke links ook echt toe aan de plek waar ze thuis horen. Een nadeel van Crazy Egg is dat je voor elke pagina een apart stukje code in de website moet plaatsen waardoor het iets bewerkelijker wordt. Een ander nadeel treed op wanneer je een site hebt met verschillende headers die bijvoorbeeld met gebruik van een slider getoond worden. Crazy Egg kan maar een van deze slides tegelijk meten, wanneer je het effect van een andere slide wil meten zal je de metingen op de eerste slide stop moeten zetten voordat je dus kan gaan meten op de andere slide. Maar al met al is het een uitstekende tool om snel inzicht te krijgen in het klik gedrag van de bezoekers.
Voorbeeld van de Crazy Egg overlay
Conclusie
De allerbelangrijkste conclusie is dat je niet te snel conclusies moet maken, het is eigenlijk net als bij A/B testen en alle statistieken je moet een redelijk volume hebben voor dat je conclusie kan gaan trekken. Je moet dus niet een site gaan aanpassen gebaseerd op het klik gedrag van 50 bezoekers, wacht liever tot er bijvoorbeeld 1000 bezoekers zijn langsgekomen. Filter ook het klik gedrag van een eigen IP adres er uit dit kan vrij eenvoudig zowel in Google Analytics als bij Crazy Egg.
Gebieden met weinig tot geen kliks waar je ze wel zou verwachten moeten hoogst waarschijnlijk aangepast worden. Als gebruikers er niet op klikken terwijl je dat wel wil doen we ergens iets fout. Misschien ziet de link er niet uit als een link, misschien worden bezoekers te veel afgeleid door andere elementen op de website, misschien is de tekst rondom de link niet uitnodigend genoeg.
Gebieden met veel kliks die nergens naar leiden zijn vaak ook geen goed teken. Gebruikers verwachten waarschijnlijk dat ze daar wel kunnen klikken om meer te lezen over het onderwerp. Kijk hier dus goed of je geen links kan aanbieden naar meer content. Let hierbij wel op dat een percentage van deze zogenaamde lege kliks ook ontstaan door het feit dat veel mensen nu eenmaal tijdens het lezen stukken tekst selecteren of zo maar wat aan het klikken zijn als een soort ‘stress relief.
Al met al geven click heatmaps je een snel inzicht in het gedrag van bezoekers en kunnen er verrassende resultaten naar voren komen, wanneer je deze met gezond verstand interpreteert kan het een uitstekend hulpmiddel zijn.
Crazy Egg heatmap voorbeeld
Voorbeeld van de confetti view in Crazy Egg
Twitter, wie kent het niet? Twitter is een prachtig medium; je kunt lekker spuien, beetje kletsen, flink klagen, en dat alles vanuit je luie stoel. Maar is dat alles? Bij Clearsite hebben wij de mogelijkheden en onmogelijkheden van “geautomatiseerde tweets” onder het genot van een biertje en/of een colaatje nog eens doorgenomen.
Zo hebben we gedacht aan het automatisch tweeten van een nieuwe vacature of een nieuw artikel op je blog. Heel logisch zeg je? Inderdaad, maar er zijn nog genoeg (nieuws)sites die dit niet doen en van degene die hun nieuws wel op Twitter gooien, zijn er velen die dat niet geautomatiseerd doen.
Ook hebben we minder conventionele dingen besproken. Het reguliere ‘contactformulier’ kennen we wel, maar wat dacht je van deze; het contactformulier vraagt om je twitter-naam en je bericht. Het bericht word geplaatst als direct-bericht en de discussie komt op gang.
Sommige ideeën lijken geweldig. In plaats van een fout-log of een fout-email van een website (typisch iets voor ontwikkelaars); waarom deze niet in een tweet zetten? Alle betrokken ontwikkelaars volgen deze tweets en het probleem kan worden opgelost. Inderdaad, dat is heel nuttig, maar bij het discussiëren werden ook een paar ‘keerzijden van de medaille’ genoemd. Zoals bijvoorbeeld de afhankelijkheid van een externe dienst of de grote hoeveelheid twitter accounts die je bij moet gaan houden. Dat maakt het een stuk minder aantrekkelijk.
Wat denk jij? Doen we al genoeg met Twitter of juist niet genoeg? Kom maar op met die reacties!!
Dat we vaker gevonden worden via Google op het woord “ei pet” dan op het woord “clearsite” is op z’n zachts gezegd bijzonder te noemen. Onderstaand een knipsel uit Analytics om deze bewering kracht bij te zetten.
Maar daar stopt het succes niet! De Ei-Pet is al aan een mooie internationale tour bezig. Zo ontvingen wij foto’s uit Frankrijk, Zuid Afrika, en Oostenrijk, waar de deelnemers van “Oh Oh Tirol” vochten om de felbegeerde pet.
Daarbij ontvangen wij regelmatig mailtjes, tweets en commentaren op de site. De pet is inmiddels succesvoller dan zijn bedenker, het moet toch niet gekker worden…
Wij houden de ontwikkelingen in ons vakgebied nauwlettend in de gaten. Maar helaas kunnen we niet alles direct toepassen omdat de rest van de wereld er ook klaar voor moet zijn. Dit keer de (voorlopige) Do’s and Don’ts van HTML5 in combinatie met CSS3.
CSS-Transitions
Allereerst gekeken naar CSS-Transitions. De animatie die wij op onze eigen homepage in de header gebruiken, is gemaakt met behulp van JavaScript. Dit zou je ook met puur CSS kunnen bereiken. Grote voordeel is dan dat je niet afhankelijk bent van JavasScript. Helaas is dit op dit moment nog toekomstmuziek omdat niet alle browser dit ondersteunen. Degene die dit wel ondersteunen zijn: Apple Safari (Windows, Apple OSX, iPhone, iPad, iPod), Google Chrome (Windows, Apple OSX, Google Android toestellen), Opera (Windows en Apple OSX) en FireFox 4.0.2 (Op dit moment alleen nog voor Windows). Voor de andere browsers moeten zouden we dus een fallback moeten gaan maken met JavaScript. Aangezien dit weer een x aantal uren gaat kosten (en tijd natuurlijk geld is) gaan we dit bij Clearsite voorlopig nog niet gebruiken. Do or Don’t? Don’t.
Minder plaatjes
Vervolgens het onderwerp van kleurovergangen, ronde hoekjes en schaduwen. De ontwerpers hier zijn er dol op; hoe gekker hoe beter. Maar de programmeurs zijn hier minder blij mee. Dit komt omdat zij altijd meerdere afbeeldingen moeten gebruiken en dit vervolgens ten koste gaat van de snelheid waarmee een website geladen wordt. De schaduwen moeten meestal ook een dynamische afmeting hebben, waardoor er rare capriolen uitgehaald moeten worden om dit te bereiken. Met CSS3 is dit echter geen probleem. Hiermee kan je namelijk deze overgangen, hoekjes en schaduwen maken zonder plaatjes te gebruiken. We zullen in dit stuk niet verder ingaan op de techniek maar deze wordt al door aanzienlijk meer browsers ondersteund, namelijk Apple Safari, Mozilla Firefox, Google Chrome en (zelfs) Internet Explorer (Vanaf versie 9). Do or Don’t? Do.
Local Storage
Een andere leuke feature van HTML5 is Local Storage. Local Storage is een feature die het mogelijk maakt om gegevens die een gebruiker invult in bijvoorbeeld een formulier, direct op zijn of haar computer op te slaan. Dit kan handig zijn wanneer bij het invullen van een formulier de computer/browser crasht. Alle ingevulde informatie is dan al op de computer van de gebruiker opgeslagen en wordt dan bij het opnieuw openen van het formulier weer ingevuld. Echter neemt dit wel een risico met zich mee bij openbare computers m.b.t. privacy. Een goed ingestelde openbare computer wist bij het afsluiten van de computer alle lokale gegevens. Echter komt het vaak voor dat dit niet goed gebeurd en andere (kwaadwillende) personen er dus misbruik van kunnen maken. We gaan nog verder kijken wat de mogelijkheden van Local Storage zijn, waarbij privacy een belangrijk onderwerp blijft. Een optie zou al zijn dat bij het succesvol verzenden van een formulier, de opgeslagen gegevens gewist zouden worden. Do or Don’t? Eerst nog verder onderzoeken.
Google likes it
Het allergrootste voordeel is misschien nog wel dat Google een HTML5 pagina, die geheel volgens de standaarden is opgebouwd, een hogere waardering geeft. Uit eigen ervaring kunnen wij inmiddels zeggen dat het ons in ieder geval nog nooit is gelukt om een nieuwe website al 2 uur na de livegang in Google te krijgen. Op Om 10 uur is deze website online gegaan en om 12 uur stond hij al geïndexeerd in Google. Een goede ontwikkeling vinden wij.
Al met al weer de moeite waard geweest om hier dieper in te duiken. We keep u posted!
Vorige week donderdag benaderde Terberg Leasing ons voor een mini-website. Na het weekend zijn we direct aan de slag gegaan met het ontwerp. Na de goedkeuring van dit ontwerp, konden we gelijk aan de slag met het bouwen van de website. Hierin komen een paar leuke technieken terug. Eén daarvan is de slider in de header met behulp van JavaScript. De website is verder gemaakt met HTML5, CSS3, jQuery (JavaScript Library), PHP en MySQL. Wederom een leuk project met snelle communicatie tussen Clearsite en Terberg Leasing.
Bekijk het resultaat hier.
Heerlijk, nooit meer visitekaartjes nodig, gewoon online, zoals het hoort!!
www.mynameise.com
Nog geen reacties - Laat nu je reactie achter