webseiten für mobile gerätePATRICK H. LAUKE / OPERA SOFTWAREPatrick H. Lauke / M-Days / Frankfurt / 27 Januar 2011
web evangelist bei Opera
Opera – one browser on many devices
</werbung>
mobile web istimmer wichtiger
wir brauchen eine site     fürs iPhone
oh, und fürs iPad
“remove iPhone from ass” Peter-Paul Koch, The iPhone obsession       www.quirksmode.org/blog/archives/2010/02/the_iphone_o...
sites die auf (fast) allenmobilen devices laufen
was ist überhaupt ein “mobile device”?
3 ansätze
1. nichts tun
nicht mehr nur WAP oder text
moderne mobile browser      kommen mit “normalen” sites zurecht
“aber der mobile kontext...”
2. separate mobile site  (m.flickr.com, mobile.mysite.com, ...)
vorsicht: browser sniffing       photo: http://www.flickr.com/photos/timdorr/2096272747/
lasst den user entscheiden:  desktop oder mobile?
“refactored” für kleine displays,  nicht verwässert für handys
3. einzige adaptive site
nichts neues...fluid layout, progressive enhancement, graceful degradation
CSS 2 Media Types   (screen, print, handheld)
CSS 2.1 Media Types<link rel="stylesheet" ...media="print" href="...">@import url("...") print;@media print {  // insert C...
CSS 3 Media Queries   “...the new hotness” Jeffrey Zeldman      http://www.zeldman.com/2010/04/08/best-aea-yet/
CSS 3 Media Queries● erweitern CSS 2.1 Media Types konzept● präzisere kontrolle (nicht nur screen, print...)● width, heigh...
CSS 3 Media Queries<link rel="stylesheet" ...media="screen and (max-width:480px)" href="...">@import url("...") screen and...
www.alistapart.com/articles/responsive-web-design
http://mediaqueri.es
http://mediaqueri.es
http://mediaqueri.es
http://mediaqueri.es
viewport meta
physiche vs virtuelle pixel
viewport metaschlägt dem browser interpretierung vor
viewport meta<meta name="viewport"content="width=device-width"><meta name="viewport"content="width=320, initial-scale=2.3,...
<meta name="viewport" content="width=550">
generelle tips“best practices” auf mobile umso wichtiger
performance optimieren
daten und server requestsminimieren / vermeiden (minify JavaScript, kombinierte CSS files, …)
CSS sprites Dave Shea, A List Apart www.alistapart.com/articles/sprites
width: 50px; height: 50px;background: url(icons.gif) no-repeat -51px 0;
:hover / onmouseover
HTML5<!DOCTYPE html>
video, audio und canvas   ohne “steck-eins”(kein Java / Flash / Silverlight auf mobilen geräten)
geolocationnavigator.geolocation.getCurrentPosition(success, error);navigator.geolocation.watchCurrentPosition(success, er...
offline applications          application cache,localStorage/sessionStorage, IndexDB
…und mehr (in arbeit)WebGL, <device>, DAP …
1. nichts tun2. separate mobile site3. einzige adaptive site
www.opera.com/developer               patrick.lauke@opera.compeople.opera.com/patrickl/presentations/m-days_27.01.2011/m-d...
Webseiten für mobile Geräte - M-Days - Frankfurt 27.01.2011
Webseiten für mobile Geräte - M-Days - Frankfurt 27.01.2011
Webseiten für mobile Geräte - M-Days - Frankfurt 27.01.2011
Webseiten für mobile Geräte - M-Days - Frankfurt 27.01.2011
Webseiten für mobile Geräte - M-Days - Frankfurt 27.01.2011
Webseiten für mobile Geräte - M-Days - Frankfurt 27.01.2011
Webseiten für mobile Geräte - M-Days - Frankfurt 27.01.2011
Webseiten für mobile Geräte - M-Days - Frankfurt 27.01.2011
Webseiten für mobile Geräte - M-Days - Frankfurt 27.01.2011
Webseiten für mobile Geräte - M-Days - Frankfurt 27.01.2011
Webseiten für mobile Geräte - M-Days - Frankfurt 27.01.2011
Webseiten für mobile Geräte - M-Days - Frankfurt 27.01.2011
Webseiten für mobile Geräte - M-Days - Frankfurt 27.01.2011
Webseiten für mobile Geräte - M-Days - Frankfurt 27.01.2011
Webseiten für mobile Geräte - M-Days - Frankfurt 27.01.2011
Webseiten für mobile Geräte - M-Days - Frankfurt 27.01.2011
Webseiten für mobile Geräte - M-Days - Frankfurt 27.01.2011
Webseiten für mobile Geräte - M-Days - Frankfurt 27.01.2011
Webseiten für mobile Geräte - M-Days - Frankfurt 27.01.2011
Webseiten für mobile Geräte - M-Days - Frankfurt 27.01.2011
Webseiten für mobile Geräte - M-Days - Frankfurt 27.01.2011
Upcoming SlideShare
Loading in …5
×

Webseiten für mobile Geräte - M-Days - Frankfurt 27.01.2011

4,213 views

Published on

Published in: Technology

Webseiten für mobile Geräte - M-Days - Frankfurt 27.01.2011

  1. 1. webseiten für mobile gerätePATRICK H. LAUKE / OPERA SOFTWAREPatrick H. Lauke / M-Days / Frankfurt / 27 Januar 2011
  2. 2. web evangelist bei Opera
  3. 3. Opera – one browser on many devices
  4. 4. </werbung>
  5. 5. mobile web istimmer wichtiger
  6. 6. wir brauchen eine site fürs iPhone
  7. 7. oh, und fürs iPad
  8. 8. “remove iPhone from ass” Peter-Paul Koch, The iPhone obsession www.quirksmode.org/blog/archives/2010/02/the_iphone_obse.html
  9. 9. sites die auf (fast) allenmobilen devices laufen
  10. 10. was ist überhaupt ein “mobile device”?
  11. 11. 3 ansätze
  12. 12. 1. nichts tun
  13. 13. nicht mehr nur WAP oder text
  14. 14. moderne mobile browser kommen mit “normalen” sites zurecht
  15. 15. “aber der mobile kontext...”
  16. 16. 2. separate mobile site (m.flickr.com, mobile.mysite.com, ...)
  17. 17. vorsicht: browser sniffing photo: http://www.flickr.com/photos/timdorr/2096272747/
  18. 18. lasst den user entscheiden: desktop oder mobile?
  19. 19. “refactored” für kleine displays, nicht verwässert für handys
  20. 20. 3. einzige adaptive site
  21. 21. nichts neues...fluid layout, progressive enhancement, graceful degradation
  22. 22. CSS 2 Media Types (screen, print, handheld)
  23. 23. CSS 2.1 Media Types<link rel="stylesheet" ...media="print" href="...">@import url("...") print;@media print { // insert CSS rules here}
  24. 24. CSS 3 Media Queries “...the new hotness” Jeffrey Zeldman http://www.zeldman.com/2010/04/08/best-aea-yet/
  25. 25. 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/
  26. 26. 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}
  27. 27. www.alistapart.com/articles/responsive-web-design
  28. 28. http://mediaqueri.es
  29. 29. http://mediaqueri.es
  30. 30. http://mediaqueri.es
  31. 31. http://mediaqueri.es
  32. 32. viewport meta
  33. 33. physiche vs virtuelle pixel
  34. 34. viewport metaschlägt dem browser interpretierung vor
  35. 35. 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
  36. 36. <meta name="viewport" content="width=550">
  37. 37. generelle tips“best practices” auf mobile umso wichtiger
  38. 38. performance optimieren
  39. 39. daten und server requestsminimieren / vermeiden (minify JavaScript, kombinierte CSS files, …)
  40. 40. CSS sprites Dave Shea, A List Apart www.alistapart.com/articles/sprites
  41. 41. width: 50px; height: 50px;background: url(icons.gif) no-repeat -51px 0;
  42. 42. :hover / onmouseover
  43. 43. HTML5<!DOCTYPE html>
  44. 44. video, audio und canvas ohne “steck-eins”(kein Java / Flash / Silverlight auf mobilen geräten)
  45. 45. geolocationnavigator.geolocation.getCurrentPosition(success, error);navigator.geolocation.watchCurrentPosition(success, error);function success(position) { /* wheres Wally? */ var lat = position.coords.latitude; var long = position.coords.longitude; ...}
  46. 46. offline applications application cache,localStorage/sessionStorage, IndexDB
  47. 47. …und mehr (in arbeit)WebGL, <device>, DAP …
  48. 48. 1. nichts tun2. separate mobile site3. einzige adaptive site
  49. 49. www.opera.com/developer patrick.lauke@opera.compeople.opera.com/patrickl/presentations/m-days_27.01.2011/m-days_27.01.2011

×