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 aﬀärsstrategi, design och se och dra ny:a av de aﬀä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

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

8. WEBBEN FINNS ÖVERALLT

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● BatteriMen 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 aﬀä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?

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ållVilket innehåll är relevant för dina användare i en specifik kontext.2.  Innehållsstruktur och API:erHur ska vi strukturera informationen, vilken metadata, hur kommer man åtinformationen?3.  Hantera informationenHur 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

23. INFORMATIONSOBJEKT -‐ RECEPT

24. INFORMATIONSOBJEKT -‐ RECEPT

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å ﬂera 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● EventapparNågra exempel:●  Evernote ●  Handelsbanken●  Dropbox ●  Skype●  iZettle ●  Facebook●  Angry Birds ●  Way Out West festivalapp

30. MOBILSAJT Passar till:● E-handel● Sökfunktion● Produktivitetsverktyg● Sociala medierNå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 konstoch 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 ResponPassar 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

35. AMF FASTIGHETER – RESPONSIV WEBB Varför valet responsiv design? ● Allt ﬂer 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 ellermobiltAPIHanterar interna kopplingar ochAPI för åtkomst till informations-objekt. Mot tjänst eller viasökindexInformationsobjektEnskilda informationsobjektsom taggas/kategoriserasutifrån deras egenskaperAdminstrationKan vara olika anpassadelö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 viladebl 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

46. STOCKHOLMSMÄSSAN – MÄSSWEBB & MÄSSAPP

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

51. 3. Välj ambitionsnivå●  Business case?

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 aﬀärsstrategi, design och se och dra ny:a av de aﬀärs-‐ 100 större uppdrag projektledning. Arbetar oFast på möjligheter som digitala medier beställarens sida. erbjuder.

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

Fredrik Dolleus

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