Kundlunch mobila-losningar

MOBILEN�Det nya fönstret till Internet

Vårdguiden.se mobil webb

Daniela Baccarini Utvecklingsansvarig Vårdguiden.se

En bakåtblick Första Vårdguiden.se invigdes i februari 2002.

TELEFON

SOCIAL MEDIA

INTERNET

TIDNING

E-‐TJÄNST

KAMPANJ

? MOBIL INGÅNG!

3700 fans

130 000 samtal

55% läser

1,2 milj besök

160 000 konton

Ökat med 600% på e? år ca 1200 besök per dag eller 3% av all trafik och det fortsä?er öka…

Källa: Google Analy.cs trafik mot Vårdguiden.se

Övergripande målsä\ningar •  Ökad Dllgänglighet •  Stärka varumärket

•  Ökad användarny?a •  Samarbete mellan kanalerna

•  Hi?a nya målgrupper

En sajt behöver anpassas för a\ funka bra i mobilen

Strategier •  Terminaloberoende

•  Samma innehåll mobil som webb

•  Stegvis utveckling •  Målgruppsanpassad

Fortsa\ utveckling •  SMS-‐tjänst

•  Tillgängliga göra fler arDklar •  Dela med sig-‐funkDon

•  Lämna omdöme på arDklar •  Hälsotester •  Logga in på Mina Vårdkontakter

MOBIL �-EN LIVSSTIL�

#0�

FÖRSTÅ KONTEXTEN!�#1�

VÄLJ RÄTT PLATFORM�#2�

DESIGNA UPPLEVELSE�FÖR MOBILEN!�

#3�

UTVECKLA EFTER STANDARDER�

#4�

VARFÖR�

MOBIL WEBB? �

FÖRSTÅ�KONTEXTEN�

MILJÖN • Dynamiska miljöer • Miljö med brus och skiftande

ljusförhållanden

ANVÄNDARBEHOVET • Lite information i taget • Målinriktad användning • Kortare användning och fler

avbrott • Förenkla inmatning av text

BEGRÄNSNINGAR • Mindre skärm • Svårare att mata in information • Långsammare och dyrare

uppkoppling till Internet • Mindre minne och

lagrinsutrymme • Äldre modeller saknar stöd för

JavaScript

APPAR vs �

MOBIL WEBB�

FÖRDELAR MED APPAR!

• Fungerar offline • Affärsmöjligheter • Personliga inställningar • Bättre upplevelse • Tillgång till telefonens

alla funktioner

NACKDELAR MED APPAR

• Ny app för varje operativsystem • Kostar mer • Kräver installation

FÖRDELAR MED WEBBAPPAR!

• Följer webbstandarder • Inget speciellt språk • Utvecklas en gång för

alla enheter

NACKDELAR MED WEBBAPPAR!

• Sämre upplevelse (än så länge) • Liten/Ingen tillgång till

telefonens funktioner

DESIGN �

DESIGNA FÖR MOBILEN

TÄNK DESIGNTEAM!

DESIGNPROCESSEN vi har lärt oss att…

• Vattenfall… bad! • Designa inte allt i

början! • Våga göra fel! • Våga ta initiativ • Tänk designteam

DESIGNPROCESSEN tillsammans…

VÅGA TÄNKA OM!�

Idé Innovation

Behovsorientering

Idégenerering

Idéutveckling och

urval

visualiseravisualiseravisualiseravisualisera

visualiseravisualiseravisualiseravisualisera

tänk3Ddesigntänk3Ddesigntänk3Ddesignt

Sök artikel (fritext)

UTVECKLA�

EFTER�STANDARDER�

Browser sniffing

•  Ti?a på webbläsarens User Agent •  Leverera sidan eller e? felmeddelande

•  Browser sniffing = dåligt!

•  Browser sniffing för a? förbä?ra upplevelsen = OK!

Webbstandarder

•  Separera innehåll från presentaDon och beteende

•  Validerande (X)HTML

•  SemanDskt uppmärkt innehåll

•  CSS (inte tabeller) för layout •  Unobtrusive JavaScript för beteende

BakåtkompaDbel = stödja alla våra användare

Är det värt det?

Acceptera a? äldre browsers inte klarar ny teknik och a? sidan ser

annorlunda ut (men informaDonen är åtkomlig)

Ta kortaste möjliga genväg för a? innehållet skall vara åtkomligt i

omoderna webbläsare

FramåtkompaDbel • Webbstandarder • Progressive enhancement

Webbläsare

•  Internet Explorer 8 •  Internet Explorer 7 •  Mozilla Firefox

•  Google Chrome •  Safari •  Opera •  Internet Explorer 6 (om vi har otur)

Webbläsare för mobilen •  Android WebKit

•  BlackBerry Browser

•  Blazer

•  BOLT browser

•  Fennec (Firefox for mobile)

•  IbisBrowser

•  Internet Explorer Mobile

•  Iris Browser

•  jB5 Browser

•  JOCA by InteracT!V

•  Kindle Basic Web

•  Myriad Browser (Ddigare Openwave Mobile Browser)

•  NetFront

•  NetSailor Browser

•  Nokia S60 WebKit

•  Nokia Series 40 Browser

•  Obigo Browser

•  Opera Mini

•  Opera Mobile

•  Ozone

•  Palm WebOS Browser •  Pixo by Sun Microsystems •  PlayStation Portable web browser •  Polaris Browser •  Safari •  Samsung WebKit •  Skweezer •  Skyfire Mobile Browser •  Steel •  Teashark •  ThunderHawk •  Tristit •  UCWEB •  uZard Web •  Vision Mobile Browser •  WinWAP •  xScope

Opera (Presto) •  Android WebKit


•  Blazer

•  BOLT browser


•  IbisBrowser


•  Iris Browser

•  jB5 Browser



•  Myriad Browser (Ddigare Openwave Mobile Browser)

•  NetFront





•  Opera Mini

•  Opera Mobile

•  Ozone


WebKit •  Android WebKit


•  Blazer

•  BOLT browser


•  IbisBrowser


•  Iris Browser

•  jB5 Browser



•  Myriad Browser (bdigare Openwave Mobile Browser)

•  NetFront





•  Opera Mini

•  Opera Mobile

•  Ozone


Hur länge har du haj din mobiltelefon?

När tänker du byta?

Hur gamla telefoner och hur många konsDga (gamla) webbläsare är det värt a? bygga specialanpassningar

för?

Bygg för mobiler som följer standarder

Ge gamla telefoner väldigt enkel design utan krusiduller.

•  Förenklad HTML (?)

•  SemanDsk markup

•  Separera innehåll, presentaDon & beteende

•  Färre requests •  Undvik posiDonering

och floats

•  Undvik fasta bredder •  Alt-‐taggar på bilder

?

Media Types

•  all •  braille •  embossed (braille printers) •  handheld •  print •  projecDon •  screen •  speech •  ?y (terminaler med fix teckenstorlek) •  tv

Media Queries

@media screen and (max-device-width: 320px) {

... Alternativ CSS för små skärmar ...

}

VÄLJ RÄTT�

NIVÅ �

Grundläggande

Presentations-anpassad

Funktions-anpassad

Fristående webbplats MOBIL WEBB�

NIVÅER

KOM IHÅG…

• Tänk mobilkontext • Välj rätt plattform för din

målgrupp • Designa upplevelse för mobilen • Utveckla efter standarder

TACK!

Technology

Kundlunch mobila-losningar