1. 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.

2. Litt om bakgrunnen
• Behov for å være tilgjengelig på mobil
• Innovativ skole
• Ung målgruppe
• Statistikk viste økende mobil bruk

3. 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

4. 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

5. 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…

6. 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

7. 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

8. Emnekart for å forstå studentene
Studieliv
Sport
Eksamen
Hybel
Venner Låne-
By kassen
Bosted
Pris/
finansier Fagopp-
ing bygging
Pris/
Nettverk
Finansie-
Tids- ring
punkt Anner- Søknads- Kontakt
Rykte kjennels skjema Oppstart "bachelor"
Gjenno Jobb- e
adm.
mføring Kriterier mulighet
Teste-
for valg monial
Klasserom
av skole Fordypni
ng
Klasse- Spesialise
rom Karriere
ring
Hva er
Kurstype bachelor?
Hvorfor Sosialt
Nett- bachelor?
Fokus FAQ Påbygging Teste-
studier Spesial Intern-ship Utveksling
videre
Fag Double monial
degree
+1 modell Campus
Opptaks-
Karriere
krav Jobb-
Eksame
Generell
n Opptaks- muligheter
Utplasse Fakultet info
Bachelor- Hvorfor
krav
Jobbmul ring Høyskol program valgte jeg
Utveksli Studie-
igheter e oppsett/ Teste- Bachelor Bi
ng kalender monial
el.
Søknads- årsstudie
skjema Låne-
kassen
Pris/
Finansie- Utveksling Bachelor
ring
Fagopp- Eksamen Studie- Fadderuke
evt
bygging
Kontakt hovedfag miljø
"master"
adm.
FAQ For Aktiviteter
Oppstart
Master
Sommer- virksom-
Hva er
Sommer- program heter
program
master? (.edu)
(.edu) Klasserom
BI's
Hvorfor
master? Master- Generell Faq Rådgiver
program Anerkjenn Pakke-
Publika- info
Anerkjenn sjoner Fokus else tilbud
else Studie-
Internasjo miljø Internasjo
nalt?
nalt?
Master
Prosjekter Låne-
For kassen
virksom- Hvordan
Jobb-
heter
Forskere Intern-ship søke
muligheter BI's
Rådgiver
Hvorfor Pakke-
valgte jeg Faq tilbud
Bi
Teste- Låne-
monial kassen Karriere
Hvordan
Campus søke
Sosialt
Fakultet
Karriere Studie-
Klasserom
oppsett/
kalender

9. Interaksjonsdesign og grafisk design
• Laget wireframes
• Mobil og desktop
• Brukertestet wireframes
• Designet noe for
• Mobil og desktop

10. Interakasjonsdesign

11. Designskisser

12. 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

13. Breakpoints

14. Universell utforming
• En løsning for alle

15. Universell utforming
• Prioritert innhold
• Zoom muligheter i responsiv design
• Samme HTML uansett enhet – gjenkjennbart
• Brukeren bestemmer selv

16. Zoom

17. Zoom

18. Leela’s Adaptive Images
• Skalering av bilder for både desktop og mobil
• Wurfl

19. 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

21. Adaptive Images
• Skalering av bilder for både desktop og mobil
• Ytelse - Asynkrom lasting av bilder
• Wurfl

22. Testing i Chrome

24. 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

25. 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".

26. 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