Wir brauchen einen neuen Workflow
-
Upload
jens-grochtdreis -
Category
Technology
-
view
984 -
download
1
description
Transcript of Wir brauchen einen neuen Workflow
![Page 1: Wir brauchen einen neuen Workflow](https://reader033.fdocument.pub/reader033/viewer/2022052900/555e24afd8b42a384f8b4de3/html5/thumbnails/1.jpg)
Wir brauchen einen neuen Workflow
Jens Grochtdreis
![Page 2: Wir brauchen einen neuen Workflow](https://reader033.fdocument.pub/reader033/viewer/2022052900/555e24afd8b42a384f8b4de3/html5/thumbnails/2.jpg)
‣Frontendentwickler
‣seit 1999 Arbeit im und fürs Web
‣seit 2009 selbständig
‣Frontendentwicklung
‣Schulung
‣Beratung
‣@Flocke
![Page 3: Wir brauchen einen neuen Workflow](https://reader033.fdocument.pub/reader033/viewer/2022052900/555e24afd8b42a384f8b4de3/html5/thumbnails/3.jpg)
Das Web ist per se flexibel
![Page 4: Wir brauchen einen neuen Workflow](https://reader033.fdocument.pub/reader033/viewer/2022052900/555e24afd8b42a384f8b4de3/html5/thumbnails/4.jpg)
Unflexibel und unzugänglich wird es erst durch unsere
Entscheidungen!
![Page 5: Wir brauchen einen neuen Workflow](https://reader033.fdocument.pub/reader033/viewer/2022052900/555e24afd8b42a384f8b4de3/html5/thumbnails/5.jpg)
http://bradfrostweb.com/wp-content/uploads/2012/03/01-650x487.png
![Page 6: Wir brauchen einen neuen Workflow](https://reader033.fdocument.pub/reader033/viewer/2022052900/555e24afd8b42a384f8b4de3/html5/thumbnails/6.jpg)
http://bradfrostweb.com/wp-content/uploads/2012/03/02-650x487.png
![Page 7: Wir brauchen einen neuen Workflow](https://reader033.fdocument.pub/reader033/viewer/2022052900/555e24afd8b42a384f8b4de3/html5/thumbnails/7.jpg)
http://bradfrostweb.com/wp-content/uploads/2012/03/03-650x487.png
![Page 8: Wir brauchen einen neuen Workflow](https://reader033.fdocument.pub/reader033/viewer/2022052900/555e24afd8b42a384f8b4de3/html5/thumbnails/8.jpg)
Das Endprodukt eines Frontendentwicklers ist nur
ein Zwischenprodukt.
![Page 9: Wir brauchen einen neuen Workflow](https://reader033.fdocument.pub/reader033/viewer/2022052900/555e24afd8b42a384f8b4de3/html5/thumbnails/9.jpg)
Wir wissen nicht, in welcher Umgebung und in welcher Form
unser Endprodukt konsumiert wird.
![Page 10: Wir brauchen einen neuen Workflow](https://reader033.fdocument.pub/reader033/viewer/2022052900/555e24afd8b42a384f8b4de3/html5/thumbnails/10.jpg)
http://bradfrostweb.com/blog/web/mobile-first-responsive-web-design/
![Page 11: Wir brauchen einen neuen Workflow](https://reader033.fdocument.pub/reader033/viewer/2022052900/555e24afd8b42a384f8b4de3/html5/thumbnails/11.jpg)
Für Projektmanager und Designer ist das unvorstellbar.
![Page 12: Wir brauchen einen neuen Workflow](https://reader033.fdocument.pub/reader033/viewer/2022052900/555e24afd8b42a384f8b4de3/html5/thumbnails/12.jpg)
http://www.flickr.com/photos/wanhoff/356677564/
Photoshop und Word haben immer EIN Endprodukt.
![Page 13: Wir brauchen einen neuen Workflow](https://reader033.fdocument.pub/reader033/viewer/2022052900/555e24afd8b42a384f8b4de3/html5/thumbnails/13.jpg)
Wir haben viele Endprodukte
http://www.flickr.com/photos/danm_cool/3163625498/
![Page 14: Wir brauchen einen neuen Workflow](https://reader033.fdocument.pub/reader033/viewer/2022052900/555e24afd8b42a384f8b4de3/html5/thumbnails/14.jpg)
Frontendentwicklung ist nicht einfach!
http://failblog.files.wordpress.com/2009/07/128932678618285916.jpg
![Page 15: Wir brauchen einen neuen Workflow](https://reader033.fdocument.pub/reader033/viewer/2022052900/555e24afd8b42a384f8b4de3/html5/thumbnails/15.jpg)
http://bradfrostweb.com/blog/mobile/beyond-media-queries-anatomy-of-an-adaptive-web-design/
![Page 16: Wir brauchen einen neuen Workflow](https://reader033.fdocument.pub/reader033/viewer/2022052900/555e24afd8b42a384f8b4de3/html5/thumbnails/16.jpg)
Unser Workflow ist falsch!
![Page 17: Wir brauchen einen neuen Workflow](https://reader033.fdocument.pub/reader033/viewer/2022052900/555e24afd8b42a384f8b4de3/html5/thumbnails/17.jpg)
Kunde
Beratung
Konzept
Design
Frontend
Backend
![Page 18: Wir brauchen einen neuen Workflow](https://reader033.fdocument.pub/reader033/viewer/2022052900/555e24afd8b42a384f8b4de3/html5/thumbnails/18.jpg)
Das passt nicht zu einem flexiblen Umfeld
![Page 19: Wir brauchen einen neuen Workflow](https://reader033.fdocument.pub/reader033/viewer/2022052900/555e24afd8b42a384f8b4de3/html5/thumbnails/19.jpg)
Photoshop ist nicht für Webdesign geeignet.
![Page 20: Wir brauchen einen neuen Workflow](https://reader033.fdocument.pub/reader033/viewer/2022052900/555e24afd8b42a384f8b4de3/html5/thumbnails/20.jpg)
Es war es nie!
![Page 21: Wir brauchen einen neuen Workflow](https://reader033.fdocument.pub/reader033/viewer/2022052900/555e24afd8b42a384f8b4de3/html5/thumbnails/21.jpg)
Keine Bildbearbeitung ist dafür geeignet.
![Page 22: Wir brauchen einen neuen Workflow](https://reader033.fdocument.pub/reader033/viewer/2022052900/555e24afd8b42a384f8b4de3/html5/thumbnails/22.jpg)
Bildbearbeitungen sind zum Bilder bearbeiten da!
![Page 23: Wir brauchen einen neuen Workflow](https://reader033.fdocument.pub/reader033/viewer/2022052900/555e24afd8b42a384f8b4de3/html5/thumbnails/23.jpg)
Designer und Entwickler müssen enger
zusammenarbeiten
![Page 24: Wir brauchen einen neuen Workflow](https://reader033.fdocument.pub/reader033/viewer/2022052900/555e24afd8b42a384f8b4de3/html5/thumbnails/24.jpg)
Ein gemeinsames Team
![Page 25: Wir brauchen einen neuen Workflow](https://reader033.fdocument.pub/reader033/viewer/2022052900/555e24afd8b42a384f8b4de3/html5/thumbnails/25.jpg)
In Einzelphasen zusammen am Rechner
![Page 26: Wir brauchen einen neuen Workflow](https://reader033.fdocument.pub/reader033/viewer/2022052900/555e24afd8b42a384f8b4de3/html5/thumbnails/26.jpg)
Photoshop ist für erste Designideen und für die Erstellung von Modulen
![Page 27: Wir brauchen einen neuen Workflow](https://reader033.fdocument.pub/reader033/viewer/2022052900/555e24afd8b42a384f8b4de3/html5/thumbnails/27.jpg)
Die Designs werden im Browser in Zusammenarbeit mit dem
Frontendentwickler finalisiert.
![Page 28: Wir brauchen einen neuen Workflow](https://reader033.fdocument.pub/reader033/viewer/2022052900/555e24afd8b42a384f8b4de3/html5/thumbnails/28.jpg)
Abnahme nicht über ein Bild aus Photoshop sondern anhand eines Prototypen
![Page 29: Wir brauchen einen neuen Workflow](https://reader033.fdocument.pub/reader033/viewer/2022052900/555e24afd8b42a384f8b4de3/html5/thumbnails/29.jpg)
Anhand der Prototypen kann man schnell Entscheidungen treffen, die
mit Photoshop lange dauern.
![Page 30: Wir brauchen einen neuen Workflow](https://reader033.fdocument.pub/reader033/viewer/2022052900/555e24afd8b42a384f8b4de3/html5/thumbnails/30.jpg)
‣ 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
![Page 31: Wir brauchen einen neuen Workflow](https://reader033.fdocument.pub/reader033/viewer/2022052900/555e24afd8b42a384f8b4de3/html5/thumbnails/31.jpg)
http://jsfiddle.net/Flocke/azvGv/
CSS3-fähiger Browser IE8
Alternativen testen
![Page 32: Wir brauchen einen neuen Workflow](https://reader033.fdocument.pub/reader033/viewer/2022052900/555e24afd8b42a384f8b4de3/html5/thumbnails/32.jpg)
Nicht wie üblich zwei unterschiedliche Designs
zum Kunden geben!
![Page 33: Wir brauchen einen neuen Workflow](https://reader033.fdocument.pub/reader033/viewer/2022052900/555e24afd8b42a384f8b4de3/html5/thumbnails/33.jpg)
Iterationen eines Designs: alte vs. neue Browser und unterschiedliche Devices
![Page 34: Wir brauchen einen neuen Workflow](https://reader033.fdocument.pub/reader033/viewer/2022052900/555e24afd8b42a384f8b4de3/html5/thumbnails/34.jpg)
Damit das effektiv funktioniert empfehle ich Frontend-Frameworks
![Page 37: Wir brauchen einen neuen Workflow](https://reader033.fdocument.pub/reader033/viewer/2022052900/555e24afd8b42a384f8b4de3/html5/thumbnails/37.jpg)
![Page 38: Wir brauchen einen neuen Workflow](https://reader033.fdocument.pub/reader033/viewer/2022052900/555e24afd8b42a384f8b4de3/html5/thumbnails/38.jpg)
![Page 39: Wir brauchen einen neuen Workflow](https://reader033.fdocument.pub/reader033/viewer/2022052900/555e24afd8b42a384f8b4de3/html5/thumbnails/39.jpg)
![Page 40: Wir brauchen einen neuen Workflow](https://reader033.fdocument.pub/reader033/viewer/2022052900/555e24afd8b42a384f8b4de3/html5/thumbnails/40.jpg)
Eigene Module sammeln und Baukästen erstellen
![Page 41: Wir brauchen einen neuen Workflow](https://reader033.fdocument.pub/reader033/viewer/2022052900/555e24afd8b42a384f8b4de3/html5/thumbnails/41.jpg)
http://www.flickr.com/photos/artrock2006/4177475479/
Alle Beteiligten sollten frühzeitig offen kommunizieren.
http://www.flickr.com/photos/artrock2006/4177475479/
![Page 42: Wir brauchen einen neuen Workflow](https://reader033.fdocument.pub/reader033/viewer/2022052900/555e24afd8b42a384f8b4de3/html5/thumbnails/42.jpg)
Nicht einfach Befehle empfangen.
http://www.flickr.com/photos/soldiersmediacenter/3521607551/
![Page 43: Wir brauchen einen neuen Workflow](https://reader033.fdocument.pub/reader033/viewer/2022052900/555e24afd8b42a384f8b4de3/html5/thumbnails/43.jpg)
Voneinander lernen!
![Page 44: Wir brauchen einen neuen Workflow](https://reader033.fdocument.pub/reader033/viewer/2022052900/555e24afd8b42a384f8b4de3/html5/thumbnails/44.jpg)
Es heißt http:// nicht psd:// !
![Page 45: Wir brauchen einen neuen Workflow](https://reader033.fdocument.pub/reader033/viewer/2022052900/555e24afd8b42a384f8b4de3/html5/thumbnails/45.jpg)
Jens Grochtdreishttp://grochtdreis.de
http://twitter.com/Flockehttp://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/