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?
5.
6. HVORDAN SKAPE DEN BESTE
LØSNINGEN?
• I dag ser vi på
– Prioriteringer
– Valg av løsning
– Ressursbruk
– Besøkende
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
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?
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
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?
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
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
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
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
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
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
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
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
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?