Wir brauchen einen neuen Workflow - Langform

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

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
32. http://daverupert.com/2013/04/responsive-deliverables/
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/