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!
Recommended