SlideShare ist ein Scribd-Unternehmen logo
1 von 55
Downloaden Sie, um offline zu lesen
 
Frukostseminarium	
  den	
  6	
  november	
  2012	
  


Mobil	
  webb	
  och	
  responsiv	
  design	
  
Tänk	
  strategiskt	
  kring	
  din	
  digitala	
  närvaro	
  
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.
DAGENS	
  FRUKOSTSEMINARIUM	
  

●  Utblick
●  Tekniken
   •  Innehållsstrategi
   •  Teknik- och kanalval
●  Case – så gjorde vi
●  Modell för att välja rätt
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
DAGENS	
  FRUKOSTSEMINARIUM	
  

●  Utblick
●  Tekniken
   •  Innehållsstrategi
   •  Teknik- och kanalval
●  Case – så gjorde vi
●  Modell för att välja rätt
ANVÄNDANDET	
  AV	
  MOBILEN	
  FÖRÄNDRAS	
  




                      Källa: Svenskarna och Internet 2012, .se
SURFPLATTORNAS	
  INTÅG	
  




                      Källa: Svenskarna och Internet 2012, .se
WEBBEN	
  FINNS	
  ÖVERALLT	
  
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
SEKVENTIELL	
  ANVÄNDNING	
  




     Källa: ”The New Multi-screen World: Understanding Cross-platform Consumer Behavior”, Google, augusti 2012
SAMTIDIG	
  ANVÄNDNING	
  




      Källa: ”The New Multi-screen World: Understanding Cross-platform Consumer Behavior”, Google, augusti 2012
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)
                                                                                           	
  
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.	
  
ATT	
  MÖTA	
  MÅNGA	
  SKÄRMAR	
  
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
HUR	
  KAN	
  VI	
  SKAPA	
  MER	
  FRAMTIDSVÄNLIGA	
  LÖSNINGAR?	
  
DAGENS	
  FRUKOSTSEMINARIUM	
  

●  Utblick
●  Tekniken
   •  Innehållsstrategi
   •  Teknik- och kanalval
●  Case – så gjorde vi
●  Modell för att välja rätt
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
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.
DET	
  HANDLAR	
  OM	
  FLEXIBELT	
  INNEHÅLL	
  
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	
  
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	
  
INFORMATIONSOBJEKT	
  -­‐	
  RECEPT	
  
INFORMATIONSOBJEKT	
  -­‐	
  RECEPT	
  
3.	
  API:ER	
  KANALER	
  OCH	
  INTEGRATION	
  

PresentaWon	
              Websajt	
        App	
                      Mobilsajt	
               Andra	
  kanaler	
  




API:er	
                                   REST,	
  RSS,	
  Webservice,	
  XML,	
  Sök	
  	
  



InformaWonsobjekt	
  


Data	
  och	
  admin	
           CMS	
        Tjänst	
  X	
                Tjänst	
  Y	
             Tjänst	
  Z	
  


●  Multikanal
●  Tjänstekontrakt och öppna API:er
●  Semantisk web, Microdata, HTML5
●  Bygg Content Management System, COPE
HUR	
  VÄLJER	
  VI	
  LÖSNING	
  I	
  DEN	
  MOBILA	
  KANALEN?	
  
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å	
  
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	
  
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
MOBILSAJT	
  

Passar till:
● E-handel
● Sökfunktion
● Produktivitetsverktyg
● Sociala medier




Några exempel:
●  Etsy (m.etsy.se)                 ●  Dagens Nyheter (mobil.dn.se)
●  Asos (m.asos.com)                ●  Flickr (m.flickr.com)
●  Pricerunner (m.pricerunner.se)   ●  Twitter (mobile.twitter.com)
●  Dropbox (dropbox.com/m)          ●  Linkedin (touch.www.linkedin.com)
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	
  
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
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	
  
   	
  
DAGENS	
  FRUKOSTSEMINARIUM	
  

●  Utblick
●  Tekniken
   •  Innehållsstrategi
   •  Teknik- och kanalval
●  Case – så gjorde vi
●  Modell för att välja rätt
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.	
  
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	
  	
  
	
  
AMF	
  FASTIGHETER	
  –	
  RESPONSIV	
  WEBB	
  

Hur	
  mycket	
  anpassas?	
  
● NavigaWonsramverk	
  
● Generella	
  regler	
  för	
  mallsidor	
  
● Prioriterade	
  funkWoner:	
  	
  
   ● Sök	
  ledig	
  lokal,	
  Felanmälan,	
  Kontakt	
  
● Touchanpassad	
  design	
  
AMF	
  FASTIGHETER	
  –	
  RESPONSIV	
  WEBB	
  




                                                    Tjuvtitt innan
                                                      lansering




          desktop                    stående iPad
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)
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
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
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
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
STOCKHOLMSMÄSSAN	
  –	
  MÄSSWEBB	
  &	
  MÄSSAPP	
  




                                 44
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
STOCKHOLMSMÄSSAN	
  –	
  MÄSSWEBB	
  &	
  MÄSSAPP	
  
DAGENS	
  FRUKOSTSEMINARIUM	
  

●  Utblick
●  Tekniken
   •  Innehållsstrategi
   •  Teknik- och kanalval
●  Case – så gjorde vi
●  Modell för att välja rätt
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å	
  
1. Förstå dina användare
●  Identifiera dina prioriterade användare
●  Analysera deras vanor, kontext och behov
2. Formulera en målbild
●  Vad vill ni åstadkomma?
●  Verksamhetens krav / behov
  ● T.ex. effektiv kundsupport
3. Välj ambitionsnivå
●  Business case?
4. Välj teknik och kanaler
●  Flexibel innehållsstrategi
●  Vilka kanaler
●  Tänk på förvaltning och organisation
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
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å	
  
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.

Weitere ähnliche Inhalte

Ähnlich wie Mobil webb och responsive design - Tänk strategiskt kring din digitala närvaro

IBM Collaboration Forum - Therese Sinter Sogeti
IBM Collaboration Forum - Therese Sinter SogetiIBM Collaboration Forum - Therese Sinter Sogeti
IBM Collaboration Forum - Therese Sinter SogetiIBM Sverige
 
Tio steg till framtidens produktutveckling - Creuna Göteborg
Tio steg till framtidens produktutveckling - Creuna GöteborgTio steg till framtidens produktutveckling - Creuna Göteborg
Tio steg till framtidens produktutveckling - Creuna GöteborgCreuna Sverige
 
Smarta verktyg för dig som studerar
Smarta verktyg för dig som studerarSmarta verktyg för dig som studerar
Smarta verktyg för dig som studerarAnders Sporring
 
Agil målstyrning
Agil målstyrningAgil målstyrning
Agil målstyrningAntrop
 
Nya krav, nya kanaler (Mobilitet, Bransch100)
Nya krav, nya kanaler (Mobilitet, Bransch100)Nya krav, nya kanaler (Mobilitet, Bransch100)
Nya krav, nya kanaler (Mobilitet, Bransch100)Per Åström
 
Vad är Liferay? 3 Case
Vad är Liferay? 3 CaseVad är Liferay? 3 Case
Vad är Liferay? 3 CaseEmil Öberg
 
Effektiv informationssökning i en komplex organisation
Effektiv informationssökning i en komplex organisationEffektiv informationssökning i en komplex organisation
Effektiv informationssökning i en komplex organisationKristian Norling
 
Frukostseminarium 2012 - Tio steg till framtidens produktutveckling
Frukostseminarium 2012 - Tio steg till framtidens produktutvecklingFrukostseminarium 2012 - Tio steg till framtidens produktutveckling
Frukostseminarium 2012 - Tio steg till framtidens produktutvecklingCreuna Sverige
 
Skapa & Friends Mobil Marknadsföring 2014-03-06
Skapa & Friends Mobil Marknadsföring 2014-03-06Skapa & Friends Mobil Marknadsföring 2014-03-06
Skapa & Friends Mobil Marknadsföring 2014-03-06Erik Ekholm
 
Ottoboni Marknadscheferna Göteborg/Väst
Ottoboni Marknadscheferna Göteborg/VästOttoboni Marknadscheferna Göteborg/Väst
Ottoboni Marknadscheferna Göteborg/VästOttoboni
 
Hybrid it excanto
Hybrid it excantoHybrid it excanto
Hybrid it excantoExcantoAB
 
Snabbt och användbart webbgränssnitt
Snabbt och användbart webbgränssnittSnabbt och användbart webbgränssnitt
Snabbt och användbart webbgränssnittMarcus Österberg
 
ComAround Zero Tour SelfService 2013
ComAround Zero Tour SelfService 2013ComAround Zero Tour SelfService 2013
ComAround Zero Tour SelfService 2013ComAround
 
Mobilstrategi - Så lyckas du med dina mobila satsningar
Mobilstrategi - Så lyckas du med dina mobila satsningarMobilstrategi - Så lyckas du med dina mobila satsningar
Mobilstrategi - Så lyckas du med dina mobila satsningarcloudnine
 
Digital workplace och informationshantering i office 365
Digital workplace och informationshantering i office 365Digital workplace och informationshantering i office 365
Digital workplace och informationshantering i office 365Findwise
 
Skapa & Friends November 26, 2015
Skapa & Friends November 26, 2015Skapa & Friends November 26, 2015
Skapa & Friends November 26, 2015Erik Ekholm
 
Digitala trender & strategi 2013
Digitala trender & strategi 2013Digitala trender & strategi 2013
Digitala trender & strategi 2013Fröjd Interactive
 

Ähnlich wie Mobil webb och responsive design - Tänk strategiskt kring din digitala närvaro (20)

IBM Collaboration Forum - Therese Sinter Sogeti
IBM Collaboration Forum - Therese Sinter SogetiIBM Collaboration Forum - Therese Sinter Sogeti
IBM Collaboration Forum - Therese Sinter Sogeti
 
Tio steg till framtidens produktutveckling - Creuna Göteborg
Tio steg till framtidens produktutveckling - Creuna GöteborgTio steg till framtidens produktutveckling - Creuna Göteborg
Tio steg till framtidens produktutveckling - Creuna Göteborg
 
Smarta verktyg för dig som studerar
Smarta verktyg för dig som studerarSmarta verktyg för dig som studerar
Smarta verktyg för dig som studerar
 
Agil målstyrning-1 0
Agil målstyrning-1 0Agil målstyrning-1 0
Agil målstyrning-1 0
 
Agil målstyrning
Agil målstyrningAgil målstyrning
Agil målstyrning
 
Användbarhet 1
Användbarhet 1Användbarhet 1
Användbarhet 1
 
Nya krav, nya kanaler (Mobilitet, Bransch100)
Nya krav, nya kanaler (Mobilitet, Bransch100)Nya krav, nya kanaler (Mobilitet, Bransch100)
Nya krav, nya kanaler (Mobilitet, Bransch100)
 
Vad är Liferay? 3 Case
Vad är Liferay? 3 CaseVad är Liferay? 3 Case
Vad är Liferay? 3 Case
 
Effektiv informationssökning i en komplex organisation
Effektiv informationssökning i en komplex organisationEffektiv informationssökning i en komplex organisation
Effektiv informationssökning i en komplex organisation
 
Frukostseminarium 2012 - Tio steg till framtidens produktutveckling
Frukostseminarium 2012 - Tio steg till framtidens produktutvecklingFrukostseminarium 2012 - Tio steg till framtidens produktutveckling
Frukostseminarium 2012 - Tio steg till framtidens produktutveckling
 
Skapa & Friends Mobil Marknadsföring 2014-03-06
Skapa & Friends Mobil Marknadsföring 2014-03-06Skapa & Friends Mobil Marknadsföring 2014-03-06
Skapa & Friends Mobil Marknadsföring 2014-03-06
 
Design för handhållna enheter
Design för handhållna enheterDesign för handhållna enheter
Design för handhållna enheter
 
Ottoboni Marknadscheferna Göteborg/Väst
Ottoboni Marknadscheferna Göteborg/VästOttoboni Marknadscheferna Göteborg/Väst
Ottoboni Marknadscheferna Göteborg/Väst
 
Hybrid it excanto
Hybrid it excantoHybrid it excanto
Hybrid it excanto
 
Snabbt och användbart webbgränssnitt
Snabbt och användbart webbgränssnittSnabbt och användbart webbgränssnitt
Snabbt och användbart webbgränssnitt
 
ComAround Zero Tour SelfService 2013
ComAround Zero Tour SelfService 2013ComAround Zero Tour SelfService 2013
ComAround Zero Tour SelfService 2013
 
Mobilstrategi - Så lyckas du med dina mobila satsningar
Mobilstrategi - Så lyckas du med dina mobila satsningarMobilstrategi - Så lyckas du med dina mobila satsningar
Mobilstrategi - Så lyckas du med dina mobila satsningar
 
Digital workplace och informationshantering i office 365
Digital workplace och informationshantering i office 365Digital workplace och informationshantering i office 365
Digital workplace och informationshantering i office 365
 
Skapa & Friends November 26, 2015
Skapa & Friends November 26, 2015Skapa & Friends November 26, 2015
Skapa & Friends November 26, 2015
 
Digitala trender & strategi 2013
Digitala trender & strategi 2013Digitala trender & strategi 2013
Digitala trender & strategi 2013
 

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
  • 6. ANVÄNDANDET  AV  MOBILEN  FÖRÄNDRAS   Källa: Svenskarna och Internet 2012, .se
  • 7. SURFPLATTORNAS  INTÅG   Källa: Svenskarna och Internet 2012, .se
  • 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.  
  • 14. ATT  MÖTA  MÅNGA  SKÄRMAR  
  • 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.
  • 20. DET  HANDLAR  OM  FLEXIBELT  INNEHÅLL  
  • 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  
  • 25. 3.  API:ER  KANALER  OCH  INTEGRATION   PresentaWon   Websajt   App   Mobilsajt   Andra  kanaler   API:er   REST,  RSS,  Webservice,  XML,  Sök     InformaWonsobjekt   Data  och  admin   CMS   Tjänst  X   Tjänst  Y   Tjänst  Z   ●  Multikanal ●  Tjänstekontrakt och öppna API:er ●  Semantisk web, Microdata, HTML5 ●  Bygg Content Management System, COPE
  • 26. HUR  VÄLJER  VI  LÖSNING  I  DEN  MOBILA  KANALEN?  
  • 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
  • 30. MOBILSAJT   Passar till: ● E-handel ● Sökfunktion ● Produktivitetsverktyg ● Sociala medier Några exempel: ●  Etsy (m.etsy.se) ●  Dagens Nyheter (mobil.dn.se) ●  Asos (m.asos.com) ●  Flickr (m.flickr.com) ●  Pricerunner (m.pricerunner.se) ●  Twitter (mobile.twitter.com) ●  Dropbox (dropbox.com/m) ●  Linkedin (touch.www.linkedin.com)
  • 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  
  • 38. AMF  FASTIGHETER  –  RESPONSIV  WEBB   Tjuvtitt innan lansering desktop stående iPad
  • 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
  • 44. STOCKHOLMSMÄSSAN  –  MÄSSWEBB  &  MÄSSAPP   44
  • 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.