Slide 1
Slide 1 text
Die Zukunft
muss noch warten
Jens Grochtdreis
Slide 2
Slide 2 text
Responsive
Webdesign ist
nicht einfach!
Slide 3
Slide 3 text
http://bradfrostweb.com/blog/mobile/beyond-media-queries-anatomy-of-an-adaptive-web-design/
Slide 4
Slide 4 text
RWD ist nicht primär eine
technische Lösung
Slide 5
Slide 5 text
Wir müssen umdenken!
Slide 6
Slide 6 text
Leichter gesagt, als getan!
Slide 7
Slide 7 text
Es geht um Browser
nicht um Devices!
http://bradfrostweb.com/blog/web/mobile-first-responsive-web-design/
https://raw.github.com/paulirish/browser-logos/master/all-desktop.png
Slide 8
Slide 8 text
Keine „Optimierung“!
https://twitter.com/brad_frost/status/392429547188408321
Slide 9
Slide 9 text
Wir denken zu sehr an
Desktop vs. Smartphone
Slide 10
Slide 10 text
http://galaxynote3undgear.samsung.de/
Slide 11
Slide 11 text
https://www.flickr.com/photos/dantaylor/7668446592
Screen!
Slide 12
Slide 12 text
No content
Slide 13
Slide 13 text
Es gibt zwei Problemfelder für gute,
leicht pflegbare responsive
Webseiten:
1. Technische Probleme
2. Menschen mit dem falschen
Denkansatz
Slide 14
Slide 14 text
https://www.flickr.com/photos/mikecogh/5932533556
Webseiten werden zu fett!
Performance
Slide 15
Slide 15 text
http://grolsch.com/en
8,5 MB
Slide 16
Slide 16 text
http://grolsch.com/en
Nach ein wenig Scrollen: 18,4 MB
Slide 17
Slide 17 text
5,9 MB - anfangs 85 MB
http://moto.oakley.com/
Slide 18
Slide 18 text
http://www.guypo.com/uncategorized/real-world-rwd-performance-take-2/
476 Sites von mediaqueri.es getestet
Slide 19
Slide 19 text
Nicht jedes Device
hat eine Maus für
Interaktionen!
Slide 20
Slide 20 text
Tooltip
Pulldown-Navigation
Zusatztext über einem Bild
Aufklappende Information
Slide 21
Slide 21 text
http://webkrauts.de/artikel/2013/drei-unter-einem-dach
Slide 22
Slide 22 text
http://patrickhlauke.github.io/getting-touchy-presentation/#Cover
Slide 23
Slide 23 text
https://www.flickr.com/photos/intelfreepress/6983556217
Touch ≠ NUR Touch
Slide 24
Slide 24 text
Touch ≠ Mobile
https://www.flickr.com/photos/intelfreepress/8573108622
Slide 25
Slide 25 text
Bilder und Videos
Slide 26
Slide 26 text
Ausgangsbild
nur verkleinert
verkleinert
und Ausschnitt
http://blog.cloudfour.com/a-framework-for-discussing-responsive-images-solutions/
Slide 27
Slide 27 text
Redaktionelle Arbeit +
Unterstützung durch CMS
Slide 28
Slide 28 text
Simple, alte Techniken
werden heute noch
immer nicht beherrscht!
Slide 29
Slide 29 text
Süddeutsche, 01.06.2014
Slide 30
Slide 30 text
http://responsiveimages.org/
Slide 31
Slide 31 text
Es tut sich was
http://www.flickr.com/photos/johnlamb/2576062549/
Slide 32
Slide 32 text
http://responsiveimages.org/
Ein Ansatz wird
in Chrome implementiert
Slide 33
Slide 33 text
Super, dann muss nur noch
der IE bis inklusive
Version 11 aussterben!
Slide 34
Slide 34 text
Polyfills und JS-Lösungen
http://scottjehl.github.io/picturefill/ http://dev.twoblok.es/data-img/
Slide 35
Slide 35 text
Serverseitige Lösung
http://adaptive-images.com/
Slide 36
Slide 36 text
SVG, IconFonts und
„Cutting the mustard“
Slide 37
Slide 37 text
‣ Eine Basis-Seite definieren
‣ In Abhängigkeit von Featuretests neue Inhalte
und externe Dateien mit JS nachladen
‣ Hört sich nach AJAX an
http://responsivenews.co.uk/post/18948466399/cutting-the-mustard
Cutting the Mustard
Slide 38
Slide 38 text
Cutting the mustard
Slide 39
Slide 39 text
https://speakerdeck.com/paulrobertlloyd/the-edge-of-the-web-redux
Slide 40
Slide 40 text
http://www.entypo.com/
Slide 41
Slide 41 text
http://icomoon.io/
Slide 42
Slide 42 text
Responsive Werbeformate?
Slide 43
Slide 43 text
No content
Slide 44
Slide 44 text
1019px Breite
Slide 45
Slide 45 text
No content
Slide 46
Slide 46 text
Selbst wenn man soweit kommt, dass der Use-
Case verstanden wird, heisst es jedoch immer
unisono: "Das wollen die Kunden nicht."
Wobei Kunden natürlich jene sind die Werben,
also ein unglaublich lahmarschiges Konglomerat
aus provisionsgeilen Verkäufern,
technikagnostischen Werbeagenturen und
ahnungslosen Werbekunden.
Zitat eines genervten
Entwicklers
Slide 47
Slide 47 text
Unser Workflow ist falsch!
Slide 48
Slide 48 text
Kunde
Beratung
Konzept
Design
Frontend
Backend
Slide 49
Slide 49 text
http://www.quadriform.biz/wp-content/uploads/2010/09/designer_developer.jpg
Ziel: Ein Team!
Slide 50
Slide 50 text
Konzept
Design
Frontend
Klassischer Workflow
Slide 51
Slide 51 text
Konzept
Design
Frontend
Besserer Workflow
Slide 52
Slide 52 text
Konzept
Design
Frontend
Noch besserer Workflow
Slide 53
Slide 53 text
http://de.slideshare.net/pkattera/design-process-for-responsive-web-design
Slide 54
Slide 54 text
http://www.flickr.com/photos/artrock2006/4177475479/
Alle Beteiligten sollten frühzeitig und
offen miteinander kommunizieren.
http://www.flickr.com/photos/artrock2006/4177475479/
Slide 55
Slide 55 text
Es gibt zwei Problemfelder für gute,
leicht pflegbare responsive
Webseiten:
1. Technische Probleme
2. Menschen mit dem falschen
Denkansatz
Slide 56
Slide 56 text
Jens Grochtdreis
http://grochtdreis.de
http://twitter.com/Flocke
https://speakerdeck.com/flocke
http://webkrauts.de