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
2. Mobile Nutzung ist gängig https://twitter.com/winlocal/status/583164144888737792
3. https://twitter.com/designtimes/status/539521149395566593
4. http://www.telegraph.co.uk/technology/news/8731365/Technology-failing-to-empower-older-generation.html
5. Unsere Umgebung hat sich stark verändert.
6. Also müssen auch 
 WIR uns verändern!
7. Die traurige Realität 2016 https://twitter.com/fabianbeiner/status/732491745900908548
8. Traditionelle Arbeitsweise ‣ 2 Designs ‣ 4 Seitentypen ‣ 3 Breakpoints 24 starre Photoshop-Bilder
9. Und warum das alles?
10. Falsche Herangehensweise https://twitter.com/dudleystorey/status/576213243510661120
11. https://twitter.com/pistenprinz/status/732163023083843584
12. http://www.webdesignerdepot.com/2013/02/is-photoshop-dead/
13. Es heißt http:// nicht psd:// !
14. Kunde Beratung Konzept Design Frontend Backend Unser Workflow ist falsch!
15. Die Sache ist zu komplex! https://twitter.com/brad_frost/status/392429547188408321
16. Wir wissen nichts!
17. Wir wissen nicht, mit welcher Art Computer jemand unsere Seite besucht.
18. Wir wissen nicht, welchen Monitor mit welcher Auflösung unser Besucher hat. http://bradfrostweb.com/wp-content/uploads/2012/03/01-650x487.png
19. http://www.businessinsider.com/android-fragmentation-2014-8?IR=T
20. Wir wissen nicht, in welcher Größe das Browserfenster unseres Nutzers ist.
21. Wir wissen nicht, welche Fähigkeiten der Browser des Besuchers hat.
22. Wir wissen noch viel mehr nicht, unterstellen oder ignorieren dies aber meist.
23. http://www.flickr.com/photos/artrock2006/4177475479/ Alle Beteiligten sollten frühzeitig
    offen kommunizieren. http://www.flickr.com/photos/artrock2006/4177475479/
24. Konzept Design Frontend Klassischer Workflow
25. Konzept Design Frontend Besserer Workflow
26. Konzept Design Frontend Noch besserer Workflow
27. Konzept und Design nicht losgelöst vom Frontend entwickeln!
28. Iterativer, agiler Prozess http://trentwalton.com/2011/07/14/content-choreography/
29. http://de.slideshare.net/pkattera/design-process-for-responsive-web-design Iterativer, agiler Prozess
30. http://www.quadriform.biz/wp-content/uploads/2010/09/designer_developer.jpg Designer und Entwickler müssen enger zusammenarbeiten
31. Abnahme nicht über ein Bild aus Photoshop sondern anhand eines Prototypen
32. Schnell von der Idee 
 in die Realisierung!
33. http://jsfiddle.net/Flocke/azvGv/ CSS3-fähiger Browser IE8 Alternativen testen
34. https://www.smashingmagazine.com/2016/05/creating-a-living-style-guide-case-study/ Bestandteile
35. Inhaltsinventar http://bradfrost.com/blog/post/interface-inventory/
36. Performance-Budget http://bradfrost.com/blog/post/performance-budget-builder/ http://codepen.io/bradfrost/full/EPQVBp/
37. Klickdummy http://demo.patternlab.io/?p=templates-article
38. Living Styleguide http://styleguide.devbproto.com/styleguide/#4
39. https://twitter.com/yogthos/status/724076324634124288
40. Wasserfall geht 
 auch heute noch … ‣ Mit Abstrichen bei ‣ Qualität ‣ Effizienz https://twitter.com/freiherz/status/269037333012160512/photo/1
41. Keine klassischen
    Projekte mehr!
42. Es wird ein Prozess verkauft, kein Endprodukt!
43. Es kann am Anfang nicht mehr das Endprodukt abgenommen werden.
44. Am Anfang steht eine Idee!
45. Am Anfang kann nicht alles durchgestaltet werden.
46. Festpreisprojekte sind unrealistisch!
47. Kunden und Agenturen müssen sich ändern!
48. https://twitter.com/brundle_fly/status/545430490397040640
49. Direkt mit 
 Living Styleguides arbeiten
50. http://ux.mailchimp.com/patterns/tables
51. http://rizzo.lonelyplanet.com/styleguide/design-elements/colours
52. Ohne Ordnung: 71 Farben
53. http://rizzo.lonelyplanet.com/styleguide/widgets/car-rental
55. http://styletil.es/
56. http://www.commercialprogression.com/post/streamline-your-style-tiles-sass-and-style-guide-module
57. http://www.studiobonito.co.uk/work/youth-for-christ-website-design-development-birmingham/
58. Wir müssen umdenken!
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
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