Mobil webb

Click here to load reader

  • date post

    13-May-2015
  • Category

    Technology

  • view

    1.406
  • download

    9

Embed Size (px)

Transcript of Mobil webb

  • 1.Henrik Ekelf Grnssnittsutvecklare p Valtech

2. Juni 2010 Jag, Daniela Baccarini (Vrdguiden) & Visar Ulaj (Valtech) 3. Hur?Du kan hitta en lmplig niv fr hur du ska anpassadin webbsajt fr mobilen Anvnd Webbstandarder Bygg framtkompatibelt 4. Browser sniffing Titta p webblsarens User Agent Leverera sidan eller ett felmeddelande Browser snifng = dligt! Browser snifng fr att frbttra upplevelsen = OK! 5. Anvnd webbstandarder 6. Webbstandarder Separera innehll frn presentation och beteende Validerande (X)HTML Semantiskt uppmrkt innehll CSS (inte tabeller) fr layout Unobtrusive JavaScript fr beteende 7. Baktkompatibel= stdja alla vra anvndare 8. r det vrt det? 9. Acceptera att ldre browsers inte klarar ny teknik och att sidan ser annorlunda ut (men informationen r tkomlig) 10. Utg alltid frn minsta gemensamma nmnare 11. Semantiskt uppmrkt innehllHTML 12. Framtkompatibel Webbstandarder Progressive Enhancement 13. Webblsare7-8 Internet Explorer 9 Internet Explorer 8 Internet Explorer 7 Mozilla Firefox Google Chrome Safari Opera Internet Explorer 6 (om vi har otur) 14. Webblsare fr mobiler 37+ Android WebKit Myriad Browser (tidigare Safari Openwave Mobile Browser) BlackBerry Browser Samsung WebKit Blazer NetFront Skweezer BOLT browser NetSailor Browser Skyre Mobile Browser Fennec (Firefox for mobile) Nokia S60 WebKit Steel IbisBrowser Nokia Series 40 Browser Teashark Internet Explorer Mobile Obigo Browser ThunderHawk Iris Browser Opera Mini Tristit jB5 Browser Opera Mobile UCWEB JOCA by InteracT!V Ozone uZard Web Kindle Basic Web Palm WebOS Browser Vision Mobile Browser Pixo by Sun Microsystems WinWAP PlayStation Portable web browser xScope Polaris Browser 15. Opera (Presto) Android WebKit Myriad Browser (tidigare Safari Openwave Mobile Browser) BlackBerry Browser Samsung WebKit Blazer NetFront Skweezer BOLT browser NetSailor Browser Skyre Mobile Browser Fennec (Firefox for mobile) Nokia S60 WebKit Steel IbisBrowser Nokia Series 40 Browser Teashark Internet Explorer Mobile Obigo Browser ThunderHawk Iris Browser Opera Mini Tristit jB5 Browser Opera Mobile UCWEB JOCA by InteracT!V Ozone uZard Web Kindle Basic Web Palm WebOS Browser Vision Mobile Browser Pixo by Sun Microsystems WinWAP PlayStation Portable web browser xScope Polaris Browser 16. WebKit Android WebKit Myriad Browser (tidigare Safari Openwave Mobile Browser) BlackBerry Browser Samsung WebKit Blazer NetFront Skweezer BOLT browser NetSailor Browser Skyre Mobile Browser Fennec (Firefox for mobile) Nokia S60 WebKit Steel IbisBrowser Nokia Series 40 Browser Teashark Internet Explorer Mobile Obigo Browser ThunderHawk Iris Browser Opera Mini Tristit jB5 Browser Opera Mobile UCWEB JOCA by InteracT!V Ozone uZard Web Kindle Basic Web Palm WebOS Browser Vision Mobile Browser Pixo by Sun Microsystems WinWAP PlayStation Portable web browser xScope Polaris Browser 17. Hur lnge har du haft din mobiltelefon? 18. Nr tnker du byta? 19. Hur gamla telefoner och hur mnga konstiga (gamla) webblsare r det vrt attbygga specialanpassningar fr? 20. Bygg fr mobiler som fljer standarder 21. Ge gamla telefoner vldigt enkel design utan krusiduller. 22. Teknik 23. Semantisk markup Separera innehll, presentation & beteende Alt-taggar p bilder i innehll Frre requests Frenklad HTML (?) Undvik positionering och oats Anvnd padding/margin sparsamt ? Undvik fasta bredder 24. Media Types (sedan 1998) 25. Media Types all screen braille speech embossed (braille printers) tty (terminaler med x teckenstorlek) handheld tv print projection 26. Fungerar det d? Vissa lser enbart handheld Vissa lser enbart handheld (om det nns), annars screen Vissa lser bde handheld och screen Vissa lser enbart screen 27. Media Queries @media screen and (max-device-width: 320px) {... Alternativ CSS fr sm skrmar ...} 28. Hur fr vi d in det hr p vrbefintliga sajt? 29. Small Medium Large Anvnd din Samma som Separat lsning fr bentliga sajtSMALL plus:mobilen CSS Media Types Anpassad HTML Helt egen - Vlj bort, frenkla, sidstruktur CSS Media frbttra Helt egen markup Queries Vxla tema med hjlp av Browser Redirect mellan JavaScript som snifngsajter? - Browser laddar lagomsnifng mycket beteende beroende p typ eller av enhet anvnd subdomn 30. S eller M vs LSMALL eller MEDIUMLARGE + + CSS Media Queries r framtidens teknik Obegrnsade mjligheter att specialanpassa mobilsajtens innehll Enkelt, billigt- Drift & underhll av EN lsning Drift & underhll av TV lsningar- Begrnsade mjligheter att specialanpassa mobilsajtens innehll 31. SammanfattningGr ngonting med de mjligheter som nns nu! Lgg inte mycket energi p att anpassa bakt:Utvecklingen gr fort, anvndandet av webben medgammal teknik r litet och sjunker Webbstandarder framtidsskrar din sajt 32. Lnkar Meta Viewport dotMobi emulator iPhone Development: 12 Tips To Get You http://www.w3.org/TR/mwabp/#bp- http://emulator.mtld.mobi/emulator.php Started viewport http://articles.sitepoint.com/article/iphone- Browserscope (browser proling)development-12-tips Viewport (Safari HTML Reference Apple-http://www.browserscope.org/ specic) Gm adressraden i moderna telefoner t.ex. http://ekelof.net/x/m1 How to serve the right content to mobile iPhone: browsers http://www.iphonemicrosites.com/tutorials/ Conguring the viewport (Safari Web Content http://dev.opera.com/articles/view/how-to- how-to-hide-the-address-bar-in-mobilesafari/ Guide)serve-the-right-content-to-mobile/CSS http://ekelof.net/x/m2 Return of the Mobile Stylesheet Compatibility and Internet Explorerhttp://www.alistapart.com/articles/return-of- Media types http://msdn.microsoft.com/en-us/library/ the-mobile-stylesheet/ http://www.w3.org/TR/CSS2/media.htmlcc351024%28VS.85%29.aspx Best Practices for Speeding Up Your Web Site Media Queries Metrics, Layout Guidelines, and Tips (iPhone http://developer.yahoo.com/performance/ http://www.w3.org/TR/css3-mediaqueries/ Human Interface Guidelines for rules.html WebApplications) Safe media querieshttp://ekelof.net/x/m3 Rethinking the Mobile Web http://dev.opera.com/articles/view/safe- http://www.slideshare.net/bryanrieger/ media-queries/ Using CSS Media Queries to Style Your iPhone rethinking-the-mobile-web-by-yiibu and iPad HTML Media queries http://broadcast.oreilly.com/2010/04/using- https://developer.mozilla.org/en/css/ css-media-queries-ipad.html media_queries The orientation media query CSS3 Media Queries (Presentation) http://www.quirksmode.org/blog/archives/ http://www.slideshare.net/maxdesign/css3- 2010/04/the_orientation.html media-queries Web Development For The iPhone And iPad: W3C mobileOK CheckerGetting Started http://validator.w3.org/mobile/ http://www.smashingmagazine.com/ mobiReady testing tool2010/05/28/web-development-for-the-iphone- and-ipad-getting-started/ http://ready.mobi/launch.jsp?locale=en_EN 33. Tack!