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  

•  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

WebKit  •  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  (bdigare  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

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!