Wir brauchen einen neuen Workflow

Wir brauchen einen neuen Workflow

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.

521db10df5241d9b2b70a555cc54e9e8?s=128

Jens Grochtdreis

November 12, 2012
Tweet

Transcript

  1. Wir brauchen einen neuen Workflow Jens Grochtdreis

  2. ‣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.
  10. http://bradfrostweb.com/blog/web/mobile-first-responsive-web-design/

  11. Für Projektmanager und Designer ist das unvorstellbar.

  12. http://www.flickr.com/photos/wanhoff/356677564/ Photoshop und Word haben immer EIN Endprodukt.

  13. Wir haben viele Endprodukte http://www.flickr.com/photos/danm_cool/3163625498/

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

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

  16. Unser Workflow ist falsch!

  17. Kunde Beratung Konzept Design Frontend Backend

  18. Das passt nicht zu einem flexiblen Umfeld

  19. Photoshop ist nicht für Webdesign geeignet.

  20. Es war es nie!

  21. Keine Bildbearbeitung ist dafür geeignet.

  22. Bildbearbeitungen sind zum Bilder bearbeiten da!

  23. Designer und Entwickler müssen enger zusammenarbeiten

  24. Ein gemeinsames Team

  25. In Einzelphasen zusammen am Rechner

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

    Modulen
  27. Die Designs werden im Browser in Zusammenarbeit mit dem Frontendentwickler

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

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

    Photoshop lange dauern.
  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. http://jsfiddle.net/Flocke/azvGv/ CSS3-fähiger Browser IE8 Alternativen testen

  32. Nicht wie üblich zwei unterschiedliche Designs zum Kunden geben!

  33. Iterationen eines Designs: alte vs. neue Browser und unterschiedliche Devices

  34. Damit das effektiv funktioniert empfehle ich Frontend-Frameworks

  35. http://www.yaml.de/

  36. http://foundation.zurb.com/

  37. None
  38. None
  39. None
  40. Eigene Module sammeln und Baukästen erstellen

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

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

  43. Voneinander lernen!

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

  45. 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/