SlideShare ist ein Scribd-Unternehmen logo
1 von 73
Downloaden Sie, um offline zu lesen
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/
85.4MB und 471 HTTP requests
@webinterface http://moto.oakley.com/
@webinterface
Nach der Optimierung

14.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.
Perfomance
Optimierung
@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 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
@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
@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 Tag

Responsive 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?
Polyfill für Picture Tag:
Picturefill
@webinterface
@webinterface
Alles Techniken um die
Performance zu
verbessern!
No Connection
Daten 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 http://alistapart.com
@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 Merci
email: 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

Weitere ähnliche Inhalte

Andere mochten auch

Marketing quo vadis – Offline vs. Online Marketing
Marketing quo vadis – Offline vs. Online MarketingMarketing quo vadis – Offline vs. Online Marketing
Marketing quo vadis – Offline vs. Online MarketingMichael A. Grund
 
HTML5 Storage/Cache
HTML5 Storage/CacheHTML5 Storage/Cache
HTML5 Storage/CacheAndy Wang
 
OnConnectionLost: The life of an offline web application - JSUnconf 2015
OnConnectionLost: The life of an offline web application - JSUnconf 2015OnConnectionLost: The life of an offline web application - JSUnconf 2015
OnConnectionLost: The life of an offline web application - JSUnconf 2015Johannes Thönes
 
Incorporating Web Services in Mobile Applications - Web 2.0 San Fran 2009
Incorporating Web Services in Mobile Applications - Web 2.0 San Fran 2009Incorporating Web Services in Mobile Applications - Web 2.0 San Fran 2009
Incorporating Web Services in Mobile Applications - Web 2.0 San Fran 2009Aduci
 
HTML5: friend or foe (to Flash)?
HTML5: friend or foe (to Flash)?HTML5: friend or foe (to Flash)?
HTML5: friend or foe (to Flash)?Remy Sharp
 
Updated: NW.js - Desktop Apps with Javascript
Updated: NW.js - Desktop Apps with JavascriptUpdated: NW.js - Desktop Apps with Javascript
Updated: NW.js - Desktop Apps with JavascriptRalf Schwoebel
 
From JavaEE to Android: Way in one click?
From JavaEE to Android: Way in one click?From JavaEE to Android: Way in one click?
From JavaEE to Android: Way in one click?Sergii Zhuk
 
Offline Strategies for HTML5 Web Applications - oscon13
Offline Strategies for HTML5 Web Applications - oscon13Offline Strategies for HTML5 Web Applications - oscon13
Offline Strategies for HTML5 Web Applications - oscon13Stephan Hochdörfer
 
Anatomy of mobile App development
Anatomy of mobile App developmentAnatomy of mobile App development
Anatomy of mobile App developmentRalf Schwoebel
 
Presentación html5
Presentación html5Presentación html5
Presentación html5aydimdagam
 
Offline strategies for HTML5 web applications - frOSCon8
Offline strategies for HTML5 web applications - frOSCon8Offline strategies for HTML5 web applications - frOSCon8
Offline strategies for HTML5 web applications - frOSCon8Stephan Hochdörfer
 
Anatomy of an HTML 5 mobile web app
Anatomy of an HTML 5 mobile web app Anatomy of an HTML 5 mobile web app
Anatomy of an HTML 5 mobile web app Ivano Malavolta
 

Andere mochten auch (13)

HTML & HTML5
HTML & HTML5HTML & HTML5
HTML & HTML5
 
Marketing quo vadis – Offline vs. Online Marketing
Marketing quo vadis – Offline vs. Online MarketingMarketing quo vadis – Offline vs. Online Marketing
Marketing quo vadis – Offline vs. Online Marketing
 
HTML5 Storage/Cache
HTML5 Storage/CacheHTML5 Storage/Cache
HTML5 Storage/Cache
 
OnConnectionLost: The life of an offline web application - JSUnconf 2015
OnConnectionLost: The life of an offline web application - JSUnconf 2015OnConnectionLost: The life of an offline web application - JSUnconf 2015
OnConnectionLost: The life of an offline web application - JSUnconf 2015
 
Incorporating Web Services in Mobile Applications - Web 2.0 San Fran 2009
Incorporating Web Services in Mobile Applications - Web 2.0 San Fran 2009Incorporating Web Services in Mobile Applications - Web 2.0 San Fran 2009
Incorporating Web Services in Mobile Applications - Web 2.0 San Fran 2009
 
HTML5: friend or foe (to Flash)?
HTML5: friend or foe (to Flash)?HTML5: friend or foe (to Flash)?
HTML5: friend or foe (to Flash)?
 
Updated: NW.js - Desktop Apps with Javascript
Updated: NW.js - Desktop Apps with JavascriptUpdated: NW.js - Desktop Apps with Javascript
Updated: NW.js - Desktop Apps with Javascript
 
From JavaEE to Android: Way in one click?
From JavaEE to Android: Way in one click?From JavaEE to Android: Way in one click?
From JavaEE to Android: Way in one click?
 
Offline Strategies for HTML5 Web Applications - oscon13
Offline Strategies for HTML5 Web Applications - oscon13Offline Strategies for HTML5 Web Applications - oscon13
Offline Strategies for HTML5 Web Applications - oscon13
 
Anatomy of mobile App development
Anatomy of mobile App developmentAnatomy of mobile App development
Anatomy of mobile App development
 
Presentación html5
Presentación html5Presentación html5
Presentación html5
 
Offline strategies for HTML5 web applications - frOSCon8
Offline strategies for HTML5 web applications - frOSCon8Offline strategies for HTML5 web applications - frOSCon8
Offline strategies for HTML5 web applications - frOSCon8
 
Anatomy of an HTML 5 mobile web app
Anatomy of an HTML 5 mobile web app Anatomy of an HTML 5 mobile web app
Anatomy of an HTML 5 mobile web app
 

Ähnlich wie Online / Offline

Device Agnostic: Geräteunabhängiges Design als UX Grundlage
Device Agnostic: Geräteunabhängiges Design als UX GrundlageDevice Agnostic: Geräteunabhängiges Design als UX Grundlage
Device Agnostic: Geräteunabhängiges Design als UX GrundlagePeter Rozek
 
Performance-Optimierung für WordPress-Websites
Performance-Optimierung für WordPress-WebsitesPerformance-Optimierung für WordPress-Websites
Performance-Optimierung für WordPress-WebsitesAndré Goldmann
 
Aber schnell! Top HTML5 Performance Tipps für Hybrid- und Web-Apps
Aber schnell! Top HTML5 Performance Tipps für Hybrid- und Web-AppsAber schnell! Top HTML5 Performance Tipps für Hybrid- und Web-Apps
Aber schnell! Top HTML5 Performance Tipps für Hybrid- und Web-AppsGregor Biswanger
 
Responsive Webdesign - Unter der Haube
Responsive Webdesign - Unter der HaubeResponsive Webdesign - Unter der Haube
Responsive Webdesign - Unter der Haubefalconwhite
 
Mobile Webentwicklung mit HTML5
Mobile Webentwicklung mit HTML5Mobile Webentwicklung mit HTML5
Mobile Webentwicklung mit HTML5kkramhoeft
 
Sencha Touch & PhoneGap
Sencha Touch & PhoneGapSencha Touch & PhoneGap
Sencha Touch & PhoneGapStefan Kolb
 
Responsive Workflow, Break the rules or die
Responsive Workflow, Break the rules or dieResponsive Workflow, Break the rules or die
Responsive Workflow, Break the rules or diePeter Rozek
 
Cross-Apps-Entwicklung für iPhone, Android und Co.
Cross-Apps-Entwicklung für iPhone, Android und Co.Cross-Apps-Entwicklung für iPhone, Android und Co.
Cross-Apps-Entwicklung für iPhone, Android und Co.Peter Hecker
 
Vortrag HTML5, CSS3, PhoneGap
Vortrag  HTML5, CSS3, PhoneGapVortrag  HTML5, CSS3, PhoneGap
Vortrag HTML5, CSS3, PhoneGaprene_peinl
 
Echtzeitvisualisierung von Twitter und Co.
Echtzeitvisualisierung von Twitter und Co.Echtzeitvisualisierung von Twitter und Co.
Echtzeitvisualisierung von Twitter und Co.Kai Donato
 
Echtzeitvisualisierung von Twitter & Co
Echtzeitvisualisierung von Twitter & CoEchtzeitvisualisierung von Twitter & Co
Echtzeitvisualisierung von Twitter & CoOliver Lemm
 
Sencha Touch und PhoneGap
Sencha Touch und PhoneGapSencha Touch und PhoneGap
Sencha Touch und PhoneGapIndiginox
 
Webmontag karlsruhe – responsive images, maddesigns (sven wolfermann)
Webmontag karlsruhe – responsive images, maddesigns (sven wolfermann)Webmontag karlsruhe – responsive images, maddesigns (sven wolfermann)
Webmontag karlsruhe – responsive images, maddesigns (sven wolfermann)Sven Wolfermann
 
Was nicht passt wird responsive gemacht
Was nicht passt wird responsive gemachtWas nicht passt wird responsive gemacht
Was nicht passt wird responsive gemachtChristoph Reinartz
 
HTML5 Offline - Fallstricke für mobile Webseiten und WebApps
HTML5 Offline - Fallstricke für mobile Webseiten und WebAppsHTML5 Offline - Fallstricke für mobile Webseiten und WebApps
HTML5 Offline - Fallstricke für mobile Webseiten und WebAppsUlrich Schmidt
 
SharePoint Responsive - Mobile Webseiten mit SharePoint 2013 und SharePoint O...
SharePoint Responsive - Mobile Webseiten mit SharePoint 2013 und SharePoint O...SharePoint Responsive - Mobile Webseiten mit SharePoint 2013 und SharePoint O...
SharePoint Responsive - Mobile Webseiten mit SharePoint 2013 und SharePoint O...fabianmoritz
 
2008 - Basta!: Massendaten auf dem Client
2008 - Basta!: Massendaten auf dem Client2008 - Basta!: Massendaten auf dem Client
2008 - Basta!: Massendaten auf dem ClientDaniel Fisher
 
Responsive Mit Irhem Webseiten (German Edition)
Responsive Mit Irhem Webseiten (German Edition)Responsive Mit Irhem Webseiten (German Edition)
Responsive Mit Irhem Webseiten (German Edition)Koombea
 

Ähnlich wie Online / Offline (20)

Device Agnostic: Geräteunabhängiges Design als UX Grundlage
Device Agnostic: Geräteunabhängiges Design als UX GrundlageDevice Agnostic: Geräteunabhängiges Design als UX Grundlage
Device Agnostic: Geräteunabhängiges Design als UX Grundlage
 
Performance-Optimierung für WordPress-Websites
Performance-Optimierung für WordPress-WebsitesPerformance-Optimierung für WordPress-Websites
Performance-Optimierung für WordPress-Websites
 
Aber schnell! Top HTML5 Performance Tipps für Hybrid- und Web-Apps
Aber schnell! Top HTML5 Performance Tipps für Hybrid- und Web-AppsAber schnell! Top HTML5 Performance Tipps für Hybrid- und Web-Apps
Aber schnell! Top HTML5 Performance Tipps für Hybrid- und Web-Apps
 
Responsive Webdesign - Unter der Haube
Responsive Webdesign - Unter der HaubeResponsive Webdesign - Unter der Haube
Responsive Webdesign - Unter der Haube
 
Mobile Webentwicklung mit HTML5
Mobile Webentwicklung mit HTML5Mobile Webentwicklung mit HTML5
Mobile Webentwicklung mit HTML5
 
Sencha Touch & PhoneGap
Sencha Touch & PhoneGapSencha Touch & PhoneGap
Sencha Touch & PhoneGap
 
Responsive Workflow, Break the rules or die
Responsive Workflow, Break the rules or dieResponsive Workflow, Break the rules or die
Responsive Workflow, Break the rules or die
 
Cross-Apps-Entwicklung für iPhone, Android und Co.
Cross-Apps-Entwicklung für iPhone, Android und Co.Cross-Apps-Entwicklung für iPhone, Android und Co.
Cross-Apps-Entwicklung für iPhone, Android und Co.
 
Vortrag HTML5, CSS3, PhoneGap
Vortrag  HTML5, CSS3, PhoneGapVortrag  HTML5, CSS3, PhoneGap
Vortrag HTML5, CSS3, PhoneGap
 
Echtzeitvisualisierung von Twitter und Co.
Echtzeitvisualisierung von Twitter und Co.Echtzeitvisualisierung von Twitter und Co.
Echtzeitvisualisierung von Twitter und Co.
 
Echtzeitvisualisierung von Twitter & Co
Echtzeitvisualisierung von Twitter & CoEchtzeitvisualisierung von Twitter & Co
Echtzeitvisualisierung von Twitter & Co
 
Sencha Touch und PhoneGap
Sencha Touch und PhoneGapSencha Touch und PhoneGap
Sencha Touch und PhoneGap
 
Webmontag karlsruhe – responsive images, maddesigns (sven wolfermann)
Webmontag karlsruhe – responsive images, maddesigns (sven wolfermann)Webmontag karlsruhe – responsive images, maddesigns (sven wolfermann)
Webmontag karlsruhe – responsive images, maddesigns (sven wolfermann)
 
Was nicht passt wird responsive gemacht
Was nicht passt wird responsive gemachtWas nicht passt wird responsive gemacht
Was nicht passt wird responsive gemacht
 
Hdc2012 cordova-präsi
Hdc2012 cordova-präsiHdc2012 cordova-präsi
Hdc2012 cordova-präsi
 
HTML5 Offline - Fallstricke für mobile Webseiten und WebApps
HTML5 Offline - Fallstricke für mobile Webseiten und WebAppsHTML5 Offline - Fallstricke für mobile Webseiten und WebApps
HTML5 Offline - Fallstricke für mobile Webseiten und WebApps
 
SharePoint Responsive - Mobile Webseiten mit SharePoint 2013 und SharePoint O...
SharePoint Responsive - Mobile Webseiten mit SharePoint 2013 und SharePoint O...SharePoint Responsive - Mobile Webseiten mit SharePoint 2013 und SharePoint O...
SharePoint Responsive - Mobile Webseiten mit SharePoint 2013 und SharePoint O...
 
2008 - Basta!: Massendaten auf dem Client
2008 - Basta!: Massendaten auf dem Client2008 - Basta!: Massendaten auf dem Client
2008 - Basta!: Massendaten auf dem Client
 
Responsive Mit Irhem Webseiten (German Edition)
Responsive Mit Irhem Webseiten (German Edition)Responsive Mit Irhem Webseiten (German Edition)
Responsive Mit Irhem Webseiten (German Edition)
 
Mobile Web Apps
Mobile Web AppsMobile Web Apps
Mobile Web Apps
 

Mehr von Peter Rozek

How to win Stakeholders, Design needs Leadership
How to win Stakeholders, Design needs Leadership How to win Stakeholders, Design needs Leadership
How to win Stakeholders, Design needs Leadership Peter Rozek
 
Persona driven agile development
Persona driven agile developmentPersona driven agile development
Persona driven agile developmentPeter Rozek
 
Cross Device Experience with HTML Prototyping
Cross Device Experience with HTML PrototypingCross Device Experience with HTML Prototyping
Cross Device Experience with HTML PrototypingPeter Rozek
 
Create User Centric UI-Animations
Create User Centric UI-AnimationsCreate User Centric UI-Animations
Create User Centric UI-AnimationsPeter Rozek
 
Responsive Experience und das Continuum of Screens
Responsive Experience und das Continuum of ScreensResponsive Experience und das Continuum of Screens
Responsive Experience und das Continuum of ScreensPeter Rozek
 
Responsive Content Experience
Responsive Content ExperienceResponsive Content Experience
Responsive Content ExperiencePeter Rozek
 
Search Experience Optimization, Nutzerfokus statt Silodenken
Search Experience Optimization, Nutzerfokus statt SilodenkenSearch Experience Optimization, Nutzerfokus statt Silodenken
Search Experience Optimization, Nutzerfokus statt SilodenkenPeter Rozek
 
THE UX OF DATA - VISUALIZATION RESPONSIVE
THE UX OF DATA - VISUALIZATION RESPONSIVETHE UX OF DATA - VISUALIZATION RESPONSIVE
THE UX OF DATA - VISUALIZATION RESPONSIVEPeter Rozek
 
Designing the Priority, Performance ist User Experience
Designing the Priority, Performance ist User ExperienceDesigning the Priority, Performance ist User Experience
Designing the Priority, Performance ist User ExperiencePeter Rozek
 
Hassliebe Onlineformulare, Enhance your Form for better UX
Hassliebe Onlineformulare, Enhance your Form for better UXHassliebe Onlineformulare, Enhance your Form for better UX
Hassliebe Onlineformulare, Enhance your Form for better UXPeter Rozek
 
DESIGN THE PRIORITY, PERFORMANCE 
AND UX
DESIGN THE PRIORITY, PERFORMANCE 
AND UXDESIGN THE PRIORITY, PERFORMANCE 
AND UX
DESIGN THE PRIORITY, PERFORMANCE 
AND UXPeter Rozek
 
The UX of DATA: Responsive Datenvisualisierung mit jQuery
The UX of DATA: Responsive Datenvisualisierung mit jQueryThe UX of DATA: Responsive Datenvisualisierung mit jQuery
The UX of DATA: Responsive Datenvisualisierung mit jQueryPeter Rozek
 
jQuery: Accessibility, Mobile und Responsive
jQuery: Accessibility, Mobile und ResponsivejQuery: Accessibility, Mobile und Responsive
jQuery: Accessibility, Mobile und ResponsivePeter Rozek
 
Performance and UX
Performance and UXPerformance and UX
Performance and UXPeter Rozek
 
Responsive Navigation Patterns, UX and Guidelines
Responsive Navigation Patterns, UX and GuidelinesResponsive Navigation Patterns, UX and Guidelines
Responsive Navigation Patterns, UX and GuidelinesPeter Rozek
 
The Future is now! Flexbox und fancy Stuff im Responsive Webdesign
The Future is now! Flexbox und fancy Stuff im Responsive WebdesignThe Future is now! Flexbox und fancy Stuff im Responsive Webdesign
The Future is now! Flexbox und fancy Stuff im Responsive WebdesignPeter Rozek
 
The Future is now! Flexbox und fancy Stuff im Responsive Webdesign
The Future is now! Flexbox und fancy Stuff im Responsive WebdesignThe Future is now! Flexbox und fancy Stuff im Responsive Webdesign
The Future is now! Flexbox und fancy Stuff im Responsive WebdesignPeter Rozek
 
Responsive Navigation Patterns, UX und Guidelines (Webdeveloper Week 2015)
Responsive Navigation Patterns, UX und Guidelines (Webdeveloper Week 2015)Responsive Navigation Patterns, UX und Guidelines (Webdeveloper Week 2015)
Responsive Navigation Patterns, UX und Guidelines (Webdeveloper Week 2015)Peter Rozek
 
Responsive Navigation Patterns, UX und Guidelines (Webinale 2015)
Responsive Navigation Patterns, UX und Guidelines (Webinale 2015)Responsive Navigation Patterns, UX und Guidelines (Webinale 2015)
Responsive Navigation Patterns, UX und Guidelines (Webinale 2015)Peter Rozek
 
Responsive Navigation Patterns, UX und Guidelines
Responsive Navigation Patterns, UX und GuidelinesResponsive Navigation Patterns, UX und Guidelines
Responsive Navigation Patterns, UX und GuidelinesPeter Rozek
 

Mehr von Peter Rozek (20)

How to win Stakeholders, Design needs Leadership
How to win Stakeholders, Design needs Leadership How to win Stakeholders, Design needs Leadership
How to win Stakeholders, Design needs Leadership
 
Persona driven agile development
Persona driven agile developmentPersona driven agile development
Persona driven agile development
 
Cross Device Experience with HTML Prototyping
Cross Device Experience with HTML PrototypingCross Device Experience with HTML Prototyping
Cross Device Experience with HTML Prototyping
 
Create User Centric UI-Animations
Create User Centric UI-AnimationsCreate User Centric UI-Animations
Create User Centric UI-Animations
 
Responsive Experience und das Continuum of Screens
Responsive Experience und das Continuum of ScreensResponsive Experience und das Continuum of Screens
Responsive Experience und das Continuum of Screens
 
Responsive Content Experience
Responsive Content ExperienceResponsive Content Experience
Responsive Content Experience
 
Search Experience Optimization, Nutzerfokus statt Silodenken
Search Experience Optimization, Nutzerfokus statt SilodenkenSearch Experience Optimization, Nutzerfokus statt Silodenken
Search Experience Optimization, Nutzerfokus statt Silodenken
 
THE UX OF DATA - VISUALIZATION RESPONSIVE
THE UX OF DATA - VISUALIZATION RESPONSIVETHE UX OF DATA - VISUALIZATION RESPONSIVE
THE UX OF DATA - VISUALIZATION RESPONSIVE
 
Designing the Priority, Performance ist User Experience
Designing the Priority, Performance ist User ExperienceDesigning the Priority, Performance ist User Experience
Designing the Priority, Performance ist User Experience
 
Hassliebe Onlineformulare, Enhance your Form for better UX
Hassliebe Onlineformulare, Enhance your Form for better UXHassliebe Onlineformulare, Enhance your Form for better UX
Hassliebe Onlineformulare, Enhance your Form for better UX
 
DESIGN THE PRIORITY, PERFORMANCE 
AND UX
DESIGN THE PRIORITY, PERFORMANCE 
AND UXDESIGN THE PRIORITY, PERFORMANCE 
AND UX
DESIGN THE PRIORITY, PERFORMANCE 
AND UX
 
The UX of DATA: Responsive Datenvisualisierung mit jQuery
The UX of DATA: Responsive Datenvisualisierung mit jQueryThe UX of DATA: Responsive Datenvisualisierung mit jQuery
The UX of DATA: Responsive Datenvisualisierung mit jQuery
 
jQuery: Accessibility, Mobile und Responsive
jQuery: Accessibility, Mobile und ResponsivejQuery: Accessibility, Mobile und Responsive
jQuery: Accessibility, Mobile und Responsive
 
Performance and UX
Performance and UXPerformance and UX
Performance and UX
 
Responsive Navigation Patterns, UX and Guidelines
Responsive Navigation Patterns, UX and GuidelinesResponsive Navigation Patterns, UX and Guidelines
Responsive Navigation Patterns, UX and Guidelines
 
The Future is now! Flexbox und fancy Stuff im Responsive Webdesign
The Future is now! Flexbox und fancy Stuff im Responsive WebdesignThe Future is now! Flexbox und fancy Stuff im Responsive Webdesign
The Future is now! Flexbox und fancy Stuff im Responsive Webdesign
 
The Future is now! Flexbox und fancy Stuff im Responsive Webdesign
The Future is now! Flexbox und fancy Stuff im Responsive WebdesignThe Future is now! Flexbox und fancy Stuff im Responsive Webdesign
The Future is now! Flexbox und fancy Stuff im Responsive Webdesign
 
Responsive Navigation Patterns, UX und Guidelines (Webdeveloper Week 2015)
Responsive Navigation Patterns, UX und Guidelines (Webdeveloper Week 2015)Responsive Navigation Patterns, UX und Guidelines (Webdeveloper Week 2015)
Responsive Navigation Patterns, UX und Guidelines (Webdeveloper Week 2015)
 
Responsive Navigation Patterns, UX und Guidelines (Webinale 2015)
Responsive Navigation Patterns, UX und Guidelines (Webinale 2015)Responsive Navigation Patterns, UX und Guidelines (Webinale 2015)
Responsive Navigation Patterns, UX und Guidelines (Webinale 2015)
 
Responsive Navigation Patterns, UX und Guidelines
Responsive Navigation Patterns, UX und GuidelinesResponsive Navigation Patterns, UX und Guidelines
Responsive Navigation Patterns, UX und Guidelines
 

Online / Offline