Diese Präsentation wurde erfolgreich gemeldet.
Wir verwenden Ihre LinkedIn Profilangaben und Informationen zu Ihren Aktivitäten, um Anzeigen zu personalisieren und Ihnen relevantere Inhalte anzuzeigen. Sie können Ihre Anzeigeneinstellungen jederzeit ändern.

Online / Offline

1.068 Aufrufe

Veröffentlicht am

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

Veröffentlicht in: Internet
  • Als Erste(r) kommentieren

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

×