Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Responsive Web Design, Case: BI - Ark2012

726 views

Published on

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.

Published in: Technology
  • Be the first to comment

  • Be the first to like this

Responsive Web Design, Case: BI - Ark2012

  1. 1. BIHva gjør du når over 20.000 nettsider skaltilgjengeliggjøres for mobil og iPad, og over40 redaktører skal i tillegg holde nettstedetvedlike.
  2. 2. Vi erAud 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. 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. 4. Litt om bakgrunnen• Behov for å være tilgjengelig på mobil• Innovativ skole• Ung målgruppe• Statistikk viste økende mobil bruk
  5. 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. 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. 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. 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. 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. 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 BIs 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 BIs 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. 11. Interaksjonsdesign og grafisk design• Laget wireframes • Mobil og desktop• Brukertestet wireframes• Designet noe for • Mobil og desktop
  12. 12. Interakasjonsdesign
  13. 13. Designskisser
  14. 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. 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. 16. TEKNISK SAGT• Fluid Grids #nav { float: left; width: 25%; } #box { float: left; font-size: 1em; }
  17. 17. TEKNISK SAGT• Flexible Images & Media #box img { max-width: 100%; }
  18. 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. 19. Breakpoints
  20. 20. Universell utforming• En løsning for alle
  21. 21. Universell utforming• Prioritert innhold• Zoom muligheter i responsiv design• Samme HTML uansett enhet – gjenkjennbart• Brukeren bestemmer selv
  22. 22. Zoom
  23. 23. Zoom
  24. 24. Leela’s Adaptive Images• Skalering av bilder for både desktop og mobil• Wurfl
  25. 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
  26. 26. Adaptive Images• Skalering av bilder for både desktop og mobil• Ytelse - Asynkrom lasting av bilder• Wurfl
  27. 27. Testing i Chrome
  28. 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. 29. 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".
  30. 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

×