Webseiten für mobile Geräte - MobileTech Conference 2010 Mainz

2,847 views

Published on

Internetnutzung auf Handys und mobilen Geräten ist in den letzten Jahren drastisch gestiegen. Und mit diesem Trend steigen auch die Erwartungen der Kunden – eine "mobile-optimised"-Version gehört bei vielen Webprojekten schon jetzt zum Standard – und der Endnutzer. Obwohl die Browser im mobilen Bereich schon recht gut mit "normalen" Webangeboten klar kommen, gibt es trotzdem neue Strategien und altbekannte Webdesign-/Web-Development-Methoden, um sicherzustellen, dass ihre Seiten auf allen Geräten – jenseits vom klassischen Desktoprechner – so gut wie möglich aussehen und funktionieren.

Published in: Education
1 Comment
3 Likes
Statistics
Notes
No Downloads
Views
Total views
2,847
On SlideShare
0
From Embeds
0
Number of Embeds
5
Actions
Shares
0
Downloads
16
Comments
1
Likes
3
Embeds 0
No embeds

No notes for slide

Webseiten für mobile Geräte - MobileTech Conference 2010 Mainz

  1. 1. webseiten für mobile geräte PATRICK H. LAUKE / OPERA SOFTWARE Patrick H. Lauke / MobileTech Conference 2010 / Mainz / 8 September 2010
  2. 2. mobile web ist immer wichtiger
  3. 3. wir brauchen eine site für's iPhone
  4. 4. ...für's iPhone... oh, und für's iPad
  5. 5. “remove iPhone from ass” Peter-Paul Koch, The iPhone obsession www.quirksmode.org/blog/archives/2010/02/the_iphone_obse.html
  6. 6. sites die auf (fast) allen mobilen devices laufen
  7. 7. 1. nichts tun
  8. 8. nicht mehr nur WAP oder text
  9. 9. moderne mobile browser kommen mit “normalen” sites zurecht
  10. 10. “aber der mobile kontext...”
  11. 11. 2. separate mobile site (m.flickr.com, mobile.mysite.com, ...)
  12. 12. vorsicht: browser sniffing photo: http://www.flickr.com/photos/timdorr/2096272747/
  13. 13. lasst den user entscheiden: desktop oder mobile?
  14. 14. “refactored” für kleine displays, nicht verwässert für handys
  15. 15. 3. einzige adaptive site
  16. 16. nichts neues... fluid layout, progressive enhancement, graceful degradation
  17. 17. CSS 2 Media Types (screen, print, handheld)
  18. 18. CSS 2.1 Media Types <link rel="stylesheet" ... media="print" href="..."> @import url("...") print; @media print { // insert CSS rules here }
  19. 19. CSS 3 Media Queries “...the new hotness” Jeffrey Zeldman http://www.zeldman.com/2010/04/08/best-aea-yet/
  20. 20. CSS 3 Media Queries ● erweitern CSS 2.1 Media Types konzept ● präzisere kontrolle (nicht nur screen, print...) ● width, height, orientation, color, resolution, … http://www.w3.org/TR/css3-mediaqueries/
  21. 21. CSS 3 Media Queries <link rel="stylesheet" ... media="screen and (max-width:480px)" href="..."> @import url("...") screen and (max-width:480px); @media screen and (max-width:480px) { // insert CSS rules here }
  22. 22. viewport meta
  23. 23. viewport meta ● desktop: viewport = sichtbares browserfenster ● mobile geräte: “virtual viewport”, physical pixels, zoom ● viewport meta schlägt dem browser interpretierung vor
  24. 24. viewport meta <meta name="viewport" content="width=device-width"> <meta name="viewport" content="width=320, initial- scale=2.3,user-scalable=no"> http://developer.apple.com/safari/library/documentation/AppleApplications/Reference/SafariWebContent/UsingtheViewport/UsingtheViewport.html
  25. 25. performance optimieren
  26. 26. daten und server requests minimieren / vermeiden (minify JavaScript, kombinierte CSS files, …)
  27. 27. CSS sprites Dave Shea, A List Apart www.alistapart.com/articles/sprites
  28. 28. width: 50px; height: 50px; background: url(icons.gif) no-repeat -51px 0;
  29. 29. data URLs http://software.hixie.ch/utilities/cgi/data/data
  30. 30. data URLs <img width="48" height="48" alt="Redux gravatar" src="data:image/jpeg,%FF%D8%FF%E0%00%10JFIF %00%01%01%01%00H%00H%00%00%FF% … "> h1 { background: url("data:image/jpeg,%FF%D8%FF %E0%00%10JFIF%00%01 … ") no-repeat left top; }
  31. 31. HTML5 <!DOCTYPE html>
  32. 32. video, audio und canvas ohne “steck-eins” (kein Java / Flash / Silverlight auf mobilen geräten)
  33. 33. isgeolocationpartofhtml5.com
  34. 34. geolocation navigator.geolocation.getCurrentPosition(success, error); navigator.geolocation.watchCurrentPosition(success, error); function success(position) { /* where's Wally? */ var lat = position.coords.latitude; var long = position.coords.longitude; ... }
  35. 35. offline detection window.addEventListener('online', function(){ … }, true); window.addEventListener('offline', function(){ … }, true);
  36. 36. application cache <html manifest=”blah.manifest”> CACHE MANIFEST images/sprites.png scripts/common.js scripts/jquery.js styles/global.css data.xml NETWORK: resources/news.xml FALLBACK: images/ offline/not-available.png
  37. 37. …und mehr (in arbeit) WebGL, <device>, Contacts API …
  38. 38. 1. nichts tun 2. separate mobile site 3. einzige adaptive site
  39. 39. www.opera.com/developer patrick.lauke@opera.com people.opera.com/patrickl/presentations/mobiletechcon_08.09.2010/mobiletechcon_08.09.2010.pdf

×