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.

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. Photoshop und Word haben
immer EIN Endprodukt.
http://www.flickr.com/photos/wanhoff/356677564/

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

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/

40. Eigene Module sammeln und
Baukästen erstellen

41. Alle Beteiligten sollten frühzeitig
offen kommunizieren.
http://www.flickr.com/photos/artrock2006/4177475479/
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/