Mobil webb

1,515 views
1,458 views

Published on

Published in: Technology
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
1,515
On SlideShare
0
From Embeds
0
Number of Embeds
21
Actions
Shares
0
Downloads
7
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Mobil webb

  1. 1. Henrik Ekelöf Gränssnittsutvecklare på Valtech
  2. 2. Juni 2010 Jag, Daniela Baccarini (Vårdguiden) & Visar Ulaj (Valtech)
  3. 3. 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
  4. 4. 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!
  5. 5. Använd webbstandarder
  6. 6. 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
  7. 7. Bakåtkompatibel = stödja alla våra användare
  8. 8. Är det värt det?
  9. 9. Acceptera att äldre browsers inte klarar ny teknik och att sidan ser annorlunda ut (men informationen är åtkomlig)
  10. 10. Utgå alltid från minsta gemensamma nämnare
  11. 11. Semantiskt uppmärkt innehåll HTML
  12. 12. Framåtkompatibel ✤ Webbstandarder ✤ Progressive Enhancement
  13. 13. Webbläsare 7-8 ✤ Internet Explorer 9 ✤ Internet Explorer 8 ✤ Internet Explorer 7 ✤ Mozilla Firefox ✤ Google Chrome ✤ Safari ✤ Opera ✤ Internet Explorer 6 (om vi har otur)
  14. 14. Webbläsare för mobiler 37+ • Android WebKit • Myriad Browser (tidigare • Safari Openwave Mobile Browser) • BlackBerry Browser • Samsung WebKit • Blazer • NetFront • Skweezer • BOLT browser • NetSailor Browser • Skyfire 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. 15. Opera (Presto) • Android WebKit • Myriad Browser (tidigare • Safari Openwave Mobile Browser) • BlackBerry Browser • Samsung WebKit • Blazer • NetFront • Skweezer • BOLT browser • NetSailor Browser • Skyfire 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. 16. WebKit • Android WebKit • Myriad Browser (tidigare • Safari Openwave Mobile Browser) • BlackBerry Browser • Samsung WebKit • Blazer • NetFront • Skweezer • BOLT browser • NetSailor Browser • Skyfire 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. 17. Hur länge har du haft din mobiltelefon?
  18. 18. När tänker du byta?
  19. 19. Hur gamla telefoner och hur många konstiga (gamla) webbläsare är det värt att bygga specialanpassningar för?
  20. 20. Bygg för mobiler som följer standarder
  21. 21. Ge gamla telefoner väldigt enkel design utan krusiduller.
  22. 22. Teknik
  23. 23. ✤ 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
  24. 24. Media Types (sedan 1998) <link rel="stylesheet" href="screen.css" media="screen"/> <link rel="stylesheet" href="handheld.css" media="handheld"/>
  25. 25. Media Types ✤ all ✤ screen ✤ braille ✤ speech ✤ embossed (braille printers) ✤ tty (terminaler med fix teckenstorlek) ✤ handheld ✤ tv ✤ print ✤ projection
  26. 26. 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
  27. 27. Media Queries @media screen and (max-device-width: 320px) { ... Alternativ CSS för små skärmar ... }
  28. 28. Hur får vi då in det här på vår befintliga sajt?
  29. 29. Small Medium Large • Använd din • Samma som • Separat lösning för befintliga sajt SMALL plus: mobilen • CSS Media Types • Anpassad HTML • Helt egen - Välj bort, förenkla, sidstruktur • CSS Media förbättra • Helt egen markup Queries • Växla tema med hjälp av Browser • Redirect mellan • JavaScript som sniffing sajter? - Browser laddar “lagom” sniffing mycket beteende beroende på typ eller av enhet använd subdomän
  30. 30. S eller M vs L SMALL eller MEDIUM LARGE + + • CSS Media Queries är framtidens teknik • Obegränsade möjligheter att specialanpassa mobilsajtens innehåll • Enkelt, billigt - • Drift & underhåll av EN lösning • Drift & underhåll av TVÅ lösningar - • Begränsade möjligheter att specialanpassa mobilsajtens innehåll
  31. 31. 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
  32. 32. Länkar ✤ 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 profiling) development-12-tips ✤ Viewport (Safari HTML Reference Apple- http://www.browserscope.org/ specific) ✤ Göm 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/ ✤ Configuring 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 Explorer http://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.html cc351024%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 queries http://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 Checker Getting Started http://validator.w3.org/mobile/ http://www.smashingmagazine.com/ ✤ mobiReady testing tool 2010/05/28/web-development-for-the-iphone- and-ipad-getting-started/ http://ready.mobi/launch.jsp?locale=en_EN
  33. 33. Tack!

×