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.

Design smartere responsive design - offentlig

768 views

Published on

Foredrag om Mobiltilpasning av nettsider. Holdt på Dataforeningens Webkommunikasjonsgruppe den 6. september 2012 på Oslo Kongress senter.

  • Be the first to comment

Design smartere responsive design - offentlig

  1. 1. ØRJAN CLAUSEN Daglig leder og rådgiver i Northern Beat Bakgrunn Informasjonsvitenskap Webdesign Kommunikasjonsarbeid Markedsføring
  2. 2. • Northern Beat er et visjonært initiativ med fokus på strategi, idè, konsept og design• Northern Beat er et datterselskap av Nova Consulting Group som i tillegg består av: – Novanet AS • Seniorutviklere innen SharePoint og .net – Epinova AS • Ekspertmiljø for EPiServer utvikling
  3. 3. DESIGN FORMOBILE FLATERResponsive Web Design eller skreddersøm?Mobile first eller tilpasning i etterkant?Hvordan skaper vi den beste løsningen?
  4. 4. HVORDAN SKAPE DEN BESTELØSNINGEN?• I dag ser vi på – Prioriteringer – Valg av løsning – Ressursbruk – Besøkende
  5. 5. MEN FØR HVORDANHVORFOR?
  6. 6. HVORFOR SKALDU GÅ MOBIL?
  7. 7. …FORDI:• Alle andre gjør det • Våre tjenester• Fordi det er der alle passer perfekt for våre kunder er mobil• Vi får klager fordi vi • Trafikken på ikke er der nettstedet vårt er• Vi har unikt innhold over 30% mobil som vi kan tilby • Vi har penger igjen på budsjettet
  8. 8. TENK GJENNOM DETTE FØR DERE RINGER...og sørg for at ambisjoner og forventninger er forankret i organisasjonen
  9. 9. OK - vi er klare!HVORDAN GÅR VI FREM?
  10. 10. MOBIL vs. DESKTOPPåstand: –Ikke så annerledes å lage mobil løsning
  11. 11. PROSESSEN Målsetting Interaksjons- med Funksjonelle Navigasjon design og Grafiskløsningen og og innholds- og innholds- informasjons- design bruker- krav presentasjon arkitektur analyse
  12. 12. MÅLSETTING OG BRUKERANALYSE• Hva skal lages?• Hvorfor skal det lages?• Hvem er brukerne?• Hva forventer brukerne å finne?
  13. 13. FUNKSJONELLE OG INNHOLDSKRAV• Hvordan skal mobile nettstedet fungere? – Hvilke funksjoner trengs for å løse behovet som eierne av nettstedet har og hva brukerne krever• Hva finnes av innhold? – Forbedre, endre eller fjerne? – Hvordan presenteres innholdet?
  14. 14. INTERAKSJONSDESIGN• Hvordan skal innholdet struktureres? – Prioritering av innhold – Trådskisser/wireframes – Relatert informasjon
  15. 15. INFORMASJONSARKITEKTUR• Hvordan skal innhold plasseres i henhold til annet innhold? – Hva er viktig innhold? – Hva er relatert innhold? – Hva hører naturlig sammen?
  16. 16. NAVIGASJON & INNHOLDSPRESENTASJON• Hvordan skal man navigere på nettstedet? – Antall nivå – Hovedmenyer og sekundærmenyer• Hvordan skal innholdet presenteres? – Tekst – Bilder – Video – Infografikk – Lyd
  17. 17. GRAFISK DESIGN• Hvordan skal de se ut? – Look & feel – Design guidelines/design manual – Universell utforming og tilgjengelighet• Hvordan vekte innhold for å oppnå mest brukervennlighet? – Fargebruk – Call to action
  18. 18. PROSESSEN GANSKE LIK MEN HVORDAN GÅRMAN EGENTLIG FREM?
  19. 19. PRIORITERINGER• Andre hensyn – Mindre skjerm – Dårligere linje – Annen kontekst – Andre forventninger hos besøkende – Begrensninger i teknologi – Ekstra tilgjengelig funksjonalitet
  20. 20. MINDRE SKJERM• Vi må prioritere• Vi må komprimere• Vi må fokusere• Vi må tilpasse• Vi må tenke skalering
  21. 21. DÅRLIGERE LINJE• Store bilder• Video• Mye innhold = lang side• Lang side = lang lastetid• Man forventer lengre lastetid på mobil
  22. 22. VILLIG TIL Å VENTE 3% 20% 16% < 1 sekund 1-5 sekunder 6-10 sekunder 15% 11-15 sekunder 16-20 sekunder 30% 20 + sekunder 16%
  23. 23. FORVENTET LASTETID 11% 12% Raskere Nesten lik 25% Lik 31% Litt tregere Mye tregere 21%
  24. 24. http://mobile.smashingmagazine.com
  25. 25. ANNEN KONTEKTS• Når brukes mobil fremfor desktop? – På veien – Butikken – Sofaen – Møter – Sengen
  26. 26. VET VI HVA DE VIL HA?Du står i butikken.• Vil du da ha middagsoppskriften som du så på i går da du planla middagen – …eller vil du bare ha ingrediensene?Du sitter på trikken.• Vil du lese artikkelen om Berit du så på yr.no? – …eller vil du bare vite hva været blir i morgen akkurat hvor du er?
  27. 27. 31
  28. 28. DET ER SÅRE ENKELT!• Gi brukerne det de vil ha - når de vil ha det• Utfordringen er å finne ut hvilken kontekst de besøkende befinner seg når de besøker nettstedet
  29. 29. ER DET MULIG?33
  30. 30. WE ACCESS THE INTERNET FROM MULTIPLE DEVICES*HVA SURFES DET FRA? 44% of the 16% of the – Nesten 100% surfer fra desktop consumers access consumers access – 44%internet from a the surfer fra mobil the internet from a – Mobile Phone! 16% surfer fra tablet Tablet ! 120%! 100%! 80%! 60%! Nordic! 40%! 20%! 0%! PC!(PC/Mac/Desktop)! Mobile!Phone!(iPhone,!Android)! Tablet!(iPad,!Galaxy!Pad)! Which of the following devices are you using accessing the Internet?! undersøkelse 2012 iProspect !!!!!! ! Digital Performance on a Global Scale
  31. 31. FORVENTNINGENE ENDRES• Ny og bedre teknologi – Bedre kamera – Bedre og større skjermer – Raskere enheter og linje• Prisendringer for bruk – Fastpris abonnement• Applikasjoner ”skjemmer” oss bort og setter standard for hva man skal forvente• Multikanalstrategier slår til
  32. 32. iProspect undersøkelse 2012
  33. 33. WEBSITES* ARE* STILL* NOT* MO3% synes at nettsideneikke fungerer for desktop STILL* MOBILE* WEBSITES* ARE* NOT* PHONE* FRIENDLY* E10% synes at nettsideneikke fungerer for tablets PHONE* 3%* the* WEBSITES* ARE* STILL* NOT* MOBILE* FRIENDLY* ENOUGH* of* d 10% consumers* the* in* consu Nordics* generally* Nordi fin s* websites* the*24% synes at nettsidene er fin s* t they*visit* not* are* they* v well*prepared* for* well* ptilbpasset mobil visning 3%* the* of* d the*screen* of* 10%* the* size* the* 24%T sc their* of* PC* d their* consumers* the* in* *consumers* the* in* consum Nordics* generally* * Nordics*The websites I visit, on m y PCNordic generally* are in gene fin s* websites* the* fin s* iProspect undersøkelse 2012fin s* the* websites* th they*visit* not* are* they* visit* not* are* they* vi well*prepared* for* well*prepared* for* well* pr
  34. 34. BEGRENSNINGER I TEKNOLOGI• Verden går videre, men det er problemer med: – Tredjepartsløsninger • Flash • Java Applets – BankID på mobil • Foreløpig kun Telenor, Talkmore og Djuice, og utfordring med en rekke telefonmodeller – Video • Ikke støtte for alle teknologier på alle enheter – +++
  35. 35. EKSTRA TILGJENGELIG FUNKSJONALITET• GPS• Kamera• Kontakter• Bilder• Near Field Communication (NFC) – Google Wallet• Radio Frequency Identification (RFID) – PayEx
  36. 36. VALG AV LØSNINGFordeler og ulemper med de forskjellige løsnigene
  37. 37. JEG DELER MOBILTILPASNING INN I:• Ikke tilpass…• Apps• Responsive Web Design• Skreddersydde maler 1. Samme sidestruktur • I samme system • Tredjepartsløsninger 2. Ulik sidestruktur • I samme system • Tredjepartsløsninger
  38. 38. APPLIKASJONER• Lastes ned via App Store, Google Play og lignende• Vanligvis brukerdefinerte oppgaver• Fordeler – Tilgang til telefonens funksjoner i utstrakt grad – Gir lettere mulighet for inntekter – Man kan sende meldinger til brukerne• Ulemper – Ikke for alle – Krever utvikling for flere plattformer
  39. 39. BRUKERDEFINERTE OPPGAVER43
  40. 40. 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
  41. 41. TEKNISK SAGT• Fluid Grids #nav { float: left; width: 25%; } #box { float: left; margin-left: 5%; }
  42. 42. TEKNISK SAGT• Flexible Images & Media #box img { max-width: 100%; }
  43. 43. TEKNISK SAGT• Media queries @media screen and (max-width: 1160px) { #nav { display: none; } } @media screen and (max-width: 1540px) { #box { background-color; red; } }
  44. 44. OLUF LORENTZEN48
  45. 45. SKREDDERSYDDE MALER• Samme sidestruktur – I samme system – Tredjepartsløsninger• Fordeler – Redaktørene slipper å forholde seg til flere nettsteder (vanlig og mobil)• Ulemper – Alt innhold må tilpasses – Noen system gir utfordring med lenker og skaper dobbelt innhold hos Google som gir negativ virkning – Hvis man deler lenken til et mobilt nettsted er det ikke sikkert det vises riktig på desktop
  46. 46. TEKNISK SAGT – SAMME SYSTEM• Når en besøkende kommer inn på et nettsted så forsøker en å finne ut hvilken enhet det er• Om det er en mobil som systemet kjenner til så vises innholdet basert på egne maler – Enten ved å sende brukeren til ny side eller ved å hente ny sidemal• Om det ikke er en mobil så vises vanlig nettside
  47. 47. TEKNISK SAGT – TREDJEPARTSLØSNING• Når en besøkende kommer inn på et nettsted så forsøker en å finne ut hvilken enhet det er• Om det er en mobil som systemet kjenner til så sendes brukeren til en tredjepartsløsning – Innholdet hentes fra publiseringsløsningen via RSS, XML, Webservice eller lignende• Om det ikke er en mobil så vises vanlig nettside
  48. 48. www.itavisen.no m.itavisen.no 53
  49. 49. www.regjeringen.no/mobil/www.regjeringen.no 54
  50. 50. www.rica.nowww.rica.no
  51. 51. SKREDDERSYDDE MALER• Ulik sidestruktur – I samme system – Tredjepartsløsninger• Fordeler – Mer brukervennlig innhold (om man har prioritert riktig)• Ulemper – Redaktør må forholde seg til forskjellige nettsted – Alt innhold må tilpasses – Noen system gir utfordring med lenker og skaper dobbelt innhold hos Google som gir negativ virkning – Hvis man deler lenken til et mobilt nettsted er det ikke sikkert det vises riktig på desktop
  52. 52. TEKNISK SAGT – SAMME SYSTEM• Når en besøkende kommer inn på et nettsted så forsøker en å finne ut hvilken enhet det er• Om det er en mobil som systemet kjenner til så henvises brukeren til mobilt nettsted• Om det ikke er en mobil så vises vanlig nettside
  53. 53. TEKNISK SAGT – TREDJEPARTSLØSNING• Når en besøkende kommer inn på et nettsted så forsøker en å finne ut hvilken enhet det er• Om det er en mobil som systemet kjenner til så sendes brukeren til en tredjepartsløsning• Om det ikke er en mobil så vises vanlig nettside
  54. 54. www.ruter.no/no/mobil/www.ruter.no
  55. 55. www.episerver.no/episerverwww.episerver.no
  56. 56. RESSURSBRUKHva er kostnadsdrivere?
  57. 57. Frontend utvikling Backend utvikling Innholds-arbeid Interaksjons- Lisenser Strategi designTeknologiResponsive Web Design – X X X XtilpasningResponsive Web Design – nytt X X XnettstedSkreddersydde – egen X X X X Xsidestruktur i samme systemSkreddersydde – egen X X X X X Xsidestruktur i annet systemSkreddersydde – samme X X X X Xsidestruktur i samme systemSkreddersydde – samme X X X X X Xsidestruktur i annet system
  58. 58. BESØKENDEHvordan tilnærme oss?
  59. 59. VI ER TILBAKE TIL UTGANGSPUNKTET• Hva vil du tilby?• Hva forventer de besøkende å finne? – I hvilken kontekst?• Anta, test og les statistikk for å kunne gjøre noe valg
  60. 60. SNAKK MED BRUKERNE• Hør hva de vil ha og hva de forventer• Se hva brukerne får hos konkurrentene65
  61. 61. SJEKK BESØKET PÅ SIDENE• Hvor mange besøker nettstedet fra en mobilenhet hver måned?• Hvor mange av dem er iPads?• Hva er de mest besøkte sidene?
  62. 62. HVA SIER STATISTIKKEN?• Ofte ser vi long-neck-long-tale
  63. 63. ANALYSER BRUKERATFERD• Finnes det et mønster?
  64. 64. LAG BRUKERSCENARIER
  65. 65. LAG MOBILE PROTOTYPER
  66. 66. BRUKERTEST PROTOTYPER• Lag noe som brukerne kan prøve selv• Juster og test igjen• Ta i mot alle tips du kan få 71
  67. 67. ØRJAN CLAUSEN Daglig leder og rådgiver i Northern Beat Bakgrunn Informasjonsvitenskap Webdesign Kommunikasjonsarbeid Markedsføring

×