GTM, et springbrett til innsikt

Har du ikke Google Tag Manager sier du? Få det på plass sier jeg.

Når jeg jobber med digitale løsninger liker jeg å designe med data. For tiden har jeg lagt min elsk på verktøyet Hotjar. For å installere en slik godbiter må du legge inn en kode i løsningen din. Det må gjøres av en IT-teknisk person. Med GTM på plass så slipper du det. Du må riktignok ha hjelp til å legge inn GTM, men når det er gjort åpner en ny verden seg.

Du har forhåpentligvis Google Analytics installert. Her klarer du å finne ut hvor mange som besøker deg, hvilke sider som er mest populære, og hvilke sider som har høy fluktfrekvens. Er du litt mer avansert vet du også konverteringsfrekvensen på kjerneoppgavene, og du har identifisert konkrete forbedringer som vil øke salget og minske frustrasjonen til dine kunder. Har du et standard oppsett av GA finnes det mange spørsmål du ikke får svar på. For eksempel hvor mange som spiller av filmene dine, hvor lenge filmene blir sett, eller hvor mange som bruker den elskede bildekarusellen som pryder forsiden din. For å få disse svarene trenger du få satt opp aktiviteter i GA. En teknisk jobb. IT må kontaktes. Kanskje har IT-avdelingen din laber Google-kompetanse? Med GTM på plass blir jobben enklere. Alt gjøres i Googles grensesnitt. Det kan òg riktignok være ganske teknisk, men du finner mange gode veivisere for å komme frem til mål.

Ble du interessert i Google Tag Manager nå, kan jeg anbefale iPULLRANK sin guide. De sier det så bra allerede i første setning:

In the world of digital marketing, if time is money, then data is pure gold.

De mest nerdete av dere vil kanskje legge merke til at Klokkeklart ikke har GTM. Bra observert.

Har du GTM? Hva bruker du det til?

Hva er flexbox?

Flexbox er et kraftig verktøy i CSS-verktøykassen. Det løser noen vanlige utfordringer med dagens float-baserte layouts, og åpner opp for nye muligheter.

Ikke en erstatning for ‘float’

Før jeg gravde meg ned i hva flexbox virkelig var, hadde jeg en oppfatning av at det var en erstatning for float. Etter å ha brukt det en stund, innser jeg at det er mer et nytt verktøy, enn et verktøy som erstatter et annet. Floats har fortsatt sin plass, men flexbox er et bedre verktøy for mange av jobbene floats tidligere har gjort.

Det betyr også at man kan ta et nettsted som allerede eksisterer og drysse flexbox der det måtte være hensiktsmessig.

Hvor god er støtten?

I følge caniuse.com har vi i Norge en støtte på 96,44 %. De resterende prosentene består av Internet Explorer 8 og 9. Du bør selv sjekke besøksstatistikken eller målgruppen (hvis du ikke har lansert enda) for å se hvor god støtten er.

Du bør også ta hensyn til prefikser og nettlesere som støtter den utdaterte anbefalingen. Verktøy som Sass/Compass, Autoprefixer og lignende kan hjelpe deg med dette.

Hva gjør flexbox bedre enn floats?

Flexbox fungerer på en helt annen måte enn floats. Først og fremst til å løse det som tradisjonelt sett har vært vanskelig å løse med floats, men i fremtiden vil vi se nye layouts og løsninger dukke opp på grunn av mulighetene flexbox gir oss.

Vanlige problemer man møter på når man jobber med HTML/CSS som flexbox løser:

Vertikalt sentrere et element

For eksempel hvis du ønsker å få tekst midt på et bilde både horisontalt og vertikalt.

Sentrert tekst, både horisontalt, vertikalt og over flere linjer
Illustrasjon av tekst som ligger sentrert både vertikalt og horisontalt over et fotografi.

 

Jevnt distribuere elementer horisontalt

Uten å måtte ta hensyn til hvor mange elementer det er. For eksempel i en horisontal navigasjonsmeny hvor du ønsker at elementene jevnt skal distribuere seg over hele navigasjonslinjen.

Lik avstand mellom menyelementene
Illustrasjon som viser jevn distribusjon av luften mellom elementene i en navigasjonsmeny.

Endre rekkefølgen på elementer i DOM-en

For eksempel hvis man på mobil ønsker en annen rekkefølge enn den man har i DOM-en.

Lage grids enklere

Her kan man enkelt distribuere bilder eller produkter jevnt, og enkelt ta hensyn til den responsive delen av det.

Det åpner også opp for nye muligheter layout-messig; både på desktop og på mobil.

Med hjelp av conditional classes kan du også bake inn en grasiøs fallback til de få prosentene som sitter på eldre nettlesere som IE8 og IE9.

Hvordan fungerer det?

I prinsippet har man to nye elementer i flexbox: Flexbox-kontaineren og flexbox-elementet. Man gjør et element til en flexbox-kontainer med display: flex; og da vil alle direkte barn av det kontainer-elementet automatisk bli flexbox-elementer.

<!– Hvis denne er satt til display: flex; … –>
<div class="kontainer">
  <!– … blir disse elementene rett under automatisk til flexbox-element –>
  <div>1</div>
  <div>2</div>
  <div>3</div>
</div>

See the Pen Flexbox-artikkel by Erling Hamso (@okse) on CodePen.

Flexbox-elementene vil som standard legge seg på en horisontal linje i flexbox-kontaineren. (Som følge av standard-verdien: flex-direction: row;.)

display: flex;

Fra før av kjenner du kanskje til display:-propertyen som tar verdier som block, inline, inline-block (og noen andre mer obskure verdier). For å gjøre en boks til en flexbox setter man display: til flex eller inline-flex. Utad vil flex-kontaineren oppføre seg som et block-element med flex, men som et inline-element med inline-flex. Akkurat som block og inline-block.

.kontainer {
  display: flex;
  /* Ikke glem prefixer og støtte for IE10 (gammel syntaks) */
}

/* Kun for å tydeliggjøre elementene */
.kontainer {
  padding: 16px;
  background: black;
  font-family: sans-serif;
}
.kontainer > * {
  padding: 8px;
  border: 5px solid #ff00f6;
  color: #ff00f6;
  font-size: 24px;
  margin: 5px
}

See the Pen Flexbox-artikkel by Erling Hamso (@okse) on CodePen.

Akser

Når et element er satt til display: flex; får man to akser å tenke på: Hovedaksen og kryssaksen. Hovedaksen går i den retningen du har satt flyten til. Hvis du ikke har definert en flytretning er standard flytretning row. Det betyr at elementene er «tredd på en snor» horisontalt over boksen. Hvis du endrer retning til column henger snoren fra toppen av boksen til bunnen. Startpunktet for boksene er venstre på row og toppen på column.

flex-direction: row; (row er standardverdien.)

See the Pen Flexbox-artikkel by Erling Hamso (@okse) on CodePen.

flex-direction: column; See the Pen Flexbox-artikkel by Erling Hamso (@okse) on CodePen.

Man kan distribuere, endre startpunkt, endre på rekkefølgen og mye annet på disse elementene som ligger på enten hovedaksen eller kryssaksen.

Flexbox inni flexbox

Da jeg begynte å lære meg flexbox, føltes konseptet med en flexbox inni en flexbox som en hack. Det viste seg å være feil, og man kan gjøre mange flere ting med å legge flexboxer inni hverandre. Merk: Et flexbox-element også kan være en flexbox-kontainer.

Hva mer er det?

Det er flust med ting du kan gjøre med flexbox, men intensjonen med denne artikkelen er ikke å forklare alt. Under har du lenker til ressurser som gjør en ypperlig jobb med å forklare nærmere hva flexbox er og hvordan du kan bruke det.

Er det noe spesifikt du lurer på kan du veldig gjerne legge igjen et spørsmål til meg i kommentarfeltet!

Lær deg Flexbox

Ta kontroll på feilmeldingene

Nylig fikk jeg høre at én av våre kunder hadde uttalt til en av våre selgere at de ikke hadde behov for UX. Det er godt kjent at det ofte settes et likhetstegn mellom begrepet UX (brukeropplevelse) og UI (brukergrensesnitt). I dette tilfellet var sannheten at de ikke ønsket designere av brukergrensenitt. Vår bransje har mye av skylden i dette, ettersom vi lett slenger rundt oss med fagbegreper uten å nødvendigvis tenke betydning.

Her kommer jeg med en liten historie fra virkeligheten som viser en annen side av UX-faget. Det handler om feilmeldinger. Feilmeldinger gir normalt sett ikke en god brukeropplevelse. Vi har tiltak for å gjøre dem bedre – det er viktig å skrive dem så hyggelige og forståelsesfulle som mulig, og selvfølgelig alltid med et forslag til løsning. Vær ydmyk, ikke legg skylden på bruker din. Rådene er mange.

Det beste er åpenbart å unngå at feilmeldingene oppstår. Det er god brukeropplevelse. En viktig hygienefaktor. Den kanskje vanligste feilmeldingen på et nettsted er 404-feilen. Brukeren havner på en adresse som ikke finnes. Det kan være at akkurat den siden er fjernet, eller at adressen inneholder en skrivefeil. Har du ansvar for et nettsted bør du ha kontroll på disse 404-sidene. Hvor oppstår de, og hvorfor. Dette er lette feil å fikse, og svaret får du i Google Analytics.

Oh no, the page is missing!
Eksempel på en god og ydmyk feilmelding. Skjermbilde fra boagworld.com.

Hver uke sjekker jeg antall 404-feil på et større nettsted jeg jobber med. Jeg har også satt opp varsling som sender meg e-post dersom det plutselig tar seg opp. Da jeg begynte overvåkningen lå antall feil i uken på 200–300. Plutselig en uke steg det til 1800. Neste uke ble det 2700. Feilen lå i et underliggende datasystem som snublet. Det tok noen uker å fikse feilen. I løpet av perioden ble det vist 19000 feilmeldinger. Det er potensielt 19000 misfornøyde kunder som ikke får gjort det de kom for å gjøre. I etterkant ble det også rettet i andre mindre feil, og nå er vi nede i 10–20 feil i uken. Her har vi jobbet med å forbedre brukeropplevelsen, men kun med et analyseverktøy, et regneark og en publiseringsløsning. Ikke grafisk arbeid i det hele tatt.

Har du kontroll på feilmeldingene dine?