V4D5 - blog

Fantastisk god CSS-bog

Tue, 09 Mar 2010 12:47:07 +0100

Jeg har altid betragtet CSS lidt ligesom moms - et nødvendigt onde (også selvom man bor i Nordjylland ), men for et års tid siden åbnede mine øjne sig, og jeg er blevet meget interesseret i CSS (nok primært pga CSS3). Well - dette blog-indlæg skal ikke handle om mig og CSS, men er en anmeldelse af Dan Cederholms bog Handcrafted CSS, som er hans seneste bog.

Først og fremmest vil jeg sige, at du kun skal købe denne bog, hvis du selv sidder og laver CSS og har en interesse i det. Men har du interesse for CSS, så er det en helt og aldeles fantastisk bog. I mine øjne leverer Cederholm en stribe af eksempler på god CSS og kreativ brug af CSS.

Som alle ved så kan IE være en bitch, når det gælder CSS og bogen kommer ofte ind på, hvordan man håndterer IE og forskellene og taler om begrebet "progressive enrichment". Et eksempel herpå kan være at lave en box med runde hjørner med border-radius tag'et. Hermed har man en firkantet box i IE, men fine runde hjørner i Chrome, Firefox, Opera og Safari. Altså får de, der vælger en anden browser end IE, en lille gevinst ved at de er lige lidt mere fremme i skoene.

Er du allerede rimelig til CSS, så kan bogen sagtens være en god reminder om at skrive god CSS. Er du helt grøn, vil jeg i stedet anbefale hans bog Bulletproof Webdesign.

Bogen har meget fokus på de kommende funktioner i CSS3, og hvordan du allerede nu kan begynde at udnytte dem til din fordel uden at det kommer til at gå ud over dine besøgende

Dan Cederholm gør sig megen umage med at skrive vedligeholdelses-venlig kode og har i mine øjne en helt fantastisk tilgang til xhtml og CSS.

Jeg er ekstremt begejstret for Handcrafted CSS (som i øvrigt også kan købes med en DVD, men læser du bogen, kan du roligt spring DVD'en over) og det sker rigtigt sjældent, men jeg tør godt give den 5 ud af 5 stjerner.

Glæder mig allerede til hans næste bog.
Bogen kan købes ved e-lounge for 185,01 (dejligt med runde tal, ikke?)

Her kan du lige få en teaser fra DVD'en

Og du skal da også have link til den officille side

Hvilken knap giver pote?

Mon, 08 Mar 2010 07:37:53 +0100

I fredags mødtes jeg med ejeren af Petdreams.dk - en webshop, der sælger hundeartikler og katteartikler. De står og vil lave re-design på siden og har i den forbindelse fået lavet en ny køb-knap. Hvilken fejl!!.. Petdreams.dk har een af de absolut fedeste køb-knapper i danske webshops. Se lige her:

De vil nu udskifte den med denne kedelige knap:

Jeg sagde, at det var en kæmpe-fejl, de var i gang med og spurgte, om jeg måtte smide det til afstemning her på bloggen. Det måtte jeg godt, men Kristian, der er vicevært på Petdreams.dk, kunne ikke garantere, at han ville følge resultatet.

Men venner... I skal tale. Hvad siger I? Skal Kristian benytte den nye eller den gamle knap? (Se bort fra farverne - det er mere designet - farven bliver tilpasset designet).

PollPub.com VoteSkal Petdreams bruge den gamle eller den nye knap?

Har du ellers eksempler på fede danske køb-knapper, så smid dem gerne i kommentarerne. Vi kan alle bruge lidt inspiration.

Sådan halverer du din forsides afvisningsprocent

Thu, 04 Mar 2010 07:28:35 +0100

Da jeg hørte, at Mogens Møller vha split tests havde nedbragt sin forsides bounce rate med 50% på sit online galleri Last Touch, begyndte jeg at fedte for ham, for at få ham til at gæsteblogge her på V4D5.
Og det lykkedes - derfor kan jeg i dag byde velkommen til gæsteblogger nr. 2 på bloggen.

Mogens Møller er desuden konsulent hos webbureauet MCB, som er specialiseret i e-handelsløsninger (hvor man faktisk kan benytte Visual Website Optimizer, så er du på udkig efter en webshop, bør du kontakte Mogens for at få et godt tilbud på en langtidsholdbar løsning. Nå - det er vist tid til at overlade ordet til Mogens:

Webshoppens mål

Jeg lancerede webshoppen LastTouch.dk for godt et halvt år siden. Det første stykke tid var mit primære fokus at få besøgende i butikken gennem god gammeldags SEO. Omkring nytår nåede jeg mit første delmål nemlig fast at have over 250 besøgende om dagen. Som belønning måtte jeg flytte mit primære fokus videre til næste fase at konvertere disse besøgende til kunder eller som minimum til nyhedsbrevstilmeldinger.

Jeg vil optimere min webshop hvor skal jeg starte?

På dette tidspunkt var jeg meget i tvivl. For hvor er det lige man skal starte, når éns webshop generelt skal optimeres. Da jeg skulle nå målet med besøgende til sitet var opskriften forholdsvis enkel. Skaf en ordentlig røvfuld indgående links, skriv kvalitetsindhold og overhold Googles retningslinjer omkring webdesign (ja ja, jeg ved godt mange SEO-hajer vil gøre det til en større videnskab :-) ). Men hvor pokker er det lige, jeg skal starte, når nu min ellers glimrende webshop for alvor skal spille bas?

Afvisningsprocent på mest populære landingssider

Jeg dykkede ned i mine Google Analytics rapporter og fandt frem til hvilke sider, der var mest besøgt i webshoppen. Jeg tænkte, dette måtte være det oplagte sted at starte. Ikke overraskende var mine mest besøgte sider serieoversigten og forsiden (optimering af serieoversigten må komme i et andet blogindlæg). I statistikkerne stod der, at afvisningsprocenten på forsiden var ca. 32%. Altså forsvandt knap 1/3 af de besøgende på min mest besøget side igen uden nogensinde at komme videre. Det måtte kunne gøres bedre og hermed var første delmål i optimeringsprocessen defineret nedbring afvisningsprocenten på forsiden fra 32% til 20%.

Hvorfor afviser 1/3 af de besøgende forsiden?

Jeg havde selv arbejdet intensivt med webshoppen det halve år forinden og mente derfor nogle friske øjne måtte være det mest oplagte til denne opgave. Altså få nogle personer fra vores målgruppe til at besøge webshoppen og give mig ærlig feedback uden at blive afbrudt af en bedrevidende webshopejer. Det viste sig, at være de bedste timer jeg nogensinde har investeret i forløbet med denne webshop.

At få sandheden serveret omkring éns webshops brugervenlighed kan være hård kost for en webshopejer - men jeg kan love dig, det er guld værd! Det gør ondt at få fortalt, at dette super fancy JavaScript som simulerer en smart flash effekt med de nyeste produkter og som har taget flere dages udvikling, at det i virkeligheden forstyrrer mere end det gavner! Ja, det gør ondt. Og nej, du nænner ikke at fjerne scriptet med det samme, for det kan jo være, denne tumpe blot ikke fatter, hvor langt fremme i skoene du er.

Konklusionen fra disse brugertests blev, at forsiden var alt for uoverskuelig. Testpersonerne havde svært ved at finde ud af, hvor de skulle trykke og generelt, hvordan de skulle komme videre fra forsiden.

Ok, så indsætter vi en stor grøn pil!

Hvis testpersonerne har så svært ved at finde ind til malerierne, skal der vel blot indsættes en stor grøn pil. Det var min umiddelbare tanke. Jeg nænnede ikke at fjerne alle mine fine forsideelementer: nyhedsboks, malerisøgning, kunstnerbanner, virksomhedsbanner, FAQ og selvfølgelig det smarte flash-agtige JavaScript. Jeg besluttede derfor, at beholde alle forsideelementerne og blot tilføje en stor tydelig pil above fold med teksten: Find dit maleri.

1. splittest: Original vs. versioner med tydelige pile

Eftersom jeg har været fast læser her på bloggen noget tid, besluttede jeg at teste denne nye opsætning vha. Google Website Optimizer. Og som Morten tidligere har haft succes med, skulle denne pil naturligvis testes i flere farver. Jeg oprettede derfor en A/B splittest og lavede en forsideversion med en grøn pil og en version med en rød pil.

Original

Grøn pil

Rød pil

En snæver sejr til grøn pil

Til min store ærgrelse viste testen ikke nogen signifikant ændring i afvisningsprocenten:
- Original: 32%
- Rød pil: 36%
- Grøn pil: 29%

32% til 29% var da et stykke vej mod de 20%, men dog stadig langt fra målet. Da webshoppen kun havde et par salgs- og lejekonverteringer om dagen, var det ikke muligt at bruge disse konverteringsdata til noget på så kort tid (tendensen var dog den samme dvs. dødt løb). Forsiden var altså stadig for uoverskuelig!

Hvad er det absolut vigtigste i webshoppen?

Jeg besluttede derfor at viske tavlen ren og som vi siger i Holstebro få ren røv at trutte i. Altså gentænke forsiden helt fra bunden og finde frem til:

Hvad ønsker jeg, den besøgende skal gøre, når personen rammer forsiden?
Hvilke informationer er nødvendige at kommunikere til den besøgende, for at personen vil foretage den ønskede handling?

Hvad skal den besøgende gøre?

Jeg kom frem til, at den besøgende enten skal:

Gå videre ind på vores serieoversigt, som er første skridt i processen om at finde et maleri
Tilmeldes vores nyhedsbrev

Hvad skal den besøgende vide?

For at den besøgende skal bevare lysten til at søge videre på denne webshop, som de aldrig før har besøgt, skal personens frygt og skepsis fejes af banen. Dvs. de tvivlsspørgsmål som får 1/3 af de besøgende til at forsvinde igen, skal besvares hurtigt og præsenteres tydeligt.

I vores tilfælde er det bl.a. informationer som: To måneders fortrydelsesret, ingen bindingsperiode, lav månedlig ydelse, mulighed for løbende udskiftning mf.

2. splittest: Grøn pil vs. stripped-to-the-bone

Ud fra disse betragtninger om hvad den besøgende skal gøre, og hvad vi skal kommunikere for, at den besøgende rent faktisk gør det, lavede jeg en ny forsidesideversion. Naturligvis skulle battlen nu stå mellem den hidtidige vinder og den nye simple version.

Original

Simpel

Og vinderen blev

Stripped to the bone! Den nye simple version bankede den originale af banen med afvisningsprocenterne:
- Grøn pil: 29,8%
- Simpel version: 13,4%

Samtidig er konverteringsraten på nyhedsbrevstilmeldinger fordoblet.

Målet er nået - afvisningsprocenten er mere end halveret!

Det opsatte delmål er nu indfriet. Afvisningsprocenten er kommet under 20%. For at denne optimering netop forbliver et delmål af den grundlæggende målsætning om at øge konverteringsraten, er det naturligvis essentielt, at de besøgende ikke blot skubbes videre og så forsvinder fra webshoppen på de næste sider. For mig ligger arbejdet nu i at optimere samtlige sider hele vejen i webshoppen, gennem checkout og helt til kvitteringssiden. Det er først når de besøgende kommer hertil, det for alvor bliver sjovt.

Husk på denne tretrinsraket

Mine erfaringer fra denne test kan sammenfattes i en enkel og effektiv tretrinsraket:
- Hold designet simpelt
- Kommuniker kort de vigtigste informationer
- Fokuser på tydelige klikbare elementer

Eller sagt med andre ord:
- KISS
- Kommuniker USP
- Tydeliggør CTA

Det er opskriften herfra på en effektiv forside! Jeg håber, du hang i hele vejen og forhåbentlig kan bruge mine erfaringer til selv at få optimeret din forside.

Kanal (over betalingsside) i Google Analytics

Mon, 01 Mar 2010 07:45:02 +0100

Dette blog-indlæg henvender sig primært til e-købmænd og udspringer af, at det er det område indenfor Google Analytics, hvor jeg får allerflest spørgsmål (også fra eksperterne i Analytics-konsulenthuse, så du skal ikke være ked af, at du ikke selv kan finde ud af det).

Det drejer sig om kanaler over 3.parts sider - altså siden, hvor brugeren indtaster sine kreditkortoplysninger på en sikker server som f.eks. Freepay, ePay, Quickpay etc. Der er to primære årsager til at få det sat ordentligt op:

Dine brugere, der når til check-ud proceduren er dine mest værdifulde brugere - og derfor er det sidste du ønsker, at de forlader siden midt i deres check-ud. Med en kanal i Google Analytics kan du se præcis, hvor dine brugere falder fra, så det er et meget værdifuldt værktøj
Hvis du ikke kan få "overført" din kilde hele vejen til din ordrebekræftelse, så kan du ikke se, hvor dine kunder kommer fra. Skrækscenarie! (det skal dog bemærkes at dette blog-indlæg som sådan ikke har noget med kilden at gøre - men de to ting hænger tæt sammen)

Hvordan griber du det an?

Typisk ser et check-ud flow nogenlunde således ud:

Indtast adresse
Godkend ordre
Indtast kreditkort
Ordrebekræftelse

Jeg har lavet baggrunden på trin 3 rød, da det er her vores "problem" (eller rettere udfordring, for det er ikke noget problem) opstår. For mens trin 1,2 og 4 er på dit eget domæne - f.eks. www.kondomaten.dk - så er trin 3 på din betalingsudbyders domæne. Og afhængigt af hvordan din betalingsløsning er implementeret, så er der to scenarier - og løsningen afhænger af, hvilket scenarie, du kaster dig ud i.

De to scenarier er:

Din Google Analytics trackingkode kan placeres på 3.parts domænet
Din Google Analytics trackingkode kan IKKE placeres på 3.parts domænet

Løsningen

(Heldigt blog-indlægget også inkluderer den, hva'?)
Nå - lad os tage dem een ad gangen.

Scenarie 1: Du kan placere din trackingkoden på siden

Sweet - du kan godt tracke besøget over 3.parts siden, men der skal lige tilføjes til fikumdik til din sporingskode og så er du all set.

Her skal du blot gøre tre ting:

Tilføje et par linjer kode til din sporingskode
Flytte din sporingskode
Tilføje lidt kode til dine links

Jamen lad os komme i gang.

1. Tilføj kode til sporingskoden

Du skal have tilføjet linjerne med fed til din sporingskode:

2. Flyt sporingskoden

Normalt har du sikkert din sporingskode til sidst på din side lige inden -tag'et, men nu er du nødt til at flytte den op, så den kommer før de links, der linker mellem din side og siden på 3.parts domænet. Du kan jo passende flytte det op lige efter -tag'et.

3. Tilføj lidt kode til dine links

Slutteligt skal der lige tilføjes lidt til de links, der linker mellem din side og 3.parts domænet. Dvs har du f.eks. et link ud til PostDanmark, så skal koden ikke tilføjes til dette link. Det er kun de links, der er mellem din side og 3.parts domænet.

Et link, der tidligere så således ud:


Klik her for at gå til sikker betaling

Skal nu se således ud:


onclick="pageTracker._link(this.href); return false;" >Klik her for at gå til sikker betaling

Nu kan du blot indsætte alle siderne i din kanal

Scenarie 2: Du kan ikke placere din trackingkoden på siden

Her skal vi have fingre i dét, der bliver kaldt en virtuel sidevisning. En virtuel sidevisning vil fremgå som en helt almindelig side under Indholdsmenuen i Google Analytics. En virtuel sidevisning laver man ved at benytte funktionen trackPageView() og et eksempel kan se således ud:


onClick="javascript: pageTracker._trackPageview('/sikker-betaling');">

Bemærk - det med fed er dét, du tilføjer linket.
Trinene før og efter siden på 3.parts-domænet tilføjer du bare helt normalt i din kanal.

En lorte-situation: -Det er noget møg, hvis det spænder over flere sider, hvor du ikke kan indsætte kode, da du jo så ikke kan lave virtuelle sidevisninger på "andet trin og fremefter på 3.parts domænet". Det er bare tough luck og jeg må nok henvise til dette indlæg

Det var alt for denne gang, folkens. Skal du have mere Google Analytics, så kan jeg varmt anbefale Analyticsbogen

Har du en DanDomain shop?

Fri, 26 Feb 2010 13:51:48 +0100

-Så er dette arrangement et must. Kristian Sørensen fra Cygnet afholder en yderst billig workshop med fokus udelukkende på DanDomain shops. Kort og godt kan det siges, at du vil blive introduceret til alt, der er af væsentlig interesse - og værdi ikke mindst - for en DanDomain shop-ejer. Vi snakker

søgemaskinevenlighed
nyhedsbreve
konverteringsoptimering af købs-flowet
gennemgang af administrationen
og meget mere

Alt i alt emner, der har en positiv indvirkning på din konverteringsrate. Og er det ikke noget, vi alle kan li'?

Om underviseren kan siges, at Kristian har haft fingrene nede i over 75 DanDomains shop, så enhver tvivl om hans kompetencer er vist ryddet af vejen.

Prisen er kun 1.495,- pr. deltager og det afvikles d. 28. april i Farum.

Du kan læse mere om arrangementet og tilmelde dig her: http://www.cygnet.dk/dandomain-workshop.asp

Der er p.t. kun 8 pladser tilbage, så skynd dig (til jyderne kan jeg afsløre, at der i maj eller juni bliver afholdt et lignende arrangement i det jyske).

Analyticsbogen er på gaden

Mon, 22 Feb 2010 21:11:45 +0100

Endelig kom dagen hvor vi kunne begynde at lange vores Google Analytics bog over disken. Bogen dækker stort set alle områder af Google Analytics. Vi har i hvert fald lagt os i selen for at afdække alle de hjørner, der kan have interesse for dig, der bruger Google Analytics.

Det skal ikke være nogen hemmelighed, at Jacob og jeg har haft et par heftige diskussioner omkring indhold og meninger - og det har været sjovt og udbytterigt. Ind imellem siger Jacob desværre noget fornuftigt, så jeg har måttet bøje mig. Heldigvis har jeg de fleste gange været stærkest og stædigst - så bogen er fyldt med jysk fornuft.

Bogen er lige omkring 300 sider lang og spækket med screendumps og eksempler. Den er opdelt i de tre faser, som webanalyse indeholder: Installation, opsætning og analyse - og så har vi opdelt disse tre i sektioner efter hvor meget du kan nå indenfor tre forskellige tidsrammer.

Særligt stolte er vi af, at Avinash Kaushik har skrevet forordet til bogen.

Nå - enough said... Fis du forbi Analyticsbogen.dk og snup evt. en gratis smagsprøve på ikke mindre end 78 sider.

Tak til Jacob for en god og clean fight.

Test case studies

Thu, 18 Feb 2010 12:57:43 +0100

For et stykke tid siden skrev jeg om Visual Website Optimizer, som jeg synes, er et super-værktøj. Manden bag, Paras Chopra, der sidder i New Delhi, ligger ikke på den lade side. Han har virkeligt smidt noget godt ud for os test-junkier.

Een af hans seneste produktioner er Ideafox, som han kalder en "case study søgemaskine". Det er nok næppe en søgemaskine, men det er ligegyldigt. Her skal vi fokusere på produktet og det er en gigantisk samling af test case studies.

Det fede er, at Paras har kategoriseret dem for os, så man f.eks. kan vælge case studies ud for udfordring (f.eks. nedbringe bounce rate eller øge downloads) eller man kan kigge ud fra website type (såsom dating eller e-commerce).

Så savner du et skud inspiration - eller er du stadig ikke overbevist om, at test er vejen frem - så skulle du ta' et kig på Ideafox.

Thumbs up til Paras her fra det kolde Danmark.

Shopcamp 2010 - med på en kigger

Thu, 21 Jan 2010 08:07:22 +0100

Sammen med Lars Bachmann afvikler jeg netop nu den første Shopcamp for 22 fremadsynede e-købmænd.

Der var flere, der gik forgæves og ikke kunne komme med. Det er jo super-ærgerligt for dem. Som et lille plaster på såret skal vi forsøge at twitte lidt om Shopcamp.

I Workshop-området kører denne side med tweets om Shopcamp og der står også, hvad vi laver. Du kan sende deltagerne en hilsen og komme på storskærmen ved at bruge hashtag #shopcamp.

Som sagt - følg med på sidelinjen her

Glædelig jul

Thu, 24 Dec 2009 14:48:05 +0100

Så blev det juleaften. For to år siden fejrede jeg juleaften på det argentinske bjerg, Aconcagua. Det var koldt, men rigtigt smukt. Og med et par billeder derfra, vil jeg godt ønske jer alle have en rigtig god jul.

Min udsigt juleaften

Vi havde også hvid jul deroppe

Bedre call to action på din Scannet shop

Sun, 20 Dec 2009 14:53:57 +0100

Jeg sad og legede med at DOM-scripte på en gammel Scannet shop for at kunne tilføje noget Analytics-funktionalitet og studsede så over, den der ultra-grimme [Læg i kurv] som man finder på ekstremt mange Scannet shops. Jeg tænkte "det MÅ man da kunne lave bedre" og gik så i gang med at rode rundt i administrations-modulet.

Jeg kunne ikke umiddelbart finde en løsning, så jeg DOM-scriptede mig frem til en anden løsning.

Advarsel: Jeg har testet dette på en enkelt Scannet-shop og det virker. Jeg tager ikke ansvaret for, hvordan det virker på din shop! (men der er ikke noget umiddelbart farligt i at prøve det).

Det du skal gøre er at logge ind i dit administrations-modul og klikke på "Sidehoved/sidefod".
I "Sidefod" skal du indsætte følgende kode:

Alt, du skal gøre er at trykke "opdater" og du vil nu have fine grønne knapper på din Scannetshop.

Desværre lykkedes det mig ikke at fjerne de grimme [ ] på hver sin side af knappen, men jeg er overbevist om, at du nu har en meget bedre call to action på din Scannet shop.

OBS: I eksemplet her bruger jeg min egen Læg i kurv-knap. Den har jeg copyright på og du må IKKE bruge den på din shop. Du skal i stedet linke til din egen knap i linjen knap.src = "http://www.kondomaten.dk/grafik/lik.png"; (og nej - du må heller ikke bare kopiere den og smide den på din egen server).