Neuer Workflow für ein modernes Web

Vortrag auf der Contao Konferenz 2016. Aktualisierte und erweiterte Fassung zu früheren Versuchen, die Notwendigkeit eines besseren, moderneren Workflows, weg vom Wasserfall, zu vermitteln.

Transcript

1. Neuer Workflow
   für ein modernes Web
   Jens Grochtdreis
   

   View Slide

2. Mobile Nutzung ist gängig
   https://twitter.com/winlocal/status/583164144888737792
   

   View Slide

3. https://twitter.com/designtimes/status/539521149395566593
   

   View Slide

4. http://www.telegraph.co.uk/technology/news/8731365/Technology-failing-to-empower-older-generation.html
   

   View Slide

5. Unsere Umgebung hat sich
   stark verändert.
   

   View Slide

6. Also müssen auch 

   WIR uns verändern!
   

   View Slide

7. Die traurige Realität 2016
   https://twitter.com/fabianbeiner/status/732491745900908548
   

   View Slide

8. Traditionelle Arbeitsweise
   ‣ 2 Designs
   ‣ 4 Seitentypen
   ‣ 3 Breakpoints
   24 starre Photoshop-Bilder
   

   View Slide

9. Und warum das alles?
   

   View Slide

10. Falsche Herangehensweise
    https://twitter.com/dudleystorey/status/576213243510661120
    

    View Slide

11. https://twitter.com/pistenprinz/status/732163023083843584
    

    View Slide

12. http://www.webdesignerdepot.com/2013/02/is-photoshop-dead/
    

    View Slide

13. Es heißt http:// nicht psd:// !
    

    View Slide

14. Kunde
    Beratung
    Konzept
    Design
    Frontend
    Backend
    Unser Workflow ist falsch!
    

    View Slide

15. Die Sache ist zu komplex!
    https://twitter.com/brad_frost/status/392429547188408321
    

    View Slide

16. Wir wissen nichts!
    

    View Slide

17. Wir wissen nicht, mit
    welcher Art Computer
    jemand unsere Seite
    besucht.
    

    View Slide

18. Wir wissen nicht, welchen
    Monitor mit welcher
    Auflösung unser Besucher
    hat.
    http://bradfrostweb.com/wp-content/uploads/2012/03/01-650x487.png
    

    View Slide

19. http://www.businessinsider.com/android-fragmentation-2014-8?IR=T
    

    View Slide

20. Wir wissen nicht, in welcher
    Größe das Browserfenster
    unseres Nutzers ist.
    

    View Slide

21. Wir wissen nicht, welche
    Fähigkeiten der Browser des
    Besuchers hat.
    

    View Slide

22. Wir wissen noch viel mehr
    nicht, unterstellen oder
    ignorieren dies aber meist.
    

    View Slide

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

    View Slide

24. Konzept
    Design
    Frontend
    Klassischer Workflow
    

    View Slide

25. Konzept
    Design
    Frontend
    Besserer Workflow
    

    View Slide

26. Konzept
    Design
    Frontend
    Noch besserer Workflow
    

    View Slide

27. Konzept und Design nicht
    losgelöst vom Frontend
    entwickeln!
    

    View Slide

28. Iterativer, agiler Prozess
    http://trentwalton.com/2011/07/14/content-choreography/
    

    View Slide

29. http://de.slideshare.net/pkattera/design-process-for-responsive-web-design
    Iterativer, agiler Prozess
    

    View Slide

30. http://www.quadriform.biz/wp-content/uploads/2010/09/designer_developer.jpg
    Designer und Entwickler müssen
    enger zusammenarbeiten
    

    View Slide

31. Abnahme nicht über ein Bild
    aus Photoshop sondern
    anhand eines Prototypen
    

    View Slide

32. Schnell von der Idee 

    in die Realisierung!
    

    View Slide

33. http://jsfiddle.net/Flocke/azvGv/
    CSS3-fähiger Browser IE8
    Alternativen testen
    

    View Slide

34. https://www.smashingmagazine.com/2016/05/creating-a-living-style-guide-case-study/
    Bestandteile
    

    View Slide

35. Inhaltsinventar
    http://bradfrost.com/blog/post/interface-inventory/
    

    View Slide

36. Performance-Budget
    http://bradfrost.com/blog/post/performance-budget-builder/
    http://codepen.io/bradfrost/full/EPQVBp/
    

    View Slide

37. Klickdummy
    http://demo.patternlab.io/?p=templates-article
    

    View Slide

38. Living Styleguide
    http://styleguide.devbproto.com/styleguide/#4
    

    View Slide

39. https://twitter.com/yogthos/status/724076324634124288
    

    View Slide

40. Wasserfall geht 

    auch heute noch …
    ‣ Mit Abstrichen bei
    ‣ Qualität
    ‣ Effizienz
    https://twitter.com/freiherz/status/269037333012160512/photo/1
    

    View Slide

41. Keine klassischen
    Projekte mehr!
    

    View Slide

42. Es wird ein Prozess verkauft,
    kein Endprodukt!
    

    View Slide

43. Es kann am Anfang nicht
    mehr das Endprodukt
    abgenommen werden.
    

    View Slide

44. Am Anfang steht eine Idee!
    

    View Slide

45. Am Anfang kann nicht alles
    durchgestaltet werden.
    

    View Slide

46. Festpreisprojekte sind
    unrealistisch!
    

    View Slide

47. Kunden und Agenturen
    müssen sich ändern!
    

    View Slide

48. https://twitter.com/brundle_fly/status/545430490397040640
    

    View Slide

49. Direkt mit 

    Living Styleguides arbeiten
    

    View Slide

50. http://ux.mailchimp.com/patterns/tables
    

    View Slide

51. http://rizzo.lonelyplanet.com/styleguide/design-elements/colours
    

    View Slide

52. Ohne Ordnung: 71 Farben
    

    View Slide

53. http://rizzo.lonelyplanet.com/styleguide/widgets/car-rental
    

    View Slide

54. View Slide

55. http://styletil.es/
    

    View Slide

56. http://www.commercialprogression.com/post/streamline-your-style-tiles-sass-and-style-guide-module
    

    View Slide

57. http://www.studiobonito.co.uk/work/youth-for-christ-website-design-development-birmingham/
    

    View Slide

58. Wir müssen umdenken!
    

    View Slide

59. Leichter gesagt, als getan!
    1. Keine „Optimierung“ oder „typische Devices“
    2. Neue Tools
    3. Neuer Workflow
    4. Neue Erfolgskriterien
    5. Keine Festpreisangebote
    6. viel Zeit für Experimente
    

    View Slide

60. Jens Grochtdreis
    http://grochtdreis.de
    http://twitter.com/Flocke
    http://webkrauts.de
    https://speakerdeck.com/flocke
    Diese Präsentation steht unter
    der Creative Commons Lizenz
    „Attribution-ShareAlike 2.0“
    http://creativecommons.org/licenses/by-sa/2.0/de/
    https://twitter.com/goodduckpanels/status/711483985872949248
    

    View Slide