Smartphones och läsplattor är en självklar del av Internetanvändandet idag, och nya skärmstorlekar dyker upp överallt i vår vardag. Användarna har nya krav och förväntningar på företagen i den digitala världen.
Hur ska du tänka strategiskt för att säkerställa att ditt företag har en digital närvaro som fungerar i en föränderlig värld? Mobilsajter, appar, mobile first, responsive design - vad är rätt för just ditt företag?
Presentationen ger en översikt av olika lösningar på marknaden, lyfter goda exempel och berättar om några konkreta case som vi jobbar med.
Mobil webb och responsive design - Tänk strategiskt kring din digitala närvaro
1.
Frukostseminarium
den
6
november
2012
Mobil
webb
och
responsiv
design
Tänk
strategiskt
kring
din
digitala
närvaro
2. VI
ÄR
ALENIO
Alenio
är
e:
konsultbolag
som
leder
digital
verksamhetsutveckling.
Vi
stö:ar
våra
kunder
i
strategi,
koncept
&
genomförande.
Alenio
etablerades
2001
Erfarna
konsulter
med
kompetens
Vi
vill
a:
företag
skall
Samlade
erfarenheter
från
över
inom
affärsstrategi,
design
och
se
och
dra
ny:a
av
de
affärs-‐ 100
större
uppdrag
projektledning.
Arbetar
oFast
på
möjligheter
som
digitala
medier
beställarens
sida.
erbjuder.
3. DAGENS
FRUKOSTSEMINARIUM
● Utblick
● Tekniken
• Innehållsstrategi
• Teknik- och kanalval
● Case – så gjorde vi
● Modell för att välja rätt
4. FÖRVÄNTNINGAR
PÅ
DAGENS
SEMINARIUM
● Vilka frågeställningar hoppas du få svar på idag?
● Vilka är dina förväntningar?
Diskutera med din granne
5. DAGENS
FRUKOSTSEMINARIUM
● Utblick
● Tekniken
• Innehållsstrategi
• Teknik- och kanalval
● Case – så gjorde vi
● Modell för att välja rätt
9. KONTEXTEN
HAR
FÖRÄNDRATS
Användar
na sitte
inte läng r
re bekvä
framför mt
den
stationä
Förutsättningar som påverkar: ra dator
n
● Skärmstorlek
● Uppkopplingshastighet
● Funktioner i hårdvaran
● Inmatningsmöjligheter
● Batteri
Men också användarens:
● Mål
● Miljö
● Uppmärksamhet
● Tid
10. SEKVENTIELL
ANVÄNDNING
Källa: ”The New Multi-screen World: Understanding Cross-platform Consumer Behavior”, Google, augusti 2012
11. SAMTIDIG
ANVÄNDNING
Källa: ”The New Multi-screen World: Understanding Cross-platform Consumer Behavior”, Google, augusti 2012
12. TILLGÅNG
TILL
BLIR
CENTRALT!
Från:
(åtkomst)
Till:
● 13
fly:lådor
(ca
600
böcker)
● Kindle,
e-‐biblioteket,
iBooks
● 100
tals
DVD
och
CD,
6TB
data
● NeUlix,
SpoWfy,
TV
Play,
med
film,
TV
abonnemang
iTunes
● Backup
av
data
● Finns
i
molnet,
just
in
Wme
● Bokmärken
och
appar
● Sök
och
flöden
av
informaWon
Direkt
Wllgång
på
alla
mina
devices.
När
jag
vill,
var
jag
vill!
(dessutom
tar
det
väldigt
lite
plats)
13. SAMMANFATTNING
1. Ökad
mobil
användning.
2. Fler
skärmar
(and
more
to
come)
3. Andra
kontexter.
4. Det
är
Wllgången
som
blir
allt
vikWgare.
Allt
uppkopplat!
5. Var
öppen
för
det
som
kommer,
det
kommer
a:
påverka
affären.
Det
får
konsekvenser.
15. VILKA
ÄR
DINA
UTMANINGAR?
● Konsekvenser för er verksamhet?
● Vad behöver ni göra för att anpassa er?
Diskutera kort med din granne
16. HUR
KAN
VI
SKAPA
MER
FRAMTIDSVÄNLIGA
LÖSNINGAR?
17. DAGENS
FRUKOSTSEMINARIUM
● Utblick
● Tekniken
• Innehållsstrategi
• Teknik- och kanalval
● Case – så gjorde vi
● Modell för att välja rätt
18. INNEHÅLLSSTRATEGI
pl an för att
ållsstrat egin är en ålla releva
nt
Inneh rh
era och unde
sk apa, lever ll.
db art innehå
och använ
pa
tt a) att ska
V i vill in te (forsä v arje kanal
!
in nehåll för
specifikt
19. INNEHÅLLSSTRATEGI
–
VAD?
1. Relevant innehåll
Vilket innehåll är relevant för dina användare i en specifik kontext.
2. Innehållsstruktur och API:er
Hur ska vi strukturera informationen, vilken metadata, hur kommer man åt
informationen?
3. Hantera informationen
Hur skapar vi innehåll och underhåller det? Policy, riktlinjer och processer.
21. INFORMATIONSOBJEKT
-‐
RECEPT
Recept
-‐ Namn/rubrik
-‐ Ingress
Definiera varje innehåll som ett
-‐ Bilder
informationsobjekt
-‐ InstrukWoner
- Vad är det?
-‐ Ingredienser
- Vilka beståndsdelar har det?
-‐ TillagningsWd
- Vad bör vara strukturerad data?
-‐ Näringsinnehåll
-‐ HögWd
-‐ Typ
av
kök
22. INFORMATIONSOBJEKT
-‐
RECEPT
Vilka relationer har
informationsobjektet till andra
Recept
informationsobjekt?
-‐ Namn/rubrik
-‐ Ingress
Maträ^
-‐ Bilder
-‐ InstrukWoner
-‐ Ingredienser
-‐ TillagningsWd
Ingrediens
-‐ Näringsinnehåll
-‐ HögWd
-‐ Typ
av
kök
Hög`d
Typ
av
kök
Betyg/omdöme
Event/kalender
27. OLIKA
TEKNISKA
LÖSNINGAR
Appar
Mobilsajt
Responsiv
webb
Laddas
ner
och
installeras
Separat
webbplats
Anpassad
layout
beroende
på
på
din
mobil
för
mobiler
skärmstorlek
Vad
som
är
rä*
val
beror
på
vad
du
vill
uppnå
28. FÖRDELAR
MED
DE
OLIKA
TEKNISKA
LÖSNINGARNA
Appar
Mobilsajt
Responsiv
webb
Fördelar:
Fördelar:
Fördelar:
● Kan
använda
mobilens
● Möjligheter
a:
anpassa
● Fungerar
på
flera
olika
funkWoner
fullt
ut
innehåll
och
ha
en
helt
enheter
● Möjligt
a:
fullt
ut
separat
informaWons-‐ ● Mer
framWdsvänlig
opWmera
struktur
● Enklare
teknisk
förvaltning
användarupplevelsen
● Kan
gå
relaWvt
snabbt
a:
få
● Enklare
uppdatering
av
● Kan
användas
utan
på
plats
som
komplement
innehåll
uppkoppling
Wll
en
stor
och
komplex
desktopsajt
29. APPAR
Passar till:
● Spel
● E-handel
● Finansiella tjänster
● Produktivitetsverktyg
● Företagsinterna appar
● Eventappar
Några exempel:
● Evernote ● Handelsbanken
● Dropbox ● Skype
● iZettle ● Facebook
● Angry Birds ● Way Out West
festivalapp
31. EXEMPEL
E-‐HANDEL:
MOBIL
UPPLEVELSE
AV
ETSY.COM
Etsy.com är en e-handelssajt/marknadsplats för att köpa och sälja handgjord konst
och prylar från små tillverkare världen över
Möjlighet
a:
välja
mobilsajt
eller
Tipsar
om
iPhone-‐ iPhone-‐appen
desktopsajt
appen
med
direkt
möjlighet
a:
ladda
ner
32. RESPONSIV
WEBB
iendly
= fu ture fr
si ve web
Respon
Passar till: Några exempel:
● Informationssajter ● SVT Play (svtplay.se)
● Sajter med innehåll att ● Folktandvården i Stockholm
läsa och konsumera (folktandvardenstockholm.se)
● Nyheter ● Radiotjänst (radiotjanst.se)
● Tidningar/magasin
● Webb-tv Fler svenska exempel på :
● Bloggar
responsivelistan.se
● Design- och portfoliosajter
33. SAMMANFATTNING
•
Utveckla
en
innehållstrategi
•
Bygg
dina
lösningar
framWdsvänliga
•
Kanalval
och
teknisk
lösning
styrs
av
• Dina
användares
kontext
och
skärm
• Dina
behov
och
budget
•
Responsivt
är
e:
ganska
säkert
kort
•
Finns
inget
givet
eller
”rä:”
svar
34. DAGENS
FRUKOSTSEMINARIUM
● Utblick
● Tekniken
• Innehållsstrategi
• Teknik- och kanalval
● Case – så gjorde vi
● Modell för att välja rätt
35. AMF
FASTIGHETER
–
RESPONSIV
WEBB
Varför
valet
responsiv
design?
● Allt
fler
använder
mobilen
● En
plats
för
uppdatering
av
innehåll
● iPad
används
i
uthyrningssituaWon
● Samma
innehåll
för
användare
och
anställda
● Inga
särskilda
funkWoner
som
kräver
en
app
för
a:
fungera
AMF
Fas7gheter
är
en
av
Sveriges
största
fas7ghetsägare
med
fokus
på
kontors-‐
och
retailfas7gheter
i
Stockholm
och
Göteborg.
Äger
och
förvaltar
kända
byggnader
som
t.ex.
Femte
Hötorgshuset,
Gallerian
och
Mood
Stockholm.
36. AMF
FASTIGHETER
–
RESPONSIV
WEBB
Brytpunkter:
● Fast
bredd
för
desktop
och
liggande
iPad
● Fast
bredd
och
touchanpassning
för
stående
iPad
● ”Fluid
design”
för
allt
som
är
mindre
än
stående
iPad
Teknisk
lösning:
● Episerver
och
Twi:er
bootstrap
37. AMF
FASTIGHETER
–
RESPONSIV
WEBB
Hur
mycket
anpassas?
● NavigaWonsramverk
● Generella
regler
för
mallsidor
● Prioriterade
funkWoner:
● Sök
ledig
lokal,
Felanmälan,
Kontakt
● Touchanpassad
design
39. ERFARENHETER
FRÅN
ETT
RESPONSIVT
PROJEKT
● ”Mobile first” är en bra metod för att fokusera på rätt saker
● Prioritera god anpassning av de viktigaste delarna av sajten
● Börja bygga enkelt och förbättra eftersom
● Ett integrerat och kunnigt team en förutsättning
● Inte detaljstyra:
● Designa endast en verktygslåda – inte slutgiltiga skisser
● Ge teamet mandat att ta beslut löpande
● Det finns färdiga ramverk (t.ex. Responsive Grid System, Twitter Bootstrap, Foundation)
40. CASE:
STOCKHOLMS
LÄNS
LANDSTING
(SLL),
VÅRDGIVARGUIDEN
dfokus p
å
vu
ats med hu
gm atisk ans PI:er me
d
En pra ch öppna
A ive
inn ehåll o n) , respons
first (nästa
mobi le tablet
ansats
41. VÄGVAL
SLL
-‐
ÖVERGRIPANDE
● Övergripande vägval
● Innehållet kommer att användas på flera platser
● Innehållet kommer bestå av ”atomer”
● Relaterat innehåll ska enkelt gå att kopplas ihop
● Hantera innehåll på så få platser som möjligt
● Det mobila är inte så prioriterat, men det ska gå att hantera
● COPE inspirerat
t i
Fl exibilite
nen
inf ormatio
42. VÄGVAL
SLL
-‐
LÖSNING
● Sökbaserad arkitektur
● Allt är informationsobjekt
● Allt är löst kopplat med varandra
● Allt är baserat på sök och metadata
● All information, oavsett källa, finns i sökindex
● All information och data går via sökmotorns API
● Progressive enhancement
● Microdata
● HTML5 (semantisk HTML)
● Responsive Design
43. VÄGVAL
SLL
–
SÖKBASERAD
ARKITEKTUR
Presentation Externa
platser
(1177,
vårdguiden)
Vårdgivarguiden
Journal
och
vårdsystem
Anpassad presentation, Kan
stödja
vårdguidens
”Hi:a/ Tillhandahålla
en
fristående
Tillhandahålla
funkWoner
för
jämför
vård”
och
öka
”Hi:a
producent”
för
olika
a:
hi:a
producenter
av
hämtar och presenterar
transparensen
gentemot
vårdtjänster
och
möjligheter
a:
vårdtjänster
som
kan
kopplas
informationsobjekt utifrån invånarna
jämföra
vårdtjänsterna
Wll
de
egna
systemen
kontexten. Webb eller
mobilt
API
Hanterar interna kopplingar och
API för åtkomst till informations-
objekt. Mot tjänst eller via
sökindex
Informationsobjekt
Enskilda informationsobjekt
som taggas/kategoriseras
utifrån deras egenskaper
Adminstration
Kan vara olika anpassade
lösningar beroende på behov
CMS
(EPI)
Custom
1
Custom
2
Tjänst
X
per informationsobjekt
45. STOCKHOLMSMÄSSANS
VAL:
NATIVE
APP
Frågan: utveckla en app för alla mässor eller en app per mässa?
Målet: Erbjuda appar som visar information för samtliga mässor.
Valet om ett ramverk som varje specifik mässa kunde använda vilade
bl a på behov om:
● att underlätta för utländska utställare/besökare (tillgång till Internet)
● att utveckla kartfunktionalitet
● att jobba med sökbarhet och synlighet (App Store)
● tydligare identitet för respektive mässa
47. DAGENS
FRUKOSTSEMINARIUM
● Utblick
● Tekniken
• Innehållsstrategi
• Teknik- och kanalval
● Case – så gjorde vi
● Modell för att välja rätt
48. 5
STEG
FÖR
EN
HÅLLBAR
DIGITAL
STRATEGI
Förstå
dina
användare
Formulera
en
Stå
inte
sWll
målbild
Din digitala
strategi
Välj
teknik
Välj
och
kanaler
ambiWonsnivå
49. 1. Förstå dina användare
● Identifiera dina prioriterade användare
● Analysera deras vanor, kontext och behov
50. 2. Formulera en målbild
● Vad vill ni åstadkomma?
● Verksamhetens krav / behov
● T.ex. effektiv kundsupport
52. 4. Välj teknik och kanaler
● Flexibel innehållsstrategi
● Vilka kanaler
● Tänk på förvaltning och organisation
53. 5. Stå inte still
● Börja någonstans – just do it
● Räkna med att förutsättningarna kommer att ändras
● Örat mot marken för vad som kommer i framtiden
54. 5
STEG
FÖR
EN
HÅLLBAR
DIGITAL
STRATEGI
Förstå
dina
användare
Formulera
en
Stå
inte
sWll
målbild
Din digitala
strategi
Välj
teknik
Välj
och
kanaler
ambiWonsnivå
55. TACK
FÖR
IDAG!
Elin
Sjöberg
Fredrik
Dolléus
Malin
Misaghi
elin.sjoberg@alenio.se
fredrik.dolleus@alenio.se
malin.misaghi@alenio.se
070-‐511
31
26
070-‐387
12
60
070-‐767
01
45
linkedin.com/in/esjoberg
linkedin.com/in/dolleus
linkedin.com/in/malinmisaghi
Alenio
etablerades
2001
Erfarna
konsulter
med
kompetens
Vi
vill
a:
företag
skall
Samlade
erfarenheter
från
över
inom
affärsstrategi,
design
och
se
och
dra
ny:a
av
de
affärs-‐ 100
större
uppdrag
projektledning.
Arbetar
oFast
på
möjligheter
som
digitala
medier
beställarens
sida.
erbjuder.