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

2. ØRJAN CLAUSEN
Daglig leder og rådgiver i
Northern Beat
Bakgrunn
Informasjonsvitenskap
Webdesign
Kommunikasjonsarbeid
Markedsføring

3. • 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

4. DESIGN FOR
MOBILE FLATER
Responsive Web Design eller skreddersøm?
Mobile first eller tilpasning i etterkant?
Hvordan skaper vi den beste løsningen?

6. HVORDAN SKAPE DEN BESTE
LØSNINGEN?
• I dag ser vi på
– Prioriteringer
– Valg av løsning
– Ressursbruk
– Besøkende

7. MEN FØR HVORDAN
HVORFOR?

8. HVORFOR SKAL
DU GÅ MOBIL?

9. …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

10. TENK GJENNOM
DETTE FØR DERE
RINGER
...og sørg for at ambisjoner og forventninger er
forankret i organisasjonen

11. OK - vi er klare!
HVORDAN GÅR VI FREM?

12. MOBIL vs. DESKTOP
Påstand:
–Ikke så annerledes å
lage mobil løsning

13. PROSESSEN
Målsetting
Interaksjons-
med Funksjonelle Navigasjon
design og Grafisk
løsningen og og innholds- og innholds-
informasjons- design
bruker- krav presentasjon
arkitektur
analyse

14. MÅLSETTING OG BRUKERANALYSE
• Hva skal lages?
• Hvorfor skal det lages?
• Hvem er brukerne?
• Hva forventer brukerne å finne?

15. 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?

16. INTERAKSJONSDESIGN
• Hvordan skal innholdet struktureres?
– Prioritering av innhold
– Trådskisser/wireframes
– Relatert informasjon

17. INFORMASJONSARKITEKTUR
• Hvordan skal innhold plasseres i henhold til
annet innhold?
– Hva er viktig innhold?
– Hva er relatert innhold?
– Hva hører naturlig sammen?

18. NAVIGASJON & INNHOLDSPRESENTASJON
• Hvordan skal man navigere på nettstedet?
– Antall nivå
– Hovedmenyer og sekundærmenyer
• Hvordan skal innholdet presenteres?
– Tekst
– Bilder
– Video
– Infografikk
– Lyd

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

20. PROSESSEN
GANSKE LIK
MEN HVORDAN GÅR
MAN EGENTLIG FREM?

21. PRIORITERINGER
• Andre hensyn
– Mindre skjerm
– Dårligere linje
– Annen kontekst
– Andre forventninger hos besøkende
– Begrensninger i teknologi
– Ekstra tilgjengelig funksjonalitet

22. MINDRE SKJERM
• Vi må prioritere
• Vi må komprimere
• Vi må fokusere
• Vi må tilpasse
• Vi må tenke skalering

23. DÅRLIGERE LINJE
• Store bilder
• Video
• Mye innhold = lang side
• Lang side = lang lastetid
• Man forventer lengre lastetid på mobil

24. 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%

25. FORVENTET LASTETID
11% 12%
Raskere
Nesten lik
25% Lik
31%
Litt tregere
Mye tregere
21%

28. http://mobile.smashingmagazine.com

29. ANNEN KONTEKTS
• Når brukes mobil fremfor desktop?
– På veien
– Butikken
– Sofaen
– Møter
– Sengen

30. 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?

31. 31

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

33. ER DET MULIG?
33

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

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

36. iProspect undersøkelse 2012

37. WEBSITES*
ARE*
STILL*
NOT*
MO
3% synes at nettsidene
ikke fungerer for desktop STILL* MOBILE*
WEBSITES*
ARE* NOT* PHONE*
FRIENDLY*
E
10% synes at nettsidene
ikke 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* p
tilbpasset 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

38. 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
– +++

39. EKSTRA TILGJENGELIG FUNKSJONALITET
• GPS
• Kamera
• Kontakter
• Bilder
• Near Field Communication (NFC)
– Google Wallet
• Radio Frequency Identification (RFID)
– PayEx

40. VALG AV LØSNING
Fordeler og ulemper med de forskjellige løsnigene

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

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

43. BRUKERDEFINERTE OPPGAVER
43

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

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

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

47. TEKNISK SAGT
• Media queries
@media screen and (max-width: 1160px) {
#nav {
display: none; }
}
@media screen and (max-width: 1540px) {
#box {
background-color; red;
}
}

48. OLUF LORENTZEN
48

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

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

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

53. www.itavisen.no m.itavisen.no 53

54. www.regjeringen.no/mobil/
www.regjeringen.no 54

55. www.rica.no
www.rica.no

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

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

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

59. www.ruter.no/no/mobil/
www.ruter.no

60. www.episerver.no/episerver
www.episerver.no

61. RESSURSBRUK
Hva er kostnadsdrivere?

62. Frontend utvikling
Backend utvikling
Innholds-arbeid
Interaksjons-
Lisenser
Strategi
design
Teknologi
Responsive Web Design –
X X X X
tilpasning
Responsive Web Design – nytt
X X X
nettsted
Skreddersydde – egen
X X X X X
sidestruktur i samme system
Skreddersydde – egen
X X X X X X
sidestruktur i annet system
Skreddersydde – samme
X X X X X
sidestruktur i samme system
Skreddersydde – samme X X X X X X
sidestruktur i annet system

63. BESØKENDE
Hvordan tilnærme oss?

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

65. SNAKK MED BRUKERNE
• Hør hva de vil ha og hva de forventer
• Se hva brukerne får hos konkurrentene
65

66. 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?

67. HVA SIER STATISTIKKEN?
• Ofte ser vi long-neck-long-tale

68. ANALYSER BRUKERATFERD
• Finnes det et mønster?

69. LAG BRUKERSCENARIER

70. LAG MOBILE PROTOTYPER

71. BRUKERTEST PROTOTYPER
• Lag noe som
brukerne kan prøve
selv
• Juster og test igjen
• Ta i mot alle tips du
kan få
71

72. ØRJAN CLAUSEN
Daglig leder og rådgiver i
Northern Beat
Bakgrunn
Informasjonsvitenskap
Webdesign
Kommunikasjonsarbeid
Markedsføring