Responsive Web Design, Case: BI - Ark2012
0 likes681 views
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.
More Related Content
Viewers also liked (18)
More from rjan Clausen (9)
Responsive Web Design, Case: BI - Ark2012
- 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/ 鍖nansier 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
- 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. Leelas Adaptive Images Skalering av bilder for b奪de desktop og mobil Wurfl
- 25. Leelas 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
Editor's Notes
- #15: Bygd eit system for sidemalane -Stikkord:Lett 奪 vedlikeholdeLett 奪 bygge videre p奪BreakpointsTett dialog mellom frontend og designer - Frontender og designer lagde mye design sammen i HTML og CSS
- #21: - Litt om uu, og ulike behov som endre skriftst淡rrelse, lesebreidde
- #25: - Skalering av bileter som gjer at einikkje m奪 laste meir enn n淡dvendigWurfl teneste som gjev all info ein treng om brukaren som t.d skjerm, flate etcDersom s淡ker p奪 adaptive images finnes dette fra f淡r, men kanskje ikke sofistikert nok
- #26: Bileta blir lagra p奪 server. Dersom du har g奪tt inn med mobil , tdiphone 4, ios4 s奪 genereres bilde ikkjeend奪ein gong n奪r eg kjem inn - Bileta blir skalert p奪 server, kun 1 gong per bruker. Laster nytt bileteberre om det har skjedd ei eindringBy default i heile l淡ysinga, kan ogs奪 brukes i l淡sninger selv om l淡sning ikke er responsiv
- #27: http://bi4x4.epinova.no/studenter/bi-bergen/marineholmen/
- #29: - http://bi4x4.epinova.no/studenter/bi-bergen/marineholmen/