WEB360 G R AT I S M A G A S I N U T G I T T AV I N C R E O
alisering 2009 kemotoroptim sø r fo r de en Tr Case Study: kitektur • som trigger • rd Informasjonsar O • r ge la as slo Sports sning for Baut Case Study: O eb • Ny weblø w på afi Webanalyse • gr po • Ty TrønderEnergi
velkommen DETTE ER ET GRATIS MAGASIN SOM BLIR UTGITT AV INCREO.NO
InCreo belønnes under Gulltaggen ´09 For tredje år på rad viser InCreo muskler under årets Gulltaggen utdeling med 2 av 3 i premier i e-handelkategorien. Gulltaggen er en interaktiv reklamekonkurranse for premiering av kreative og nytenkende webløsninger. Det konkurreres i ulike kategorier, og InCreo stakk i år av med to av tre premier i kategorien ”Beste nettsted, e-handel”. Med Statsminister Jens Stoltenberg tilstede ble de som har bidratt til å skyve den digitale medieverdenene videre, enten i form av banebrytende kreativitet eller nyskapende teknologi og løsninger hyllet.
InCreo Interactive Creations
- Vi synes det er spesielt gøy at vi klarer å hevde oss blant de større Oslo-byråene for tredje år på rad. InCreo har også de to siste årene utmerket seg under Gulltaggen, og i år var det nettbutikkene for Oslo Sportslager og Pink Bubbles InCreo ble belønnet for. Med deltagerrekord på antall påmeldte arbeider og et svært høyt nivå er dette sterkt, sier daglig leder i InCreo Hallgrim Bjørvik.
INCREO INTERACTIVE CREATIONS AS ER EN NORSK KOMPETANSEBEDRIFT SOM UTVIKLER OG DRIFTER LØSNINGER FOR BEDRIFTER OG DET OFFENTLIGE PÅ INTERNETT. MED EN LANGSIKTIG STRATEGI TAR VI MÅL AV OSS Å YTE DEN BESTE SERVICEN TIL VÅRE KUNDER. Vi har lang fartstid med webløsninger, og har siden etableringen i 1997 gjennomført mange webprosjekter av forskjellig omfang. For våre oppdragsgivere ønsker vi å være en kompetent partner som det er enkelt og trivelig å samarbeide med. Vi har i dag kontorer i Trondheim, Bodø og Oslo. InCreo har som mål å være ledende i Norge på rådgivning, webdesign, publiseringsløsninger, e-handel og systemutvikling. InCreo tilbyr rådgivningstjenester i forbindelse med webprosjekter, og med 12 års weberfaring har vi god innsikt i hva som fungerer så vel som ikke fungerer på Internett. Våre rådgivningstjenester består av å bistå våre oppdragsgivere med planlegging, prosjektering og gjennomføring av webprosjekter, samt bistå til markedsføring av den ferdige løsningen. Med fundament i våre oppdragsgiveres mål og ambisjoner, skreddersyr InCreo designløsninger som dekker aktuelle behov og forsterker selskapets profil og visjon.
2 - WEB360 1.UTGAVE 2009
Vi hjelper våre oppdragsgivere med blant annet informasjonsarkitektur og utvikling av interaksjonsdesign, webdesign og flashdesign, webkonseptualisering, profilprogrammer og annen skjermbasert kommunikasjon. Vi utvikler skreddersydde løsninger, bygget opp fra grunnen av for hver enkelt kunde med publiseringsløsningen InCreo CMS. Våre største styrker innen utvikling er tett oppfølging, god design og fokus på ytelse og sikkerhet. I tillegg har vi lang fartstid innen e-handel, og kan tilby bedrifter akkurat den løsningen det er behov for. InCreo har fått diplomer under Gulltaggen to år på rad for webløsningene vi har utviklet for Eplehuset, David Andersen og Crestock. I mars ‘08 ble vi også belønnet under reklamekonkurransen Sterk Reklame, med diplom i kategorien for skjermbasert kommunikasjon for løsningen vi utviklet for Toshiba Varmepumper. Om din bedrift har ambisjoner og ønsker å satse på Internett, ta kontakt så stiller vi til et uforpliktende møte. n
WEB360 WEB360 utgis av InCreo Interactive Creations AS, Postboks 8823, 7481 Trondheim Besøksadresse Trondheim: Nedre Elvehavn, TMV-Kaia 21, 7014 Trondheim Besøksadresse Bodø: Storgata 30, 2. etasje Besøksadresse Oslo: Sandakerveien 24A, Bygg 1, 4. etasje. Telefon: 815 51 888 • Telefax: 455 09 679 Epost: increo@increo.no All kopiering eller reproduksjon av tekst og bilder er ikke tillatt uten samtykke fra InCreo. Forsidebilde: Per Morten Trøen
InCreo brenner for å lage innovative webløsninger I vår bransje handler det mye om kreativitet, men i tillegg er det like viktig å tenke på nytteverdig og innovative løsninger. Formelen for suksessfulle innovative løsninger ligger først og fremst i fokus på behov og deretter løsning. Mange fokuserer alt for mye på løsning uten å tenke på verdi og opplevelse for kunden. Evnen til å tenke nytt er vesentlig og vi liker tanken; ”Hvis du alltid gjør det du alltid gjorde, vil du alltid få det slik du alltid fikk”. Vi lever av vår kunnskap innen utvikling og drift av webløsninger. Dette har vi gjort i 12 år og vi ser viktigheten av faglige utfordringer for å utvikle oss. Det er ingen grunn å holde dette for seg selv, så her deler vi villig bort vår kunnskap og erfaring. Dette magasinet blir sendt ut til bedrifter i Sør-Trøndelag, Nordland og Oslo. Vårt mål er at du som leser dette skal få nye innspill på hvordan du kan utvikle nettopp din bedrift og få full effekt av websatsingen. Aktuelle artikler publiserer vi fortløpende på vår blogg som ligger på www. increo.no. Ta gjerne en titt der for å holde deg oppdatert om hva som skjer innen fagfeltet web. Det er mange aktører på markedet og vi ønsker å skille oss ut som et selskap med høy kompetanse og nær oppfølging av våre kunder. Vi lykkes på grunn av god samhandling og fokus på suksesskriterier i webprosjekter. Vi er sterkt opptatt av å identifisere kundens behov og mål med websatsningen, og kartlegge hvilken informasjon brukeren faktisk etterspør og ikke minst trenger. InCreo har tre år på rad vunnet priser i Gulltaggen som er et av årets viktigste arrangementer for oss som jobber med web og interaktiv markedsføring. Nylig fikk vi bronse for nettbutikken til Oslo Sportslager under kategorien Beste e-handelsnettsted 2009, og diplom for Pink Bubbles under samme kategori. Tidligere har vi vunnet diplomer for webløsningen til David Andersen, Eplehuset og Crestock.
innhold
FLERE ARTIKLER KAN DU LESE PÅ VÅR BLOGG PÅ INCREO.NO
4
INFORMASJONSARKITEKTUR Ved å hjelpe brukerne av webløsningen til å nå sine mål, når vi også bedriftens kommersielle mål. La oss derfor øke inntjeningen og redusere kostnadene ved hjelp av informasjonsarkitektur
6
CASE STUDY: TRØNDERENERGI Etter drøye seks måneder, et hundretalls timer og et titalls personer involvert, ble nettsiden lansert i slutten av 2008.
8
TRENDER FOR SØKEMOTOROPTIMALISERING Teknologien utvikler seg i rekordfart, og søkemotorene blir stadig flinkere til å skille de gode websidene fra de dårlige.
12
CASE STUDY: OSLO SPORTSLAGER Oslo Sportslager AS er en av de norske nettbutikkene som virkelig har lyktes med netthandel. Les om hvordan vi laget deres nye nettside.
15
WEBANALYSE Et godt webanalyseverktøy skal fortelle deg hvordan dine besøkende finner websiden din, hvordan de bruker den og ikke minst hvordan de blir dine kunder.
Vi ønsker å være best innen web. Om du har lyst til å diskutere din webløsning med oss, stiller vi gjerne til et uforpliktende møte for å vise hva vi kan. God lesning! 16
Hallgrim Bjørvik, daglig leder hallgrim@increo.no Tlf. 982 51 012
TYPOGRAFI PÅ WEB Typografi er et viktig visuelt redskap som kan bidra til å forsterke det skrevne ord på ulike måter.
1.UTGAVE 2009 WEB360 - 3
Informasjonsarkitektur – økt inntjening, reduserte kostnader TEKST: MORTEN WIKSTRØM FOTO:WWW.STOCKPHOTO.COM KILDEHENVISNINGER: SE SIDE 18
VED Å HJELPE BRUKERNE AV WEBLØSNINGEN TIL Å NÅ SINE MÅL, NÅR VI OGSÅ BEDRIFTENS KOMMERSIELLE MÅL. LA OSS DERFOR ØKE INNTJENINGEN OG REDUSERE KOSTNADENE VED HJELP AV INFORMASJONSARKITEKTUR (FORKORTET: IA). HER FØLGER EN KORT INNFØRING I TEMAET. IA OG DEFINISJONEN Det finnes mange lengre definisjoner på informasjonsarkitektur (blant annet bruker Peter Morville & Louis Rosenfeld over en side på å definere begrepet i boken Information Architecture for the World Wide Web). Som tilhenger av enkelhet benytter jeg meg av Wikipedia sin norske definisjon: «Informasjonsarkitektur er en fagdisiplin som har som viktigste aktivitet å beskrive en modell eller et konsept for informasjon». Stikkordene er altså
4 - WEB360 1.UTGAVE 2009
å modellere eller konseptualisere informasjon. Om jeg får lagt på «for å hjelpe brukeren til å nå sine mål» til slutt, synes jeg dette er en god definisjon. Informasjonsarkitektur dreier seg om å identifisere, organisere og strukturere informasjon på målgruppens premisser. IA I PROSESSEN En klassisk webprosess går fra abstrakt til konkret. Man starter som regel med å avklare formål/hensikt med en
webløsning. Men ser på brukernes behov knyttet til løsningen (hva skal den konkret gjøre for brukeren?) og videre på den strategiske forankringen i hvorfor bedriften skal satse på web (hva skal den konkret gjøre for selskapet?). På bakgrunn av det overnevnte er tradisjonelt det neste skrittet å avklare innholds- og funksjonalitetsbehovet til løsningen. So far, so good. Man har avklart et formål/hensikt med prosjektet og man har fått bekreftet at det er i
henhold til selskapets strategi. Videre har man et overordnet bilde på hvilket innhold man må få på plass, og hva løsningen vil kreve av teknisk funksjonalitet. Dersom løsningen er forholdsvis omfattende, er det nettopp her informasjonsarkitektur bør bli neste skritt i prosessen. Mange ville kanskje her hoppet rett på det visuelle designet. Om det dreier seg om en simpel løsning med lite innhold og det er moderate krav til teknisk funksjonalitet er dette helt greit. Er det derimot snakk om en større og krevende løsning anbefaler jeg deg å lese videre. IA SINE OPPGAVER Informasjonsarkitektur sin overordnede oppgave er å skape en brukervennlig løsning for målgruppen(e). Hva som er brukervennlig er det altså målgruppen som bestemmer, og slik sett bør du huske at brukervennlighet er subjektivt. Hva du personlig synes er brukervennlig er strengt tatt ikke interessant – dette er det brukerne som til syvende og sist vil avgjøre. For å nå målsettingen om en brukervennlig løsning er det noen oppgaver man må løse. Jeg vil våge meg til å forenkle en informasjonsarkitekts oppgaver til følgende tre punkter:
«Simplicity is the ultimate sophistication» Leonardo Da Vinci
knyttet til dette nivået er kjernemodellen. Modellen er praktisk og har som hensikt å prioritere informasjonen, gjøre den lett tilgjengelig og videre balansere bruker- og forretningsmålene til løsningen. Andre elementer man bør ta hensyn til når man skal gruppere og prioritere informasjon er historikk, statistikk og brukerdata. Sitter man på data om hvordan brukerne fram til dags dato har benyttet den eksisterende løsningen (for eksempel ved hjelp av Google Analytics) har man gode forutsettinger for prioriteringsarbeidet. Man vet hva som er ”hot” innhold, og som derfor må prioriteres. Videre vet man hva som er sekundærinformasjon og som ikke trenger å få like stor fokus i løsningen.
1. Identifisere informasjonselementene 2. Beskrive, navngi, gruppere og prioritere 3. Strukturere, designe og legg til rette for gode brukeropplevelser
Ved navngivning av informasjon synes jeg triggerordfilosofien er god, med at man navngir informasjon på brukernes premisser, og fokuserer på å holde på brukerne og hindre avstøting.
1. Identifisere informasjonselementene Denne prosessen har som mål å avklare alt innholdet som skal inn i webløsningen. Prosessen resulterer i en innholdsoversikt – f.eks. et Excelark som lister ut alle informasjonselementene. Prosessen er sunn, da den gir deg muligheten til å finne innhold som kanskje ligger i dagens webløsning som det ikke er behov for og kan fjernes, samt kartlegge hva det er behov for av informasjon men som ikke finnes og derfor må skaffes til veie.
3. Strukturere, designe og legg til rette for gode brukeropplevelser Har man gjort jobben godt i de to foregående stadiene, har man nå de beste forusettinger for å lykkes med å oppnå gode brukeropplevelser. Man har kartlagt informasjonen som skal inn i webløsningen og videre prioritert den. Man vet hvor mange “rom huset skal romme” og man vet hvilken funksjonalitet de ulike rommene skal inneha. Det som nå gjenstår er altså å tegne plantegningene.
2. Beskrive, navngi, gruppere og prioritere Når man har identifisert informasjonen og fått på plass en innholdsoversikt, starter arbeidet med å gruppere og kategorisere de ulike informasjonselementene. For denne jobben finnes det mange verktøy og metoder. Noen av de mest tradisjonelle er labling, fargesystemer, kortsortering og flytkart. En modell som jeg mener overordnet kan hjelpe deg å løse oppgaven
Prosessen med interaksjonsdesignet vil avgjøre webløsningens navigasjon, hvilke elementer som skal med i løsningen, størrelse og plassering - og man ender opp med de ferdige ”plantegningene” på løsningen. Plantegningene blir videre retningsgivende for det visuelle designet og den tekniske løsningen, og vil i stor grad bli bruksansvisningen for designeren og utvikleren som skal sy sammen den
ferdige løsningen. IA = ØKT INNTJENING OG REDUSERTE KOSTNADER Til slutt tenkte jeg å belyse poenget med hvorfor informasjonsarkitektur bidrar til økt inntjening og reduserte kostnader gjennom et (noe trivielt) eksempel. Se for deg at du driver en nettbutikk som selger bøker. For kundene dine vil tilfredsheten være lav om de ikke kjapt finner boka de leter etter. I verste fall, om de ikke finner den, vil de gi opp og heller besøke en annen butikk for å finne boka. Dette vil kunne skape blant annet irritasjon, redusert omsetting og negativ vareprat. Om brukeren derimot fant boken uten problemer, og det var tilstrekkelig informason om boken til at brukeren er føler seg trygg nok til å kjøpe, vil han sitte igjen med et godt inntrykk av handelen. I tillegg til at man faktisk oppnådde et salg, er sjansen større for at brukeren sjekker her først neste gang han skal kjøpe et lignende produkt. For de som jobber med nettbutikken vil manglende struktur og logikk i løsningen gi enda flere utfordringer. I den tekniske løsningen kan man for eksempel finne mye duplisert funksjonalitet, ettersom nettstedet har fått ny og endret funksjonalitet uten en god overordnet plan. En grundig informasjonarkitektur gjør det enklere å bygge en solid grunnstruktur for den tekniske løsningen, og man kan samtidig se hvordan administasjonssystemene skal utvikles. Informasjonsarkitektur gir besparelser både innen opplæring, administrasjon og design, og arbeidet med den tekniske løsningen. Min påstand er altså at god informasjonsarkitektur bidrar til økt inntjening og reduserte kostnader. n
1.UTGAVE 2009 WEB360 - 5
case study HVORDAN VI GJORDE DET. SE NETTSIDEN PÅ WWW.TRONDERENERGI.NO
FA K TA O M T R Ø N D E R E N E R G I
3
Etablert i 1950 under navnet Sør-Trøndelag Elektrisitetsverk.
3
Eies av 21 kommuner i Sør-Trøndelag og Nordmøre Energiverk.
3
Eier 15 kraftverk i Midt-Norge og er deleier i ytterligere 2.
3 3
Eier eller er medeier i 13 selskaper.
3
Leverer strøm som dekkes opp med 100 prosent fornybar energiproduksjon.
Konsernets virksomhet grupperes i de fire forretningsområdene energi, nett, marked & tjenester og investering & vekst.
Energisk fra A-Å INCREO UTVIKLET EN NY WEBLØSNING FOR STORKONSERNET TRØNDERENERGI. ETTER DRØYE SEKS MÅNEDER, ET HUNDRETALLS TIMER OG ET TITALLS PERSONER INVOLVERT, BLE NETTSIDEN LANSERT I SLUTTEN AV 2008. HER LAR VI DEG FÅ ET INNBLIKK I PROSESSEN MED UTVIKLINGEN AV NYE TRONDERENERGI.NO
TEKST: MORTEN WIKSTRØM FOTO: WWW.STOCKPHOTO.COM / PER MORTEN TRØEN
TrønderEnergi som er et ledende energi- og industrikonsern valgte InCreo som partner da de gikk i gang med utviklingen av ny webportal. Selskapet har base i Midt-Norge, og har gjennom et titalls selskaper både bredde og dybde innenfor forretningsområdene energi, nett, marked og tjenester og investering og vekst. I tillegg til en bred produktportefølje har selskapet også en rekke kommunikasjonsutfordringer, da de henvender seg til et stort antall målgrupper (B2C, B2B, B2G for å nevne noen). InCreo ble valgt som leverandør til prosjektet etter en grundig anbudsrunde. I anbudsprosessen ble InCreo og de øvrige tilbyderne presentert for målsettinger,
6 - WEB360 1.UTGAVE 2009
behov og ønsker til den nye webløsningen. InCreo utarbeidet på bakgrunn av dette en forprosjektrapport, hvor det ble presentert en løsningsbeskrivelse for den skisserte oppgaven. Beskrivelsen inneholdt tanker rundt design og teknisk løsning, men også tidsplan, ressursbehov og økonomiske betingelser ble presentert. Ved tilslag på anbudet, begynte InCreo og TrønderEnergi planleggingsfasen. Hele prosjektteamet ble involvert i prosjektplanleggingen, og det ble utarbeidet en prosjektplan med i alt åtte milepæler, fra prosjektoppstart til lansering, med et tidsperspektiv på seks måneder. ‹‹En klassisk webprosess går fra abstrakt
Lanseringsdato: Utviklingstid: Teknologi brukt:
17. april 2008 6 måneder HTML, ASP.Net, MsSQL database, C#, JavaScript, Ajax, CSS, Photoshop, Flash
til konkret››. Med hensikten avklart og prosjektfundamentet på plass ble utviklingsarbeidet startet opp. I InCreo deles utviklingsarbeidet opp i tre faser: Innhold og informasjonsarkitektur, design og teknisk utvikling. InCreo startet med å kartlegge informasjonen som skulle inn i løsningen og utarbeidet videre interaksjonsdesign for nettsiden. Interaksjonsdesignet fastsetter
SØK
PRIVAT | BEDRIFT | OM TRØNDERENERGI STRØM | BREDBÅND | VARMEPUMPE | TJENESTER
“Kraftfull og energisk”
PRIVAT
BEDRIFT
STRØM • Kraftavtaler og priser • Nett • Bestill
BREDBÅND • Internett • Telefoni • Digital TV • Bestill
STRØM • Kraftavtaler og priser • Nett • Bestill
BREDBÅND • Internett • Telefoni • Digital TV • Bestill
VARMEPUMPE • Lavere strømregning • Bedre inneklima • Demonstrasjon • Bestill
TJENESTER • Elektrikertjenester • Installasjonstjenester • Bestill
VARMEPUMPE • Lavere strømregning • Bedre inneklima • Demonstrasjon • Bestill
TJENESTER • Elektrikertjenester • Installasjonstjenester • Bestill
Forside • Kontakt oss • Nidit • BNTV • Logal • Spotpris.no • Sitemap Copyright © 2008 TrønderEnergi • Disclaimer • English
Et interaksjonsdesign avgjør sidens navigasjon, hvilke elementer som skal med, størrelse og plassering.
webløsningens struktur og navigasjon, på bakgrunn av det aktuelle innholdet. Med interaksjonsdesignet på plass gikk designerne i gang med utformingen av løsningens visuelle design. Her ble det tatt utgangspunkt i TrønderEnergi sin innarbeidede visuelle profil, som ble videreutviklet og tilpasset for web. For å forsterke budskapet ble det valgt å engasjere en fotograf som tok en rekke weboptimaliserte bilder som resulterte i en god visuell finish. Med designkonseptet og de aktuelle malene på plass, satte InCreo sine systemutviklere i gang med det tekniske arbeidet. Den tekniske utviklingen bestod i grove trekk av implementering av designmaler, oppsett av publiserings- og e-handelsløsningen InCreo CMS og videre skreddersøm av øvrig funksjonalitet for oppdragsgiver. Under hele prosessen lar InCreo løsningen være tilgjengelig for oppdragsgiver på en prosjektweb, slik at de kan følge progresjonen i utviklingen og teste funksjonaliteten fortløpende.
På bakgrunn av godkjent interaksjonsdesign og selskapets eksisterende profil, ble løsningens visuelle design utformet.
Etter runder med testing og feilretting av den ferdige løsningen, og et stort og omfattende innhold på plass, ble nye tronderenergi.no lansert den 20.10.2008. TronderEnergi.no er i dag en stor portal som rommer blant annet egne seksjoner for privatog bedriftskunder med mulighet for å tegne strømavtaler, innlogging for måleravlesning og administrasjon av kundeforhold, oppdaterte strømpriser på bakgrunn av integrasjon med den nordiske strømbørsen, integrert rekrutteringsportal med presentasjon av ledige stillinger, en dyptgående bedriftspresentasjon og en omfattende seksjon for kundeservice. Et webprosjekt tar som regel godt over 6 dager, og det er sjeldent tid for hvile den siste dagen før lansering. Men gjennom en velprøvd metodikk, en god porsjon erfaring, kreativitet og hardt arbeid, lander som regel webprosjektene InCreo gjennomfører til avtalt tid, med avtalt funksjonalitet og innenfor avtalte økonomisk rammer. n
«TrønderEnergi (den gang Sør-Trøndelag Everk) opprettet sine første websider i 1994, og var visstnok Norges første kraftselskap på nett. Mye vann har rent i mange elver siden 1994 og vi har hatt flere leverandører av våre websider frem til nå. Det er ytterst sjelden jeg kan si meg så fornøyd med en leverandør som InCreo. De har vært profesjonelle hele veien, de holder tidsfrister og de priser tjenestene fornuftig. Selv et halvt år etter at portalen ble lansert, opplever vi at InCreo kommer med gode, løsningsorienterte innspill.» Øystein R. Kjørsvik, Webansvarlig TrønderEnergi
1.UTGAVE 2009 WEB360 - 7
SEO: Trender for søkemotoroptimalisering i 2009 TEKST: ØYVIND HENRIKSEN FOTO: WWW.STOCKPHOTO.COM / PER MORTEN TRØEN KILDEHENVISNINGER: SE SIDE 18
TEKNOLOGIEN UTVIKLER SEG I REKORDFART, OG SØKEMOTORENE BLIR STADIG FLINKERE TIL Å SKILLE DE GODE WEBSIDENE FRA DE DÅRLIGE. HER ER DE VIKTIGSTE ENDRINGENE FOR 2009, OG HVORDAN MAN BEST KAN DRA NYTTE AV DEM. MULTIMEDIA GIR BEDRE PLASSERING Video, flash-animasjoner, bilder, lydfiler, og lignende rikt innhold blir nå like viktig som velformulert tekst på websiden. Google kaller disse multimediaobjektene for Engagement objects, og det forventes at disse blir vektet høyt i 2009. Teknologien for å analysere innholdet i slikt innhold har utviklet seg stort i det siste, og søkemotorene er i stand til å hente ut og indeksere ordene i teksten på en film eller lydfil, samt OCR-scanne tekst i bildene. Søkeresultat som er markert som video på søkeresultatsidene får høyere klikkrate enn tekstbaserte søkeresultater. Om man har en god tittel og beskrivelse er det flott, men folk forventer mer og bedre innhold på en side som tilbyr video eller bilder i tillegg til bare ren tekst. Slik kan du dra nytte av dette: • Om du har egnet fil film tilgjengelig, legg den ut som flashvideo på websiden. • Legg ut bilder med gode beskrivelser på de websidene som du vil skal rangere høyt.
Gjennomsnittlig klikkrate for søkemotorplasseringer på førstesiden av søkeresultatet. Det er tydelig at en topplassering er utrolig viktig, siden over 42% av de besøkende klikker inn på det første resultatet.
8 - WEB360 1.UTGAVE 2009
LOKALT SØK BLIR ENDA VIKTIGERE ENN FØR Google har tidligere brukt kun en generell algoritme, men åpner nå opp for å bruke flere algoritmer for forskjellige typer søk. For eksempel kan shopping-orienterte søk behandles av en egen algoritme, som blant annet foretrekker brukerens lokale butikk foran butikker i andre deler av landet. Slik tilpasser du websiden din for lokalt søk: • Registrer adressen i Google Maps, slik at man registreres på kartsøk. • Legg inn gateadressen i det grafiske rammeverket, slik at søkemotoren kan koble websiden til en geografisk plassering. • Legg websiden på en server i Norge, slik at den blir registrert på rett land for lokale søk. GOD KLIKKRATE GIR UTTELLING Når det søkes 100 ganger på et søkeord, og 20 av de besøkende klikker inn på ditt nettsted, vil du ha 20% klikkrate for dette søkeordet. Brukeren evaluerer tittel og beskrivelse
Eksempel på søkeresultat som viser treff fra Google Maps
når han vurder hvilket av de 10 treffene på førstesiden han skal klikke inn på. Google vil se hvilket treff brukeren velger, og bruke dette for å samle inn statistikk for antall visninger og antall klikk. Dersom man oppnår en høyere klikkrate enn normalt, blir man belønnet med bedre rangeringer. Tiltak for å forbedre klikkraten for din webside: • Skriv en tittel som inneholder søkeordet man er ute etter, ordet vil da komme i fet tekst. • Bruk ordet i en eller to velformulerte setninger i sidens beskrivelse, da vil disse setningene vises rett nedenfor tittelen. • Bruk video på websiden, treff som er markert med video vil få ekstra gode klikkrater. HVOR LENGE ER BRUKEREN INNE PÅ WEBSIDEN? Samtidig måles hvor lang tid brukeren er inne på hver webside han besøker, før han igjen klikker tilbake til Google. Websider med relevant innhold vil holde på brukeren en stund, så lengre tid
Eksempel på søkeresultat fra Google med treff markert som video
inne på websiden vil også belønnes av søkemotoren. Slik forbedrer du tiden brukeren er inne på websiden din: • Sørg for at det er samsvar mellom tittel og beskrivelse og det som faktisk er på websiden. Brukeren må finne det han faktisk er ute etter, ingen er tjent med brukere som egentlig ikke vil ha det du tilbyr. • Gjør websiden brukervennlig nok til at brukeren finner veien videre til annnen informasjon som er nyttig for han, sørg for at der finnes en lovende vei videre annet enn å klikke tilbake-knappen og prøve neste resultat fra Google. SØKERESULTATER BLIR TILPASSET FOR HVER ENKELT BRUKER En annen trend er økt fokus på personalisering. Tidligere ble dette kun brukt når man var logget inn med sin google-konto, men nå blir dette aktivert for alle brukere. Dette innebærer at man får forskjellige resultater, alt etter hvilken historikk man har registrert hos søkemotoren.
For eksempel kan tre personer som søker samtidig etter “java” få 3 helt forskjellige resultater - alt etter om søkemotoren tror de vil bry seg mest om øyen Java, kaffen, eller programmeringsspråket. Dette medfører at det blir mye vanskeligere å overvåke og kontrollere søkemotorplasseringer.
å vedlikeholde websiden som helhet enn å kun jobbe med enkeltstående landingssider. Oppdateringer på forsiden og andre viktige sider på websiden vil også gi en større gevinst i ranking enn oppdateringer på mindre viktige sider på nettstedet. Tiltak for å holde websiden oppdatert:
Slik tilpasser du rapportering til personalisert søk: • Legg mindre vekt på søkemotorplassering for hvert søkeord, fokuser heller på antall treff rapportert fra Google Analytics. • Identifiser alle landingssidene som får trafikk fra søkemotorer, og sats på en høyere konverteringsrate for hvert av dem. INNHOLDETS HISTORIKK OG OPPDATERINGSFREKVENS VURDERES En annen faktor som vil påvirke rangeringen er hvor gammelt innholdet på websiden er, hvor ofte det oppdateres, og også tilsvarende faktorer for andre websider på domenenavnet. Når score baseres på flere dokumenter enn landingssidene, blir det viktigere
• Legg ut nyheter eller andre jevnlige oppdateringer på websiden. • Ta i bruk et publiseringssystem, slik at det blir enkelt å vedlikeholde innholdet. • Gjør en årlig gjennomgang av websiden, der man leser igjennom innholdet på statiske sider, og korrigerer det som har endret seg. SØKEMOTORENE ER BLITT FLINKERE TIL Å FINNE DE BESTE WEBSIDENE Konklusjonen etter alle endringene er at gode websider belønnes, og søkeresultatene skal dermed bli bedre. For å rangere høyt må man altså ha rikt innhold som er relevant i forhold til søket, og som ligger på en brukervennlig webside. n
1.UTGAVE 2009 WEB360 - 9
showcase ET LITE UTVALG AV VÅRE REFERANSER. SE FLERE PÅ WWW.INCREO.NO
1 FILMKICK www.filmkick.no InCreo har utviklet nettbutikk for Filmkick. Butikken selger spesielle filmer som skal gi en annerledes opplevelse. Filmkick drives av Location Norway AS og er støttet av Film&Kino – bransjeorganisasjonen for kino- og videobransjen i Norge. Leveransen fra InCreo omfatter design, InCreo CMS og InCreo e-handel.
1
2 CRESTOCK www.crestock.com Crestock ble utviklet av Increo i 2005 og er i stadig utvikling. I nettbutikken finner man nærmere 500 000 bilder som kan kjøpes. Prosjektet ble belønnet med diplom i kategorien “beste e-handelsnettsted” under Gulltaggen 2008. Søkeresultatsidene er tilpasset til widescreenskjermer, og utviklet med funksjoner som handlekurv, mouseoverfunksjon, call to action, og en rekke filtre og andre navigasjonsmuligheter. Søkealgoritmen er utviklet for å oppnå presise treff, og kjapp responstid.
2
5
3 KW SMART/TOSHIBA www.toshibavarmepumper.no InCreo har utviklet en interaktiv Flash som demonstrerer produktfordelene til en kW Smart varmepumpe for vannbåren varme. ABK AS er en ledende aktør i det norske markedet for energieffektive varmepumper og kjølesystemer. Presentasjonen brukes på internett, så vel som på messer og andre presentasjonsforum.
3
4 LUXO www.luxo.no LUXO er et selskap med lang tradisjon i produksjon og markedsføring av belysningsløsningen for det profesjonelle markedet. Leveransen fra InCreo omfatter bl.a. design, CMS, produktdatabase, innholdsstyring på ulike land og system for generering av produktkataloger som PDF.
4 5 OSLO SPORTSLAGER www.oslosportslager.no Oslo Sportslager er en av landets største og eldste sportsforretninger. I nettbutikken finner man et stort antall produkter innen ski, sykkel, friluftsliv, klatring og idrett. InCreo har levert ny nettbutikk for Oslosportslager. no. Leveransen omfatter webdesign, CMS og e-handelsløsning, samt en del skreddersøm som bannersystem, tilbakemelding på produkter, magasinartikler, blogg med mer.
10 - WEB360 1.UTGAVE 2009
6 ASPELIN RAMM www.aspelinramm.no Aspelin Ramm er en solid eiendomsutvikler som er knyttet til eiendommer blant annet i Oslo og østlandsregionen. Løsningen inneholder system for administrasjon av eiendomsportefølje og medarbeidere.
6
7 EPLEHUSET www.eplehuset.no Nettstedet ble lansert i november 2006. Leveransen omfattet design, nettbutikk og publiseringsløsning. Nettstedet vant diplom i kategorien beste e-handelsnettsted under Gulltaggen 2007.
8 VIKING REDNINGSTJENESTE www.vikingredningstjeneste.no I tillegg til webløsning med design, publiseringsløsning og e-handel har InCreo jobbet med deres grafiske profil.
7
11
9 DRUEN www.druen.no Druen er en restaurant og vinbar i Oslo som ble etablert i 1986. InCreo har utviklet deres nye webløsning med design og publiseringsløsning, samt flash på forside. I tillegg til webløsningen har Increo utarbeidet restaurantens nye logo og profil.
10 DAVID-ANDERSEN www.brudeparet.no
8
12
David Andersen har lange tradisjoner innen design og salg av gullsmedprodukter. Leveransen omfatter design, publiseringsløsning og e-handel Nettstedet vant diplom i kategorien beste bedriftsnettsted under Gulltaggen 2007.
11 POPPE & CO www.poppeco.no Poppe & Co er et meglerhus som i hovedsak holder til i Oslo. Løsningen omfatter design, publiseringsløsning, integrasjon med meglersystemer, avanserte søkemotorer, finansieringskalkulatorer mm.
9
12 OSLO DYREKLINIKK www.oslodyreklinikk.no
13 10
Oslo Dyreklinikk er et moderne dyrehospital. Den nye webløsningen ble utviklet av Increo i 2008 og omfatter design, flash og publiseringsløsning.
13 NTNU www.mesterhjernen.no Mesterhjernen.no ble utviklet med tanke på å rekruttere flere studenter til Fakultet for Informasjonsteknologi, Matematikk og Elektroteknikk ved NTNU. InCreo har levert design, teknisk løsning og kampanjemodul.
1.UTGAVE 2009 WEB360 - 11
case study HVORDAN VI GJORDE DET. SE NETTSIDEN PÅ WWW.OSLOSPORTSLAGER.NO
Netthandel med høy puls TEKST: MORTEN WIKSTRØM
I FØLGE E-HANDELSINDEKSEN TIL DIBS ER DEN SAMLEDE E-HANDELEN FOR DE NORDISKE LANDENE 142 MILLIARDER PÅ ÅRSBASIS. NORDMENN STÅR ALENE FOR 35 MILLIARDER AV DENNE OMSETTINGEN. VED BRUK AV INTERNETT SOM SALGSKANAL KAN MAN AUTOMATISERE MYE, OG KOSTNADENE KNYTTET TIL HVERT SALG KAN BLI SVÆRT LAV. SOM ET RESULTAT AV DETTE ØNSKER STADIG FLERE BEDRIFTER Å SATSE PÅ SALG AV VARER OG TJENESTER PÅ INTERNETT.
70 ÅRS ERFARING OVERFØRT TIL INTERNETT Oslo Sportslager AS er en av de norske butikkene som virkelig har lyktes med netthandel. Sportslagerets historie strekker seg helt tilbake til 1930 da butikken i Torggata i Oslo ble åpnet. Nettbutikken ble først lansert drøye 70 år senere på www. oslosportslager.no. I dag jobber ca. 120 personer hos Oslo Sportslager hvor av 15 personer kun jobber med nettbutikken. Sportslageret har siden lanseringen av den første nettbutikken i 2004 opplevd en enorm vekst, og de erfarte for en tid tilbake at den eksisterende løsningen ikke dekket deres ønsker og behov. Dette med tanke på løsningens navigasjon og design, men ikke minst nettbutikkens tekniske løsning. Det ble antatt at en forbedring av disse elementene ville øke kundetilfredsheten og lojaliteten blant de
12 - WEB360 1.UTGAVE 2009
eksiterende kundene, samt at man ville tiltrekke seg flere nye kunder og positivt påvirke omsetting og resultat. InCreo ble valgt til å utvikle den nye løsningen, og nettbutikken ble lansert sommeren 2008. TRE HOVEDUTFORDRINGER InCreo, som har over 10 års erfaring med e-handel, vet mye om det å skape brukervennlige og optimaliserte nettbutikker. Utfordringen med den nye nettbutikken til Oslo Sportslager var overordnet tredelt. For det første hadde løsningen behov for en intuitiv og god struktur som gjorde det enkelt å finne fram blant butikkens nærmere 10 000 produkter. Videre måtte det skreddersys et effektivt og fleksibelt administrasjonsgrensesnitt som Oslo Sportslager kjapt kunne jobbe i. Sist var responstiden en utfordring. Nettbutikken har flere millioner besøkende på årsbasis,
Lanseringsdato: Utviklingstid: Teknologi brukt:
3. august 2008 7 måneder HTML, ASP.Net, MsSQL database, C#, JavaScript, Ajax, CSS, Photoshop, Flash
og disse ønsker ikke å vente på treg lastetid. INFORMASJONSARKITEKTUR OG VISUELT DESIGN I InCreo startet vi med å identifisere all informasjonen som skulle inn i løsningen. Videre ble informasjonselementene gruppert og prioritert. Med en så omfattende løsning, er dette en krevende jobb. Men når man er i mål med dette arbeidet har man de beste forutsetningene for å lykkes med designjobben. På oslosportslager.no står produktene i fokus, og det var derfor aldri et mål å lage den
mest ”fancy” nettbutikken, men i stedet lage en løsning som tilfredstilte brukernes interesser. SKREDDERSYDD ADMINISTRASJONSGRENSESNITT Daglig jobber ca. 15 personer i administrasjonsgrensesnittet. Her behandles ordrer og produkter, bloggartikler og produkttester publiseres og kampanjer og kunder administreres for å nevne noe. Admin for nettsidene tok utgangspunkt i publiserings- og e-handelsløsningen til InCreo, men løsningen ble godt skreddersydd, testet og korrigert slik at den ble optimal for Sportslageret. OPTIMALISERING For at siden skal oppleves som rask er det jobbet mye med optimalisering av svartider for brukerne. Dette er blant annet gjort ved hjelp av minimal HTML-kode og bruk av Ajax-teknologi. Videre er det jobber en
«InCreo fikk utfordringen med å lage en av Norges beste nettbutikker innen sportsutstyr og har tatt utfordringen på en suveren måte. De har vist seg å være en faglig og kompetent leverandør som på en fleksible måte har tilfredstilt våre behov» Thomas Aastebøl, Oslo Sportslager AS
god del med optimalisering av spørringer som gjøres mot databasen. Altså antall spørringer og hvilken informasjon som hentes. Med en løsning med så mye data, er det lett for at den kan oppleves som treg. Dette er noe vi bevisst har jobbet med for å hindre. VEIEN VIDERE Oslosportslager.no er i dag blant Norges største nettbutikker innenfor sportsutstyr, både med tanke på antall produkter,
omsetting og besøkende. Løsningen er kontinuerlig under videreutvikling, og målet er å gjøre handleopplevelsen så optimal som mulig for de besøkende. I tillegg skal løsningen være ideell for medarbeiderne som daglig benytter den som arbeidsverktøy. Målsettingene for prosjektet er langt på vei oppnådde, men løsningen vil som teknologien utvikle seg for hver dag som går. n
InCreo E-handel De fleste nordmenn er nå blitt komfortable med å handle på Internett. I 2008 handlet 93 prosent av norske internettbrukere på nettet iløpet av en periode på seks måneder InCreo har lang fartstid innen e-handel, og vi kan derfor tilby din bedrift akkurat den løsningen dere har behov for. Med
utgangspunkt i en fast grunnfunksjonalitet tilpasses løsningen deres spesifikke behov og ønsker. I en hver nettbutikk er det behov for produkt, ordre og kundeadministrasjon og det er denne funksjonaliteten som, sammen med InCreo CMS, utgjør grunnfunksjonaliteten i InCreo E-handel. n
Egenskaper 3 3 3 3 3 3 3 3 3 3 3 3
Produktadministrasjon Navigasjon og produktpresentasjon Ordreadministrasjon Kundeadministrasjon Lagerstatus Betalingsløsning (Visa, Master Card / PayPal) Eksport og import av produkter, ordrer og kunder Integrasjon mot økonomisystem Produktsøk Kjøpshjelp (FAQ/OSS) Tips en venn Utskriftsvennlige produktsider
3 3 3 3 3 3 3 3 3 3 3
Sammenlign ulike produkter Rabattsystemer ved kampanjer o.l. Finansiering Nyhetsbrev Abonnementstjenester Beregning av fraktkostnader Sporingsinformasjon Søkemotoroptimalisering Kundeweb Statistikk Tilbakemeldinger på produkter
1.UTGAVE 2009 WEB360 - 13
Ord som trigger TEKST: TORIL ASPAAS FOTO: WWW.STOCKPHOTO.COM KILDEHENVISNINGER: SE SIDE 18
FOR ALLE SOM SKAL PUBLISERE PÅ WEB ER DET VIKTIG Å TENKE NØYE GJENNOM INNHOLDET SOM BLIR PRESENTERT PÅ DE AKTUELLE SIDENE. EN MÅ HA INNHOLD SOM RASKT VEKKER INTERESSE SLIK AT BRUKEREN BLIR PÅ NETTSTEDET. Ved søk etter informasjon på nett skummer de fleste gjennom nettsider på to til tre sekunder. Om de ikke finner det de leter etter på de få sekundene, klikker de bort fra siden. Dette kalles avstøting (i Google Analytics benyttes begrepene transittstoppfrekvens og bounce rate) og forekommer i 50 % av tilfellene ved søk av informasjon. Dette betyr igjen at 50 % av alle brukere som besøker nettstedet er ute igjen uten å klikke seg videre inn på siden.
webside www.tronderenergi.no. Ordene som er ramset i den blå boksen nederst på siden, er de ordene som det er søkt mest på, internt på TrønderEnergi sine nettsider. Mange av disse ordene er gode Trigger-ord som det er lurt å bruke på deres nettside. HVA BETYR DETTE FOR DIN BEDRIFT? For din bedrift betyr dette at du må finne de riktige Trigger-ordene for din virksomhet. Hvordan omtaler dine kunder
produktene/tjenestene dere leverer? De aktuelle ordene bør brukes i navigasjon, overskrifter og tekster. Da får du og bedre synlighet i søkemotorer med på kjøpet! Gode Trigger-ord er ofte enkle og konkrete, og man bør unngå fremmedord. Det er også verdt å ta med seg at 97 % av verdens 1000 mest påsøkte søkeord er substantiver. Man bør derfor unngå å bruke verb framfor substantiver. Bruk for eksempel utdanning og ikke utdannelse. n
HVA ER TRIGGER-ORD? Et enkelt grep mot avstøting er å bruke såkalte Trigger-ord. Wikipedia beskriver triggerord som “det ordet brukeren har i hodet når han kommer til et nettsted, og som beskriver den informasjonen brukeren leter etter med brukerens eget ord”. Trigger-ord beskriver det brukeren leter etter på nettstedet. Et vanlig problem på nettsider er at man ikke benytter slike ord, men heller benytter seg av sine egne ord og sin egen fagterminologi. Når for eksempel en kunde skal kjøpe seg en peis vil en søke og lete etter ordet peis, mens leverandøren kanskje vil benytte ordet ildsted. Dette kan resultere i at kjøper ikke oppfatter at selger kan levere det ønskede produktet. Det er altså viktig å velge ord som står i overensstemmelse med de begrepene brukerne benytter. Det er særlig viktig å bruke slike ord i menypunkter og i lenker. Trigger-ord springer ut i fra teorien om hvordan brukere orienterer seg på web. TRIGGER-ORD OG SØKERMOTOROPTIMALISERING Bruk av Trigger-ord hjelper også på synlighet i søkermotorer ved at man faktisk benytter seg av ord som brukerne mest sannsynlig kommer til å søke på. En kunde som er ute etter peis vil ikke få opp websiden til en leverandør som benytter seg av ordet ildsted. Trigger-ord er det konkrete ordet brukeren har søkt på i en søkemotor. Når brukeren finner sitt triggerord i en link klikker han på det. En god måte å finne gode trigger-ord på er å legge inn en funksjon på ditt nettsted som lagrer ord som det er hyppigst søkt på. TrønderEnergi har en slik løsning på sin
14 - WEB360 1.UTGAVE 2009
POPULÆRE SØKEORD PÅ WWW.TRONDERENERGI.NO ansatt avd MERKE avtalegiro bank berkåk bessaker Bjarne efaktura elbil
energi
energit energiutredning energiutredninger Erstatning
faktura
flytting frøya gjennomsnitt is kabelgrøft kalkulator kampanje kraftleverandør kraftleverandør kraftpriser kraftsystemutredning
kulturpris
kvo logo markedssjef melhus måleravlesning månedlig
nupen orkanger
produksjon
sommerjobb
spot spørsmål strømpris
Webanalyse, et viktig verktøy KOM I GANG Opprett en Google-konto, lim inn ni linjer sporingskode på nettsidene og rapporteringen er i gang. Lett som bare det!
TEKST: MORTEN WIKSTRØM
ET GODT WEBANALYSEVERKTØY SKAL FORTELLE DEG HVORDAN DINE BESØKENDE FINNER WEBSIDEN DIN, HVORDAN DE BRUKER DEN OG IKKE MINST HVORDAN DE BLIR DINE KUNDER. MED DENNE INFORMASJONEN KAN MAN MED ENKLE GREP OPTIMALISERE ET NETTSTED. ET VERKTØY SOM GJØR NETTOPP DENNE JOBBEN ER GOOGLE ANALYTICS. DET ER BRA OG DET ER HELT GRATIS.
Når du er pålogget Google Analytics får man kjapt overblikk over trafikken på nettstedet. Man får overordnet informasjon om besøk, sidevisninger, tid på nettstedet og lojaliteten til de besøkende. Videre ser man hvor de besøkende kommer fra – både med tanke på geografi og trafikkilder. Med den gode grafiske presentasjonen tar det dessuten ikke mange sekundene å få overblikk – har besøket gått opp eller ned? I tillegg til oversikten har Google Analytics fire hovedseksjoner med dybdedata om de besøkende; hvem er de, hvor kommer de fra, hva har de foretatt seg på nettsiden og fullførte de dine ønskede handlinger? HVEM HAR VÆRT PÅ BESØK? Under seksjonen ’Besøkende’ finner du nøkkelinformasjon om hvem som har besøkt nettstedet i tidsperioden du ønsker å vise data fra. Du finner informasjon om totale besøk, unike besøkende, lojalitet blant de besøkende, antall sidevisninger og tid brukt på nettstedet. I tillegg kan man finne informasjon om nettleser- og nettverksegenskaper. HVOR KOM DE FRA? Under seksjonen ”Trafikkilder” får man en meget god oversikt over hva som generer trafikk til nettsiden. Det differensieres overordnet mellom 3 typer trafikkilder: direktetrafikk, søkemotorer og henvisningsnettsteder. Direktetrafikk er besøkende som benytter domenenavnet for å komme inn på nettsiden. Trafikkilden søkemotorer viser ikke bare besøk fra søkemotorer, men også hvilke søkeord som har generert trafikk inn på nettstedet, samt hvor mange besøk hvert unikt søkeord har frembrakt. Trafikk fra henvisningsnettsteder viser besøk på bakgrunn av linker på andre nettsteder. Er du ikke fornøyd med antallet besøkende har Google også integrert muligheten for å kjøpe AdWords direkte i Analytics. Dette
betyr at man kan kjøpe annonseplass på google.no som vises når noen søker på søkeordene du har kjøpt.
1,5% av totale besøk, vil det kunne vises stort på bunnlinjen om man klarer å øke denne til f.eks. 2%.
HVA GJORDE DE? Seksjonen “Innhold” gir oversikt over hvilke sider de besøkende oppsøker. Man får statistikk på destinasjonssider – altså den første siden man besøker (dette er ikke nødvendigvis forsiden), samt utgangssider som er den siste siden man besøker før man forlater nettstedet. I tillegg har man muligheten for nettstedoverlegg. Nettstedoverlegg er en funksjon som viser nettsiden med et overliggende lag som viser hvor de besøkende har klikket. Man får altså en god oversikt over kalde og varme soner på nettsiden.
I tillegg til å få Analytics til å rapportere konverteringsfrekvens, kan man også bruke programmet til å gi fullstendige rapporter om omsetning og mest solgte produkter. Og skulle du være usikker på hvordan tallene for webløsningen din er mot konkurrentene sine, tilbyr Analytics også referansemålinger. Referansemålinger gjør at du kan sammenligne nettstedets statistikk opp mot øvrige nettsteder i den eller de bransjene du befinner deg i.
BLE DET NOEN KUNDER? Funksjonaliteten “Mål” er et verktøy for beregning av målkonverteringer. Målkonvertering er et godt verktøy for evaluering av hvor bra nettstedet oppfyller sitt formål. Et mål defineres i Analytics som en spesifikk side på nettstedet en besøkende kommer til, på bakgrunn av at de har gjennomført en ønsket handling. Eksempel på mål-sider er ”Takk for at du registrererte deg” – sider, kvitteringssider i en nettbutikk og bekreftelsessider ved nedlastinger. Ved å ha definert mål, kan man se konverteringsfrekvens på bakgrunnen av den totale trafikken på nettstedet. F.eks. hvor mange av de totalt besøkende i en nettbutikk som faktisk gjennomførte et kjøp. Ligger denne på
RAPPORTERING Analytics tilbyr i dag eksport av statistikk i formatene PDF, XML, CSV og TSV. Man kan også sette opp automatisk rapportering til e-post. Man velger da selv hva rapporten skal inneholde, samt hvor ofte man ønsker å motta den. Hvordan samler Google Analytics inn grunndataene? Google Analytics benytter informasjonskapselbasert datainnsamling(cookies). Rapporteringen er avhengig av at innstillingene for informasjonskapsler ikke er deaktivert i webleseren til brukeren. Er de deaktiverte, vil ikke Google Analytics telle besøket. Fordelen med bruk av informasjonskapselbasert datainnsamling er at den ekskluderer for eksempel treff fra roboter eller edderkopper. n
1.UTGAVE 2009 WEB360 - 15
Typografi på web TEKST: MORTEN WIKSTRØM FOTO: WWW.STOCKPHOTO.COM / PER MORTEN TRØEN KILDEHENVISNINGER: SE SIDE 18
TYPOGRAFI ER ET VIKTIG VISUELT REDSKAP SOM KAN BIDRA TIL Å FORSTERKE DET SKREVNE ORD PÅ ULIKE MÅTER. MENS DET SKREVNE ORD FORMIDLER INNHOLDET, KAN TYPOGRAFIEN SAMMENLIGNES MED STEMMEN. MEN HVILKE SKRIFTTYPER FUNGERER PÅ NETT OG HVILKE FUNGERER IKKE? OG HVA BØR MAN GJØRE OM MAN ØNSKER Å BENYTTE EN SKRIFTTYPE SOM IKKE ER WEBSIKKER? HVA ER TYPOGRAFI? Begrepet typografi stammer fra en gresk sammensetning av típos og gráfein. Tipos kan oversettes med avtrykk, mens gráfein betyr å male, skrive eller risse. Ordsammensetningen ble tatt i bruk i Frankrike i det sekstende århundre som en betegnelse for trykkerier som brukte sats av løse typer. I dag benyttes begrepet som et navn for utforming og behandling av skrift, bokstaver og andre grafiske elementer innen grafisk design. Valg av skriftsnitt er nok ett av de aller viktigste elementene i et design, og med skjermbasert kommunikasjon har man åpnet for en rekke visuelle muligheter man tidligere bare kunne drømme om. Dog er det også noen hensyn man bør ta. SKRIFTGRUPPER Typografer og designere har gjennom tiden systematisert og kategorisert ulike skrifttyper på bakgrunn av deres form og fasong. Svært forenklet kan man si at man for skjermbasert typografi har to hovedgrupper: Antikva og Grotesk (Se tabell). WEBSIKRE SKRIFTTYPER En av de største utfordringene med ulike skrifttyper på web, er at det finnes begrensninger i hvilke skrifttyper som fungerer i ulike nettlesere og på ulike plattformer. Primært ligger de ulike skrifttypene lagret lokalt på datamaskinen din, og stilarket/CSS til den spesifikke nettsiden forteller nettleseren din hvilken skrifttype som skal brukes på aktuell tekst. Om den angitte skrifttypen ikke finnes på maskinen din, vil nettleseren velge en forhåndsvalgt skrifttype. Til høyre følger en tabell over de skrifttypene vi pr. dags dato kategoriserer som websikre skrifttyper. Dette betyr at de finnes og fungerer i de nyere nettleserne og på de fleste plattformer (Windows, Mac). WEBUSIKRE SKRIFTTYPER Av og til kan det være behov for å benytte skrifttyper som ikke er websikre. For eksempel kan en organisasjon ha en profil med en
16 - WEB360 1.UTGAVE 2009
GRUPPE
BESKRIVELSE
EKSEMPLER
Antikva
En samlebetegnelse for skrifttsnitt med seriffer (de tynne avslutningene på grunn- og hårstrekene som styrker den vannrette virkningen av skriften) og ulik bredde på grunn- og tverrstrek. Skrifttyper med antikvaform oppstod først i trykkermiljøet i Venezia på slutten av 1400-tallet.
Times/Times New Roman Bookman Minion Pro
Grotesk
Formen oppstod i England og ble i 1916 brukt for første gang av boktrykkeren William Caslon III. Kjennetegnes ved at bokstavene har optisk like tykke streker og mangler seriffer. Kalles også sans serif.
Trebuchet MS Helvetica Verdana Geneva
skrifttype som ikke er websikker. Tradisjonelt har dette blitt løst ved å lage bilder av designelementene som inneholder den aktuelle skrifttypen. Dette være seg f.eks. logoer og overskrifter. Det er flere grunner til at dette ikke er noen optimal løsning av skrifttype-
Arial, Helvetica, sans-serif Arial Black, Gadget, sans-serif Comic Sans MS5, cursive Courier New, monospace Georgia1, serif Impact5, Charcoal, sans-serif Lucida Console, Monaco5, monospace
Lucida Sans Unicode, sans-serif Palatino, Book Antiqua3, serif
problematikken. Bilder er statiske, og det vil være tungvint å endre på teksten (man må da ved hjelp av et bildebehandlingsprogram produsere nye bilder). Videre vil ikke teksten i bildet bli indeksert av de ulike søkemotorene.
Tahoma, Geneva, sans-serif Times New Roman, Times, serif Trebuchet MS1, Helvetica, sans-serif Verdana, Verdana, Geneva, sans-serif Symbol, Symbol2 Webdings, Webdings2 Wingdings, Wingdings2, Zapf Dingbats2 MS Sans Serif4, Geneva, sans-serif MS Serif4, New York, serif
1
Georgia og Trebuchet MS kommer sammen med Windows 2000/XP, IE og øvrige Microsoft programmer.
2
Symbol skrifttyper blir primært vist korrekt i Internet Explorer.
Book Antiqua er tilnærmet det samme skriftsnittet som Palatino Linotype. Palatino Linotype er inkludert i Windows 2000/XP, mens Book Antiqua er inkludert i Windows 98. 3
Disse skrifttypene er ikke TrueType snitt, men bitmaps. Dette medfører at de ikke fungerer godt i enkelte størrelser (de er designet for følgende størrelser: 8, 10, 12, 14, 18 og 24 punkter i 96 DPI). 4
Disse skrifttypene fungerer i Safari, men kun når man benytter normal versjonen (uten fet og kursiv). Comic Sans MS fungerer om fet, men ikke i kursiv. 5
SIFR TEKNOLOGI - JA TAKK TIL USIKRE SKRIFTTYPER! Som løsning på problemet anbefaler vi derfor enten å benytte dynamisk Flash eller sIFR teknologi. sIFR er en kombinasjon av javascript, CSS og Flash. sIFR åpner for at man kan presentere webusikre skrifttyper på et nettsted, gjøre den dynamisk (slik at den kan styres
via publiseringsløsningen) og også tilgjengeliggjøre teksten for å bli indeksert av søkemotorer. På www. frostating.no har vi benyttet sIFR teknologi for å presentere overskrifter i profilskrifttypen deres som ikke er en websikker skrifttype. n
1.UTGAVE 2009 WEB360 - 17
Prosessen av Increo Creations
PÅ SLUTTEN AV KUNDEMØTET . . .
PÅ KONTORET MØTES TEAMET
FLOTT!! DA HAR VI EN AVTALE . VI STARTER ARBEIDET MED EN GANG OG DU VIL HØRE FRA OSS UNDERVEIS I PROSESSEN YESSS!!
DA TROR JEG VI HAR FUNNET EN GOD LØSNING! DA ER DET BARE Å SETTE I GANG FOLKENS, DET ER MASSE SOM SKAL GJØRES.
. . . FØR DESIGNEREN OVERTAR . . .
PROSJEKTLEDEREN STARTER MED PLANLEGGINGEN AV INNHOLDET OG STRUKTUREN AV NETTSIDEN. . . .
HMMM . . . ER DET BEDRE MED DENNE FARGEN?
ETTER AT UTVIKLINGEN AV NETTSIDEN ER FERDIG PRESENTERES LØSNINGEN FOR KUNDEN . SAMMEN GJENNOMFØRER DE EN KVALITETSSJEKK AV WEBSIDEN.
DETTE BLIR BRA!
. . . OG TIL SLUTT UTVIKLER
HVORFOR FUNKER IKKE DETTE SCRIPTET?
NOEN DAGER SENERE SE!!! BEDRIFTEN HAR FÅTT EN NY FLOTT NETTSIDE. DENNE VAR MYE BEDRE ENN DEN FORRIGE!
YESSS!!
THE END TILBAKE SITTER EN FORNØYD KUNDE SOM KAN KONSTANDERE AT DEN NYE NETTSIDEN ER EN SUKSESS!
18 - WEB360 1.UTGAVE 2009
ØNSKER DU OGSÅ EN WEBLØSNING? KONTAKT OSS PÅ WWW.INCREO.NO ELLER TLF. 815 51 888 MAIL: INCREO@INCREO.NO
aktuelt KORT INFORMASJON OVER AKTUELLE SAKER FRA INCREO
serverdrift FORBEDRET SIKKERHET I NYTT SERVERROM Alle våre servere er nå flyttet til et profesjonelt serverrom i Trondheim. I det nye serverrommet er det svært god kjøling, og solide rutiner for adgangskontroll. Sikkerhet er videre ivaretatt ved automatisk varslingssystem, redundante strømkurser og UPS.
Ny webløsning for Bautas TEKST: MORTEN WIKSTRØM
BAUTAS ER EN DEL AV DET FINSKE UTLEIESELSKAPET RAMIRENT, SOM ER ET LEDENDE UTLEIESELSKAPET I NORDEN OG I SENTRAL- OG ØST EUROPA. I NORGE ER DET BAUTAS SOM REPRESENTERER RAMIRENT, OG BAUTAS BESTÅR AV CA. 40 AVDELINGER, OVER 600 MEDARBEIDERE OG EN MASKINPARK PÅ CA. 35.000 MASKINER. SELSKAPET ER TOTALLEVERANDØR PÅ UTLEIE AV MASKINER OG UTSTYR, OG INCREO FIKK JOBBEN MED Å UTVIKLE NY WEBLØSNING FOR BAUTAS. Webløsningen for Bautas er omfattende, og leveransen inneholder blant annet innholdsarkitektur, visuelt design, publiseringsløsningen InCreo CMS, system for produktadministrasjon, søkemotor, kartløsning med mer. - Websiden er en del av vår ambisjon om å kommunisere enda bedre og tydeligere med kundene våre, sier markeds- og kommunikasjonsdirektør Ann-Kristin Ytreberg til bygg.no. - Vi har lagt vekt på at man intuitivt og raskt skal komme frem til informasjon om våre maskiner og utstyr, og finne gode eksempler og referanser om bruk av disse. Om kort
Lanseringsdato: Utviklingstid: Teknologi brukt:
9. mars 2009 6 måneder HTML, ASP.Net, MsSQL database, C#, JavaScript, Ajax, CSS, Photoshop, Flash
tid vil også våre kunder kunne logge seg inn og finne informasjon om sitt leieforhold og oppdatert status på prosjekter med oss, legger hun til. Vi takker Bautas for tilliten og ser fram til et videre godt og tett samarbeid. n
KILDEHENVISNINGER Informasjonsarkitektur - Wikipedia.org • Information architecture for the Word Wide Web SEO: Trender for søkmotoroptimalisering i 2009 - www.webpronews.com/topnews/2008/11/17/seo-about-to-getturned-on-its-ear • www.conversationmarketing.com/2008/12/seo-2009-adapt-or-die.htm • www.seomoz.org/blog/some-interesting-tips-and-tidbits-from-ses-london-day-1 • www.redcardinal.ie/search-engine-optimisation/12-08-2006/clickthroughanalysis-of-aol-datatgz/ • www.seomoz.org/article/google-historical-data-patent Ord som trigger - www.wikipedia.no • www.TronderEnergi.no • Nina Furu (2009). “Å vinne webben på 2 sekunder” Typografi på web - www.ampsoft.net • www.wikipedia.org • www.mikeindustries.com/blog/sifr/ • www.typografi.no • www.caplex.no
RASKERE INTERNETTILKOBLING Serverne er tilknyttet internett med en ny internettlinje med økt kapasitet. Vi har nå 100Mbit tilkobling, som skal gi svært gode overføringshastigheter og responstider til alle tjenester levert av oss. Kravene til hastighet og svartider på webløsninger øker dramatisk ettersom brukerne blir mer komfortable med denne typen tjenester, og får nye oppgraderte bredbåndsabonnement med høye hastigheter. Oppgraderingen av internettilkoblingen gjør oss i stand til å være i forkant av denne utviklingen. FORBEDRET TJENESTE FOR BACKUP Vi har kjøpt inn en moderne backupløsning som både gir oss mulighet for rask gjenoppretting og mulighet for å beholde historikk i lengre tid. Backup av alle tjenester gjøres en gang i døgnet, og lagres sentralt i nettverket. Eldre data arkiveres på tape, slik at de er optimalt sikret mot for eksempel virusangrep og datainnbrudd. I tillegg lagres utvalgte backuptaper utenfor serverrommet, slik at om en katastrofe skulle inntreffe kan man hente tilbake data fra disse tapene. DEDIKERTE SERVERE FOR KREVENDE WEBLØSNINGER Vår nye produktserie med dedikerte servere er nå satt i drift. En dedikert server er anbefalt når webløsninger har mer enn ca 1000 besøk pr dag, og vil gi løsningen bedre responstid, kapasitet, oppetid og sikkerhet. Serverne er spesialtilpasset hosting av webløsninger, og inkluderer alt man trenger for å håndtere tusenvis av brukere pr. dag med raske responstider. Serverne er basert på den nyeste teknologi tilgjengelig med Windows 2008 Server og SQL Server 2008, og man kan velge mellom forskjellige konfigurasjoner og priser. Når man har spesielle behov kan man også velge å koble sammen flere servere for enda bedre ytelse og sikkerhet, eller ta i bruk utvidet lagringskapasitet fra vår lagringsløsning.
1.UTGAVE 2009 WEB360 - 19
TIL DAGLIG LEDER MARKEDSSJEF WEB-ANSVARLIG
ANSVARLIG UTGIVER: Informasjon: InCreo Interactive Creations AS Postboks 8823, 7481 Trondheim www.increo.no
Vi kan web. Be om et uforpliktende møte på www.increo.no
OSLO
BODØ
TRONDHEIM
Sandakerveien 24 A, Bygg 1, 4. etasje
Storgata 30, 2. etasje
Nedre Elvehavn, TMV-Kaia 21 7014 Trondheim