ØRJAN CLAUSEN                Daglig leder og rådgiver i                Northern Beat                Bakgrunn              ...
• Northern Beat er et visjonært initiativ med  fokus på strategi, idè, konsept og design• Northern Beat er et datterselska...
DESIGN FORMOBILE FLATERResponsive Web Design eller skreddersøm?Mobile first eller tilpasning i etterkant?Hvordan skaper vi...
HVORDAN SKAPE DEN BESTELØSNINGEN?• I dag ser vi på   –   Prioriteringer   –   Valg av løsning   –   Ressursbruk   –   Besø...
MEN FØR HVORDANHVORFOR?
HVORFOR SKALDU GÅ MOBIL?
…FORDI:• Alle andre gjør det      • Våre tjenester• Fordi det er der alle      passer perfekt for  våre kunder er         ...
TENK GJENNOM  DETTE FØR DERE      RINGER...og sørg for at ambisjoner og forventninger er            forankret i organisasj...
OK - vi er klare!HVORDAN GÅR VI FREM?
MOBIL vs. DESKTOPPåstand: –Ikke så annerledes å  lage mobil løsning
PROSESSEN Målsetting                               Interaksjons-    med        Funksjonelle                     Navigasjon...
MÅLSETTING OG BRUKERANALYSE•   Hva skal lages?•   Hvorfor skal det lages?•   Hvem er brukerne?•   Hva forventer brukerne å...
FUNKSJONELLE OG INNHOLDSKRAV• Hvordan skal mobile nettstedet fungere?  – Hvilke funksjoner trengs for å løse behovet som  ...
INTERAKSJONSDESIGN• Hvordan skal innholdet struktureres?  – Prioritering av innhold  – Trådskisser/wireframes  – Relatert ...
INFORMASJONSARKITEKTUR• Hvordan skal innhold plasseres i henhold til  annet innhold?  – Hva er viktig innhold?  – Hva er r...
NAVIGASJON & INNHOLDSPRESENTASJON• Hvordan skal man navigere på nettstedet?  – Antall nivå  – Hovedmenyer og sekundærmenye...
GRAFISK DESIGN• Hvordan skal de se ut?  – Look & feel  – Design guidelines/design manual  – Universell utforming og tilgje...
PROSESSEN   GANSKE LIK MEN HVORDAN GÅRMAN EGENTLIG FREM?
PRIORITERINGER• Andre hensyn  –   Mindre skjerm  –   Dårligere linje  –   Annen kontekst  –   Andre forventninger hos besø...
MINDRE SKJERM•   Vi må prioritere•   Vi må komprimere•   Vi må fokusere•   Vi må tilpasse•   Vi må tenke skalering
DÅRLIGERE LINJE•   Store bilder•   Video•   Mye innhold = lang side•   Lang side = lang lastetid•   Man forventer lengre l...
VILLIG TIL Å VENTE                   3%            20%         16%                                < 1 sekund              ...
FORVENTET LASTETID           11%     12%                               Raskere                               Nesten lik   ...
http://mobile.smashingmagazine.com
ANNEN KONTEKTS• Når brukes mobil fremfor desktop?  –   På veien  –   Butikken  –   Sofaen  –   Møter  –   Sengen
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  – …el...
31
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øke...
ER DET MULIG?33
WE ACCESS THE INTERNET FROM MULTIPLE DEVICES*HVA SURFES DET FRA?         44% of the                                       ...
FORVENTNINGENE ENDRES• Ny og bedre teknologi  – Bedre kamera  – Bedre og større skjermer  – Raskere enheter og linje• Pris...
iProspect undersøkelse 2012
WEBSITES*                                              ARE*                                                 STILL*        ...
BEGRENSNINGER I TEKNOLOGI• Verden går videre, men det er problemer med:  – Tredjepartsløsninger     • Flash     • Java App...
EKSTRA TILGJENGELIG FUNKSJONALITET•   GPS•   Kamera•   Kontakter•   Bilder•   Near Field Communication (NFC)    – Google W...
VALG AV LØSNINGFordeler og ulemper med de forskjellige løsnigene
JEG DELER MOBILTILPASNING INN I:•   Ikke tilpass…•   Apps•   Responsive Web Design•   Skreddersydde maler    1. Samme side...
APPLIKASJONER• Lastes ned via App Store, Google Play og  lignende• Vanligvis brukerdefinerte oppgaver• Fordeler  – Tilgang...
BRUKERDEFINERTE OPPGAVER43
RESPONSIVE WEB DESIGN• Webdesignet responderer på størrelsen til skjermen som  brukes• Innholdet og HTML er lik, men utsee...
TEKNISK SAGT• Fluid Grids  #nav {     float: left;     width: 25%;     }  #box {     float: left;     margin-left: 5%;     }
TEKNISK SAGT• Flexible Images & Media  #box img {     max-width: 100%;     }
TEKNISK SAGT• Media queries  @media screen and (max-width: 1160px) {    #nav      {         display: none; }         }  @m...
OLUF LORENTZEN48
SKREDDERSYDDE MALER• Samme sidestruktur  – I samme system  – Tredjepartsløsninger• Fordeler  – Redaktørene slipper å forho...
TEKNISK SAGT – SAMME SYSTEM• Når en besøkende kommer inn på et nettsted  så forsøker en å finne ut hvilken enhet det er• O...
TEKNISK SAGT – TREDJEPARTSLØSNING• Når en besøkende kommer inn på et nettsted  så forsøker en å finne ut hvilken enhet det...
www.itavisen.no   m.itavisen.no   53
www.regjeringen.no/mobil/www.regjeringen.no                           54
www.rica.nowww.rica.no
SKREDDERSYDDE MALER• Ulik sidestruktur   – I samme system   – Tredjepartsløsninger• Fordeler   – Mer brukervennlig innhold...
TEKNISK SAGT – SAMME SYSTEM• Når en besøkende kommer inn på et nettsted  så forsøker en å finne ut hvilken enhet det er• O...
TEKNISK SAGT – TREDJEPARTSLØSNING• Når en besøkende kommer inn på et nettsted  så forsøker en å finne ut hvilken enhet det...
www.ruter.no/no/mobil/www.ruter.no
www.episerver.no/episerverwww.episerver.no
RESSURSBRUKHva er kostnadsdrivere?
Frontend utvikling                                                                               Backend utvikling        ...
BESØKENDEHvordan tilnærme oss?
VI ER TILBAKE TIL UTGANGSPUNKTET• Hva vil du tilby?• Hva forventer de besøkende å finne?   – I hvilken kontekst?• Anta, te...
SNAKK MED BRUKERNE• Hør hva de vil ha og hva de forventer• Se hva brukerne får hos konkurrentene65
SJEKK BESØKET PÅ SIDENE• Hvor mange besøker nettstedet fra en  mobilenhet hver måned?• Hvor mange av dem er iPads?• Hva er...
HVA SIER STATISTIKKEN?• Ofte ser vi long-neck-long-tale
ANALYSER BRUKERATFERD• Finnes det et mønster?
LAG BRUKERSCENARIER
LAG MOBILE PROTOTYPER
BRUKERTEST PROTOTYPER• Lag noe som  brukerne kan prøve  selv• Juster og test igjen• Ta i mot alle tips du  kan få         ...
ØRJAN CLAUSEN                Daglig leder og rådgiver i                Northern Beat                Bakgrunn              ...
Design smartere   responsive design - offentlig
Design smartere   responsive design - offentlig
Design smartere   responsive design - offentlig
Design smartere   responsive design - offentlig
Design smartere   responsive design - offentlig
Upcoming SlideShare
Loading in...5
×

Design smartere responsive design - offentlig

507

Published on

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

0 Comments
2 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
507
On Slideshare
0
From Embeds
0
Number of Embeds
3
Actions
Shares
0
Downloads
7
Comments
0
Likes
2
Embeds 0
No embeds

No notes for slide
  • 2530% forveneter mellom 6-103% mindre enn ett minutt
  • URL og Adaptive images
  • IKKE APPS!
  • Transcript of "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
    1. A particular slide catching your eye?

      Clipping is a handy way to collect important slides you want to go back to later.

    ×