Wir brauchen einen neuen Workflow - Langform

Transcript

1. 1.

   Wir brauchen einen neuen Workflow Jens Grochtdreis

2. 2.

   ‣Kasselaner - seit 1988 in Mainz ‣Frontendentwickler ‣seit 1999 Arbeit

   im und fürs Web ‣seit 2009 selbständig ‣Frontendentwicklung ‣Schulung ‣Beratung ‣@Flocke
3. 3.

   Das Web ist per se flexibel

4. 4.

   Unflexibel und unzugänglich wird es erst durch unsere Entscheidungen!

5. 5.

   http://bradfrostweb.com/wp-content/uploads/2012/03/01-650x487.png

6. 6.

   http://bradfrostweb.com/wp-content/uploads/2012/03/02-650x487.png

7. 7.

   http://bradfrostweb.com/wp-content/uploads/2012/03/03-650x487.png

8. 8.

   Das Endprodukt eines Frontendentwicklers ist nur ein Zwischenprodukt.

9. 9.

   Wir wissen nicht, in welcher Umgebung und in welcher Form

   unser Endprodukt konsumiert wird. http://bradfrostweb.com/blog/web/mobile-first-responsive-web-design/
10. 10.

    http://upload.wikimedia.org/wikipedia/commons/thumb/9/9c/PapierformateA0bisA8.jpg/1280px-PapierformateA0bisA8.jpg Für Projektmanager und Designer ist das unvorstellbar.

11. 11.

    Für Frontendentwickler ist das normal! http://www.flickr.com/photos/danm_cool/3163625498/

12. 12.

    Frontendentwicklung ist nicht einfach! http://failblog.files.wordpress.com/2009/07/128932678618285916.jpg

13. 13.

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

14. 14.

    ‣ Welcher Breakpoint ist für das Design richtig? ‣ Sollen/können

    Bilder und Videos für spezielle Breakpoints geliefert werden? ‣ Welche Inhalte beeinträchtigen die Ladezeit? ‣ Existiert responsive Werbung? ‣ Sind alle Links einfach mit dem Finger bedienbar? ‣ Gibt es Interaktion, die auf „hover“ basiert?
15. 15.

    Unser Workflow ist falsch!

16. 16.

    Kunde Beratung Konzept Design Frontend Backend

17. 17.

    Nicht einfach Befehle empfangen. http://www.flickr.com/photos/soldiersmediacenter/3521607551/ Frontend Projektmanagement

18. 18.

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

19. 19.

    Das passt nicht zu einem flexiblen Umfeld

20. 20.

    Photoshop ist nicht für Webdesign geeignet.

21. 21.

    http://icant.co.uk/talks/h5/pictures/jqueryeu/nokia-zombie-hammer.jpg Es war es nie!

22. 22.

    Es war es nie!

23. 23.

    Keine Bildbearbeitung ist dafür geeignet.

24. 24.

    Bildbearbeitungen sind zum Bilder bearbeiten da!

25. 25.

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

26. 26.

    Designer und Entwickler müssen enger zusammenarbeiten

27. 27.

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

28. 28.

    In Einzelphasen zusammen am Rechner

29. 29.

    Die Designs werden im Browser in Zusammenarbeit mit dem Frontendentwickler

    finalisiert.
30. 30.

    Photoshop ist für erste Designideen und für die Erstellung von

    Modulen
31. 31.

    None
32. 32.

    http://daverupert.com/2013/04/responsive-deliverables/

33. 33.

    None
34. 34.

    Style Tiles

35. 35.

    http://styletil.es/

36. 36.

    http://styletil.es/

37. 37.

    http://styletil.es/

38. 38.

    http://styletil.es/

39. 39.

    http://styletil.es/

40. 40.

    Abnahme nicht über ein Bild aus Photoshop sondern anhand eines

    Prototypen
41. 41.

    Der Browser steht im Zentrum, nicht Photoshop!

42. 42.

    Am Ende soll eine Seite im Browser laufen, nicht in

    Photoshop!
43. 43.

    Anhand der Prototypen kann man schnell Entscheidungen treffen, die mit

    Photoshop lange dauern.
44. 44.

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

45. 45.

    Ein möglicher Workflow http://viljamis.com/img/blog/2012/workflow.png http://viljamis.com/blog/2012/responsive-workflow/

46. 46.

    Photoshop sinnvoll nutzen

47. 47.

    ‣ Photoshop soll nicht abgeschafft werden. ‣ Aber die aktuelle

    Bedeutung muss korrigiert werden. ‣ Photoshop Designs sind Idealbilder, keine Realitäten. ‣ Webseiten sind NIEMALS so wie ein Photoshop-Layout.
48. 48.

    ‣ Früher direkt im Code arbeiten und echte Webseiten als

    Entwürfe zeigen. ‣ Mit Photoshop mehr Style Tiles erarbeiten. ‣ Screenshots an Stelle von Photoshop- Konstrukten ‣ Abgesegnet wird nicht das Photoshop- Bildchen, sondern die reale Umsetzung. ‣ Man kann die Realität testen, nicht schönmalen.
49. 49.

    Komplexität nach aussen und innen kommunizieren und einplanen.

50. 50.

    Testen! http://goo.gl/0q9rZ

51. 51.

    Emulatoren sind nett, aber nichts gegen echte Endgeräte. http://idw-online.de/pages/de/image46078

52. 52.

    Jens Grochtdreis http://grochtdreis.de http://twitter.com/Flocke http://webkrauts.de http://slideshare.net/Flocke669 Diese Präsentation steht unter

    der Creative Commons Lizenz „Attribution-ShareAlike 2.0“ http://creativecommons.org/licenses/by-sa/2.0/de/