Ce diaporama a bien été signalé.
Le téléchargement de votre SlideShare est en cours. ×

Mobil webb och responsive design - Frukostseminarium

Publicité
Publicité
Publicité
Publicité
Publicité
Publicité
Publicité
Publicité
Publicité
Publicité
Publicité
Publicité

Consultez-les par la suite

1 sur 59 Publicité

Plus De Contenu Connexe

Similaire à Mobil webb och responsive design - Frukostseminarium (20)

Publicité

Mobil webb och responsive design - Frukostseminarium

  1. 1.   Frukostseminarium  den  7  december  2012   Mobil  webb  och  responsiv  design   Tänk  strategiskt  kring  din  digitala  närvaro  
  2. 2. VI  ÄR  ALENIO   Alenio  är  e;  konsultbolag  som  leder  digital   verksamhetsutveckling.       Vi  stö;ar  våra  kunder  i  strategi,  koncept  &  genomförande.  
  3. 3. DAGENS  FRUKOSTSEMINARIUM   ●  Utblick ●  Tekniken •  Innehållsstrategi •  Teknik- och kanalval ●  Case – så gjorde vi ●  Modell för att välja rätt
  4. 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. 5. DAGENS  FRUKOSTSEMINARIUM   ●  Utblick ●  Tekniken •  Innehållsstrategi •  Teknik- och kanalval ●  Case – så gjorde vi ●  Modell för att välja rätt
  6. 6. ANVÄNDANDET  AV  MOBILEN  FÖRÄNDRAS   Källa: Svenskarna och Internet 2012, .se
  7. 7. SURFPLATTORNAS  INTÅG   Källa: Svenskarna och Internet 2012, .se
  8. 8. WEBBEN  FINNS  ÖVERALLT   8
  9. 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. 10. VAD  SKA  VI  GÖRA  IDAG?  
  11. 11. SEKVENTIELL  ANVÄNDNING   Källa: ”The New Multi-screen World: Understanding Cross-platform Consumer Behavior”, Google, augusti 2012
  12. 12. SAMTIDIG  ANVÄNDNING   Källa: ”The New Multi-screen World: Understanding Cross-platform Consumer Behavior”, Google, augusti 2012
  13. 13. TILLGÅNG  TILL  BLIR  CENTRALT   Från:   Till:   ●  13  fly;lådor  (ca  600  böcker)   ●  Kindle,  e-­‐biblioteket,  iBooks       ●  100  tals  DVD  och  CD,  6TB  data   ●  NeRlix,  SpoUfy,  TV  Play,   med  film,  TV  abonnemang   iTunes   ●  Backup  av  data   ●  Finns  i  molnet,  just  in  Ume   ●  Bokmärken  och  appar   ●  Sök  och  flöden  av   informaUon   Direkt  Ullgång  på  alla  mina  devices.  När  jag  vill,  var  jag  vill!   (dessutom  tar  det  väldigt  lite  plats)  
  14. 14. SAMMANFATTNING   1.   Fler  skärmar  och  ökad  mobil  användning.   2.   Andra  kontexter  och  användarbeteenden.   3.   Sök  blir  allt  vikUgare.     4.   Det  är  Ullgången  Ull  istället  för  ägande  som  blir  allt    vikUgare.     5.   Var  öppen  för  det  som  kommer,  det  kommer  a;  påverka    verksamheten.  
  15. 15. ATT  MÖTA  MÅNGA  SKÄRMAR  
  16. 16. 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
  17. 17. HUR  KAN  VI  SKAPA  MER  FRAMTIDSVÄNLIGA  LÖSNINGAR?  
  18. 18. DAGENS  FRUKOSTSEMINARIUM   ●  Utblick ●  Tekniken •  Innehållsstrategi •  Teknik- och kanalval ●  Case – så gjorde vi ●  Modell för att välja rätt
  19. 19. 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 in nehåll för pa specifikt Vi vil l inte ska l! varje kana
  20. 20. 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. 21. DET  HANDLAR  OM  FLEXIBELT  INNEHÅLL  
  22. 22. INFORMATIONSOBJEKT  -­‐  RECEPT  
  23. 23. INFORMATIONSOBJEKT  -­‐  RECEPT  
  24. 24. INFORMATIONSOBJEKT  -­‐  RECEPT   Definiera varje innehåll som ett informationsobjekt -  Vad är det? Recept   -  Vilka beståndsdelar har det? -­‐  Namn/rubrik   -  Vad bör vara strukturerad -­‐  Ingress   data? MaträS   -­‐  Bilder   -  Vad är relationen till annat? -­‐  InstrukUoner   -­‐  Ingredienser   -­‐  TillagningsUd   Ingrediens   -­‐  Näringsinnehåll   -­‐  HögUd   -­‐  Typ  av  kök   HögWd   Typ  av  kök   Betyg/omdöme   Event/kalender  
  25. 25. API:ER  KANALER  OCH  INTEGRATION   PresentaUon   Webbsajt   App   Mobilsajt   Andra  kanaler   API:er   REST,  RSS,  Webservice,  XML,  Sök     InformaUonsobjekt   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. 26. HUR  VÄLJER  VI  LÖSNING  I  DEN  MOBILA  KANALEN?  
  27. 27. DET  HANDLAR  INTE  LÄNGRE  OM  ANPASSNING  TILL  MOBILT     Från Till ● Desktop first ● Mobile first ● Anpassa för olika enheter ● Anpassa efter browser-storlek ● Desktop-sajt och mobilsajt i ● Allt styrs från samma två olika redaktörsgränssnitt redaktörsgränssnitt
  28. 28. VAD  ÄR  RESPONSIV  WEBB?   Bild lånad från: http://johnpolacek.github.com/scrolldeck.js/decks/responsive/
  29. 29. OLIKA  TEKNISKA  LÖSNINGAR   Vad  som  är  rä*  val  beror  på  vad  du  vill  uppnå   Mobilsajt   Responsiv  webb   Separat  webbplats     Anpassad  layout  beroende  på   för  mobiler   skärmstorlek   Appar   Laddas  ner  och  installeras   på  din  mobil  
  30. 30. FÖRDELAR  MED  DE  OLIKA  TEKNISKA  LÖSNINGARNA   Appar   Mobilsajt   Responsiv  webb   Fördelar:   Fördelar:   Fördelar:   ●  Kan  använda  mobilens   ●  Större  möjlighet  a;  anpassa   ●  Fungerar  på  flera  olika   funkUoner  fullt  ut   innehåll  och  ha  en  helt   enheter     ●  OpUmera   separat  informaUons-­‐ ●  Mer  framUdsvänlig   användarupplevelsen     struktur   ●  Enklare  teknisk  förvaltning   ●  Kan  fungera  offline   ●  Kan  gå  relaUvt  snabbt  a;  få   ●  Enklare  uppdatering  av   ●  Passar  för  återkommande   på  plats  som  komplement   innehåll   användning   Ull  en  stor  och  komplex     desktopsajt   ●  Fungerande  modell  för   betalning    
  31. 31. APPAR   Passar till: ● Spel ● Sociala medier ● Finansiella tjänster ● Produktivitetsverktyg ● Interna appar ● Eventappar Några exempel: ●  Evernote ●  Skype ●  Dropbox ●  Facebook ●  iZettle ●  Harvard Campus App ●  Angry Birds ●  Försäkringskassans app ●  Handelsbanken
  32. 32. MOBILSAJT   Passar till: ● När man vill göra en snabb mobilanpassning av en komplex sajt ● E-handel ● 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)
  33. 33. RESPONSIV  WEBB   ndly b = fu ture frie Respo nsive we 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
  34. 34. OM  TILLGÄNGLIGHET  I  MOBILEN   I mob ile av tillg n är vi alla i •  Enkelt navigationskoncept ängliga behov lösning •  Stora klickytor ar •  Anpassa radlängd för god läsbarhet •  Hjälp användaren vid inmatning av text •  Genvägar till innehållet i långa sidor •  Stöd för olika plattformars navigationsmanér •  Se till att det går att zooma •  Säkerställ goda färgkontraster •  Möjlighet att välja att se sajten i ”desktop-läge” Källa: ”Slutrapport-Tillgängliga-mobilgränssnitt.pdf”, Funka.nu, januari 2012
  35. 35. SAMMANFATTNING   •   Utveckla  en  innehållstrategi   •   Bygg  dina  lösningar  framUdsvänliga   •   Responsivt  är  e;  ganska  säkert  kort   •   Kanalval  och  teknisk  lösning  styrs  av   •  Dina  användares  kontext  och  skärm   •  Dina  behov  och  budget   •     Finns  inget  givet  eller  rä;  svar    
  36. 36. DAGENS  FRUKOSTSEMINARIUM   ●  Utblick ●  Tekniken •  Innehållsstrategi •  Teknik- och kanalval ●  Case – så gjorde vi ●  Modell för att välja rätt
  37. 37. 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  uthyrningssituaUon   ● Samma  innehåll  för  användare  och  anställda     ● Inga  särskilda  funkUoner  som  kräver  en  app  för  a;  fungera     AMF  Fas7gheter  är  en  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.  
  38. 38. 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      
  39. 39. AMF  FASTIGHETER  –  RESPONSIV  WEBB   Hur  mycket  anpassas?   ● NavigaUonsramverk   ● Generella  regler  för  mallsidor   ● Prioriterade  funkUoner:     ●  Sök  ledig  lokal,  Felanmälan,  Kontakt   ● Touchanpassad  design  
  40. 40. AMF  FASTIGHETER  –  RESPONSIV  WEBB   desktop stående iPad
  41. 41. 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
  42. 42. 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
  43. 43. 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
  44. 44. 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
  45. 45. 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  funkUoner  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   Ull  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 Administration Kan vara olika anpassade lösningar beroende på behov CMS  (EPI)   Custom  1   Custom  2   Tjänst  X   per informationsobjekt
  46. 46. SLL  –  RESPONSIVT  
  47. 47. STOCKHOLMSMÄSSAN  –  MÄSSWEBB  &  MÄSSAPP   48
  48. 48. 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
  49. 49. STOCKHOLMSMÄSSAN  –  MÄSSWEBB  &  MÄSSAPP  
  50. 50. DAGENS  FRUKOSTSEMINARIUM   ●  Utblick ●  Tekniken •  Innehållsstrategi •  Teknik- och kanalval ●  Case – så gjorde vi ●  Modell för att välja rätt
  51. 51. 5  STEG  FÖR  EN  HÅLLBAR  DIGITAL  STRATEGI   Förstå  dina   användare   Formulera  en   Stå  inte  sUll   målbild   Din digitala strategi Välj  teknik   Välj   och  kanaler   ambiUonsnivå  
  52. 52. 1. Förstå dina användare ●  Identifiera dina prioriterade användare ●  Analysera deras vanor, kontext och behov
  53. 53. 2. Formulera en målbild ●  Vad vill ni åstadkomma? ●  Verksamhetens krav / behov ● T.ex. effektiv kundsupport
  54. 54. 3. Välj ambitionsnivå ●  Business case?
  55. 55. 4. Välj teknik och kanaler ●  Flexibel innehållsstrategi ●  Vilka kanaler ●  Tänk på förvaltning och organisation
  56. 56. 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
  57. 57. 5  STEG  FÖR  EN  HÅLLBAR  DIGITAL  STRATEGI   Förstå  dina   användare   Formulera  en   Stå  inte  sUll   målbild   Din digitala strategi Välj  teknik   Välj   och  kanaler   ambiUonsnivå  
  58. 58. 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  oqast  på   möjligheter  som  digitala  medier   beställarens  sida.   erbjuder.

×