Post on 08-Aug-2015
transcript
Peter Rozek@webinterface
ONLINE OFFLINEWebinale 2015, 07. - 11. Juni 2015
PETER ROZEK
Arbeite bei ecx.io (Digital Agentur)
Themengebiete: UX
Usability Accessibility
Frontend
Peter Rozek@webinterface
@webinterface „Ajax-vergleich“ von I, DanielSHaischt: wikimedia.org
AJAX Revolution
Bildnachweis: Instragram gingergibson@webinterface
Heute sind wir immer Online!
Sind wir immer Online?
@webinterface
No connection available
„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
Desktop Performance„Wahnsinnige“ Geschwindigkeit
@webinterface Bildnachweis: starwars.gamona.de
@webinterface
Mobile Performance
Langsame Geschwindigkeit
@webinterface Bildnachweis: quazoo.com
Wir hätten gerne eine Zeitgemäße Website.
@webinterface
…so was zum Beispiel
@webinterface
…und Responsive
Es werden viel zu große und langsame Websites entwickelt.
@webinterface http://moto.oakley.com/
@webinterface
Nach der Optimierung14.2MB und 291 request
@webinterface
Applikationen sollten schnell und Performant sein.
Bildnachweis: www.srf.ch
@webinterface
Warten ist kognitiver Stress
@webinterface
Keine Verzögerung
spürbar
> 100ms > 1s > 10s
Aufmerksamkeit schwindet
Arbeitsfluss wird nicht
gestört
Nielsens Heuristik Wahrnehmung von Antwortzeiten
@webinterface
Schlimmer als Warten ist Ungewissheit.
PerfomanceOptimierung
@webinterface
@webinterface
Conditional Loading
@webinterface
Problem: Alle Inhalte werden geladen
@webinterface
Lösung:Conditional Loading
Desktop Inhalte laden
Mobile Inhalte laden
@webinterface
if (window.matchMedia("(min-width:768px)").matches) {
// der Viewport ist mindestens 768px breit
} else {
// der Viewport ist kleiner als 768px
}}
matchMedia()
matchMedia Polyfill
@webinterface
Modernizr.load({
test: Modernizr.localstorage,
yep : 'storage.js',
nope: 'storage-polyfill.js'
});
Eleganter mit Modernizr
@webinterface
Ajax Include Pattern SkriptZusä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
@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 solldata-media = Direktes laden ab einem bestimmten Media Query
@webinterface
The Boston Globe
@webinterface
The Boston Globe
@webinterface
Voraussetzung: Content First Mobile First
@webinterface
Lazy Loading
@webinterface
Lazy Loading mit jQuery Unveil
Unveil.js = 1kb groß
@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
@webinterface
<img src="example.jpg" lazyload="1" />
Lazy Loading als W3C Standard
@webinterface
Picture TagResponsive Images
@webinterface
img {
max-width: 100%;
height: auto;
}
Bisherige Technik
@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
@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>
@webinterface
Can i use?
@webinterface
Alles Techniken um die Performance zu verbessern!
No ConnectionDaten Offline speichern
@webinterface
@webinterface
Cookies ?
@webinterface
Eingeschränkte Nutzung der Daten
Anzahl und Größe limitiert
Problem: Daten für eine Anwendung dauerhaft offline speichern.
@webinterface
LocalStorage
@webinterface
Die User-Daten werden nicht mehr wie Cookies mit jedem HTTP-Request auf den Server übertragen.
@webinterface
HTML5 und LocalStorage
localStorage.setItem("key", „wert");
localStorage.getItem("key");
@webinterface
Formularverarbeitung
<form onsubmit="daten_speichern(); return false">
<input type="text" name="vorname" />
</form>
@webinterface
Daten speichern
function daten_speichern() {
localStorage.setItem("vorname", document.forms[0]["name"].value);
}
@webinterface
Daten ausgeben
function daten_ausgeben() {
document.getElementById("vorname").firstChild.nodeValue = localStorage.getItem("vorname");
}
@webinterface
LocalStorage für Offlinebetrieb
navigator.onLine
@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
@webinterface
<div id="status"></div>
<div id="log"></div>
<p>This is a test</p>
HTML
@webinterface
Ergebnis
@webinterface
AppCache
@webinterface
HTML5 AppCache für WebApps und Websites.
@webinterface
Vorteile:
Offline surfen
Ressourcen sind lokal verfügbar und laden schnelle
Verminderte Serverlast
@webinterface
Wie funktioniert der HTML5 AppCache?
Browser sucht in der Website nach einem Verweis auf ein entsprechendes AppCache Manifest.
@webinterface
<html manifest="mein_offline_manifest.appcache">
...
</html>
@webinterface
Hat der Browser alle Dateien im AppCache gespeichert, holt er die Dateien nicht mehr vom Server.
@webinterface
Problem
AppCache hat kein Verfallsdatum
AppCache wird neu erzeugt wenn sich die Manifest-Datei ändert.
Aber erst nach „Aktualisieren-Button“
@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
@webinterface
Problem
Im Manifest werden zwei Dateien geladen: index.html und style.css
Was ist mir JavaScript
@webinterface
Lösung
Einstellungen im Manifest damit der Browser auch JavaScript kennt.
@webinterface
Neues Problem
Externe Scripte
@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
Resumé
@webinterface
@webinterface
„Don’t listen to naysayer“
@webinterface
Content First Mobile First Offline First
Vielen Dank und Merciemail: peter.rozek@ecx.io
Peter Rozek@webinterface
Speaker Deck: https://speakerdeck.com/peterrozek
Slideshare: http://de.slideshare.net/peterrozek
@webinterface
…für meine Ellen
@webinterface
Fragen?
Peter Rozek@webinterface
Online / Offline
Peter Rozek, 09.06.2015 Berlin