Die Zukunft muss noch warten

Responsive Webdesign ist nicht einfach und auch kein Selbstläufer. Es gibt Hindernisse: technische Probleme und Menschen, die die Herausforderung noch nicht begriffen haben. Dies ist ein Vortrag von der Webinale 2014 in Berlin.

Transcript

1. Die Zukunft muss noch warten Jens Grochtdreis
2. Responsive Webdesign ist nicht einfach!
3. http://bradfrostweb.com/blog/mobile/beyond-media-queries-anatomy-of-an-adaptive-web-design/
4. RWD ist nicht primär eine technische Lösung
5. Wir müssen umdenken!
6. Leichter gesagt, als getan!
7. 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
8. Keine „Optimierung“! https://twitter.com/brad_frost/status/392429547188408321
9. Wir denken zu sehr an Desktop vs. Smartphone
10. http://galaxynote3undgear.samsung.de/
11. https://www.flickr.com/photos/dantaylor/7668446592 Screen!
13. Es gibt zwei Problemfelder für gute, leicht pflegbare responsive Webseiten: 1. Technische Probleme 2. Menschen mit dem falschen Denkansatz
14. https://www.flickr.com/photos/mikecogh/5932533556 Webseiten werden zu fett! Performance
15. http://grolsch.com/en 8,5 MB
16. http://grolsch.com/en Nach ein wenig Scrollen: 18,4 MB
17. 5,9 MB - anfangs 85 MB http://moto.oakley.com/
18. http://www.guypo.com/uncategorized/real-world-rwd-performance-take-2/ 476 Sites von mediaqueri.es getestet
19. Nicht jedes Device hat eine Maus für Interaktionen!
20. Tooltip Pulldown-Navigation Zusatztext über einem Bild Aufklappende Information
21. http://webkrauts.de/artikel/2013/drei-unter-einem-dach
22. http://patrickhlauke.github.io/getting-touchy-presentation/#Cover
23. https://www.flickr.com/photos/intelfreepress/6983556217 Touch ≠ NUR Touch
24. Touch ≠ Mobile https://www.flickr.com/photos/intelfreepress/8573108622
25. Bilder und Videos
26. Ausgangsbild nur verkleinert verkleinert und Ausschnitt http://blog.cloudfour.com/a-framework-for-discussing-responsive-images-solutions/
27. Redaktionelle Arbeit + Unterstützung durch CMS
28. Simple, alte Techniken werden heute noch immer nicht beherrscht!
29. Süddeutsche, 01.06.2014
30. http://responsiveimages.org/
31. Es tut sich was http://www.flickr.com/photos/johnlamb/2576062549/
32. http://responsiveimages.org/ Ein Ansatz wird in Chrome implementiert
33. Super, dann muss nur noch der IE bis inklusive Version 11 aussterben!
34. Polyfills und JS-Lösungen http://scottjehl.github.io/picturefill/ http://dev.twoblok.es/data-img/
35. Serverseitige Lösung http://adaptive-images.com/
36. SVG, IconFonts und „Cutting the mustard“
37. ‣ 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
38. Cutting the mustard
39. https://speakerdeck.com/paulrobertlloyd/the-edge-of-the-web-redux
40. http://www.entypo.com/
41. http://icomoon.io/
42. Responsive Werbeformate?
44. 1019px Breite
46. 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
47. Unser Workflow ist falsch!
48. Kunde Beratung Konzept Design Frontend Backend
49. http://www.quadriform.biz/wp-content/uploads/2010/09/designer_developer.jpg Ziel: Ein Team!
50. Konzept Design Frontend Klassischer Workflow
51. Konzept Design Frontend Besserer Workflow
52. Konzept Design Frontend Noch besserer Workflow
53. http://de.slideshare.net/pkattera/design-process-for-responsive-web-design
54. http://www.flickr.com/photos/artrock2006/4177475479/ Alle Beteiligten sollten frühzeitig und offen miteinander kommunizieren. http://www.flickr.com/photos/artrock2006/4177475479/
55. Es gibt zwei Problemfelder für gute, leicht pflegbare responsive Webseiten: 1. Technische Probleme 2. Menschen mit dem falschen Denkansatz
56. Jens Grochtdreis http://grochtdreis.de http://twitter.com/Flocke https://speakerdeck.com/flocke http://webkrauts.de