Wir brauchen einen neuen Workflow     Jens Grochtdreis
‣ Frontendentwickler‣ seit 1999 Arbeit im und fürs Web‣ seit 2009 selbständig   ‣ Frontendentwicklung   ‣ Schulung   ‣ Ber...
Das Web ist per se flexibel
Unflexibel und unzugänglich wird es erst durch unsere     Entscheidungen!
http://bradfrostweb.com/wp-content/uploads/2012/03/01-650x487.png
http://bradfrostweb.com/wp-content/uploads/2012/03/02-650x487.png
http://bradfrostweb.com/wp-content/uploads/2012/03/03-650x487.png
Das Endprodukt einesFrontendentwicklers ist nur   ein Zwischenprodukt.
Wir wissen nicht, in welcher Umgebung und in welcher Formunser Endprodukt konsumiert wird.
http://bradfrostweb.com/blog/web/mobile-first-responsive-web-design/
Für Projektmanager und    Designer ist das     unvorstellbar.
Photoshop und Word haben                                                   immer EIN Endprodukt.http://www.flickr.com/photo...
Wir haben viele                                                     Endproduktehttp://www.flickr.com/photos/danm_cool/31636...
Frontendentwicklung ist                   nicht einfach!http://failblog.files.wordpress.com/2009/07/128932678618285916.jpg
http://bradfrostweb.com/blog/mobile/beyond-media-queries-anatomy-of-an-adaptive-web-design/
Unser Workflow ist falsch!
Kunde  Beratung        Konzept           Design             Frontend                    Backend
Das passt nicht zu einem    flexiblen Umfeld
Photoshop ist nicht für Webdesign geeignet.
Es war es nie!
Keine Bildbearbeitung ist     dafür geeignet.
Bildbearbeitungen sind zum    Bilder bearbeiten da!
Designer und Entwickler     müssen enger  zusammenarbeiten
Ein gemeinsames Team
In Einzelphasen zusammen        am Rechner
Photoshop ist für ersteDesignideen und für dieErstellung von Modulen
Die Designs werden im Browser  in Zusammenarbeit mit dem Frontendentwickler finalisiert.
Abnahme nicht über ein Bild  aus Photoshop sondern anhand eines Prototypen
Anhand der Prototypen kann manschnell Entscheidungen treffen, die   mit Photoshop lange dauern.
‣ Unterschiedliche Schriftgrößen und -arten  austesten‣ Breakpoints für unterschiedliche  Ausgabebreiten testen‣ Webfonts ...
Alternativen testen           CSS3-fähiger Browser          IE8http://jsfiddle.net/Flocke/azvGv/
Nicht wie üblich zweiunterschiedliche Designs  zum Kunden geben!
Iterationen eines Designs:alte vs. neue Browser und unterschiedliche Devices
Damit das effektivfunktioniert empfehle ich  Frontend-Frameworks
http://www.yaml.de/
http://foundation.zurb.com/
Eigene Module sammeln und    Baukästen erstellen
Alle Beteiligten sollten frühzeitig                            offen kommunizieren.http://www.flickr.com/photos/artrock2006...
Nicht einfach Befehle empfangen.http://www.flickr.com/photos/soldiersmediacenter/3521607551/
Voneinander lernen!
Es heißt http:// nicht psd:// !
Jens Grochtdreis                                                     http://grochtdreis.de                                ...
Wir brauchen einen neuen Workflow
Wir brauchen einen neuen Workflow
Wir brauchen einen neuen Workflow
Upcoming SlideShare
Loading in...5
×

Wir brauchen einen neuen Workflow

1,058

Published on

Wir brauchen einen neuen Workflow. Die getrennte Arbeit von Designern und Frontendentwicklern geht an der Realität vorbei. Heute müssen sich Webseiten ihrer Umgebung noch stärker anpassen, als sie es grundsätzlich sollten. Das erzeugt technische und designerische Probleme. Beide sollten zusammen gelöst werden.

Published in: Technology
0 Comments
6 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
1,058
On Slideshare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
18
Comments
0
Likes
6
Embeds 0
No embeds

No notes for slide

Wir brauchen einen neuen Workflow

  1. 1. Wir brauchen einen neuen Workflow Jens Grochtdreis
  2. 2. ‣ 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 einesFrontendentwicklers ist nur ein Zwischenprodukt.
  9. 9. Wir wissen nicht, in welcher Umgebung und in welcher Formunser Endprodukt konsumiert wird.
  10. 10. http://bradfrostweb.com/blog/web/mobile-first-responsive-web-design/
  11. 11. Für Projektmanager und Designer ist das unvorstellbar.
  12. 12. Photoshop und Word haben immer EIN Endprodukt.http://www.flickr.com/photos/wanhoff/356677564/
  13. 13. Wir haben viele Endproduktehttp://www.flickr.com/photos/danm_cool/3163625498/
  14. 14. Frontendentwicklung ist nicht einfach!http://failblog.files.wordpress.com/2009/07/128932678618285916.jpg
  15. 15. http://bradfrostweb.com/blog/mobile/beyond-media-queries-anatomy-of-an-adaptive-web-design/
  16. 16. Unser Workflow ist falsch!
  17. 17. Kunde Beratung Konzept Design Frontend Backend
  18. 18. Das passt nicht zu einem flexiblen Umfeld
  19. 19. Photoshop ist nicht für Webdesign geeignet.
  20. 20. Es war es nie!
  21. 21. Keine Bildbearbeitung ist dafür geeignet.
  22. 22. Bildbearbeitungen sind zum Bilder bearbeiten da!
  23. 23. Designer und Entwickler müssen enger zusammenarbeiten
  24. 24. Ein gemeinsames Team
  25. 25. In Einzelphasen zusammen am Rechner
  26. 26. Photoshop ist für ersteDesignideen und für dieErstellung von Modulen
  27. 27. Die Designs werden im Browser in Zusammenarbeit mit dem Frontendentwickler finalisiert.
  28. 28. Abnahme nicht über ein Bild aus Photoshop sondern anhand eines Prototypen
  29. 29. Anhand der Prototypen kann manschnell Entscheidungen treffen, die mit Photoshop lange dauern.
  30. 30. ‣ Unterschiedliche Schriftgrößen und -arten austesten‣ Breakpoints für unterschiedliche Ausgabebreiten testen‣ Webfonts auf unterschiedlichen Systemen testen‣ Alternativen für alte Browser ausprobieren‣ Icons als SVG oder Webfonts
  31. 31. Alternativen testen CSS3-fähiger Browser IE8http://jsfiddle.net/Flocke/azvGv/
  32. 32. Nicht wie üblich zweiunterschiedliche Designs zum Kunden geben!
  33. 33. Iterationen eines Designs:alte vs. neue Browser und unterschiedliche Devices
  34. 34. Damit das effektivfunktioniert empfehle ich Frontend-Frameworks
  35. 35. http://www.yaml.de/
  36. 36. http://foundation.zurb.com/
  37. 37. Eigene Module sammeln und Baukästen erstellen
  38. 38. Alle Beteiligten sollten frühzeitig offen kommunizieren.http://www.flickr.com/photos/artrock2006/4177475479/ http://www.flickr.com/photos/artrock2006/4177475479/
  39. 39. Nicht einfach Befehle empfangen.http://www.flickr.com/photos/soldiersmediacenter/3521607551/
  40. 40. Voneinander lernen!
  41. 41. Es heißt http:// nicht psd:// !
  42. 42. Jens Grochtdreis http://grochtdreis.de http://twitter.com/Flocke http://webkrauts.de http://slideshare.net/Flocke669Diese Präsentation steht unterder Creative Commons Lizenz„Attribution-ShareAlike 2.0“http://creativecommons.org/licenses/by-sa/2.0/de/
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×