Die Zukunft muss noch warten

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.

521db10df5241d9b2b70a555cc54e9e8?s=128

Jens Grochtdreis

June 02, 2014
Tweet

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!

  12. None
  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?

  43. None
  44. 1019px Breite

  45. None
  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