Foredrag fra Den Norske Dataforenings Ark 2012. Tema var casebeskrivelse fra prosjektet med å gjøre bi.no tilgjengelig for mobil ved bruk av Responsive Web Design.

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. Vi er
Aud Marie Hauge Ørjan Clausen
• Frontendutvikler og uu-rådgiver • Daglig leder i Northern Beat
i Epinova • Tidligere rådgiver og
• Gjesteforeleser på HiOA prosjektleder i Epinova og IXD
• Master i informatikk • Informasjonsviter,
markedsføring, kommunikasjon
og webdesign

3. Hvor jobber vi
• Epinova AS
• EPiServer
• Startet i 2007
• 30 ansatte
• Etablererprisen 2012
• Northern Beat AS
• Strategi, konsept, idé og design
• Startet i 2012
• 6 ansatte

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

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

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

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

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

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

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

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

12. Interakasjonsdesign

13. Designskisser

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

15. RESPONSIVE WEB DESIGN
• Webdesignet responderer på størrelsen til skjermen som
brukes
• Innholdet og HTML er lik, men utseende endrer seg
• Man bruker hovedsakelig
CSS, men også
JavaScript til f.eks.
Bildeskalering
• Ulemper
• Lastetid
• Ikke spisset innhold
• Fordeler
• Ett sidetre

16. TEKNISK SAGT
• Fluid Grids
#nav {
float: left;
width: 25%;
}
#box {
float: left;
font-size: 1em;
}

17. TEKNISK SAGT
• Flexible Images & Media
#box img {
max-width: 100%;
}

18. TEKNISK SAGT
• Media queries
@media screen and (max-width: 1160px) {
#nav {
display: none; }
}
@media screen and (max-width: 1540px) {
#box {
background-color; red;
}
}

19. Breakpoints

20. Universell utforming
• En løsning for alle

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

22. Zoom

23. Zoom

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

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

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

28. Testing i Chrome

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

31. Resultatet
• 40% mer av innholdet på 30% færre klikk
• Besøkstid gikk opp
• 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".

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