mobil webb och responsive design - frukostseminarium

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

Frukostseminarium den 7 december 2012

VI ÄR ALENIO

Alenio är e; konsultbolag som leder digital verksamhetsutveckling. Vi stö;ar våra kunder i strategi, koncept & genomförande.

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

8

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

VAD SKA VI GÖRA IDAG?

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 ● NeRlix, SpoUfy, TV Play, iTunes

● Finns i molnet, just in Ume

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

Från: Till:

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.

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 ska

pa 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

Recept -‐  Namn/rubrik -‐  Ingress -‐  Bilder -‐  InstrukUoner -‐  Ingredienser -‐  TillagningsUd -‐  Näringsinnehåll -‐  HögUd -‐  Typ av kök

Ingrediens

MaträS

Typ av kök

HögWd

Event/kalender

Betyg/omdöme

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

data? -  Vad är relationen till annat?

API:ER KANALER OCH INTEGRATION

REST, RSS, Webservice, XML, Sök

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

PresentaUon

InformaUonsobjekt

Data och admin

API:er

Webbsajt 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?

Från

● Desktop first

● Anpassa för olika enheter

● Desktop-sajt och mobilsajt i två olika redaktörsgränssnitt

DET HANDLAR INTE LÄNGRE OM ANPASSNING TILL MOBILT

Till

● Mobile first

● Anpassa efter browser-storlek

● Allt styrs från samma redaktörsgränssnitt

VAD ÄR RESPONSIV WEBB?

Bild lånad från: http://johnpolacek.github.com/scrolldeck.js/decks/responsive/

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: ●  Större möjlighet a; anpassa innehåll och ha en helt separat informaUons-‐struktur

●  Kan gå relaUvt snabbt a; få på plats som komplement Ull en stor och komplex desktopsajt

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

● OpUmera användarupplevelsen

●  Kan fungera offline ●  Passar för återkommande användning

●  Fungerande modell för betalning

Fördelar: ●  Fungerar på flera olika enheter

● Mer framUdsvä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 ●  Harvard Campus App ●  Försäkringskassans app

Passar till: ● Spel ● Sociala medier ● Finansiella tjänster ● Produktivitetsverktyg ● Interna 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: ● När man vill göra en

snabb mobilanpassning av en komplex sajt ● E-handel ● Sociala medier

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

OM TILLGÄNGLIGHET I MOBILEN

•  Enkelt navigationskoncept •  Stora klickytor •  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”

I mobilen är vi alla i behov av tillgängliga lösningar

Källa: ”Slutrapport-Tillgängliga-mobilgränssnitt.pdf”, Funka.nu, januari 2012

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

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.


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? ● NavigaUonsramverk ● Generella regler för mallsidor ● Prioriterade funkUoner: ● Sök ledig lokal, Felanmälan, Kontakt

● Touchanpassad design


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

Administration 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 funkUoner för a; hi;a producenter av vårdtjänster som kan kopplas Ull de egna systemen

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

VÄGVAL SLL – SÖKBASERAD ARKITEKTUR

SLL – RESPONSIVT

STOCKHOLMSMÄSSAN – MÄSSWEBB & MÄSSAPP

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

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 ambiUonsnivå

Välj teknik och kanaler

Stå inte sUll

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 ambiUonsnivå

Välj teknik och kanaler

Stå inte sUll

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 oqast 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 - frukostseminarium

Technology