20-mal heruntergeladen
Hochgeladen vonPatrick Lauke
Webseiten für mobile Geräte - M-Days - Frankfurt 27.01.2011
Das Dokument behandelt die Bedeutung mobiler Webseiten und die unterschiedlichen Ansätze zur Entwicklung solcher Seiten, einschließlich separater mobiler Sites und adaptiver Designs. Es wird auf relevante Technologien wie CSS3 Media Queries und Viewport-Meta-Tags eingegangen, um die Nutzererfahrung auf mobilen Geräten zu optimieren. Zusätzlich werden Best Practices zur Verbesserung der Performance und Nutzung moderner Webstandards wie HTML5 und Geolocation vorgestellt.
Weitere ähnliche Inhalte
Ähnlich wie Webseiten für mobile Geräte - M-Days - Frankfurt 27.01.2011
Webseiten für mobile Geräte - M-Days - Frankfurt 27.01.2011
- 1. webseiten für mobilegeräte PATRICK H. LAUKE / OPERA SOFTWARE Patrick H. Lauke / M-Days / Frankfurt / 27 Januar 2011
- 2. web evangelist beiOpera
- 3. Opera – onebrowser on many devices
- 4.
- 5. mobile web ist immerwichtiger
- 6. wir brauchen einesite für's iPhone
- 7. oh, und für'siPad
- 8. “remove iPhone fromass” Peter-Paul Koch, The iPhone obsession www.quirksmode.org/blog/archives/2010/02/the_iphone_obse.html
- 9. sites die auf(fast) allen mobilen devices laufen
- 11. was ist überhauptein “mobile device”?
- 12.
- 13.
- 14. nicht mehr nurWAP oder text
- 15. moderne mobile browser kommen mit “normalen” sites zurecht
- 18. “aber der mobilekontext...”
- 19. 2. separate mobilesite (m.flickr.com, mobile.mysite.com, ...)
- 20. vorsicht: browser sniffing photo: http://www.flickr.com/photos/timdorr/2096272747/
- 21. lasst den userentscheiden: desktop oder mobile?
- 30. “refactored” für kleinedisplays, nicht verwässert für handys
- 31.
- 32. nichts neues... fluid layout,progressive enhancement, graceful degradation
- 33. CSS 2 MediaTypes (screen, print, handheld)
- 34. CSS 2.1 MediaTypes <link rel="stylesheet" ... media="print" href="..."> @import url("...") print; @media print { // insert CSS rules here }
- 35. CSS 3 MediaQueries “...the new hotness” Jeffrey Zeldman http://www.zeldman.com/2010/04/08/best-aea-yet/
- 36. CSS 3 MediaQueries ● 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/
- 37. CSS 3 MediaQueries <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 }
- 40.
- 41.
- 42.
- 43.
- 44.
- 45.
- 46.
- 48. viewport meta schlägt dembrowser interpretierung vor
- 49. viewport meta <meta name="viewport" content="width=device-width"> <metaname="viewport" content="width=320, initial- scale=2.3,user-scalable=no"> http://developer.apple.com/safari/library/documentation/AppleApplications/Reference/SafariWebContent/UsingtheViewport/UsingtheViewport.html
- 52.
- 53. generelle tips “best practices”auf mobile umso wichtiger
- 54.
- 55. daten und serverrequests minimieren / vermeiden (minify JavaScript, kombinierte CSS files, …)
- 56. CSS sprites DaveShea, A List Apart www.alistapart.com/articles/sprites
- 57. width: 50px; height:50px; background: url(icons.gif) no-repeat -51px 0;
- 58.
- 60.
- 61. video, audio undcanvas ohne “steck-eins” (kein Java / Flash / Silverlight auf mobilen geräten)
- 63. geolocation navigator.geolocation.getCurrentPosition(success, error); navigator.geolocation.watchCurrentPosition(success, error); functionsuccess(position) { /* where's Wally? */ var lat = position.coords.latitude; var long = position.coords.longitude; ... }
- 67. offline applications application cache, localStorage/sessionStorage, IndexDB
- 68. …und mehr (inarbeit) WebGL, <device>, DAP …
- 69. 1. nichts tun 2.separate mobile site 3. einzige adaptive site
- 70. www.opera.com/developer patrick.lauke@opera.com people.opera.com/patrickl/presentations/m-days_27.01.2011/m-days_27.01.2011