BI Hva gjør du når over 20.000 nettsider skal

tilgjengeliggjøres for mobil og iPad, og over

40 redaktører skal i tillegg holde nettstedet

vedlike.

Litt om bakgrunnen

• Behov for å være tilgjengelig på mobil

• Innovativ skole

• Ung målgruppe

• Statistikk viste økende mobil bruk

Litt om de involverte

• Yvonne Hansen – Spesialrådgiver – BI

• Goril Karstad – Senior kommunikasjonsrådgiver – BI

• Ørjan Clausen – Rådgiver (Epinova – nå Northern Beat)

• Thomas Grøndal – Designer (IXD – nå Skalar)

• Roger Guttormsen – Frontendutvikler (IXD – nå Skalar)

• Utviklingsteam Epinova

• Arild Henrichesen – EPiServer Ekspert

• Aud Marie Hauge – Ekspert brukervennlighet og universell utforming

• Karl Granli – Ekspert brukervennlighet og universell utforming

• Karoline Klever – EPiServer Ekspert

• Åge Reinås – EPiServer Ekspert

Prosessen

• Bestilling fra BI – vi må på mobil!

• Vår respons

• Hvorfor?

• Med hva?

• Til hvem?

• Strategi og målgrupper

• Brukere og innhold

• Interaksjonsdesign og grafisk design

• Grensesnittutvikling

• Utvikling

Vår påstand før vi begynte…

• Nettstedet på mobil og nettstedet på desktop skal ikke være like

• Behovet er ikke det samme

• Innholdet må være mer selgende og mer teaser-aktig – research gjør

man på desktop

• Vi lager et lite mobilt nettsted med kult design og lite innhold

• Det ble ikke slik hadde tenkt…

Strategi og målgrupper

• Fokusgrupper

• Leste statistikk

• Leste spørreundersøkelser

• Sjekket av mot BIs strategi

• Satt opp mål

• Selge studie og kurs

• Informere om fag og forskning

• Gi nyttig informasjon

• Avdekket primær- og sekundærmålgrupper

Brukerne og innhold

• Vi koblet sammen innhold, flyttet innhold til andre

seksjoner

• Helt ny struktur på nettstedet

• SEO vennlig

• Fokus på ord og uttrykk

• Domenestrategi

• Fjernet gammelt innhold

Bachelor

Hva er

bachelor?Hvorfor

bachelor?

Bachelor-

program

Anerkjenn

else

Internasjo

nalt?

Jobb-

muligheter

Faq

BI's

Rådgiver

Hvordan

søke

Låne-

kassen

For

virksom-

heter

Studie-

miljø

Sommer-

program

(.edu)

Kontakt

"bachelor"

adm.

Oppstart

Teste-

monial

Klasserom

Aktiviteter

Fadderuke

Pakke-

tilbud

Hvorfor

valgte jeg

Bi

Campus

Sosialt

Karriere

Klasserom

Bachelor

el.

årsstudie

Opptaks-

krav

Utveksling

FAQ

Fagopp-

byggingPris/

Finansie-

ring

Søknads-

skjema

Teste-

monial

Spesialise

ring

Påbygging

videre

Generell

infoFokus

Intern-ship

Karriere

Fakultet

Studie-

oppsett/

kalender

Låne-

kassen

Eksamen

Emnekart for å forstå studentene

Kriterier

for valg

av skole

ByVenner

Bosted

RykteAnner-

kjennelse

Nettverk

Pris/ finansier

ing

Tids-punkt

Jobb-mulighet

Fag

Hybel

Sport

Studieliv

Gjennomføring

Klasse-rom

Nett-studier

Eksamen

Jobbmuligheter

Utveksling

Utplassering

Kurstype

Høyskole

Spesial

Fordypning

Master

Hva er

master?

Hvorfor

master? Master-

programAnerkjenn

else

Internasjo

nalt?

Jobb-

muligheter

Faq

BI's

Rådgiver

Hvordan

søke

Låne-

kassen

For

virksom-

heter

Studie-

miljø

Sommer-

program

(.edu)

Master

Kontakt

"master"

adm.

Oppstart

Teste-

monial

Forskere

Prosjekter

Publika-

sjoner

Pakke-

tilbudHvorfor

valgte jeg

Bi

Campus

Sosialt

Karriere

Klasserom

evt

hovedfag

Opptaks-

krav

+1 modell

UtvekslingFAQ

Fagopp-

bygging

Pris/

Finansie-

ring

Søknads-

skjema

Teste-

monial

Generell

info

FokusIntern-ship

Double

degree

Karriere

Fakultet

Studie-

oppsett/

kalender

Låne-

kassen

Eksamen

Interaksjonsdesign og grafisk design

• Laget wireframes

• Mobil og desktop

• Brukertestet wireframes

• Designet noe for

• Mobil og desktop

Interakasjonsdesign

Designskisser

Grensesnittutvikling

• Tok et teknologivalg

• Responsive Web Design

• Bygget et system for sidemalene

• Viktig for redaktørene å ikke tenke mobil

• Breakpoint

• Tett dialog mellom frontend og designer

Breakpoints

Universell utforming

• En løsning for alle

Universell utforming

• Prioritert innhold

• Zoom muligheter i responsiv design

• Samme HTML uansett enhet – gjenkjennbart

• Brukeren bestemmer selv

Zoom

Zoom

Leela’s Adaptive Images

• Skalering av bilder for både desktop og mobil

• Wurfl

Leela’s Adaptive Images

• Hvorfor?

1. Lav terskel - krever ingen endring av kode, redaksjonelt innhold

eller design

2. Ytelse - Asynkrom lasting av bilder

3. Skalering - automatisk skalering av alle bilder på alle flater

4. Caching – laster ikke bilde på nytt om ingen endring har skjedd

Adaptive Images

• Skalering av bilder for både desktop og mobil

• Ytelse - Asynkrom lasting av bilder

• Wurfl

Testing i Chrome

Utvikling

• Vi konvertere sidemal for sidemal

• Flyttet innhold fra gammel struktur til ny struktur

• Fjernet innhold

• La til nytt innhold

• Holdt kurs og samling med BIs redaktører

• Bygget løsningen på en slik måte at redaktørene i stor

grad ikke trenger å tenke på mobilvisning

Resultatet

• Målinger viser at besøkende på nettstedet ble presentert

for 40% mer av innholdet på 30% færre klikk, samt at de

besøkende brukte mer tid på å lese innholdet på

nettstedet.

• Farmandprisen 2012

• Nettstedet BI.no vant gull under Farmandprisen

Beste nettsted 2012, i kategorien "Åpen klasse".

• Gulltaggen 2012

• BI.no var shortlistet til Gulltaggen 2012 i klassen

"Beste informasjonstjeneste".

Hva lærte vi?

• Lite erfaring fra lignende prosesser

• Både vi og kunden, og ikke bare BI, men de fleste kundene som

starter mobilprosjekt

• Ikke anta noe – i alle fall ikke si det høyt ;-)

• Gjør designet sammen med grensesnittutviklingen, lag et

system, tenk mobil tidlig/først/parallelt

• Ha tett dialog med SEO