Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Wir brauchen einen neuen Workflow - Langform

521db10df5241d9b2b70a555cc54e9e8?s=47 Jens Grochtdreis
January 20, 2014
Business
2
540

Wir brauchen einen neuen Workflow - Langform

Langform des Vortrages auf dem Webmontag in Kassel. So werden einige Inhalte erst richtig deutlich.

521db10df5241d9b2b70a555cc54e9e8?s=128

Jens Grochtdreis

January 20, 2014
Tweet

More Decks by Jens Grochtdreis

See All by Jens Grochtdreis
521db10df5241d9b2b70a555cc54e9e8?s=48 flocke
0
560
521db10df5241d9b2b70a555cc54e9e8?s=48 flocke
1
160
521db10df5241d9b2b70a555cc54e9e8?s=48 flocke
1
1.6k
521db10df5241d9b2b70a555cc54e9e8?s=48 flocke
1
170
521db10df5241d9b2b70a555cc54e9e8?s=48 flocke
0
860
521db10df5241d9b2b70a555cc54e9e8?s=48 flocke
1
7.8k
521db10df5241d9b2b70a555cc54e9e8?s=48 flocke
0
1.5k
521db10df5241d9b2b70a555cc54e9e8?s=48 flocke
0
1.8k
521db10df5241d9b2b70a555cc54e9e8?s=48 flocke
1
800

Other Decks in Business

See All in Business
E99792a17eee969dcc585f7461074996?s=48 uzabaseculture2021
1
700
47d6f4ba3cd9be55d79b339135cbc704?s=48 damberg
0
690
C979401b19bc2f29770f22c6266d0cc0?s=48 callas1900
0
530
2c629466f3b72d22e7fb26632d06c373?s=48 crunchstyle1
0
120
6d8bf4c6e4757a8fa79a319431ed86ab?s=48 neilmontes
0
220
74f76e75d92cf585b29ffa049629c8a6?s=48 tocho_zaiseika
0
1.2k
F09dc06e8f17f7d19b88e2370f4008a1?s=48 kurose
0
140
77f0ccd90326ba61f303e009f0adaa5b?s=48 ist0
1
140
89e31aabb5ba1db4e98f8d9a05ac3237?s=48 fezpr
0
2.8k
53987a823a179011279b3ab2db1ee764?s=48 careerupdateorg
1
200
B403e8d81063fed04df41aa00941aced?s=48 coopsapporo
0
560
4a91cc6503a07715a7d172ca2b5a4301?s=48 lancerspr
0
360

Featured

See All Featured
B3d6434763caa0ef5dc4b792662c49f7?s=48 smashingmag
283
47k
282d599b414022eba5096510f675b6e2?s=48 chrislema
231
16k
3ab1249be442027903e1180025340b3f?s=48 reverentgeek
27
2.1k
6804f1775cb4babfcc3851298566fbce?s=48 tanoku
86
8.6k
Ef32e0b1ac5082450dc8c1fca3a26b5c?s=48 cherdarchuk
72
270k
433acaea1012b25d97ae66da9b998dad?s=48 malarkey
119
16k
245cee81a9c424266e5e401d844ea881?s=48 lara
590
61k
79acae287842acf29084005533a7fb3b?s=48 hursman
107
9.3k
719435d98d452de7ac367c828266cf01?s=48 erikaheidi
14
4.5k
Fde6c3a50ca518a909ef35c22c0ee0e4?s=48 destraynor
146
19k
Fe6b81005d1553accd6b2a28f6a2bef1?s=48 phodgson
88
4k
027d1ebf66cc039a0bd3b55eeadbe75d?s=48 sachag
446
36k

Transcript

  1. Wir brauchen einen neuen Workflow Jens Grochtdreis

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

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

  3. Das Web ist per se flexibel

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

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

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

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

  8. Das Endprodukt eines Frontendentwicklers ist nur ein Zwischenprodukt.

  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. http://upload.wikimedia.org/wikipedia/commons/thumb/9/9c/PapierformateA0bisA8.jpg/1280px-PapierformateA0bisA8.jpg Für Projektmanager und Designer ist das unvorstellbar.

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

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

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

  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. Unser Workflow ist falsch!

  16. Kunde Beratung Konzept Design Frontend Backend

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

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

  19. Das passt nicht zu einem flexiblen Umfeld

  20. Photoshop ist nicht für Webdesign geeignet.

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

  22. Es war es nie!

  23. Keine Bildbearbeitung ist dafür geeignet.

  24. Bildbearbeitungen sind zum Bilder bearbeiten da!

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

  26. Designer und Entwickler müssen enger zusammenarbeiten

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

  28. In Einzelphasen zusammen am Rechner

  29. Die Designs werden im Browser in Zusammenarbeit mit dem Frontendentwickler

    finalisiert.

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

    Modulen
  31. None

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

  33. None

  34. Style Tiles

  35. http://styletil.es/

  36. http://styletil.es/

  37. http://styletil.es/

  38. http://styletil.es/

  39. http://styletil.es/

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

    Prototypen

  41. Der Browser steht im Zentrum, nicht Photoshop!

  42. Am Ende soll eine Seite im Browser laufen, nicht in

    Photoshop!

  43. Anhand der Prototypen kann man schnell Entscheidungen treffen, die mit

    Photoshop lange dauern.

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

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

  46. Photoshop sinnvoll nutzen

  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. ‣ 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. Komplexität nach aussen und innen kommunizieren und einplanen.

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

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

  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/