Online / Offline

847 Aufrufe

Veröffentlicht am

Talk zum Responsive Design Day auf der Webinale 2015 in Berlin.

Veröffentlicht in: Internet
0 Kommentare
2 Gefällt mir
Statistik
Notizen
  • Als Erste(r) kommentieren

Keine Downloads
Aufrufe
Aufrufe insgesamt
847
Auf SlideShare
0
Aus Einbettungen
0
Anzahl an Einbettungen
57
Aktionen
Geteilt
0
Downloads
15
Kommentare
0
Gefällt mir
2
Einbettungen 0
Keine Einbettungen

Keine Notizen für die Folie

Online / Offline

  1. 1. Peter Rozek@webinterface ONLINE OFFLINEWebinale 2015, 07. - 11. Juni 2015
  2. 2. PETER ROZEK Arbeite bei ecx.io (Digital Agentur) Themengebiete: UX Usability Accessibility Frontend Peter Rozek@webinterface
  3. 3. @webinterface „Ajax-vergleich“ von I, DanielSHaischt: wikimedia.org AJAX Revolution
  4. 4. Bildnachweis: Instragram gingergibson@webinterface Heute sind wir immer Online!
  5. 5. Sind wir immer Online? @webinterface No connection available
  6. 6. „We can’t keep building apps with the desktop mindset of permanent, fast connectivity, where a temporary disconnection or slow service is regarded as a problem and communicated as an error.“ Offline First by Team Hoodie @webinterface
  7. 7. Desktop Performance „Wahnsinnige“ Geschwindigkeit @webinterface Bildnachweis: starwars.gamona.de
  8. 8. @webinterface Mobile Performance Langsame Geschwindigkeit
  9. 9. @webinterface Bildnachweis: quazoo.com Wir hätten gerne eine Zeitgemäße Website.
  10. 10. @webinterface …so was zum Beispiel
  11. 11. @webinterface …und Responsive
  12. 12. Es werden viel zu große und langsame Websites entwickelt. @webinterface http://moto.oakley.com/
  13. 13. 85.4MB und 471 HTTP requests @webinterface http://moto.oakley.com/
  14. 14. @webinterface Nach der Optimierung
 14.2MB und 291 request
  15. 15. @webinterface Applikationen sollten 
 schnell und Performant sein. Bildnachweis: www.srf.ch
  16. 16. @webinterface Warten ist kognitiver Stress
  17. 17. @webinterface Keine Verzögerung spürbar > 100ms > 1s > 10s Aufmerksamkeit schwindet Arbeitsfluss wird nicht gestört Nielsens Heuristik 
 Wahrnehmung von Antwortzeiten
  18. 18. @webinterface Schlimmer als Warten ist Ungewissheit.
  19. 19. Perfomance Optimierung @webinterface
  20. 20. @webinterface Conditional Loading
  21. 21. @webinterface Problem: 
 Alle Inhalte werden geladen
  22. 22. @webinterface Lösung:
 Conditional Loading Desktop 
 Inhalte laden Mobile 
 Inhalte laden
  23. 23. @webinterface if (window.matchMedia("(min-width:768px)").matches) { // der Viewport ist mindestens 768px breit } else { // der Viewport ist kleiner als 768px }} matchMedia() matchMedia Polyfill
  24. 24. @webinterface Modernizr.load({ test: Modernizr.localstorage, yep : 'storage.js', nope: 'storage-polyfill.js' }); Eleganter mit Modernizr
  25. 25. @webinterface Ajax Include Pattern Skript Zusätzliche Inhalte werden ab einer bestimmten Bildschirmgröße automatisch geladen. Bei kleineren Bildschirmen können zusätzliche Inhalte per Klick geladen werden. Bildnachweis: filamentgroup.com
  26. 26. @webinterface <div> <h2 data-after="links.html" data-media=„(min-widht: 40em)“> <a href=„links.html“>Ergänzende Inhalte</a> </h2> </div> Ajax Include Pattern Skript data-after = Verweis auf die Datei die geladen werden soll data-media = Direktes laden ab einem bestimmten Media Query
  27. 27. @webinterface The Boston Globe
  28. 28. @webinterface The Boston Globe
  29. 29. @webinterface Voraussetzung: Content First Mobile First
  30. 30. @webinterface Lazy Loading
  31. 31. @webinterface Lazy Loading mit jQuery Unveil Unveil.js = 1kb groß
  32. 32. @webinterface <img src="bg.png" data-src="img1.jpg" /> <img src="bg.png" data-src="img2.jpg" data-src-retina="img2-retina.jpg" /> Eleganter mit Modernizr
  33. 33. @webinterface <img src="example.jpg" lazyload="1" /> Lazy Loading als W3C Standard
  34. 34. @webinterface Picture Tag
 Responsive Images
  35. 35. @webinterface img { max-width: 100%; height: auto; } Bisherige Technik
  36. 36. @webinterface Responsive Bilder mit dem 
 picture-Element Berücksichtigt folgende unterschiede: • Auflösung • Abmessung für verschiedene Viewport-Größen • Bildausschnitte, Seitenverhältnisse oder Motive • Dateiformate
  37. 37. @webinterface <picture> <source media="(min-width: 1024px)" srcset="large.jpg 1x, large@2x.jpg 2x"> <source media="(min-width: 768px)" srcset="madium.jpg 1x, medium@2x.jpg 2x"> <source srcset="small.jpg 1x, small@2x.jpg 2x"> <img src="static/images/dummy/fallback.jpg"> </picture>
  38. 38. @webinterface Can i use?
  39. 39. Polyfill für Picture Tag: Picturefill @webinterface
  40. 40. @webinterface Alles Techniken um die Performance zu verbessern!
  41. 41. No Connection Daten Offline speichern @webinterface
  42. 42. @webinterface Cookies ?
  43. 43. @webinterface Eingeschränkte Nutzung der Daten Anzahl und Größe limitiert Problem: 
 Daten für eine Anwendung 
 dauerhaft offline speichern.
  44. 44. @webinterface LocalStorage
  45. 45. @webinterface Die User-Daten werden nicht mehr wie Cookies mit jedem HTTP- Request auf den Server übertragen.
  46. 46. @webinterface HTML5 und LocalStorage localStorage.setItem("key", „wert"); localStorage.getItem("key");
  47. 47. @webinterface Formularverarbeitung <form onsubmit="daten_speichern(); return false"> <input type="text" name="vorname" /> </form>
  48. 48. @webinterface Daten speichern function daten_speichern() { localStorage.setItem("vorname", document.forms[0]["name"].value); }
  49. 49. @webinterface Daten ausgeben function daten_ausgeben() { document.getElementById("vorname").firstChild.nodeValue = localStorage.getItem("vorname"); }
  50. 50. @webinterface LocalStorage für Offlinebetrieb navigator.onLine
  51. 51. @webinterface window.addEventListener('load', function() { var status = document.getElementById("status"); function updateOnlineStatus(event) { var condition = navigator.onLine ? "online" : "offline"; status.className = condition; status.innerHTML = condition.toUpperCase(); log.insertAdjacentHTML("beforeend", "Event: " + event.type + "; Status: " + condition); } window.addEventListener('online', updateOnlineStatus); window.addEventListener('offline', updateOnlineStatus); }); "online" und "offline" Events
  52. 52. @webinterface <div id="status"></div> <div id="log"></div> <p>This is a test</p> HTML
  53. 53. @webinterface Ergebnis
  54. 54. @webinterface AppCache
  55. 55. @webinterface HTML5 AppCache für WebApps und Websites.
  56. 56. @webinterface Vorteile: Offline surfen Ressourcen sind lokal verfügbar und laden schnelle Verminderte Serverlast
  57. 57. @webinterface http://alistapart.com
  58. 58. @webinterface Wie funktioniert der HTML5 AppCache? Browser sucht in der Website nach einem Verweis auf ein entsprechendes AppCache Manifest.
  59. 59. @webinterface <html manifest="mein_offline_manifest.appcache"> ... </html>
  60. 60. @webinterface Hat der Browser alle Dateien im AppCache gespeichert, holt er die Dateien nicht mehr vom Server.
  61. 61. @webinterface Problem AppCache hat kein Verfallsdatum AppCache wird neu erzeugt wenn sich die Manifest-Datei ändert. Aber erst nach „Aktualisieren- Button“
  62. 62. @webinterface window.addEventListener('load', function(e) { window.applicationCache.addEventListener('updateready', function(e) { if (window.applicationCache.status == window.applicationCache.UPDATEREADY) { if (confirm('A new version of this site is available. Load it?')) { window.location.reload(); } } else { // to do Stuff } }, false); }, false); Update mit JavaScript prüfen
  63. 63. @webinterface Problem Im Manifest werden zwei Dateien geladen: index.html und style.css Was ist mir JavaScript
  64. 64. @webinterface Lösung Einstellungen im Manifest damit der Browser auch JavaScript kennt.
  65. 65. @webinterface Neues Problem Externe Scripte
  66. 66. @webinterface Lösung CACHE: 
 Ressourcen die der Browser in den AppCache laden soll. NETWORK: 
 Ressourcen die online abgerufen werden sollen. FALLBACK: 
 z.B. für dynamische Scripte
  67. 67. Resumé @webinterface
  68. 68. @webinterface „Don’t listen to
 naysayer“
  69. 69. @webinterface Content First Mobile First Offline First
  70. 70. Vielen Dank und Merci email: peter.rozek@ecx.io Peter Rozek@webinterface Speaker Deck: https://speakerdeck.com/peterrozek Slideshare: http://de.slideshare.net/peterrozek
  71. 71. @webinterface …für meine Ellen
  72. 72. @webinterface Fragen?
  73. 73. Peter Rozek@webinterface Online / Offline Peter Rozek, 09.06.2015 Berlin

×