Your SlideShare is downloading. ×
Webseiten für mobile Geräte - MobileTech Conference 2010 Mainz
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

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

2,408
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 …

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,408
On Slideshare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
14
Comments
1
Likes
3
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

  • 1. webseiten für mobile geräte PATRICK H. LAUKE / OPERA SOFTWARE Patrick H. Lauke / MobileTech Conference 2010 / Mainz / 8 September 2010
  • 2. mobile web ist immer wichtiger
  • 3. wir brauchen eine site für's iPhone
  • 4. ...für's iPhone... oh, und für's iPad
  • 5. “remove iPhone from ass” Peter-Paul Koch, The iPhone obsession www.quirksmode.org/blog/archives/2010/02/the_iphone_obse.html
  • 6. sites die auf (fast) allen mobilen devices laufen
  • 7. 1. nichts tun
  • 8. nicht mehr nur WAP oder text
  • 9. moderne mobile browser kommen mit “normalen” sites zurecht
  • 10. “aber der mobile kontext...”
  • 11. 2. separate mobile site (m.flickr.com, mobile.mysite.com, ...)
  • 12. vorsicht: browser sniffing photo: http://www.flickr.com/photos/timdorr/2096272747/
  • 13. lasst den user entscheiden: desktop oder mobile?
  • 14. “refactored” für kleine displays, nicht verwässert für handys
  • 15. 3. einzige adaptive site
  • 16. nichts neues... fluid layout, progressive enhancement, graceful degradation
  • 17. CSS 2 Media Types (screen, print, handheld)
  • 18. CSS 2.1 Media Types <link rel="stylesheet" ... media="print" href="..."> @import url("...") print; @media print { // insert CSS rules here }
  • 19. CSS 3 Media Queries “...the new hotness” Jeffrey Zeldman http://www.zeldman.com/2010/04/08/best-aea-yet/
  • 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. 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. viewport meta
  • 23. viewport meta ● desktop: viewport = sichtbares browserfenster ● mobile geräte: “virtual viewport”, physical pixels, zoom ● viewport meta schlägt dem browser interpretierung vor
  • 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. performance optimieren
  • 26. daten und server requests minimieren / vermeiden (minify JavaScript, kombinierte CSS files, …)
  • 27. CSS sprites Dave Shea, A List Apart www.alistapart.com/articles/sprites
  • 28. width: 50px; height: 50px; background: url(icons.gif) no-repeat -51px 0;
  • 29. data URLs http://software.hixie.ch/utilities/cgi/data/data
  • 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. HTML5 <!DOCTYPE html>
  • 32. video, audio und canvas ohne “steck-eins” (kein Java / Flash / Silverlight auf mobilen geräten)
  • 33. isgeolocationpartofhtml5.com
  • 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. offline detection window.addEventListener('online', function(){ … }, true); window.addEventListener('offline', function(){ … }, true);
  • 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. …und mehr (in arbeit) WebGL, <device>, Contacts API …
  • 38. 1. nichts tun 2. separate mobile site 3. einzige adaptive site
  • 39. www.opera.com/developer patrick.lauke@opera.com people.opera.com/patrickl/presentations/mobiletechcon_08.09.2010/mobiletechcon_08.09.2010.pdf

×