Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Wir brauchen einen neuen Workflow - Langform

Wir brauchen einen neuen Workflow - Langform

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

521db10df5241d9b2b70a555cc54e9e8?s=128

Jens Grochtdreis

January 20, 2014
Tweet

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

  33. None
  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/