Hva gjør du når over nettsider skal tilgjengeliggjøres for mobil og ipad, og over 40 redaktører skal i tillegg holde nettstedet vedlike.

Transkript

1 BI Hva gjør du når over 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 Bachelor Hva er bachelor? Hvorfor bachelor? Bachelorprogram Anerkjenn else Internasjo nalt? Jobbmuligheter Faq BI's Rådgiver Hvordan søke Lånekassen For virksomheter Studiemiljø Sommerprogram (.edu) Kontakt "bachelor" adm. Oppstart Testemonial Klasserom Aktiviteter Fadderuke Pakketilbud Hvorfor valgte jeg Bi Campus Sosialt Karriere Klasserom Bachelor el. årsstudie Opptakskrav Utveksling FAQ Fagoppbygging Pris/ Finansiering Søknadsskjema Testemonial Spesialise ring Påbygging videre Generell info Fokus Intern-ship Karriere Fakultet Studieoppsett/ kalender Lånekassen Eksamen Emnekart for å forstå studentene Kriterier for valg av skole By Venner Bosted Rykte Annerkjennels e Nettverk Pris/ finansier ing Tidspunkt Jobbmulighet Fag Hybel Sport Studieliv Gjenno mføring Klasserom Nettstudier Eksame n Jobbmul igheter Utveksli ng Utplasse ring Kurstype Høyskol e Spesial Fordypni ng Master Hva er master? Hvorfor master? Masterprogram Anerkjenn else Internasjo nalt? Jobbmuligheter Faq BI's Rådgiver Hvordan søke Lånekassen For virksomheter Studiemiljø Sommerprogram (.edu) Master Kontakt "master" adm. Oppstart Testemonial Forskere Prosjekter Publikasjoner Pakketilbud Hvorfor valgte jeg Bi Campus Sosialt Karriere Klasserom evt hovedfag Opptakskrav +1 modell Utveksling FAQ Fagoppbygging Pris/ Finansiering Søknadsskjema Testemonial Generell info Fokus Intern-ship Double degree Karriere Fakultet Studieoppsett/ kalender Lånekassen Eksamen

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

14 TEKNISK SAGT Fluid Grids #nav { float: left; width: 25%; } #box { float: left; margin-left: 5%; }

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

16 TEKNISK SAGT Media screen and (max-width: 1160px) { #nav { display: none; } screen and (max-width: 1540px) { #box { background-color; red; } }

17 Breakpoints

18 Universell utforming En løsning for alle

19 Universell utforming Prioritert innhold Zoom muligheter i responsiv design Samme HTML uansett enhet gjenkjennbart Brukeren bestemmer selv

20 Zoom

21 Zoom

22 Leela s Adaptive Images Skalering av bilder for både desktop og mobil Wurfl

23 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

24

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

26 Testing i Chrome

27

28 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

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

30 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