mobil webb
TRANSCRIPT
Henrik EkelöfGränssnittsutvecklare på Valtech
Juni 2010Jag, Daniela Baccarini (Vårdguiden) & Visar Ulaj (Valtech)
Hur?
Du kan hitta en lämplig nivå för hur du ska anpassa din webbsajt för mobilen
Använd Webbstandarder
Bygg framåtkompatibelt
Browser sniffing
• Titta på webbläsarens User Agent
• Leverera sidan eller ett felmeddelande
• Browser sniffing = dåligt!
• Browser sniffing för att förbättra upplevelsen = OK!
Använd webbstandarder
Webbstandarder
✤ Separera innehåll från presentation och beteende
✤ Validerande (X)HTML
✤ Semantiskt uppmärkt innehåll
✤ CSS (inte tabeller) för layout
✤ Unobtrusive JavaScript för beteende
= stödja alla våra användare
Bakåtkompatibel
Är det värt det?
Acceptera att äldre browsers inte klarar ny teknik och att sidan ser
annorlunda ut(men informationen är åtkomlig)
Utgå alltid från minsta gemensamma nämnare
Semantiskt uppmärkt innehåll
HTML
Framåtkompatibel
✤ Webbstandarder✤ Progressive Enhancement
✤ Internet Explorer 9
✤ Internet Explorer 8
✤ Internet Explorer 7
✤ Mozilla Firefox
✤ Google Chrome
✤ Safari
✤ Opera
✤ Internet Explorer 6 (om vi har otur)
Webbläsare 7-8
Webbläsare för mobiler
• 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
37+• Safari
• Samsung WebKit
• Skweezer
• Skyfire Mobile Browser
• Steel
• Teashark
• ThunderHawk
• Tristit
• UCWEB
• uZard Web
• Vision Mobile Browser
• WinWAP
• xScope
• Myriad Browser (tidigare 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
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
• Safari
• Samsung WebKit
• Skweezer
• Skyfire Mobile Browser
• Steel
• Teashark
• ThunderHawk
• Tristit
• UCWEB
• uZard Web
• Vision Mobile Browser
• WinWAP
• xScope
• Myriad Browser (tidigare 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
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
• Safari
• Samsung WebKit
• Skweezer
• Skyfire Mobile Browser
• Steel
• Teashark
• ThunderHawk
• Tristit
• UCWEB
• uZard Web
• Vision Mobile Browser
• WinWAP
• xScope
• Myriad Browser (tidigare 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
Hur länge har du haft din mobiltelefon?
När tänker du byta?
Hur gamla telefoner och hur många konstiga (gamla) webbläsare är det värt att
bygga specialanpassningar för?
Bygg för mobiler som följer standarder
Ge gamla telefoner väldigt enkel design utan krusiduller.
Teknik
✤ Semantisk markup
✤ Separera innehåll, presentation & beteende
✤ Alt-taggar på bilder i innehåll
✤ Färre requests
✤ Förenklad HTML (?)
✤ Undvik positionering och floats
✤ Använd padding/margin sparsamt
✤ Undvik fasta bredder
?
Media Types (sedan 1998)
<link rel="stylesheet" href="screen.css" media="screen"/>
<link rel="stylesheet" href="handheld.css" media="handheld"/>
✤ all
✤ braille
✤ embossed (braille printers)
✤ handheld
✤ projection
✤ screen
✤ speech
✤ tty (terminaler med fix teckenstorlek)
✤ tv
Media Types
Fungerar det då?
✤ Vissa läser enbart handheld
✤ Vissa läser enbart handheld (om det finns), annars screen
✤ Vissa läser både handheld och screen
✤ Vissa läser enbart screen
Media Queries
@media screen and (max-device-width: 320px) {
... Alternativ CSS för små skärmar ...
}
Hur får vi då in det här på vår befintliga sajt?
Small
• Använd din befintliga sajt
• CSS Media Types
• CSS Media Queries
• JavaScript som laddar “lagom” mycket beteende beroende på typ av enhet
• Samma som SMALL plus:
• Anpassad HTML - Välj bort, förenkla, förbättra
• Växla tema med hjälp av Browser sniffing
eller
använd subdomän
• Separat lösning för mobilen
• Helt egen sidstruktur
• Helt egen markup
• Redirect mellan sajter? - Browser sniffing
LargeMedium
S eller M vs L
SMALL eller MEDIUM
+
• CSS Media Queries är framtidens teknik
• Enkelt, billigt
• Drift & underhåll av EN lösning
-
• Begränsade möjligheter att specialanpassa mobilsajtens innehåll
LARGE
+
• Obegränsade möjligheter att specialanpassa mobilsajtens innehåll
-
• Drift & underhåll av TVÅ lösningar
Sammanfattning
Gör någonting med de möjligheter som finns nu!
Lägg inte mycket energi på att anpassa bakåt: Utvecklingen går fort, användandet av webben med gammal teknik är litet och sjunker
Webbstandarder framtidssäkrar din sajt
Länkar
✤ Meta Viewporthttp://www.w3.org/TR/mwabp/#bp-viewport
✤ Viewport (Safari HTML Reference Apple-specific)http://ekelof.net/x/m1
✤ Configuring the viewport (Safari Web Content Guide)http://ekelof.net/x/m2
✤ Media typeshttp://www.w3.org/TR/CSS2/media.html
✤ Media Querieshttp://www.w3.org/TR/css3-mediaqueries/
✤ Safe media querieshttp://dev.opera.com/articles/view/safe-media-queries/
✤ Media querieshttps://developer.mozilla.org/en/css/media_queries
✤ CSS3 Media Queries (Presentation)http://www.slideshare.net/maxdesign/css3-media-queries
✤ W3C mobileOK Checkerhttp://validator.w3.org/mobile/
✤ mobiReady testing toolhttp://ready.mobi/launch.jsp?locale=en_EN
✤ dotMobi emulatorhttp://emulator.mtld.mobi/emulator.php
✤ Browserscope (browser profiling)http://www.browserscope.org/
✤ How to serve the right content to mobile browsershttp://dev.opera.com/articles/view/how-to-serve-the-right-content-to-mobile/CSS
✤ Compatibility and Internet Explorerhttp://msdn.microsoft.com/en-us/library/cc351024%28VS.85%29.aspx
✤ Metrics, Layout Guidelines, and Tips (iPhone Human Interface Guidelines for WebApplications)http://ekelof.net/x/m3
✤ Using CSS Media Queries to Style Your iPhone and iPad HTMLhttp://broadcast.oreilly.com/2010/04/using-css-media-queries-ipad.html
✤ The orientation media queryhttp://www.quirksmode.org/blog/archives/2010/04/the_orientation.html
✤ Web Development For The iPhone And iPad: Getting Startedhttp://www.smashingmagazine.com/2010/05/28/web-development-for-the-iphone-and-ipad-getting-started/
✤ iPhone Development: 12 Tips To Get You Startedhttp://articles.sitepoint.com/article/iphone-development-12-tips
✤ Göm adressraden i moderna telefoner t.ex. iPhone:http://www.iphonemicrosites.com/tutorials/how-to-hide-the-address-bar-in-mobilesafari/
✤ Return of the Mobile Stylesheethttp://www.alistapart.com/articles/return-of-the-mobile-stylesheet/
✤ Best Practices for Speeding Up Your Web Sitehttp://developer.yahoo.com/performance/rules.html
✤ Rethinking the Mobile Webhttp://www.slideshare.net/bryanrieger/rethinking-the-mobile-web-by-yiibu
Tack!