Definisjonen på CSS er: et stilark språk som brukes til å legge opp innhold på en nettside på en ønsket måte.

For å forstå hvordan dette fungerer kan det være verdt å ta en titt på CSS zengarden . Her kan du se hvordan det samme innholdet forandrer utseende ved bytte av stilark. Du finner ikke gode nettsider i dag uten et stilark som bestemmer design og brukervennlighet.

CSS er et levende språk som utvikler seg hele tiden. Funksjonaliteten i CSS kontroleres av W3C som setter en standard som nettlesere skal følge.

Først godkjenner W3C nye funksjoner og metoder, så implementerer nettleserne disse i de neste versjonene. Desverre tar denne prosessen ofte lang tid, spesielt med Internet Explorer.

Det jeg har lyst til å vise her er måten vi kan animere innhold ved hjelp av CSS3. Dette kan være et bra alternativ til JavaScript og Flash. Dessverre er det noen nettlesere (Internet Explorer) som har vanskeligheter med å vise dette. Bruker du en eldre versjon av Internet Explorer anbefaler vi deg å enten oppdatere til siste versjon eller laste ned Firefox eller Chrome.

Funksjonene jeg vil vise ligger i metodene:

• Transforms (Transformerer et objekt)
• Transition (Animerer et objekt over tid)
• Animate (Animerer et objekt over tid, denne metoden er litt mere avansert)
• Box-shadow (Legger indre eller ytre skygge på et objekt)

Eksemplene under er overdrevet for å vise CSS funksjonen bedre. Du ville sjeldent brukt disse nye stilene på samme måte.

Transformering av objektene

Som du ser fra tabellen over er denne metoden støttet av alle moderne nettlesere. Under ser du et par eksempler på forskjellig bruk av transformeringsmetoden.

Animasjoner med CSS3 på Metronet

Google Analytics Certified Partner Summit

Det mest spennende hvert år er å få en snik-kikk på ny funksjonalitet som er på vei inn i Google Analytics. Dette året var intet unntak. I tiden fremover kommer det til å lanseres mange nye funksjoner som vil gi Google Analytics en ny dimensjon. Dette vil gjøre det enklere å forstå brukernes behov på din nettside. Vi kan desverre ikke gi mer informasjon om disse funksjonene da dette er konfidensiellt. Vi kan bare oppfordre alle til å følge med på Google sin offisielle Analytics-blogg. Vi vil også komme tilbake med våre kommentarer når anledningen er der.

Google Main Campus

Google Analytics er et analyseverktøy som vil fungere for brukere/bedrifter av alle størrelser og på alle nivåer. I dag har faktisk over 50 % av internett (!) installert dette verktøyet. Og det spennende er at verktøyet utvikler seg raskt i takt med internett og internettbrukere.

En ting vi kan være mer spesifikke om allerede nå, er den lenge ventede utfasingen det gamle brukergrensesnittet. I løpet av de 3-5 neste månedene vil Google sørge for at alle brukere av GA kommer seg over på den nye versjonen (v5). All ny funksjonalitet krever at man bytter. Om noen måneder vil de altså stenge V4 helt for brukere, så man kan først som sist gjøre seg vant med det nye grensesnittet.

Har du ikke byttet ennå, viser bildet nedenfor hvor du kan gjøre det.

Dette har vært to ekstremt inspirerende dager for oss. Vi gleder oss veldig til å være med dere og ta webanalyse et stort steg videre i tiden som kommer. Dersom dere har spørsmål, innspill, forventninger eller noe annet på hjertet om webanalyse, håper vi dere kontakter oss.

Google Store

Hilsen Mattis og Petter fra et trivelig hotellrom i San Francisco!

GACP Summit 2011 overview på Metronet

Evercookien lager informasjonskapsler på 10 forskjellige steder til nå (det var 8 steder for noen dager siden!). Den lager alt fra http informasjonskapsler til flash informasjonskapsler. Klarer du ikke å slette alle kapslene vil evercookien lage nye informasjonskapsler på de stedene du slettet informasjonskapslene!

Formålet med evercookien er rett og slett å lage en ”presistent cookie” (vedvarende informasjonskapsel) som det ikke skal gå an å slette. Ganske genialt egentlig, men er dette noe vi vil ha?

Fordeler:

• Nettsider kan lettere lagre dine preferanser
• Passordinformasjon kan lettere lagres
• Du kan slette vanlige informasjonskapsler, mens de viktige informasjonskapsler blir værende.

Ulemper:

• Du kan være overvåket uten å vite det.
• Nettlesere per i dag er ikke satt opp til å kunne slette evercookien.
• Andre kan ta kontroll over nettleseren din og slette dine informasjonskapsler.

En utfordring jeg ser med evercookien er at brukere vil bli mer forsiktige som igjen vil gjøre det vanskeligere for nettsider, analyseverktøy og andre ting som bruker informasjonskapsler for å bedre brukeropplevelsen på nett.

Sammy skriver at han har til nå bare funnet en løsning som stopper evercookien og det er å bruke nettleseren Safari i Private Browsing Mode.

Evercookie et open source prosjekt som det bare er å ta ibruk.
Vil du vite mer om den kan du ta en titt på Samy’s egen side

Evercookie, cookien du ikke blir kvitt på Metronet

Det nye scriptet har følgende fordeler:

• Scriptet laster raskere enn det gamle scriptet grunnet at det kan lastes parallelt med resten av scriptene på siden (laster ca 17% raskere enn det gamle scriptet).
• Bedre datasamling og nøyaktighet.
• Færre side- og sporingsfeil grunnet eliminering av gamle problemer med lastingen av JavaScript.

Enkelt forklart er scriptet delt inn i 2 deler:

• Del 1 lagrer all nødvendig sporingsinformasjon.
• Del 2 lager logikken som gjør at det er mulig for de fleste nettlesere å laste Analytics scriptet parallelt med andre script på siden, som igjen reduserer nedlastningshastigheten på nettsiden.

Hvor plasseres det nye scriptet?

I motsetning til det gamle scriptet som skulle ligge et sted mellom <body> </body>, burde det nye plasseres nederst i <head> delen av kildekoden, altså rett før lukketaggen </head>. Denne plasseringen øker sannsynligheten for at informasjon vil bli sendt til Google Analytics før brukeren forlater siden.

For et års tid siden skrev Petter et innlegg om Google Analytics – tilpasset script. Denne tilpasningen gjorde det mulig å spore Norges største søkemotorer og kataloger som spesifikke søkemotorer i Google Analytics. Vi har nå gjort den samme tilpasningen for det nye scriptet.

Fordelen med å bruke Metronets tilpassede script er at vi oppdaterer og gjør endringer i listen over norske søkemotorer fortløpende, så enten det er forandringer i gamle aktører eller nye aktører på markedet, vil du som bruker alltid ha den siste oppdateringen.

Vil du bruke denne tilpasningen, kopierer du scriptet under og legger det nederst i <head> delen (som sagt tidligere, rett før </head> taggen). Deretter bytter du ut 'UA-XXXXXX-X' med din egen Google Analytics ID.

<script type="text/javascript">
var _gaq = _gaq || [];
_gaq.push(['_setAccount', 'UA-XXXXXX-X']);
</script>

<script src="http://www.metronet.no/script/asynchronous/metronet-ga-f-s-mod.js" type="text/javascript"></script>


<script type="text/javascript">
_gaq.push(['_trackPageview']);
(function() {
var ga = document.createElement('script');
ga.type = 'text/javascript'; ga.async = true;
ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);   })();
</script>


Trenger du hjelp eller rådgivning angående migrering til det nye scriptet er det bare å kontakte oss

GA Asynchronous tracking – tilpasset skript på Metronet

Hvordan klarer AttentionWizard å etterligne hva brukerne ser på?

AttentionWizard bruker meget avanserte AI (kunstig intelligens) algoritmer for å simulere hva brukeren ser og legger vekt på på en nettside ved første øyekast. Dette inkluderer bl.a. musbevegelser og fargekontraster.

AttentionWizard sine resultater skal være opp mot (og over) 75% korrekt sett i forhold til å sette sammen en fokusgruppe og følge synlighet og mus peker bevegelser på nettsiden. Etter endel testing syns vi det virker som verktøyet fungerer veldig bra.

I dette blogginnlegget viser jeg hvordan heatmapen generert av AttentionWizard for VG og Metronet. (Hvis en webutvikler hos VG leser dette og sitter på et «ekte heatmap» for VGs fokusgruppe, hadde jeg satt pris på om du tok kontakt slik at vi kunne få sammenlignet resultatet).

Heatmap for VG

Som du ser av bildet under, legger brukeren først merke til annonsen til høyre midt på siden, før blikket beveger seg opp til pilleboksen i banneren vaksineguiden.no, og videre ned på artikkelbildet midt på siden osv. (Jeg har lagt på større tall og piler i bildet for synlighetens skyld)

VG.no med heatmap. De varmeste områdene viser hva brukeren legger mest vekt på.

Det er ganske interessant å se hva brukerne først legger merke til. Og det er ikke alltid den øverste banneren som koster skjorta. Har du noe som står i kontrast med resten av siden vil det lettere bli lagt merke til.
Hadde toppbanneren hatt mer kontrast ville heatmappen sett annerledes ut.

Heatmap for Metronet

Fra heatmappen under ser vi at brukeren først legger merke til bildet mellom de to menyene, så videre til søkefeltet og blogg knappen, deretter ned til menyen under bildet, og videre til logoen i venstre hjørne osv.

Metronet.no med heatmap. De varmeste områdene viser hva brukeren legger mest vekt på.

Vi ser her at vi vil ikke ha problemer med å utheve enkelte budskap grunnet at vi har holdt oss til spesifikke farger og nyanser.

Situasjoner det kan være et nyttig verktøy

• I designprosessen av en ny nettside.
• Se nøyere på problematiske sider som konverterer dårlig.
• Se på eksisterende sider som skal redesidnes.

AttentionWizzard er for øyeblikket bare ute for betatesting, men hvem som helst kan søke om å bli en betatester hvor du da får 1 heatmap per døgn.

Hva er det brukerne dine ser på? på Metronet

En ting Goolge ikke skriver om er at du ikke kan bruke funksjonene «Random» og «Math.Random». Gjør du det vil du få denne feilmeldingen:
Det oppstod en Flash-feil – annonsen kan ikke ha et tilfeldig nummer (cannot have a random number). Dette gjør dessverre at mulighetene er litt begrenset når det kommer til effekter.

Jeg er ikke sikker på hvorfor det ikke er lov å bruke random funksjonen i Flash. Kan det være fordi det er et sikkerhetshull?

Hvordan lage kompatible Flash bannere til Googles innholdsnettverk på Metronet

Internet Explorer godtar ikke informasjonskapsler (cookies) fra 2-bokstavs domener, fordi nettleseren ser på 2-bokstavs domener som et ekstra topdomene som brukes i andre land som for eksempel England (www.dittdomene.co.uk). Dette er et stort problem for 2-bokstavs domener, siden ca 50% av internettbrukere dessverre bruker Internet Explorer.

En informasjonskapsel er en ren tekstsetning med informasjon, som en nettside legger i nettleseren din så nettsiden kan huske hvem du er. Uten informasjonskapsler, har ikke nettsidene noe minne og vil sett på alle brukere som nye brukere.

Nettsider bruker informasjonskapsler for å være sikker på at du blir gjenkjent fra side til side, og at informasjonen du har gitt nettsiden blir husket. Hadde ikke en nettbutikk tatt ibruk informasjonskapsler ville nettbutikken glemt hva du hadde handlet før du kom til betalingssiden.

Google Analytics bruker informasjonskapsler til å rapportere trafikken på nettsiden. Godtar ikke nettleseren informasjonskapsler blir det heller ikke rapportert noen trafikk.

Men det er en workaround for å få Google Analytics til å fungere for 2-bokstavs domener i Internet Explorer. Legg til linjen under i Google Analytics spotringskoden og sporingen vil fungere:

pageTracker._setDomainName(«www.XX.no»);

For Legacy sporingskoden koden:

_udn = «www.XX.no»;

Håper dette hjelper dere med 2-stavelses domener der ute ☺

Google Analytics, Informasjonskapsler og korte domener på Metronet