mobil webb och responsive design - tänk strategiskt kring din digitala närvaro

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

Frukostseminarium den 6 november 2012

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 inom affärsstrategi, design och projektledning. Arbetar oFast på beställarens sida.

Samlade erfarenheter från över 100 större uppdrag

Vi vill a: företag skall se och dra ny:a av de affärs-‐möjligheter som digitala medier 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

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

Förutsättningar som påverkar: ● Skärmstorlek ● Uppkopplingshastighet ● Funktioner i hårdvaran ● Inmatningsmöjligheter ● Batteri

Men också användarens: ● Mål ● Miljö ● Uppmärksamhet ● Tid

Användarna sitter inte längre bekvämt framför den stationära datorn

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!

● 13 fly:lådor (ca 600 böcker)

● 100 tals DVD och CD, 6TB data med film, TV abonnemang

● Backup av data

● Bokmärken och appar

● Kindle, e-‐biblioteket, iBooks ● NeUlix, SpoWfy, TV Play, iTunes

● Finns i molnet, just in Wme

● 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)

Från: (åtkomst) Till:

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?

INNEHÅLLSSTRATEGI

Innehållsstrategin är en plan

för att

skapa, leverera och underhålla relev

ant

och användbart innehåll.

Vi vill inte (fo

rsätta) att skapa

specifikt innehåll för varje

kanal!

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.

INNEHÅLLSSTRATEGI – VAD?

DET HANDLAR OM FLEXIBELT INNEHÅLL

INFORMATIONSOBJEKT -‐ RECEPT

Definiera varje innehåll som ett informationsobjekt -  Vad är det? -  Vilka beståndsdelar har det? -  Vad bör vara strukturerad data?

Recept -‐  Namn/rubrik -‐  Ingress -‐  Bilder -‐  InstrukWoner -‐  Ingredienser -‐  TillagningsWd -‐  Näringsinnehåll -‐  HögWd -‐  Typ av kök

Vilka relationer har informationsobjektet till andra informationsobjekt?

Recept -‐  Namn/rubrik -‐  Ingress -‐  Bilder -‐  InstrukWoner -‐  Ingredienser -‐  TillagningsWd -‐  Näringsinnehåll -‐  HögWd -‐  Typ av kök

Ingrediens

Maträ^

Typ av kök

Hög`d

Event/kalender

Betyg/omdöme


3. API:ER KANALER OCH INTEGRATION

REST, RSS, Webservice, XML, Sök

CMS Tjänst X Tjänst Y Tjänst Z

PresentaWon

InformaWonsobjekt

Data och admin

API:er

Websajt App Mobilsajt Andra kanaler

● 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

Anpassad layout beroende på skärmstorlek

Separat webbplats för mobiler

Laddas ner och installeras på din mobil

Mobilsajt Appar Responsiv webb

Vad som är rä* val beror på vad du vill uppnå

Fördelar: ● Möjligheter a: anpassa innehåll och ha en helt separat informaWons-‐struktur

●  Kan gå relaWvt snabbt a: få på plats som komplement Wll en stor och komplex desktopsajt

Fördelar: ●  Kan använda mobilens funkWoner fullt ut

● Möjligt a: fullt ut opWmera användarupplevelsen

●  Kan användas utan uppkoppling

Fördelar: ●  Fungerar på flera olika enheter

● Mer framWdsvänlig ●  Enklare teknisk förvaltning ●  Enklare uppdatering av innehåll

Mobilsajt Appar Responsiv webb

FÖRDELAR MED DE OLIKA TEKNISKA LÖSNINGARNA

APPAR

Några exempel: ●  Evernote ●  Dropbox ●  iZettle ●  Angry Birds

●  Handelsbanken ●  Skype ●  Facebook ●  Way Out West

festivalapp

Passar till: ● Spel ● E-handel ● Finansiella tjänster ● Produktivitetsverktyg ● Företagsinterna appar ● Eventappar

MOBILSAJT

Några exempel: ●  Etsy (m.etsy.se) ●  Asos (m.asos.com) ●  Pricerunner (m.pricerunner.se) ●  Dropbox (dropbox.com/m)

●  Dagens Nyheter (mobil.dn.se) ●  Flickr (m.flickr.com) ●  Twitter (mobile.twitter.com) ●  Linkedin (touch.www.linkedin.com)

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

EXEMPEL E-‐HANDEL: MOBIL UPPLEVELSE AV ETSY.COM

Tipsar om iPhone-‐appen med direkt möjlighet a: ladda ner

iPhone-‐appen Möjlighet a: välja mobilsajt eller desktopsajt

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

RESPONSIV WEBB

Några exempel: ● SVT Play (svtplay.se) ● Folktandvården i Stockholm

(folktandvardenstockholm.se) ● Radiotjänst (radiotjanst.se) Fler svenska exempel på : responsivelistan.se

Passar till: ● Informationssajter ● Sajter med innehåll att

läsa och konsumera ● Nyheter ● Tidningar/magasin ● Webb-tv ● Bloggar

● Design- och portfoliosajter

Responsive web = future friendly

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

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.


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


Hur mycket anpassas? ● NavigaWonsramverk ● Generella regler för mallsidor ● Prioriterade funkWoner: ● Sök ledig lokal, Felanmälan, Kontakt

● Touchanpassad design


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

En pragmatisk ansats med huvudfokus på

innehåll och öppna API:er med

mobile tablet first (nästan),

responsive

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

Flexibilitet i

informationen

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

Presentation Anpassad presentation, hämtar och presenterar informationsobjekt utifrån 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 per informationsobjekt

Journal och vårdsystem Externa platser (1177, vårdguiden) Vårdgivarguiden Tillhandahålla en fristående ”Hi:a producent” för olika vårdtjänster och möjligheter a: jämföra vårdtjänsterna

Kan stödja vårdguidens ”Hi:a/jämför vård” och öka transparensen gentemot invånarna

Tillhandahålla funkWoner för a: hi:a producenter av vårdtjänster som kan kopplas Wll de egna systemen

CMS (EPI) Custom 1 Custom 2 Tjänst X

VÄGVAL SLL – SÖKBASERAD ARKITEKTUR

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

5 STEG FÖR EN HÅLLBAR DIGITAL STRATEGI

Förstå dina användare

Formulera en målbild

Välj ambiWonsnivå

Välj teknik och kanaler

Stå inte sWll

Din digitala strategi

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 målbild

Välj ambiWonsnivå

Välj teknik och kanaler

Stå inte sWll

Din digitala strategi

TACK FÖR IDAG!

Elin Sjöberg [email protected] 070-‐511 31 26

linkedin.com/in/esjoberg

Fredrik Dolléus [email protected] 070-‐387 12 60

linkedin.com/in/dolleus

Malin Misaghi [email protected] 070-‐767 01 45

linkedin.com/in/malinmisaghi

Alenio etablerades 2001 Erfarna konsulter med kompetens inom affärsstrategi, design och projektledning. Arbetar oFast på beställarens sida.

Samlade erfarenheter från över 100 större uppdrag

Vi vill a: företag skall se och dra ny:a av de affärs-‐möjligheter som digitala medier erbjuder.

mobil webb och responsive design - tänk strategiskt kring din digitala närvaro

Technology