mobil webb och responsive design - frukostseminarium
DESCRIPTION
TRANSCRIPT
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
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
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?
DAGENS FRUKOSTSEMINARIUM
● Utblick ● Tekniken
• Innehållsstrategi • Teknik- och kanalval
● Case – så gjorde vi ● Modell för att välja rätt
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
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
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 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.
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? ● NavigaUonsramverk ● Generella regler för mallsidor ● Prioriterade funkUoner: ● Sök ledig lokal, Felanmälan, Kontakt
● Touchanpassad design
AMF FASTIGHETER – RESPONSIV WEBB
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
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 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.