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

1. Peter Rozek@webinterface
ONLINE
OFFLINEWebinale 2015, 07. - 11. Juni 2015

2. PETER ROZEK
Arbeite bei ecx.io
(Digital Agentur)
Themengebiete:
UX
Usability
Accessibility
Frontend
Peter Rozek@webinterface

3. @webinterface „Ajax-vergleich“ von I, DanielSHaischt: wikimedia.org
AJAX Revolution

4. Bildnachweis: Instragram gingergibson@webinterface
Heute sind wir immer
Online!

5. Sind wir immer
Online?
@webinterface
No
connection
available

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. Desktop Performance
„Wahnsinnige“ Geschwindigkeit
@webinterface Bildnachweis: starwars.gamona.de

8. @webinterface
Mobile Performance
Langsame Geschwindigkeit

9. @webinterface Bildnachweis: quazoo.com
Wir hätten gerne eine
Zeitgemäße Website.

10. @webinterface
…so was zum Beispiel

11. @webinterface
…und Responsive

12. Es werden viel zu große und
langsame Websites entwickelt.
@webinterface http://moto.oakley.com/

13. 85.4MB und 471 HTTP requests
@webinterface http://moto.oakley.com/

14. @webinterface
Nach der Optimierung
14.2MB und 291 request

15. @webinterface
Applikationen sollten
schnell und Performant sein.
Bildnachweis: www.srf.ch

16. @webinterface
Warten ist kognitiver
Stress

17. @webinterface
Keine
Verzögerung
spürbar
> 100ms > 1s > 10s
Aufmerksamkeit
schwindet
Arbeitsfluss
wird nicht
gestört
Nielsens Heuristik
Wahrnehmung von Antwortzeiten

18. @webinterface
Schlimmer als Warten ist
Ungewissheit.

19. Perfomance
Optimierung
@webinterface

20. @webinterface
Conditional Loading

21. @webinterface
Problem:
Alle Inhalte werden geladen

22. @webinterface
Lösung:
Conditional Loading
Desktop
Inhalte laden
Mobile
Inhalte laden

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. @webinterface
Modernizr.load({
test: Modernizr.localstorage,
yep : 'storage.js',
nope: 'storage-polyfill.js'
});
Eleganter mit Modernizr

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. @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. @webinterface
The Boston Globe

28. @webinterface
The Boston Globe

29. @webinterface
Voraussetzung:
Content First
Mobile First

30. @webinterface
Lazy Loading

31. @webinterface
Lazy Loading mit jQuery Unveil
Unveil.js = 1kb groß

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. @webinterface
<img src="example.jpg" lazyload="1" />
Lazy Loading als W3C Standard

34. @webinterface
Picture Tag
Responsive Images

35. @webinterface
img {
max-width: 100%;
height: auto;
}
Bisherige Technik

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. @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. @webinterface
Can i use?

39. Polyfill für Picture Tag:
Picturefill
@webinterface

40. @webinterface
Alles Techniken um die
Performance zu
verbessern!

41. No Connection
Daten Offline
speichern
@webinterface

42. @webinterface
Cookies ?

43. @webinterface
Eingeschränkte Nutzung der Daten
Anzahl und Größe limitiert
Problem:
Daten für eine Anwendung
dauerhaft offline speichern.

44. @webinterface
LocalStorage

45. @webinterface
Die User-Daten werden nicht mehr
wie Cookies mit jedem HTTP-
Request auf den Server übertragen.

46. @webinterface
HTML5 und LocalStorage
localStorage.setItem("key", „wert");
localStorage.getItem("key");

47. @webinterface
Formularverarbeitung
<form onsubmit="daten_speichern(); return false">
<input type="text" name="vorname" />
</form>

48. @webinterface
Daten speichern
function daten_speichern() {
localStorage.setItem("vorname", document.forms[0]["name"].value);
}

49. @webinterface
Daten ausgeben
function daten_ausgeben() {
document.getElementById("vorname").firstChild.nodeValue =
localStorage.getItem("vorname");
}

50. @webinterface
LocalStorage für Offlinebetrieb
navigator.onLine

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. @webinterface
<div id="status"></div>
<div id="log"></div>
<p>This is a test</p>
HTML

53. @webinterface
Ergebnis

54. @webinterface
AppCache

55. @webinterface
HTML5 AppCache für WebApps und
Websites.

56. @webinterface
Vorteile:
Offline surfen
Ressourcen sind lokal verfügbar
und laden schnelle
Verminderte Serverlast

57. @webinterface http://alistapart.com

58. @webinterface
Wie funktioniert der HTML5
AppCache?
Browser sucht in der Website nach
einem Verweis auf ein
entsprechendes AppCache
Manifest.

59. @webinterface
<html manifest="mein_offline_manifest.appcache">
...
</html>

60. @webinterface
Hat der Browser alle Dateien im
AppCache gespeichert, holt er die
Dateien nicht mehr vom Server.

61. @webinterface
Problem
AppCache hat kein Verfallsdatum
AppCache wird neu erzeugt wenn
sich die Manifest-Datei ändert.
Aber erst nach „Aktualisieren-
Button“

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. @webinterface
Problem
Im Manifest werden zwei Dateien
geladen: index.html und style.css
Was ist mir JavaScript

64. @webinterface
Lösung
Einstellungen im Manifest damit
der Browser auch JavaScript kennt.

65. @webinterface
Neues Problem
Externe Scripte

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. Resumé
@webinterface

68. @webinterface
„Don’t
listen to
naysayer“

69. @webinterface
Content First
Mobile First
Offline First

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. @webinterface
…für meine Ellen

72. @webinterface
Fragen?

73. Peter Rozek@webinterface
Online / Offline
Peter Rozek, 09.06.2015 Berlin