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
   

   View Slide

2. Responsive
   Webdesign ist
   nicht einfach!
   

   View Slide

3. http://bradfrostweb.com/blog/mobile/beyond-media-queries-anatomy-of-an-adaptive-web-design/
   

   View Slide

4. RWD ist nicht primär eine
   technische Lösung
   

   View Slide

5. Wir müssen umdenken!
   

   View Slide

6. Leichter gesagt, als getan!
   

   View Slide

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
   

   View Slide

8. Keine „Optimierung“!
   https://twitter.com/brad_frost/status/392429547188408321
   

   View Slide

9. Wir denken zu sehr an
   Desktop vs. Smartphone
   

   View Slide

10. http://galaxynote3undgear.samsung.de/
    

    View Slide

11. https://www.flickr.com/photos/dantaylor/7668446592
    Screen!
    

    View Slide

12. View Slide

13. Es gibt zwei Problemfelder für gute,
    leicht pflegbare responsive
    Webseiten:
    1. Technische Probleme
    2. Menschen mit dem falschen
    Denkansatz
    

    View Slide

14. https://www.flickr.com/photos/mikecogh/5932533556
    Webseiten werden zu fett!
    Performance
    

    View Slide

15. http://grolsch.com/en
    8,5 MB
    

    View Slide

16. http://grolsch.com/en
    Nach ein wenig Scrollen: 18,4 MB
    

    View Slide

17. 5,9 MB - anfangs 85 MB
    http://moto.oakley.com/
    

    View Slide

18. http://www.guypo.com/uncategorized/real-world-rwd-performance-take-2/
    476 Sites von mediaqueri.es getestet
    

    View Slide

19. Nicht jedes Device
    hat eine Maus für
    Interaktionen!
    

    View Slide

20. Tooltip
    Pulldown-Navigation
    Zusatztext über einem Bild
    Aufklappende Information
    

    View Slide

21. http://webkrauts.de/artikel/2013/drei-unter-einem-dach
    

    View Slide

22. http://patrickhlauke.github.io/getting-touchy-presentation/#Cover
    

    View Slide

23. https://www.flickr.com/photos/intelfreepress/6983556217
    Touch ≠ NUR Touch
    

    View Slide

24. Touch ≠ Mobile
    https://www.flickr.com/photos/intelfreepress/8573108622
    

    View Slide

25. Bilder und Videos
    

    View Slide

26. Ausgangsbild
    nur verkleinert
    verkleinert
    und Ausschnitt
    http://blog.cloudfour.com/a-framework-for-discussing-responsive-images-solutions/
    

    View Slide

27. Redaktionelle Arbeit +
    Unterstützung durch CMS
    

    View Slide

28. Simple, alte Techniken
    werden heute noch
    immer nicht beherrscht!
    

    View Slide

29. Süddeutsche, 01.06.2014
    

    View Slide

30. http://responsiveimages.org/
    

    View Slide

31. Es tut sich was
    http://www.flickr.com/photos/johnlamb/2576062549/
    

    View Slide

32. http://responsiveimages.org/
    Ein Ansatz wird
    in Chrome implementiert
    

    View Slide

33. Super, dann muss nur noch
    der IE bis inklusive
    Version 11 aussterben!
    

    View Slide

34. Polyfills und JS-Lösungen
    http://scottjehl.github.io/picturefill/ http://dev.twoblok.es/data-img/
    

    View Slide

35. Serverseitige Lösung
    http://adaptive-images.com/
    

    View Slide

36. SVG, IconFonts und
    „Cutting the mustard“
    

    View Slide

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
    

    View Slide

38. Cutting the mustard
    

    View Slide

39. https://speakerdeck.com/paulrobertlloyd/the-edge-of-the-web-redux
    

    View Slide

40. http://www.entypo.com/
    

    View Slide

41. http://icomoon.io/
    

    View Slide

42. Responsive Werbeformate?
    

    View Slide

43. View Slide

44. 1019px Breite
    

    View Slide

45. View Slide

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
    

    View Slide

47. Unser Workflow ist falsch!
    

    View Slide

48. Kunde
    Beratung
    Konzept
    Design
    Frontend
    Backend
    

    View Slide

49. http://www.quadriform.biz/wp-content/uploads/2010/09/designer_developer.jpg
    Ziel: Ein Team!
    

    View Slide

50. Konzept
    Design
    Frontend
    Klassischer Workflow
    

    View Slide

51. Konzept
    Design
    Frontend
    Besserer Workflow
    

    View Slide

52. Konzept
    Design
    Frontend
    Noch besserer Workflow
    

    View Slide

53. http://de.slideshare.net/pkattera/design-process-for-responsive-web-design
    

    View Slide

54. http://www.flickr.com/photos/artrock2006/4177475479/
    Alle Beteiligten sollten frühzeitig und
    offen miteinander kommunizieren.
    http://www.flickr.com/photos/artrock2006/4177475479/
    

    View Slide

55. Es gibt zwei Problemfelder für gute,
    leicht pflegbare responsive
    Webseiten:
    1. Technische Probleme
    2. Menschen mit dem falschen
    Denkansatz
    

    View Slide

56. Jens Grochtdreis
    http://grochtdreis.de
    http://twitter.com/Flocke
    https://speakerdeck.com/flocke
    http://webkrauts.de
    

    View Slide